/* Decorative depth, with all content and native hit areas kept in document flow. */
.hero { isolation: isolate; overflow: clip; }
.hero-light { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-aura { position: absolute; width: min(1200px,110%); height: 100%; left: 50%; bottom: -28%; translate: -50% 0; background: radial-gradient(ellipse at 30% 60%,#c5e8ff80,transparent 48%),radial-gradient(ellipse at 72% 62%,#d4d0ff65,transparent 45%),radial-gradient(ellipse at 51% 76%,#c8f4ef80,transparent 55%); }
.hero-orbits { position: absolute; width: max(100%,1100px); height: 100%; top: 36%; left: 50%; translate: -50% 0; overflow: visible; opacity: .6; mask-image: linear-gradient(transparent 0%,#000 35%,#000 72%,transparent 100%); }
.hero-orbit { stroke-width: 1; transform-origin: 720px 350px; }
.orbit-a { transform: rotate(-9deg); }
.orbit-b { transform: rotate(-5deg); opacity: .7; }
.orbit-c { transform: rotate(-1deg); opacity: .45; }
.hero-content { position: relative; }
.hero-aura { mask-image: radial-gradient(ellipse at 50% 55%,#000 24%,transparent 72%); }

.chapter-light-track { position: absolute; z-index: 3; top: 0; left: 0; height: 2px; width: 100%; background: linear-gradient(90deg,transparent,var(--accent),transparent); opacity: .35; transform-origin: left; pointer-events: none; }
.chapter-reverse .chapter-light-track { transform-origin: right; }
.theme-lime { --accent: #9caf43; }
.theme-red { --accent: #c63f31; }
.theme-mint { --accent: #328c82; }
.theme-dark { --accent: #b8d87f; }
.scene-aura { position: absolute; inset: 10% -8%; z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb,var(--accent) 13%,transparent),transparent 67%); opacity: .7; }
.product-art { perspective: 1600px; }
.preview-tilt { position: relative; transform-origin: 50% 52%; transform-style: preserve-3d; }
.preview-tilt::after { content: ''; position: absolute; inset: 0; border-radius: 20px; pointer-events: none; opacity: 0; background: linear-gradient(125deg,#fff0 20%,#fff3 47%,#fff0 70%); transition: opacity .4s; }
.product-showcase:hover .preview-tilt::after { opacity: .55; }
.theme-dark .preview-tilt::after { opacity: 0; background: linear-gradient(125deg,#fff0 25%,#d4e5ff12 48%,#fff0 70%); }
.product-showcase:focus-visible { outline-offset: 14px; }
.chapter .preview-caption { position: relative; letter-spacing: .08em; }
.map-route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.map-route path { stroke-linecap: round; stroke-linejoin: round; }
.map-route-base { stroke: #fff; stroke-width: 5; opacity: .72; }
.map-route-draw { stroke: #4a8bec; stroke-width: 2; }
.timeline-progress { position: absolute; left: 5px; top: 10px; bottom: 37px; width: 2px; border-radius: 2px; transform-origin: top; background: linear-gradient(#d8f9a5,#acbefa,#9a93de); box-shadow: 0 0 12px #b3d89760; }

/* Brief glints occur on deliberate interaction, never on an idle loop. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .hero-text-link, .editorial-links a { transition: color .25s; }
  .chapter-label .app-icon { transition: transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s; }
  .chapter:has(.product-showcase:hover) .chapter-label .app-icon { transform: translateY(-3px) rotate(-5deg); box-shadow: 0 8px 18px -8px color-mix(in srgb,var(--accent) 45%,transparent); }
}
@media (max-width:999px) {
  .hero-orbits { top: 35%; opacity: .45; }
  .scene-aura { inset: 15% -4%; }
}
@media (max-width:600px) {
  .hero-orbits { width: 850px; top: 38%; height: 75%; opacity: .4; }
  .hero-aura { width: 140%; bottom: -20%; opacity: .65; }
  .chapter-light-track { height: 1px; opacity: .25; }
  .timeline-progress { left: 4px; bottom: 30px; }
  .preview-tilt::after { display: none; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-light,.hero-orbit,.scene-aura,.preview-tilt { transform: none !important; }
  .hero-orbits { opacity: .28; }
  .preview-tilt::after { display: none; }
  .chapter-light-track,.timeline-progress { transform: none !important; }
  .map-route-draw { stroke-dashoffset: 0 !important; }
}

.hero h1 { perspective: 800px; }
.button:hover, .button:active { transform: none; }
.signal-bars { position: relative; }
.signal-scan { position: absolute; inset: 0 auto 0 0; width: 30%; background: linear-gradient(90deg,transparent,#fff9,transparent); opacity: 0; pointer-events: none; }