/* ══════════════════════════════════════════════════════════════
   Keln — shared fullscreen-module overlay.

   Used by the fullscreen Constellation, Orbit (and optionally
   Calendar) modules.  A single fixed overlay that expands out of
   whichever button triggered it, using the same scrim treatment
   as .cal-wrap (radial-gradient + backdrop-filter: blur(16px)).

   z-index 1300 — deliberately below the dossier (1500) and the
   calendar (1600) so either can open on top of a fullscreen module
   when launched from within it, and below tour (1800) / boot (2000)
   / shortcuts (2200) / ascend (2500) / cursor (9998) / toasts (9999).

   The origin-anchored animation works in two phases:
     1. kfm-in  — overlay reads CSS custom properties --ox/--oy/--ow/--oh
                  that fullscreen-module.js plants on the element,
                  then scales + translates from the trigger rect to
                  fullscreen using cubic-bezier(.2,.8,.2,1) — the
                  easing family already in use across the codebase.
     2. kfm-out — reverse: the closing overlay collapses back to its
                  origin element so the user's eye returns to where
                  they came from.

   prefers-reduced-motion: no scale or translate, opacity only.
   ══════════════════════════════════════════════════════════════ */

/* ── Overlay shell ─────────────────────────────────────────── */
.kfm-wrap {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse 85% 70% at 50% 10%, rgba(13,21,38,.97), rgba(4,7,12,.99));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  /* Origin-anchor variables, written by JS before the node enters
     the DOM.  Fallback to centre so the animation still works if
     a trigger rect couldn't be measured. */
  --kfm-ox: 50%;
  --kfm-oy: 50%;
  --kfm-ow: 0px;
  --kfm-oh: 0px;

  animation: kfm-in .38s cubic-bezier(.2,.8,.2,1) both;
}

/* Exit state: JS adds this class, then removes the node after the
   animation duration.  Same timing as .cal-wrap--out. */
.kfm-wrap--out {
  animation: kfm-out .30s cubic-bezier(.2,.8,.2,1) both;
}

/* ── Entry animation ───────────────────────────────────────── */
/* We translate from the trigger's centre to viewport centre, and
   simultaneously scale from the trigger's dimensions to full size.
   The trick: animate transform-origin to the trigger centre so the
   scale looks like it's growing out of that point. */
@keyframes kfm-in {
  from {
    opacity: 0;
    clip-path: inset(
      var(--kfm-oy) calc(100% - var(--kfm-ox) - var(--kfm-ow))
      calc(100% - var(--kfm-oy) - var(--kfm-oh)) var(--kfm-ox)
      round 18px
    );
  }
  to {
    opacity: 1;
    clip-path: inset(0% 0% 0% 0% round 0px);
  }
}

@keyframes kfm-out {
  from {
    opacity: 1;
    clip-path: inset(0% 0% 0% 0% round 0px);
  }
  to {
    opacity: 0;
    clip-path: inset(
      var(--kfm-oy) calc(100% - var(--kfm-ox) - var(--kfm-ow))
      calc(100% - var(--kfm-oy) - var(--kfm-oh)) var(--kfm-ox)
      round 18px
    );
  }
}

/* ── Reduced-motion override ───────────────────────────────── */
/* No spatial movement, just fade — the module still works,
   just without the expand gesture. */
@media (prefers-reduced-motion: reduce) {
  .kfm-wrap { animation: kfm-fade-in .22s ease both; }
  .kfm-wrap--out { animation: kfm-fade-out .18s ease both; }
}

@keyframes kfm-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes kfm-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* ── Content host ──────────────────────────────────────────── */
/* The host element that the component renderer mounts into.
   Edge-to-edge, no border, no border-radius, no card containment. */
.kfm-host {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* ── Floating HUD ──────────────────────────────────────────── */
/* Optional title / rank readout that floats over the sky,
   matching the .sky-hero__head pattern. */
.kfm-hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-6);
  padding: 18px 22px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(4,7,12,.72), transparent);
}

.kfm-hud__title {
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
  font-family: var(--mono);
}

/* ── Close control ─────────────────────────────────────────── */
/* Sits in the top-right corner, pointer-events enabled, consistent
   with .cal__arrow in style. */
.kfm-close {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 20;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(6,10,16,.62);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--t-2xl);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .18s, border-color .18s, background .18s;
}
.kfm-close:hover,
.kfm-close:focus-visible {
  color: var(--ink);
  border-color: var(--border-hi);
  background: rgba(6,10,16,.88);
  outline: none;
}
.kfm-close:focus-visible {
  box-shadow: 0 0 0 2px var(--accent2);
}

/* ── Maximize button (dashboard inline sections) ───────────── */
/* A quiet icon-only button that sits in the top-right of .sky-hero
   and the pipeline header, consistent with .cal__add / .orbit-view.
   Reveals on parent hover or own focus, like .cal__add. */
.kfm-maximize {
  background: rgba(6,10,16,.52);
  border: 1px solid var(--border);
  color: var(--muted);
  width: 30px;
  height: 30px;
  border-radius: 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .18s, border-color .18s, background .18s, opacity .18s;
  flex-shrink: 0;
}
.kfm-maximize:hover,
.kfm-maximize:focus-visible {
  color: var(--accent2);
  border-color: var(--border-hi);
  background: rgba(34,211,166,.08);
  outline: none;
  box-shadow: 0 0 0 2px rgba(34,211,166,.25);
}

/* In the sky-hero the maximize button sits in the __right cluster
   where pointer-events are already on. */
.sky-hero__head .kfm-maximize {
  pointer-events: auto;
}

/* In the pipeline header alongside orbit-views. */
.orbit-views .kfm-maximize {
  margin-left: var(--s-3);
}

/* ── Fullscreen constellation overrides ────────────────────── */
/* Inside a fullscreen host the radial rail overlay is hidden — there
   is no bounding card to attach it to. */
.kfm-host .sky-hero__rail { display: none; }

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .kfm-close { top: 10px; right: 10px; }
  .kfm-hud   { padding: var(--s-6) var(--s-7); }
}