/* Depth (2026-09-23): shared by Home, About, Pricing, Contact (stars + sections),
   Search / Live (faint stars only), and Login, Billing, auth-action (stars only).
   A two-layer star field drifts at different speeds; elements with class "depth"
   tilt in, sit flat at centre, and recede as they leave. CSS scroll timelines only
   (no JS, no listeners); browsers without them and reduced-motion users get static
   stars and flat sections. Never put "depth" on the home hero row or chart:
   alignSnapshotControl measures their on-screen rects. Keep it off data you read
   while scrolling (trade feeds, forms that extend below the fold). */
.stars { position: fixed; inset: 0 0 auto 0; height: calc(100vh + 360px); pointer-events: none; z-index: 0; }
.stars-far {
  background-image:
    radial-gradient(circle at 236px 193px, rgba(255,255,255,.25) 0 .8px, transparent 1.3px),
    radial-gradient(circle at 48px 47px, rgba(255,255,255,.41) 0 .5px, transparent 1px),
    radial-gradient(circle at 218px 209px, rgba(255,255,255,.33) 0 .7px, transparent 1.2px),
    radial-gradient(circle at 468px 203px, rgba(255,255,255,.26) 0 .6px, transparent 1.1px),
    radial-gradient(circle at 416px 49px, rgba(255,255,255,.39) 0 .6px, transparent 1.1px),
    radial-gradient(circle at 277px 270px, rgba(255,255,255,.43) 0 .6px, transparent 1.1px),
    radial-gradient(circle at 392px 375px, rgba(255,255,255,.28) 0 .5px, transparent 1px),
    radial-gradient(circle at 68px 201px, rgba(255,255,255,.31) 0 .7px, transparent 1.2px),
    radial-gradient(circle at 63px 177px, rgba(255,255,255,.24) 0 .6px, transparent 1.1px),
    radial-gradient(circle at 216px 301px, rgba(255,255,255,.36) 0 .7px, transparent 1.2px),
    radial-gradient(circle at 42px 254px, rgba(255,255,255,.25) 0 .7px, transparent 1.2px),
    radial-gradient(circle at 471px 377px, rgba(255,255,255,.32) 0 .7px, transparent 1.2px);
  background-size: 523px 487px;
}
.stars-near {
  background-image:
    radial-gradient(circle at 411px 198px, rgba(255,255,255,.5) 0 1px, transparent 1.5px),
    radial-gradient(circle at 18px 543px, rgba(255,255,255,.45) 0 1.1px, transparent 1.6px),
    radial-gradient(circle at 353px 706px, rgba(255,255,255,.51) 0 1px, transparent 1.5px),
    radial-gradient(circle at 129px 708px, rgba(255,255,255,.49) 0 .9px, transparent 1.4px),
    radial-gradient(circle at 424px 335px, rgba(255,255,255,.48) 0 1.1px, transparent 1.6px),
    radial-gradient(circle at 171px 126px, rgba(255,255,255,.67) 0 1px, transparent 1.5px);
  background-size: 811px 769px;
}
@keyframes star-drift-far { to { translate: 0 -120px; } }
@keyframes star-drift-near { to { translate: 0 -360px; } }
@keyframes depth-in {
  from { opacity: .6; transform: perspective(1400px) rotateX(6deg) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes depth-out {
  from { opacity: 1; transform: none; }
  to { opacity: .6; transform: perspective(1400px) scale(.96); }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .stars-far { animation: star-drift-far linear both; animation-timeline: scroll(root); }
    .stars-near { animation: star-drift-near linear both; animation-timeline: scroll(root); }
    /* depth-out fills forwards only, so before it starts depth-in's end state wins. */
    .depth {
      animation: depth-in linear both, depth-out linear forwards;
      animation-timeline: view(), view();
      animation-range: cover 0% cover 40vh, cover calc(100% - 40vh) cover 100%;
    }
  }
}
/* Premium sub-pages paint unpositioned content, so the stars sit behind it with
   the existing tape-premium grid backdrop (z-index -1); Home's content is
   positioned above z-index 0. */
.tape-page .stars { z-index: -1; }
/* Search and Live: stars at 30% so the trade cards stay the focus. */
.stars-faint { opacity: .3; }
/* The star field is a dark-theme backdrop only. */
html[data-theme="light"] .stars { display: none; }
/* The stars replace the older halftone dot field and 80px line grid, in dark theme
   only (light mode has no stars and keeps its textures). depth.css loads only on
   star pages, so Login, Terms, Privacy, and auth-action keep theirs. */
html:not([data-theme="light"]) .dots,
html:not([data-theme="light"]) .about-bg-layer,
html:not([data-theme="light"]) .static-bg-layer,
html:not([data-theme="light"]) body.tape-page::before { display: none; }