/**
 * AVAREX CORE — intro.css v2
 * ============================================================
 * "The Descent" — Cinematic Camera Rig Introduction
 *
 * Architecture:
 *  - .intro-viewport        : perspective container (fixed, full-screen)
 *  - .camera-world          : the "world" that moves (camera inverse)
 *  - .world-layer-*         : depth layers at different translateZ values
 *  - .burst-overlay         : gold flash at tunnel end
 *  - .intro-controls-layer  : UI above the 3D world
 *
 * The camera descent is simulated by animating .camera-world with
 * translate3d + scale, while each layer's translateZ creates
 * genuine parallax — near layers move faster, far layers slower.
 * ============================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600&display=swap');

/* ═══════════════════════════════════════════════════════════
   ROOT VARIABLES
   ═══════════════════════════════════════════════════════════ */
:root {
  --descent-duration:   9s;
  --descent-easing:     cubic-bezier(0.15, 0, 0.08, 1);
  --burst-color:        #FFF8E0;
  --burst-gold:         rgba(201, 168, 76, 0.9);
}

/* ═══════════════════════════════════════════════════════════
   ENTRANCE OVERLAY — base shell
   ═══════════════════════════════════════════════════════════ */
.entrance-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9000 !important;
  background: #0A0E0A !important; /* deep forest dark as initial bg */
  overflow: hidden !important;
  opacity: 1;
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

.entrance-overlay.exit {
  opacity: 0 !important;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   PERSPECTIVE VIEWPORT
   The perspective parent creates the 3D space.
   Children with translateZ at different values will appear
   to move at different speeds when the world container animates.
   ═══════════════════════════════════════════════════════════ */
.intro-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 700px;
  perspective-origin: 50% 42%; /* slightly above center — aerial view feel */
}

/* ═══════════════════════════════════════════════════════════
   CAMERA RIG — this is what "moves" (world container)
   Animating this forward = camera descending into the scene
   ═══════════════════════════════════════════════════════════ */
.camera-world {
  position: absolute;
  inset: -25%;
  width: 150%;
  height: 150%;
  transform-style: preserve-3d;
  transform-origin: 50% 52%;
  will-change: transform;
}

/* The descent: camera starts aerial (translated back, tilted), moves forward */
.camera-world.descending {
  animation: cameraDescend var(--descent-duration) var(--descent-easing) forwards;
}

@keyframes cameraDescend {
  0%   {
    transform: translateZ(-320px) translateY(90px) rotateX(10deg) scale(0.82);
  }
  20%  {
    transform: translateZ(-220px) translateY(55px) rotateX(6deg)  scale(0.88);
  }
  45%  {
    transform: translateZ(-110px) translateY(22px) rotateX(2deg)  scale(0.96);
  }
  65%  {
    transform: translateZ(-30px)  translateY(4px)  rotateX(0.5deg) scale(1.01);
  }
  80%  {
    transform: translateZ(30px)   translateY(-6px)  rotateX(-0.5deg) scale(1.05);
  }
  88%  {
    /* Accelerating toward thread */
    transform: translateZ(100px)  translateY(-15px) rotateX(-1deg)   scale(1.1);
  }
  100% {
    /* BURST — camera through the light */
    transform: translateZ(260px)  translateY(-30px) rotateX(-2deg)   scale(1.22);
  }
}

/* ═══════════════════════════════════════════════════════════
   DEPTH LAYERS
   Each layer sits at a different Z position.
   During the camera descent, near layers (positive Z) appear
   to rush past — far layers (negative Z) move slowly.
   ═══════════════════════════════════════════════════════════ */

/* Layer: Sky — furthest back, barely moves */
.world-layer-sky {
  position: absolute;
  inset: 0;
  transform: translateZ(-380px) scale(1.9);
  background: linear-gradient(
    to bottom,
    #1A2D1A 0%,       /* deep forest ceiling */
    #2A4520 20%,
    #3D6030 50%,
    #7A9A50 75%,
    #C4B878 90%,
    #E8D898 100%
  );
  transform-style: preserve-3d;
}

/* Field background image — mid-distance */
.world-layer-field {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  transform: translateZ(-200px) scale(1.45);
  transform-style: preserve-3d;
  background-image: url('assets/field_dawn.jpg');
  background-size: cover;
  background-position: center 55%;
  will-change: transform;
}

/* Dusk field swap */
body.dusk      .world-layer-field,
body.golden-hour .world-layer-field {
  background-image: url('assets/field_dusk.jpg');
}

/* Night: darken the dawn field */
body.night .world-layer-field {
  background-image: url('assets/field_dawn.jpg');
  filter: brightness(0.15) saturate(0.2) hue-rotate(210deg);
}

/* Mist layer 1 — mid distance */
.world-layer-mist1 {
  position: absolute;
  inset: 0;
  transform: translateZ(-100px) scale(1.16);
  transform-style: preserve-3d;
  background: linear-gradient(
    to top,
    rgba(235, 240, 230, 0.55) 0%,
    rgba(220, 230, 215, 0.3)  18%,
    transparent 40%
  );
  will-change: transform;
}

body.dusk      .world-layer-mist1,
body.golden-hour .world-layer-mist1 {
  background: linear-gradient(
    to top,
    rgba(240, 200, 140, 0.45) 0%,
    rgba(220, 170, 100, 0.2)  18%,
    transparent 40%
  );
}

/* Mist layer 2 — near-mid, rises as we descend */
.world-layer-mist2 {
  position: absolute;
  inset: 0;
  transform: translateZ(-30px) scale(1.05);
  transform-style: preserve-3d;
  background: linear-gradient(
    to top,
    rgba(240, 245, 238, 0.7)  0%,
    rgba(230, 238, 225, 0.45) 12%,
    rgba(220, 232, 218, 0.15) 28%,
    transparent 45%
  );
  will-change: transform;
}

body.dusk .world-layer-mist2,
body.golden-hour .world-layer-mist2 {
  background: linear-gradient(
    to top,
    rgba(248, 210, 150, 0.65) 0%,
    rgba(238, 185, 110, 0.35) 12%,
    rgba(220, 165, 80, 0.12)  28%,
    transparent 45%
  );
}

/* ═══════════════════════════════════════════════════════════
   FLOATING OBJECTS — positioned at different Z depths
   The objects container itself does NOT move with the camera;
   individual objects have their own depth via data attributes
   processed by JS. They use a separate parallax system.
   ═══════════════════════════════════════════════════════════ */
.world-layer-objects {
  position: absolute;
  inset: 0;
  transform: translateZ(10px);
  transform-style: preserve-3d;
  pointer-events: none;
}

/* Individual object sprite */
.descent-obj {
  position: absolute;
  will-change: transform, opacity;
  opacity: 0;
  transform-origin: center center;
  transition: opacity 0.6s ease;
  overflow: hidden;
  border-radius: 4px;
}

.descent-obj.obj-visible {
  opacity: 1;
}

/* Object image uses mix-blend-mode:multiply so white bg disappears */
.descent-obj img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  display: block;
}

/* Near objects get depth-blur to sell the parallax */
.descent-obj[data-depth="near"] {
  filter: blur(1.5px);
}
.descent-obj[data-depth="far"] {
  filter: blur(0.5px);
}

/* Journal + Notes — left side, mid distance */
#obj-journal {
  left: 4%;
  top: 28%;
  width: clamp(180px, 24vw, 320px);
  height: auto;
  aspect-ratio: 4/3;
  transform: rotate(-6deg) translateZ(-60px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

/* Phone + Chart — right side, near */
#obj-phone {
  right: 5%;
  top: 25%;
  width: clamp(160px, 20vw, 280px);
  height: auto;
  aspect-ratio: 4/3;
  transform: rotate(5deg) translateZ(60px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  filter: blur(1px);
}

/* Mid floating label — center-left, far */
#obj-label-a {
  left: 30%;
  top: 38%;
  width: clamp(100px, 12vw, 160px);
  transform: rotate(-2deg) translateZ(-120px);
}

/* Mid floating label — right, mid */
#obj-label-b {
  right: 22%;
  top: 45%;
  width: clamp(100px, 11vw, 150px);
  transform: rotate(4deg) translateZ(-20px);
}

/* ═══════════════════════════════════════════════════════════
   FOREGROUND SILHOUETTE — nearest layer, rushes past fast
   ═══════════════════════════════════════════════════════════ */
.world-layer-fore {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 38%;
  transform: translateZ(200px) scale(0.72);
  transform-style: preserve-3d;
  background-image: url('assets/foreground_grass.jpg');
  background-size: cover;
  background-position: top center;
  mix-blend-mode: multiply;
  opacity: 0.92;
  will-change: transform;
}

/* ═══════════════════════════════════════════════════════════
   GOLD THREAD — SVG path drawn at Beat 5
   ═══════════════════════════════════════════════════════════ */
.world-layer-thread {
  position: absolute;
  bottom: 30%;
  left: 0;
  width: 100%;
  height: 20%;
  transform: translateZ(-10px);
  pointer-events: none;
  overflow: visible;
}

.thread-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.thread-path {
  fill: none;
  stroke: #C9A84C;
  stroke-width: 2.5;
  stroke-linecap: round;
  filter:
    drop-shadow(0 0 4px rgba(201, 168, 76, 0.8))
    drop-shadow(0 0 12px rgba(201, 168, 76, 0.4));
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.thread-path.drawn {
  stroke-dashoffset: 0;
}

/* Thread glow — radial pulse node */
.thread-node {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #C9A84C;
  box-shadow: 0 0 12px 4px rgba(201, 168, 76, 0.6);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.thread-node.visible {
  opacity: 1;
  animation: threadPulse 1.2s ease-in-out infinite;
}

@keyframes threadPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50%       { transform: translate(-50%, -50%) scale(1.6); opacity: 0.5; }
}

/* ═══════════════════════════════════════════════════════════
   BURST OVERLAY — gold whiteout flash (Beat 7)
   ═══════════════════════════════════════════════════════════ */
.burst-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    ellipse 60% 50% at 50% 55%,
    #FFFBEA 0%,
    #FFF0A0 25%,
    rgba(201, 168, 76, 0.9) 55%,
    rgba(201, 168, 76, 0.0) 100%
  );
}

.burst-overlay.ignite {
  animation: burstFlash 1.1s cubic-bezier(0.2, 0, 0.1, 1) forwards;
}

@keyframes burstFlash {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  60%  { opacity: 0.85; }
  100% { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════
   WORDMARK — appears during the burst
   ═══════════════════════════════════════════════════════════ */
.intro-wordmark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 22;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  white-space: nowrap;
}

.intro-wordmark.visible {
  opacity: 1;
}

.intro-wordmark-name {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.8rem, 5.5vw, 5rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #1A1400;
  line-height: 1;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.9),
    0 2px 20px rgba(201, 168, 76, 0.4);
}

.intro-wordmark-tagline {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.6rem, 1.1vw, 0.8rem);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #3A2E00;
  margin-top: 1rem;
}

/* ═══════════════════════════════════════════════════════════
   CONTROLS LAYER — Enter button + Skip
   Always above the 3D world (no transform-style: preserve-3d)
   ═══════════════════════════════════════════════════════════ */
.intro-controls-layer {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: clamp(3rem, 8vh, 6rem);
  pointer-events: none;
}

.intro-enter-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.intro-enter-group.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Enter button */
.btn-enter {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 3rem !important;
  border: 1.5px solid rgba(201, 168, 76, 0.9) !important;
  color: #F7F4EF !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  background: rgba(10, 14, 10, 0.5) !important;
  backdrop-filter: blur(10px);
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  box-shadow: 0 2px 24px rgba(0,0,0,0.3);
}

.btn-enter:hover {
  background: rgba(201, 168, 76, 0.18) !important;
  border-color: #C9A84C !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 28px rgba(201, 168, 76, 0.25) !important;
}

.intro-hint-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(247, 244, 239, 0.35);
}

/* Skip button */
.intro-skip-btn {
  position: absolute;
  top: calc(68px + 1rem);
  right: 1.5rem;
  z-index: 32;
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(247, 244, 239, 0.45);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem 0.75rem;
  transition: color 0.2s ease;
  opacity: 0;
  pointer-events: none;
}

.intro-skip-btn.visible {
  opacity: 1;
  pointer-events: auto;
}

.intro-skip-btn:hover {
  color: rgba(247, 244, 239, 0.9);
}

/* ═══════════════════════════════════════════════════════════
   HUD REPLAY BUTTON
   ═══════════════════════════════════════════════════════════ */
.hud-replay-btn {
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.6rem;
  transition: color 0.2s ease;
  display: none;
  align-items: center;
  gap: 0.3rem;
}

.hud-replay-btn.visible {
  display: inline-flex;
}

.hud-replay-btn:hover { color: var(--gold); }

/* ═══════════════════════════════════════════════════════════
   MORNING ENVIRONMENT — inside the site
   ═══════════════════════════════════════════════════════════ */

/* Scene environment layer — injected into each scene by JS */
.scene-env-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Light ray */
.env-ray {
  position: absolute;
  width: 1px;
  background: linear-gradient(to bottom, transparent 0%, rgba(255,220,140,0.15) 40%, transparent 100%);
  transform-origin: top center;
  pointer-events: none;
}

/* Dust mote */
.env-mote {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 220, 140, 0.6);
  pointer-events: none;
  animation: moteDrift linear infinite;
}

@keyframes moteDrift {
  0%   { transform: translate(0, 0) scale(1);   opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 0.7; }
  100% { transform: translate(var(--mx, 30px), var(--my, -120px)) scale(0.6); opacity: 0; }
}

/* Scene field backdrop (hero) */
.scene-field-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center 50%;
  opacity: 0;
  transition: opacity 1.2s ease;
}

body.morning .scene-field-backdrop {
  background-image: url('assets/field_dawn.jpg');
  opacity: 0.06;
}

body.dusk .scene-field-backdrop,
body.golden-hour .scene-field-backdrop {
  background-image: url('assets/field_dusk.jpg');
  opacity: 0.08;
}

/* Morning theme — scene backgrounds use real daylight grading */
body.morning {
  background: #E8E4DB !important;
}

body.morning #scene-arrival {
  background: linear-gradient(
    160deg,
    #B8CEC0 0%,      /* deep muted forest blue-green */
    #C8DABC 35%,
    #D8D8AC 65%,
    #E0D098 100%
  ) !important;
  color: #1A1917;
}

body.morning #scene-arrival .arrival-main-title,
body.morning #scene-arrival h1,
body.morning #scene-arrival .heading-1 {
  color: #1A1917 !important;
  text-shadow: 0 1px 20px rgba(255,255,255,0.3) !important;
}

body.morning #scene-arrival .arrival-brand-tagline,
body.morning #scene-arrival .gold-eyebrow {
  color: #6A5010 !important;
}

body.morning #scene-arrival .arrival-desc,
body.morning #scene-arrival .body-lg {
  color: #3A3630 !important;
}

/* Morning hero */
body.morning #scene-hero {
  background: linear-gradient(
    175deg,
    #1A2A18 0%,
    #243D20 100%
  ) !important;
}

/* Morning scenes 3–5: study/work light environments */
body.morning #scene-noise,
body.morning #scene-method,
body.morning #scene-academy {
  background: linear-gradient(175deg, #E8E4D8 0%, #DDD8CA 100%) !important;
}

body.morning #scene-apps,
body.morning #scene-community,
body.morning #scene-nexus,
body.morning #scene-gateways {
  background: linear-gradient(160deg, #E2DDD0 0%, #ECEADF 100%) !important;
}

/* Morning text */
body.morning .heading-1,
body.morning .heading-2,
body.morning .heading-3,
body.morning h1, body.morning h2, body.morning h3 {
  color: #1A1917 !important;
}

body.morning .body-lg,
body.morning .body-md,
body.morning .body-sm,
body.morning p {
  color: #3A3630 !important;
}

body.morning .gold-eyebrow {
  color: #7A5C12 !important;
}

/* Morning glass cards */
body.morning .glass-card {
  background: rgba(13, 12, 11, 0.07) !important;
  border-color: rgba(100, 75, 20, 0.18) !important;
  color: #1A1917 !important;
}

body.morning .glass-card .heading-3,
body.morning .glass-card h3,
body.morning .glass-card p,
body.morning .glass-card .body-sm {
  color: #1A1917 !important;
}

/* Morning icons — must be dark on light backgrounds */
body.morning .gateway-icon,
body.morning .app-icon,
body.morning .scene-eyebrow svg,
body.morning svg.icon {
  color: #2A2520 !important;
  fill: #2A2520;
}

/* Morning HUD */
body.morning .hud {
  background: rgba(235, 232, 224, 0.9) !important;
  border-bottom: 1px solid rgba(100, 80, 20, 0.15) !important;
}

body.morning .hud-logo-text,
body.morning .hud-logo-text span {
  color: #1A1917 !important;
}

body.morning .hud-nav-link {
  color: #3A3630 !important;
}

body.morning .hud-nav-link:hover,
body.morning .hud-nav-link.active {
  color: #7A5C12 !important;
}

body.morning .hud-icon-btn {
  color: #3A3630 !important;
  border-color: rgba(42, 40, 37, 0.25) !important;
}

body.morning .hud-icon-btn:hover {
  color: #1A1917 !important;
  border-color: rgba(42, 40, 37, 0.5) !important;
}

body.morning .hud-replay-btn {
  color: #5A5550 !important;
}

/* Morning atmosphere switcher */
body.morning .atmosphere-switcher {
  background: rgba(42, 40, 37, 0.1) !important;
  border-color: rgba(42, 40, 37, 0.2) !important;
}

body.morning .atm-pill {
  color: #4A4540 !important;
}

body.morning .atm-pill.active {
  background: #7A5C12 !important;
  color: #F7F4EF !important;
}

/* Morning method step cards */
body.morning .method-step-card {
  background: rgba(13, 12, 11, 0.07) !important;
  border-color: rgba(100, 75, 20, 0.15) !important;
}

body.morning .method-step-card:hover,
body.morning .method-step-card.active {
  background: rgba(100, 75, 20, 0.12) !important;
}

body.morning .method-step-name {
  color: #1A1917 !important;
}

body.morning .method-step-tagline,
body.morning .method-step-number {
  color: #5A5550 !important;
}

/* Morning gateway / app / community cards */
body.morning .gateway-card,
body.morning .app-card,
body.morning .community-card,
body.morning .track-card {
  background: rgba(13, 12, 11, 0.06) !important;
  border-color: rgba(100, 75, 20, 0.15) !important;
  color: #1A1917 !important;
}

body.morning .gateway-card:hover,
body.morning .app-card:hover {
  background: rgba(100, 75, 20, 0.1) !important;
}

/* Morning transparency note */
body.morning .transparency-note {
  background: rgba(13, 12, 11, 0.05) !important;
  border-color: rgba(100, 75, 20, 0.15) !important;
  color: #5A5550 !important;
}

/* Morning stat number */
body.morning .stat-number {
  color: #7A5C12 !important;
}

/* Morning footer */
body.morning footer {
  background: rgba(13, 12, 11, 0.07) !important;
  border-top-color: rgba(100, 75, 20, 0.15) !important;
}

body.morning .footer-copy,
body.morning footer a {
  color: #5A5550 !important;
}

/* Morning gold thread rail */
body.morning .gold-thread-rail {
  opacity: 0.8;
}

/* Morning scrollbar */
body.morning ::-webkit-scrollbar-track {
  background: #DDD8CA;
}

body.morning ::-webkit-scrollbar-thumb {
  background: rgba(100, 75, 20, 0.3);
}

body.morning ::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 75, 20, 0.55);
}

/* ═══════════════════════════════════════════════════════════
   DUSK ENVIRONMENT
   ═══════════════════════════════════════════════════════════ */

body.dusk,
body.golden-hour {
  background: #140C04 !important;
}

body.dusk #scene-arrival,
body.golden-hour #scene-arrival {
  background: linear-gradient(
    175deg,
    #2D1808 0%,
    #4A2A10 40%,
    #8A4818 75%,
    #C07030 100%
  ) !important;
}

body.dusk #scene-arrival .arrival-main-title,
body.golden-hour #scene-arrival .arrival-main-title,
body.dusk #scene-arrival h1,
body.golden-hour #scene-arrival h1 {
  color: #F7F0E0 !important;
  text-shadow: 0 2px 30px rgba(200, 120, 40, 0.3) !important;
}

body.dusk #scene-arrival .gold-eyebrow,
body.golden-hour #scene-arrival .gold-eyebrow,
body.dusk #scene-arrival .arrival-brand-tagline,
body.golden-hour #scene-arrival .arrival-brand-tagline {
  color: #E8A060 !important;
}

body.dusk #scene-noise,
body.dusk #scene-method,
body.dusk #scene-academy,
body.golden-hour #scene-noise,
body.golden-hour #scene-method,
body.golden-hour #scene-academy {
  background: linear-gradient(175deg, #1C1006 0%, #241408 100%) !important;
}

body.dusk #scene-apps,
body.dusk #scene-community,
body.dusk #scene-nexus,
body.dusk #scene-gateways,
body.golden-hour #scene-apps,
body.golden-hour #scene-community,
body.golden-hour #scene-nexus,
body.golden-hour #scene-gateways {
  background: linear-gradient(160deg, #180E04 0%, #1E1207 100%) !important;
}

/* Dusk HUD */
body.dusk .hud,
body.golden-hour .hud {
  background: rgba(28, 16, 6, 0.94) !important;
  border-bottom-color: rgba(200, 140, 60, 0.2) !important;
}

body.dusk .hud-nav-link:hover,
body.dusk .hud-nav-link.active,
body.golden-hour .hud-nav-link:hover,
body.golden-hour .hud-nav-link.active {
  color: #E8A060 !important;
}

body.dusk .atm-pill.active,
body.golden-hour .atm-pill.active {
  background: #8A4818 !important;
}

/* ═══════════════════════════════════════════════════════════
   ENVIRONMENTAL LIGHT RAYS (Morning + Dusk, in-site)
   Injected per-scene by JS, positioned & animated differently
   ═══════════════════════════════════════════════════════════ */

@keyframes rayShimmer {
  0%, 100% { opacity: var(--ray-opacity, 0.08); }
  50%       { opacity: calc(var(--ray-opacity, 0.08) * 1.6); }
}

body.morning .env-ray {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 225, 140, 0.15) 30%,
    rgba(255, 210, 100, 0.08) 70%,
    transparent 100%
  );
  animation: rayShimmer calc(var(--ray-dur, 4s)) ease-in-out infinite;
}

body.dusk .env-ray,
body.golden-hour .env-ray {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(230, 140, 50, 0.18) 30%,
    rgba(210, 110, 30, 0.09) 70%,
    transparent 100%
  );
  animation: rayShimmer calc(var(--ray-dur, 5s)) ease-in-out infinite;
}

body.night .env-ray,
body.night .env-mote,
body.night .scene-field-backdrop {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   CONTRAST AUDIT OVERRIDES
   All icons/labels/controls must pass WCAG AA in all themes
   ═══════════════════════════════════════════════════════════ */

/* Morning: all SVG icons in cards must be dark */
body.morning .app-card .app-icon,
body.morning .gateway-card .gateway-icon,
body.morning .method-step-number,
body.morning .stat-label,
body.morning .community-platform-label,
body.morning .academy-eyebrow,
body.morning .apps-eyebrow,
body.morning .community-eyebrow,
body.morning .nexus-eyebrow {
  color: #3A3630 !important;
  opacity: 1 !important;
}

/* Morning: status badges */
body.morning .status-badge,
body.morning .track-label {
  background: rgba(100, 75, 20, 0.15) !important;
  color: #4A3A10 !important;
  border-color: rgba(100, 75, 20, 0.3) !important;
}

/* Morning: link text */
body.morning a:not(.btn-primary):not(.btn-secondary):not(.hud-nav-link) {
  color: #6A5010 !important;
}

body.morning a:not(.btn-primary):not(.btn-secondary):not(.hud-nav-link):hover {
  color: #1A1917 !important;
}

/* Morning: gold thread should remain gold but at reduced luminosity */
body.morning .gold-thread-fill {
  background: linear-gradient(to bottom, #8A6520, #C9A84C) !important;
}

/* Morning: Gold icon accent on cards — use dark gold */
body.morning .method-step-icon,
body.morning .gateway-card svg,
body.morning .community-card svg {
  color: #6A5010 !important;
  fill: #6A5010 !important;
}

/* Night theme: keep all original colors (no overrides needed) */

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION — skip camera animation entirely
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .camera-world.descending {
    animation: none !important;
    transform: translateZ(0) translateY(0) rotateX(0) scale(1) !important;
  }

  .descent-obj {
    transition: opacity 0.3s ease !important;
  }

  .thread-path {
    transition: none !important;
  }

  .thread-node {
    animation: none !important;
  }

  .env-mote,
  .env-ray {
    animation: none !important;
    opacity: 0.05 !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE — simplified intro (no 3D camera rig on touch)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* On mobile: still show the field but skip the parallax depth */
  .intro-viewport {
    perspective: none;
  }

  .camera-world.descending {
    animation: mobileDescend 4s ease-out forwards;
  }

  @keyframes mobileDescend {
    0%   { transform: scale(1.08) translateY(20px); opacity: 0.6; }
    100% { transform: scale(1.0) translateY(0); opacity: 1; }
  }

  .world-layer-fore {
    transform: translateZ(0) scale(1);
    height: 25%;
  }

  #obj-journal {
    width: 130px;
    left: 2%;
    top: 20%;
    transform: rotate(-4deg);
  }

  #obj-phone {
    width: 120px;
    right: 2%;
    top: 18%;
    transform: rotate(3deg);
  }

  #obj-label-a,
  #obj-label-b {
    display: none; /* fewer objects on mobile */
  }

  .intro-wordmark-name {
    letter-spacing: 0.1em;
  }
}

@media (max-width: 480px) {
  #obj-journal  { width: 100px; }
  #obj-phone    { width: 90px; }

  .btn-enter {
    padding: 0.875rem 2rem !important;
    font-size: 0.7rem !important;
  }
}