/* ==========================================================================
   Vee — landing-only styles ("Cinematic dark, lit from within")
   Loaded AFTER style.css, only on index.html.
   Hero atmosphere, the live menu-bar demo, marquee, scroll reveals,
   signature motion, state chips. All vanilla, self-contained.
   ========================================================================== */

/* ---- Hero atmosphere (layered back → front) ------------------------------- */
.hero-atmos {
  position: absolute;
  inset: -10vh 0 auto 0;
  height: 150vh;
  max-height: 1400px;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
/* Static blurred aurora blobs — blur lives on this layer, only transform
   animates on the child so it stays cheap. */
.hero-atmos__aurora {
  position: absolute;
  inset: -20%;
  filter: blur(70px);
  opacity: 0.6;
  background:
    radial-gradient(34vmax 30vmax at 22% 18%, rgba(91, 91, 230, 0.55), transparent 60%),
    radial-gradient(30vmax 28vmax at 78% 8%, rgba(47, 107, 251, 0.5), transparent 62%),
    radial-gradient(26vmax 26vmax at 62% 42%, rgba(123, 107, 255, 0.4), transparent 60%);
  will-change: transform;
  animation: aurora-drift 26s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  0%   { transform: translate3d(-2%, 0, 0) scale(1); }
  100% { transform: translate3d(3%, -3%, 0) scale(1.12); }
}
/* Bottom vignette so content grounds against the base */
.hero-atmos::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, var(--bg) 96%);
}
@media (prefers-reduced-motion: reduce) {
  .hero-atmos__aurora { animation: none; }
}

/* ---- Hero ----------------------------------------------------------------- */
.hero { padding-block: clamp(66px, 9vw, 104px) clamp(40px, 7vw, 80px); position: relative; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.hero h1 {
  font-family: var(--display);
  font-size: clamp(2.5rem, 6.2vw, 4.3rem);
  font-weight: 560;
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin-bottom: 0.42em;
}
.hero .sub {
  font-size: clamp(1.08rem, 2.2vw, 1.35rem);
  color: var(--ink-soft);
  max-width: 36ch;
  font-weight: 380;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.9rem; }
.req-line {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 1.4rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
}
.req-line svg { width: 14px; height: 14px; opacity: 0.85; }
.req-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero .sub { max-width: none; }
  .hero-visual { order: 2; }
}

/* ---- Signature motion: hero staggered entrance + headline wipe ------------ */
@media (prefers-reduced-motion: no-preference) {
  /* Secondary hero elements rise in. The H1 is the LCP element and is handled
     separately (never starts at opacity:0). */
  .hero-copy .eyebrow,
  .hero-copy .sub,
  .hero-copy .hero-cta,
  .hero-copy .req-line,
  .hero-visual {
    opacity: 0;
    transform: translateY(16px);
    animation: hero-rise 0.9s var(--ease) forwards;
    animation-delay: calc(var(--i, 0) * 90ms + 120ms);
  }
  @keyframes hero-rise {
    to { opacity: 1; transform: none; }
  }

  /* Headline: a line-mask "wipe up" reveal. Paints immediately (opacity 1 via
     clip), so Chrome still counts it as LCP. */
  .hero h1 {
    /* Negative top so the wipe mask never shaves glyph tops at line-height 1.0;
       the reveal slides up from below, so only the bottom needs clipping. */
    clip-path: inset(-0.22em 0 -0.14em 0);
  }
  .hero h1 .wipe {
    display: inline-block;
    transform: translateY(0.5em);
    opacity: 0.001;
    animation: wipe-up 0.95s var(--ease) forwards;
    animation-delay: 60ms;
  }
  .hero h1 .wipe--2 { animation-delay: 180ms; }
  @keyframes wipe-up {
    to { transform: none; opacity: 1; }
  }
}
/* The gradient keyword animates its position for a slow shimmer.
   Re-assert the text clip: the `background` shorthand above resets
   background-clip to border-box, which would fill a rectangle instead. */
.hero h1 .grad-text {
  background: linear-gradient(120deg, var(--accent-1), var(--accent-3) 40%, var(--accent-2) 80%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  /* This span is BOTH .wipe and .grad-text — declare both animations here so
     the shorthand doesn't clobber the wipe reveal (which would leave it stuck
     at opacity 0). Wipe first (with the --2 delay), then the slow shimmer. */
  .hero h1 .grad-text {
    animation:
      wipe-up 0.95s var(--ease) 180ms both,
      grad-slide 8s ease-in-out 1.4s infinite alternate;
  }
  @keyframes grad-slide {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
  }
}

/* ---- THE signature: live menu-bar hero demo ------------------------------- */
.hero-visual { position: relative; }

/* Soft radial indigo→blue bloom BEHIND the mac window, spilling onto the bg */
.hero-visual::before {
  content: "";
  position: absolute;
  inset: -18% -12% -22% -12%;
  z-index: -1;
  background: radial-gradient(60% 55% at 50% 42%, rgba(74, 96, 236, 0.42), rgba(47, 107, 251, 0.14) 46%, transparent 72%);
  filter: blur(24px);
  pointer-events: none;
}

/* min-width:0 lets these grid/flex items shrink below their content's
   intrinsic width instead of forcing horizontal overflow on narrow screens. */
.hero-copy, .hero-visual { min-width: 0; }
.macwin { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; justify-items: stretch; min-width: 0; max-width: 100%; }
.macwin .menubar, .macwin .menu { min-width: 0; max-width: 100%; }

/* menu bar strip */
.menubar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 12px;
  background: rgba(16, 19, 33, 0.72);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid var(--hair-strong);
  box-shadow: var(--shadow-sm), var(--specular);
  font-family: var(--mono);
  font-size: 0.78rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.menubar::-webkit-scrollbar { display: none; }
.mb-item {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 7px;
  color: var(--ink-soft); white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.mb-item.is-open { background: var(--grad); color: #fff; box-shadow: 0 2px 10px rgba(47,107,251,0.5); }
/* running pulse on the active item while the demo "runs" */
.mb-item.is-running .glyph { animation: mb-pulse 0.9s ease-in-out infinite; }
@keyframes mb-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.mb-item .glyph { font-size: 0.9em; }
.mb-spacer { flex: 1; min-width: 8px; }
.mb-sys { color: var(--ink-mute); opacity: 0.8; }

/* dropdown */
.menu {
  width: min(340px, 100%);
  padding: 6px;
  border-radius: var(--r-md);
  background: rgba(13, 16, 29, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(26px);
  backdrop-filter: saturate(180%) blur(26px);
  border: 1px solid var(--hair-strong);
  box-shadow: var(--shadow-lg), var(--specular);
  font-family: var(--font);
  font-size: 0.9rem;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .menu { background: rgba(13, 16, 29, 0.97); }
  .menubar { background: rgba(16, 19, 33, 0.97); }
}
.menu-header {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 10px;
}
.menu-header .glyph { font-size: 1.05rem; }
.menu-header .h-title { font-weight: 560; color: var(--ink); font-variant-numeric: tabular-nums; }
.menu-header .h-sub { margin-left: auto; font-family: var(--mono); font-size: 0.74rem; color: var(--sev-low); font-weight: 500; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 5px; }
.menu-header .h-sub::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sev-low); box-shadow: 0 0 6px var(--sev-low); }
.menu-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 8px;
  color: var(--ink-soft); cursor: default;
}
.menu-row .ic { width: 18px; text-align: center; color: #8fb0ff; }
.menu-row .ic svg { width: 17px; height: 17px; }
.menu-row .val { margin-left: auto; color: var(--ink-mute); font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.84rem; }
.menu-row.sel { background: var(--grad); color: #fff; }
.menu-row.sel .ic, .menu-row.sel .val { color: rgba(255,255,255,0.92); }
.menu-row .chev { margin-left: auto; color: var(--ink-mute); font-size: 0.8rem; }
.menu-sep { height: 1px; margin: 5px 8px; background: var(--hair); }
.menu-caption { padding: 4px 10px; font-family: var(--mono); font-size: 0.7rem; color: var(--ink-mute); letter-spacing: 0.02em; }

/* the value that "ticks" (checkmark appear) */
.menu-row .tick { color: var(--sev-low); opacity: 0; transform: scale(0.6); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }

/* Live-demo state machine hooks. JS toggles classes on .macwin[data-phase].
   Rows stream in when phase is running/shown; freeze on shown for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .macwin .menu-row,
  .macwin .menu-caption,
  .macwin .menu-header .h-sub {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  }
  .macwin[data-phase="shown"] .menu-row,
  .macwin[data-phase="shown"] .menu-caption,
  .macwin[data-phase="shown"] .menu-header .h-sub,
  .macwin[data-phase="running"] .menu-row,
  .macwin[data-phase="running"] .menu-header .h-sub {
    opacity: 1;
    transform: none;
  }
  /* stagger the rows */
  .macwin .menu .menu-row { transition-delay: calc(var(--r, 0) * 90ms); }
  .macwin[data-phase="idle"] .menu-row,
  .macwin[data-phase="idle"] .menu-caption { opacity: 0; transform: translateY(6px); transition-delay: 0ms; }
  .macwin[data-phase="shown"] .menu-row.sel .tick,
  .macwin[data-phase="running"] .menu-row.sel .tick { opacity: 1; transform: scale(1); transition-delay: 0.7s; }
}
/* Reduced motion: freeze on the fully-shown frame */
@media (prefers-reduced-motion: reduce) {
  .macwin .menu-row, .macwin .menu-caption, .macwin .menu-header .h-sub { opacity: 1; transform: none; }
  .macwin .menu-row.sel .tick { opacity: 1; transform: none; }
}

/* ---- Live data strip (mono, under the hero) ------------------------------- */
.datastrip {
  display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center;
  margin-top: 2rem;
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--ink-mute);
}
.datastrip .dchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--hair);
  font-variant-numeric: tabular-nums;
}
.datastrip .dchip b { color: var(--ink-soft); font-weight: 500; }

/* ---- State chips (run/trust states, JetBrains Mono) ----------------------- */
.state-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px; border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.74rem; font-weight: 500;
  border: 1px solid transparent;
  letter-spacing: 0.01em;
}
.state-chip .dot { width: 7px; height: 7px; border-radius: 50%; }
.state-chip--running { background: rgba(91,91,230,0.16); color: #9b9bff; border-color: rgba(91,91,230,0.4); }
.state-chip--running .dot { background: #7b7bff; box-shadow: 0 0 6px #7b7bff; }
.state-chip--success { background: var(--sev-low-bg); color: var(--sev-low); border-color: color-mix(in srgb, var(--sev-low) 36%, transparent); }
.state-chip--success .dot { background: var(--sev-low); }
.state-chip--warn { background: var(--sev-med-bg); color: var(--sev-med); border-color: color-mix(in srgb, var(--sev-med) 36%, transparent); }
.state-chip--warn .dot { background: var(--sev-med); }
.state-chip--error { background: var(--sev-high-bg); color: var(--sev-high); border-color: color-mix(in srgb, var(--sev-high) 36%, transparent); }
.state-chip--error .dot { background: var(--sev-high); }

/* ---- Marquee of shells/tools --------------------------------------------- */
.marquee {
  position: relative;
  overflow: hidden;
  margin-top: 2.6rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  gap: 2.6rem;
  width: max-content;
  animation: marquee 26s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--ink-mute);
  white-space: nowrap;
}
.marquee__item .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-1); opacity: 0.6; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

/* ---- Editorial pull-line (the ONE Instrument Serif italic) ---------------- */
.pull-line {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  line-height: 1.28;
  letter-spacing: 0;
  color: var(--ink-soft);
  max-width: 24ch;
  margin-inline: auto;
  text-align: center;
}
.pull-line em { color: var(--ink); font-style: italic; }
.pull-band { padding-block: clamp(48px, 8vw, 90px); text-align: center; }

/* ---- ONE hero element with a rotating conic border (the demo window) ------ */
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.macwin::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: calc(var(--r-md) + 2px);
  padding: 1px;
  background: conic-gradient(from var(--angle), rgba(255,255,255,0.04), rgba(91,91,230,0.5), rgba(47,107,251,0.5), rgba(255,255,255,0.04), rgba(123,107,255,0.5), rgba(255,255,255,0.04));
  -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: 0.6;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .macwin::before { animation: spin-border 12s linear infinite; }
  @keyframes spin-border { to { --angle: 360deg; } }
}

/* ---- Screenshots gallery -------------------------------------------------- */
/* Real captures are LIGHT-mode macOS windows; they sit on a tasteful neutral
   stage that reads intentionally on the dark page. */
.shots {
  display: grid;
  gap: clamp(18px, 2.6vw, 26px);
  grid-template-columns: repeat(2, 1fr);
  margin-top: clamp(30px, 4vw, 44px);
}
@media (max-width: 720px) { .shots { grid-template-columns: 1fr; } }

.shot {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(16px, 2.4vw, 26px);
  border-radius: var(--r-lg);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-md), var(--specular);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .shot { background: var(--glass-solid); }
}
.shot::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.03) 50%, rgba(123,107,255,0.14));
  -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; pointer-events: none;
}
.shot:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg), var(--specular); }

.shot__stage {
  display: grid;
  place-items: center;
  padding: clamp(14px, 2.2vw, 24px);
  border-radius: var(--r-md);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(91, 91, 230, 0.24), transparent 60%),
    #10131f;
  border: 1px solid var(--hair);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.shot__stage img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
}
.shot--narrow .shot__stage img { max-width: 340px; }

.shot__cap { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.shot__cap b { color: var(--ink); font-family: var(--display); font-weight: 560; font-size: 1rem; }
.shot__cap span { color: var(--ink-mute); font-size: 0.9rem; }
.shot__cap code { font-family: var(--mono); }

/* ---- Scroll-driven reveals (progressive enhancement) ---------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* Native scroll-timeline path where supported */
  @supports (animation-timeline: view()) {
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 12% cover 40%;
      /* Firefox requires a non-zero duration even with a timeline */
      animation-duration: 1ms;
    }
    @keyframes reveal-in {
      to { opacity: 1; transform: none; }
    }
  }
  /* IntersectionObserver fallback: JS sets .in after first intersection */
  @supports not (animation-timeline: view()) {
    .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
    .reveal.in { opacity: 1; transform: none; }
  }
}

/* ---- Section eyebrow-as-mono heading treatment on landing ----------------- */
.hero-copy .eyebrow { --i: 0; }
.hero-copy .sub { --i: 1; }
.hero-copy .hero-cta { --i: 2; }
.hero-copy .req-line { --i: 3; }
.hero-copy .datastrip { --i: 4; }

/* ---- Magnetic CTA (JS sets transform on pointermove) ---------------------- */
@media (prefers-reduced-motion: no-preference) {
  .magnetic { transition: transform 0.35s var(--ease); }
}