/* =========================================================
   LIVEOP LUNA, the ask-and-answer stage
   ---------------------------------------------------------
   A self-contained cinematic block: a glass command bar with the
   real lo-luna-avatar seated inside, a question that types itself
   in, a plain-language line of what Luna is doing, and up to three
   result tiles that rise into place.

   Depends on: tokens.css, base.css, luna-avatar.css.
   Driven by:  luna.js (phase attribute on .luna-console).

   The whole loop is passive. Nothing here is focusable and the
   field is not an input, so a visitor is never invited to type
   into something that cannot answer.

   Phases, set as [data-phase] on .luna-console:
     ask -> think -> answer -> hold -> (clear) -> ask
   ========================================================= */

/* ---------------------------------------------------------
   STAGE
   Deeper than --bg-sunken on purpose: this block should read as
   the darkest, quietest moment on whatever page it lands on.
   --------------------------------------------------------- */
.luna-stage{
  position:relative;
  overflow:hidden;
  background:#06070b;
  padding-top:var(--section-y);
  padding-bottom:clamp(64px,7.5vw,116px);
  isolation:isolate;
}

/* Aurora in Luna's own palette (cyan / violet / magenta) rather than
   the site purple, so the block reads as the intelligence layer and
   the avatar looks lit by its own surroundings. */
.luna-stage__aura{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.luna-stage__aura i{position:absolute;display:block;border-radius:50%;filter:blur(150px)}
.luna-stage__aura i:nth-child(1){width:820px;height:560px;top:-16%;left:50%;margin-left:-410px;background:rgba(68,148,255,.14);animation:lunaAuraDrift 26s ease-in-out infinite}
.luna-stage__aura i:nth-child(2){width:560px;height:460px;bottom:-14%;left:-8%;background:rgba(127,88,255,.13);animation:lunaAuraDrift 32s ease-in-out infinite reverse}
.luna-stage__aura i:nth-child(3){width:520px;height:420px;bottom:-10%;right:-6%;background:rgba(212,85,255,.09);animation:lunaAuraDrift 29s ease-in-out infinite}

/* Faint technical grid. Masked to a soft ellipse so it never reaches
   the section edges and never competes with the content. */
.luna-stage__grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask:radial-gradient(72% 58% at 50% 46%,#000 0%,rgba(0,0,0,.5) 55%,transparent 100%);
          mask:radial-gradient(72% 58% at 50% 46%,#000 0%,rgba(0,0,0,.5) 55%,transparent 100%);
}

.luna-stage > .wrap{position:relative;z-index:1}

@keyframes lunaAuraDrift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%    {transform:translate3d(3%,-4%,0) scale(1.09)}
}

/* ---------------------------------------------------------
   CONSOLE (bar + trace + results)
   --------------------------------------------------------- */
.luna-console{
  position:relative;
  max-width:1040px;
  margin:clamp(30px,3.4vw,44px) auto 0;
}

/* ---------------------------------------------------------
   THE BAR
   --------------------------------------------------------- */
.luna-bar{
  position:relative;
  display:flex;
  align-items:center;
  gap:clamp(16px,2vw,24px);
  padding:clamp(14px,1.6vw,20px) clamp(20px,2.4vw,30px);
  border-radius:var(--r-pill);
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),
    rgba(10,13,20,.72);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 30px 70px -30px rgba(0,0,0,.9),
    0 0 0 1px rgba(255,255,255,.02);
  backdrop-filter:blur(22px) saturate(130%);
  -webkit-backdrop-filter:blur(22px) saturate(130%);
}

/* Halo behind the bar. Brightens while Luna is working, so the bar
   itself carries the state rather than needing a spinner. */
.luna-bar::before{
  content:"";
  position:absolute;inset:-2px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(100deg,
    rgba(113,231,255,.55),
    rgba(127,88,255,.5) 38%,
    rgba(212,85,255,.35) 62%,
    rgba(113,231,255,.15));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:.35;
  transition:opacity .6s var(--ease);
  pointer-events:none;
}
.luna-bar::after{
  content:"";
  position:absolute;inset:-40px -10px;
  border-radius:inherit;
  background:radial-gradient(60% 120% at 12% 50%,rgba(90,150,255,.24),transparent 70%);
  filter:blur(30px);
  opacity:.5;
  transition:opacity .6s var(--ease);
  z-index:-1;
  pointer-events:none;
}
[data-phase="think"] .luna-bar::before{opacity:.95}
[data-phase="think"] .luna-bar::after {opacity:1}
[data-phase="answer"] .luna-bar::before,
[data-phase="hold"]   .luna-bar::before{opacity:.7}

.luna-bar__avatar{
  flex:0 0 auto;
  /* The host IS the ported component root (class lo-luna-avatar in the
     markup), so the size variable belongs here. */
  --lo-luna-avatar-size:clamp(60px,6.6vw,82px);
}

.luna-bar__field{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:2px;
  /* Reserve two lines so a long question never resizes the bar. */
  min-height:calc(var(--fs-lead) * 1.32 * 2);
  align-content:center;
  flex-wrap:wrap;
}
.luna-bar__q{
  font-size:var(--fs-lead);
  line-height:1.32;
  letter-spacing:var(--ls-snug);
  color:#f4f6f9;
  font-weight:400;
  white-space:pre-wrap;
}
.luna-bar__q:empty::before{
  content:attr(data-placeholder);
  color:var(--fg-faint);
}
.luna-caret{
  display:inline-block;
  width:2px;
  height:1.05em;
  translate:0 .12em;
  border-radius:1px;
  background:linear-gradient(180deg,#8fe6ff,#7f58ff);
  box-shadow:0 0 10px rgba(120,190,255,.8);
  animation:lunaCaret 1.05s steps(1,end) infinite;
}
[data-phase="think"] .luna-caret,
[data-phase="answer"] .luna-caret,
[data-phase="hold"] .luna-caret{animation:none;opacity:0}
@keyframes lunaCaret{0%,49%{opacity:1}50%,100%{opacity:0}}

/* The send affordance. Decorative: it mirrors what the real product
   looks like, and it pulses when Luna picks the question up. */
.luna-bar__go{
  flex:0 0 auto;
  width:clamp(44px,4.4vw,52px);
  height:clamp(44px,4.4vw,52px);
  display:grid;place-items:center;
  border-radius:50%;
  background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.16);
  color:#e9f4ff;
  transition:background .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease);
}
.luna-bar__go .ico{width:22px;height:22px}
[data-phase="think"] .luna-bar__go{
  background:linear-gradient(150deg,rgba(127,88,255,.9),rgba(68,148,255,.75));
  border-color:rgba(180,205,255,.5);
  box-shadow:0 0 26px rgba(110,150,255,.55);
  transform:scale(1.06);
}

/* ---------------------------------------------------------
   TRACE, what Luna is doing, in plain language
   --------------------------------------------------------- */
.luna-trace{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px 14px;
  min-height:2.2em;
  margin-top:clamp(14px,1.5vw,20px);
  font-size:var(--fs-small);
  letter-spacing:.01em;
  color:var(--fg-subtle);
  opacity:0;
  transition:opacity .45s var(--ease);
}
[data-phase="think"] .luna-trace,
[data-phase="answer"] .luna-trace,
[data-phase="hold"]   .luna-trace{opacity:1}

.luna-trace__step{
  display:inline-flex;align-items:center;gap:9px;
  padding:6px 14px 6px 11px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  color:#cfd8e6;
  opacity:0;
  transform:translateY(5px);
  animation:lunaStepIn .4s var(--ease-expo) forwards;
}
.luna-trace__step i{
  width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:#71e7ff;
  box-shadow:0 0 9px rgba(113,231,255,.9);
  animation:lunaStepPulse 1.4s ease-in-out infinite;
}
.luna-trace__step--done i{background:#00d08a;box-shadow:0 0 9px rgba(0,208,138,.75);animation:none}
@keyframes lunaStepIn{to{opacity:1;transform:none}}
@keyframes lunaStepPulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

/* ---------------------------------------------------------
   RESULT TILES
   One template, one flexible metric slot. The slot takes either a
   measured value (40 m, 2 found, 6 min) or a short status word
   (Code yellow), which is what lets the same tile carry all
   fifteen question types without three sets of styles.
   --------------------------------------------------------- */
.luna-results{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(14px,1.6vw,20px);
  margin-top:clamp(18px,2vw,26px);
  /* Reserved so the page never jumps between sets of different length. */
  min-height:212px;
}

.luna-tile{
  --tone:#71e7ff;
  --tone-soft:rgba(113,231,255,.13);
  position:relative;
  flex:1 1 250px;
  max-width:340px;
  display:flex;
  flex-direction:column;
  gap:13px;
  padding:clamp(18px,2vw,23px);
  border-radius:var(--r-2xl);
  background:linear-gradient(155deg,rgba(24,29,40,.92) 0%,rgba(14,17,25,.92) 62%,rgba(19,23,33,.92) 100%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 24px 55px -26px rgba(0,0,0,.95);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  overflow:hidden;
  /* Entrance state. luna.js adds .in on a stagger. */
  opacity:0;
  transform:translateY(22px) scale(.965);
  filter:blur(7px);
  transition:opacity .6s var(--ease-expo),transform .6s var(--ease-expo),filter .6s var(--ease-expo);
}
.luna-tile.in{opacity:1;transform:none;filter:none}
.luna-tile.out{
  opacity:0;
  transform:translateY(-14px) scale(.98);
  filter:blur(5px);
  transition-duration:.4s;
}

/* Tone wash along the top edge. Carries meaning, never decoration:
   the tone is set from the finding itself (a warning, a hazard, a
   clear result), never chosen for looks. */
.luna-tile::before{
  content:"";
  position:absolute;inset:0 0 auto 0;height:110px;
  background:radial-gradient(90% 100% at 18% 0%,var(--tone-soft),transparent 72%);
  pointer-events:none;
}
.luna-tile::after{
  content:"";
  position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--tone),transparent);
  opacity:.55;
}
.luna-tile--warn { --tone:#ffb02e; --tone-soft:rgba(255,176,46,.14) }
.luna-tile--alert{ --tone:#ff5468; --tone-soft:rgba(255,84,104,.14) }
.luna-tile--ok   { --tone:#33e0a4; --tone-soft:rgba(51,224,164,.13) }

.luna-tile__head{position:relative;display:flex;align-items:center;gap:11px}
.luna-tile__ico{
  width:36px;height:36px;flex:0 0 auto;
  display:grid;place-items:center;
  border-radius:11px;
  background:color-mix(in srgb,var(--tone) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--tone) 34%,transparent);
  color:var(--tone);
}
.luna-tile__ico .ico{width:19px;height:19px}
.luna-tile__label{
  font-size:var(--fs-meta);
  font-weight:500;
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--fg-subtle);
}
.luna-tile__metric{
  position:relative;
  font-size:clamp(2rem,3.5vw,2.75rem);   /* 32 to 44 */
  line-height:1.02;
  letter-spacing:var(--ls-tight);
  font-weight:500;
  color:#f6f9fd;
}
.luna-tile__metric small{
  font-size:.44em;
  font-weight:400;
  letter-spacing:var(--ls-normal);
  color:var(--fg-muted);
  margin-left:.28em;
}
.luna-tile__detail{
  position:relative;
  font-size:var(--fs-body);
  line-height:var(--lh-relaxed);
  color:var(--fg-muted);
}

/* ---------------------------------------------------------
   SKELETONS
   The results area reserves its height so the page never jumps
   between sets. Left empty during `think` that reservation reads as
   dead space, so the tiles arrive as outlines first and resolve into
   the answer. It also makes the wait feel like work.
   --------------------------------------------------------- */
.luna-skel{
  position:relative;
  flex:1 1 250px;
  max-width:340px;
  display:flex;
  flex-direction:column;
  gap:13px;
  padding:clamp(18px,2vw,23px);
  border-radius:var(--r-2xl);
  background:linear-gradient(155deg,rgba(20,24,34,.55),rgba(12,15,22,.55));
  border:1px solid rgba(255,255,255,.055);
  overflow:hidden;
  opacity:0;
  transform:translateY(14px);
  animation:lunaSkelIn .5s var(--ease-expo) forwards;
}
.luna-skel.out{opacity:0;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease);animation:none}
@keyframes lunaSkelIn{to{opacity:1;transform:none}}

.luna-skel span{display:block;border-radius:6px;background:rgba(255,255,255,.055)}
.luna-skel .s-head{display:flex;align-items:center;gap:11px}
.luna-skel .s-chip{width:36px;height:36px;border-radius:11px;flex:0 0 auto}
.luna-skel .s-label{width:44%;height:13px}
.luna-skel .s-metric{width:58%;height:38px;border-radius:8px}
.luna-skel .s-line{height:11px}
.luna-skel .s-line:last-child{width:72%}

/* One light sweep across all three, so they read as one system working
   rather than three separate spinners. */
.luna-skel::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(150,200,255,.10) 48%,transparent 76%);
  transform:translateX(-100%);
  animation:lunaSkelSweep 1.6s ease-in-out infinite;
}
.luna-skel:nth-child(2)::after{animation-delay:.12s}
.luna-skel:nth-child(3)::after{animation-delay:.24s}
@keyframes lunaSkelSweep{
  0%  {transform:translateX(-100%)}
  60%,100%{transform:translateX(100%)}
}

/* ---------------------------------------------------------
   HONESTY MARKER
   The results are invented. Say so, quietly but plainly.
   --------------------------------------------------------- */
.luna-note{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin-top:clamp(18px,2vw,26px);
  font-size:var(--fs-meta);
  color:var(--fg-subtle);
}
.luna-note i{
  width:6px;height:6px;border-radius:50%;
  background:var(--fg-faint);opacity:.7;flex:0 0 auto;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
@media (max-width:900px){
  .luna-results{min-height:0}
  .luna-tile{flex:1 1 100%;max-width:none}
  .luna-tile__metric{font-size:clamp(1.875rem,7vw,2.375rem)}
}
@media (max-width:620px){
  .luna-bar{
    flex-wrap:wrap;
    border-radius:var(--r-2xl);
    padding:18px;
    gap:14px;
  }
  .luna-bar__field{order:3;flex:1 1 100%;min-height:calc(var(--fs-lead) * 1.32 * 2)}
  .luna-bar__go{margin-left:auto}
  .luna-trace{justify-content:flex-start}
}

/* ---------------------------------------------------------
   REDUCED MOTION
   luna.js skips the typing and the stagger; this kills the rest.
   The component still cycles, it simply cuts rather than moves.
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .luna-stage__aura i{animation:none}
  .luna-caret{animation:none}
  .luna-trace__step,
  .luna-trace__step i{animation:none;opacity:1;transform:none}
  .luna-skel{animation:none;opacity:1;transform:none}
  .luna-skel::after{animation:none;opacity:0}
  .luna-tile{transform:none;filter:none;transition:opacity .2s linear}
  .luna-tile.in{transform:none;filter:none}
  .luna-tile.out{transform:none;filter:none}
  .luna-bar__go{transition:none}
}

/* ---------------------------------------------------------
   FIRST-ON-PAGE VARIANT
   The header is fixed and transparent at scroll 0, so a stage that
   opens a page has to reserve room for it. Same defect the plan
   records against .hero; same fix.
   --------------------------------------------------------- */
.luna-stage--first{padding-top:clamp(104px,13vh,140px)}