/* =========================================================
   ICE theme overrides: HERO (#hero). Colour only, every rule scoped [data-theme="ice"].
   The three.js tunnel (assets/js/tunnel.js) branches on data-theme="ice" itself: frost background with
   ice-blue haze, white print borders + soft navy shadows on the photo panels, ice rings/streaks, a
   frosted lens + shutter. This file re-skins the HTML layers around it: poster, scrims, copy, HUD chip,
   scroll cue, reticle label, services ticker and the manifesto beat (camera + panel stream).
   ========================================================= */

/* ---- frame + instant-paint poster ----
   The original posters are dark captures of the neon tunnel. poster-ice-*.webp are captures of the ice tunnel
   (same seeded first frame, ?poster); tools/build.py swaps them into the preload + <picture> when THEME = "ice". */
[data-theme="ice"] .hero-frame {
  background:
    radial-gradient(55% 65% at 68% 50%, rgba(255, 255, 255, .9), transparent 62%),
    radial-gradient(26% 32% at 68% 50%, rgba(56, 182, 245, .12), transparent 70%),
    linear-gradient(180deg, #e3effa, var(--bg));
}

/* white frost scrim: navy copy on the left, nav band on top, ticker band at the bottom */
[data-theme="ice"] .hero-scrim {
  background:
    linear-gradient(90deg, rgba(244, 249, 254, .94) 0%, rgba(244, 249, 254, .76) 30%, rgba(244, 249, 254, .22) 52%, rgba(244, 249, 254, 0) 66%),
    linear-gradient(0deg, rgba(244, 249, 254, .9) 0%, rgba(244, 249, 254, .38) 9%, rgba(244, 249, 254, 0) 22%),
    linear-gradient(180deg, rgba(244, 249, 254, .86) 0%, rgba(244, 249, 254, .3) 9%, rgba(244, 249, 254, 0) 18%);
}

/* ---- copy ---- */
[data-theme="ice"] .hero-title { color: var(--ink); }
[data-theme="ice"] .hero-l2 { filter: drop-shadow(0 8px 22px rgba(37, 99, 235, .16)); }
[data-theme="ice"] .hero-sub { color: var(--ink-2); }

/* ---- HUD chip + scroll cue ---- */
[data-theme="ice"] .hero-chip {
  color: var(--ink-2); background: rgba(255, 255, 255, .88); border-color: var(--line-2);
  box-shadow: 0 1px 2px rgba(16, 60, 110, .06), 0 10px 26px -14px rgba(16, 60, 110, .35);
}
[data-theme="ice"] .hero-chip-dot { background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .18); }
[data-theme="ice"] .hero-cue {
  color: var(--ink-2); background: rgba(255, 255, 255, .92); border-color: rgba(56, 182, 245, .45);
  box-shadow: 0 2px 6px rgba(16, 60, 110, .08), 0 18px 40px -18px rgba(14, 140, 220, .55);
}
[data-theme="ice"] .hero-cue-txt b { color: var(--ink); }
[data-theme="ice"] .hero-cue-mouse { border-color: var(--ink); }
[data-theme="ice"] .hero-cue-mouse::after { border-color: var(--ice); }
[data-theme="ice"] .hero-cue-mouse i { background: var(--ice); box-shadow: none; }
[data-theme="ice"] .hero-cue-down i { border-color: var(--cyan); }

/* ---- reticle (hover / wander label over a photo panel) ---- */
[data-theme="ice"] .hero-ret-box i { border-color: var(--cyan); filter: drop-shadow(0 1px 2px rgba(16, 60, 110, .3)); }
[data-theme="ice"] .hero-ret-box i:nth-child(3), [data-theme="ice"] .hero-ret-box i:nth-child(4) { border-color: var(--violet); }
[data-theme="ice"] .hero-ret-label {
  background: rgba(255, 255, 255, .97); border-color: var(--line-2);
  box-shadow: 0 2px 6px rgba(16, 60, 110, .08), 0 18px 40px -18px rgba(16, 60, 110, .5);
}
[data-theme="ice"] .hero-ret-title { color: var(--ink); }
[data-theme="ice"] .hero-ret-sub { color: var(--cyan); }
[data-theme="ice"] .hero-ret-hint { color: var(--muted); }

/* ---- services ticker ---- */
[data-theme="ice"] .hero-ticker {
  border-top-color: var(--line);
  background: linear-gradient(90deg, rgba(56, 182, 245, .1), rgba(99, 102, 241, .08), rgba(122, 92, 240, .08)), rgba(255, 255, 255, .84);
  box-shadow: 0 -10px 30px -24px rgba(16, 60, 110, .35);
}
[data-theme="ice"] .hero-ticker-list a { color: var(--ink-2); }
[data-theme="ice"] .hero-ticker-list a::after { background: var(--grad); box-shadow: none; }
[data-theme="ice"] .hero-ticker-list a:hover { color: var(--cyan); text-shadow: none; }
[data-theme="ice"] .hero-ticker-list a:focus-visible { color: var(--ink); }
[data-theme="ice"] .hero-ticker-hint {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 56px) padding-box;
  color: var(--cyan);
}
[data-theme="ice"] .hero-ticker-hint kbd { color: var(--ink); border-color: var(--line-2); background: rgba(56, 182, 245, .1); }

/* ---- manifesto ("We are the AI guru.") ---- */
[data-theme="ice"] .hero-m-kicker { color: var(--cyan); }
[data-theme="ice"] .hero-m-line { color: var(--ink-2); }
[data-theme="ice"] .hero-m-big { color: var(--ink); }
[data-theme="ice"] .hero-m-big em { filter: drop-shadow(0 8px 24px rgba(79, 83, 214, .2)); }
[data-theme="ice"] .hero-m-cam-img { filter: drop-shadow(0 2.2cqw 2.6cqw rgba(16, 60, 110, .2)); }
/* the flare sits on the dark lens, where screen still reads; the panel stream would vanish on white: normal blend */
[data-theme="ice"] .hero-m-cam-p {
  background: linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(234, 244, 252, .55) 60%);
  box-shadow: 0 .5cqw 1.4cqw -.3cqw rgba(16, 60, 110, .35), inset 0 0 0 .12cqw rgba(255, 255, 255, .7);
  mix-blend-mode: normal;
}

@media (min-width: 1024px) and (orientation: landscape) {
  [data-theme="ice"].js:not(.reduced) .hero-m-scrim {
    background: radial-gradient(58% 46% at 50% 50%, rgba(244, 249, 254, .94), rgba(244, 249, 254, .62) 55%, rgba(244, 249, 254, 0) 80%);
  }
}

/* ---- stacked (phones, tablets, portrait) ---- */
@media (max-width: 1023px), (orientation: portrait) {
  [data-theme="ice"] .hero-frame {
    background:
      radial-gradient(70% 36% at 50% 26%, rgba(56, 182, 245, .14), transparent 70%),
      linear-gradient(180deg, #e3effa, var(--bg));
  }
  [data-theme="ice"] .hero-scrim {
    background:
      linear-gradient(0deg, rgba(244, 249, 254, .98) 0%, rgba(244, 249, 254, .93) 34%, rgba(244, 249, 254, .55) 50%, rgba(244, 249, 254, 0) 62%),
      linear-gradient(180deg, rgba(244, 249, 254, .78) 0%, rgba(244, 249, 254, 0) 12%);
  }
  [data-theme="ice"] .hero-manifesto {
    background:
      radial-gradient(70% 46% at 50% 66%, rgba(56, 182, 245, .12), transparent 72%),
      linear-gradient(180deg, var(--bg), var(--bg-2) 60%, var(--bg));
    border-bottom-color: var(--line);
  }
}