/* ============================================================
   Lighthouse — Identity Intelligence Engine hero
   Ported from the attached IIE concept, recolored to the locked
   Lighthouse brand: true-black canvas, marigold (was electric blue),
   periwinkle (was violet). Typography kept from source: Rajdhani
   display + JetBrains Mono labels.
   ============================================================ */

.iie {
  --ac: var(--marigold);
  --ac-soft: var(--marigold-soft);
  --ac-deep: var(--marigold-deep);
  --vi: var(--periwinkle);
  --txt: var(--text-primary);
  --mut: var(--text-secondary);
  --dim: var(--text-dim);    /* D154: was #6b6b6e, an undeclared grey between two real tokens */
  --panel: var(--canvas);
  --font-display: 'Rajdhani', 'JetBrains Mono', sans-serif;

  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--canvas);
  color: var(--txt);
  padding: 132px 0 96px;
}

/* ---- ambient layers ---- */
.iie-dots, .iie-dots2, .iie-beam, .iie-beamfb { position: absolute; inset: 0; pointer-events: none; }
/* M7 dust recession: both dot fields translate on --lag, written on the hero
   during scroll-out only. Transform only; dust layers only - copy, web, beam
   never move. (D127: no pointer parallax - atmosphere responds to no input.) */
.iie-dots  { z-index: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.055) 0.5px, transparent 0.5px); background-size: 6px 6px; transform: translateY(calc(var(--lag, 0px) * 0.4)); transition: transform 240ms ease-out; }
.iie-dots2 { z-index: 0; opacity: 0.35; background-image: radial-gradient(circle, rgba(202,169,11,0.10) 1px, transparent 1px); background-size: 40px 40px; background-position: center; transform: translateY(var(--lag, 0px)); transition: transform 240ms ease-out; }
.iie-beamfb { z-index: 0; background:
   radial-gradient(60% 80% at 76% 50%, rgba(202,169,11,0.16), transparent 60%),
   linear-gradient(90deg, transparent 60%, rgba(202,169,11,0.05) 78%, transparent 92%); }
.iie-beam { z-index: 1; width: 100%; height: 100%; display: block; }

/* M3 first light: the hero begins dark - the dust fields and the beam
   fallback wash fade up on load (the canvas + vertical beam are choreographed
   in hero-resolve.css). Play-once, gated on .loaded per house pattern. */
html.js .iie:not(.loaded) .iie-dots,
html.js .iie:not(.loaded) .iie-dots2,
html.js .iie:not(.loaded) .iie-beamfb { opacity: 0; }
.iie.loaded .iie-dots, .iie.loaded .iie-dots2, .iie.loaded .iie-beamfb { animation: iieFadeUp 400ms var(--ease-out-quint) both; }
@keyframes iieFadeUp { from { opacity: 0; } }
body.frozen .iie-dots, body.frozen .iie-beamfb { opacity: 1 !important; animation: none !important; transform: none !important; transition: none !important; }
body.frozen .iie-dots2 { opacity: 0.35 !important; animation: none !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .iie-dots, .iie-beamfb { opacity: 1 !important; animation: none !important; transform: none !important; transition: none !important; }
  .iie-dots2 { opacity: 0.35 !important; animation: none !important; transform: none !important; transition: none !important; }
}

/* ---- version tag (from source meta header) ---- */
.iie-tag {
  position: absolute; top: 90px; right: 48px; z-index: 6;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim);
}

/* ---- layout ---- */
/* D153: was max-width 1500px, which started the hero H1 at 48px while every section
   heading on the page starts at 128px. The hero now rides the house container token
   so the page has ONE left edge. */
.iie-main { position: relative; z-index: 5; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 48px; }
.iie-grid { display: grid; grid-template-columns: 1.18fr 0.82fr; gap: 48px; align-items: center; width: 100%; }
.iie-left { display: flex; flex-direction: column; align-items: flex-start; }

/* (dead .iie-pill status pill + iiePulse keyframe pruned - zero markup consumers) */

/* ---- headline ---- */
.iie-h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(44px, 6.2vw, 88px); line-height: 1.0; letter-spacing: -0.01em;
  text-transform: uppercase; color: var(--txt); margin: 0; max-width: 14ch;
}
.iie-h1 .word.ac { color: var(--ac); }
/* masked word reveal → clean per-word rise (no clipping) */
.iie-h1 .hline { display: block; }
.iie-h1 .word { display: inline-block; padding: 0; }
.iie-h1 .wsp { display: inline-block; width: 0.34em; }
.iie-h1 .word > i { display: inline-block; font-style: normal; }
html.js .iie:not(.loaded) .iie-h1 .word > i { opacity: 0; transform: translateY(22px); }
/* M1 line-beat entrance: delays assigned per rendered line by JS before
   .loaded lands; 0.9s so the beats stay distinct */
.iie.loaded .iie-h1 .word > i { animation: iieWordUp 0.9s var(--ease-out-expo) both; }
@keyframes iieWordUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ---- subtext ---- */
.iie-sub {
  margin-top: 28px; max-width: 46ch;
  font-family: var(--font-ui); font-weight: 400;
  font-size: clamp(18px, 1.5vw, 22px); line-height: 1.55; color: var(--mut);
}

/* dead terminal-controls suite (.iie-controls/.iie-toggle/.iie-slider) and the
   .iie-stats/.iie-stat grid pruned - zero markup consumers; the controls also
   held the codebase's only radius/shadow violations */

/* ---- right column: beacon resolve web ---- */
.iie-right { display: flex; justify-content: flex-end; align-items: center; position: relative; min-height: 580px; }

/* ---- entrance: fade/slide groups (robust, gated on .loaded) ----
   M2 reading order: eyebrow 0.12s -> H1 line-beats 0.15-0.85s -> lead 0.7s
   -> kicker 0.95s (hero-resolve.css) -> CTA 1.15s, last.
   (.iie-pill/.iie-stats entrance + reduce/frozen rules swept - dead markup) */
html.js .iie:not(.loaded) .iie-sub { opacity: 0; }
.iie.loaded .iie-sub      { animation: iieUp 1s var(--ease-out-quint) 0.7s both; }
@keyframes iieUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }

/* frozen failsafe */
body.frozen .iie-h1 .word > i { animation: none !important; transform: none !important; opacity: 1 !important; }
body.frozen .iie-sub { animation: none !important; opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .iie-h1 .word > i { transform: none !important; animation: none !important; opacity: 1 !important; }
  .iie-sub { opacity: 1 !important; transform: none !important; animation: none !important; }
}

@media (max-width: 1080px) {
  .iie-grid { grid-template-columns: 1fr; gap: 56px; }
  .iie-right { display: flex; justify-content: center; min-height: 0; }
}
@media (max-width: 560px) {
  .iie-main { padding: 0 20px; }
  .iie-tag { display: none; }
}

/* D19 (resolved: BEAM RAIL) — phone hero: the copy owns a narrower left
   column at a smaller display scale; the web sits BRIGHT inside the
   right-edge beam strip with its atmosphere */
@media (max-width: 760px) {
  .iie { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
  .iie-grid { grid-template-columns: 1fr; gap: 0; }
  .iie-left { position: relative; z-index: 1; width: 62vw; }
  .iie-h1 { font-size: clamp(40px, 10.5vw, 44px); }
  .iie-sub { line-height: 1.55; max-width: 30ch; } /* D154: 17px dropped here too (it was duplicated in lighthouse.css:39) */
  .iie-right {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    display: flex; justify-content: flex-end; align-items: center;
    opacity: 1; min-height: 0;
  }
  .iie-right > * { transform: scale(0.58) translateX(22%); transform-origin: 100% 50%; }
  .iie-right::after {
    /* copy-protection scrim - box extends past the copy block and the
       vertical mask dissolves the top/bottom edges (no hard line on mobile) */
    content: ''; position: absolute; inset: -72px 0;
    background: linear-gradient(90deg, var(--canvas) 42%, rgba(20,20,22,0.4) 62%, transparent 82%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
  }
}