/* Fantasy.cr — shell & signature textures (SculptTax visual system, phase 3 step 2/2)

   Scope: the app SHELL — nav chrome, grain, aurora glows, scrollbars, selection,
   reduced-motion. Loaded after app.css so these rules win the cascade without
   needing !important. Every colour here resolves through the role tokens
   declared in app.css :root (--abyss, --accent, --success, --glass-2, …).
   app.css itself is owned by a sibling step and is not touched from here.
*/

/* ── 1. NAV — rebind the untokenised rgba(4,18,48,.98) to --abyss, glass treatment ── */
nav{
  background:color-mix(in srgb, var(--abyss) 88%, transparent);
  border-bottom:1px solid var(--glass-2);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
}

/* ── 2. GRAIN — fixed full-viewport feTurbulence noise, SculptTax's signature texture ── */
.shell-grain{
  position:fixed;
  inset:0;
  z-index:150; /* above nav (100) and page content, below modal overlays (200+) */
  pointer-events:none;
  opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;
}

/* ── 3. AURORA — two large, low-alpha radial glows pinned to opposite corners ── */
.shell-aurora{
  position:fixed;
  width:64vmax;
  height:64vmax;
  border-radius:50%;
  z-index:0;
  pointer-events:none;
}
.shell-aurora-a{
  top:-22vmax;
  right:-18vmax;
  background:radial-gradient(circle at center, color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 70%);
}
.shell-aurora-b{
  bottom:-22vmax;
  left:-18vmax;
  background:radial-gradient(circle at center, color-mix(in srgb, var(--success) 7%, transparent) 0%, transparent 70%);
}

/* ── 4. SCROLLBARS — thin 9px, translucent thumb, transparent track ──
   Thumb is tinted from --abyss (not literal white): the app's real scroll
   surface is body, whose canvas is the LIGHT --page-canvas token, so a
   translucent-white thumb over a transparent track disappears there. An
   abyss-tinted thumb keeps ~3.4:1 contrast against --page-canvas while
   still reading as translucent glass.
   The html scrollbar-width/-color rule is scoped behind
   `@supports not selector(::-webkit-scrollbar)` because Chromium 121+
   ignores ::-webkit-scrollbar-* on an element that also has
   scrollbar-width/-color set directly on it — without this guard the 9px +
   inset-thumb treatment below would never apply to the root scroller in
   Chrome/Safari. Firefox doesn't support the ::-webkit-scrollbar selector,
   so the guard still lets it receive the standard thin/color properties. */
@supports not selector(::-webkit-scrollbar){
  html{
    scrollbar-width:thin;
    scrollbar-color:color-mix(in srgb, var(--abyss) 50%, transparent) transparent;
  }
}
::-webkit-scrollbar{
  width:9px;
  height:9px;
}
::-webkit-scrollbar-track{
  background:transparent;
}
::-webkit-scrollbar-thumb{
  background-color:rgba(125,151,163,.55);
  border:2px solid transparent;
  border-radius:20px;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{
  background-color:rgba(125,151,163,.8);
}

/* ── 5. SELECTION — accent background, dark text ── */
::selection{
  background:var(--accent);
  color:var(--abyss);
}

/* ── 6. REDUCED MOTION — collapse every animation/transition to effectively instant ──
   Accessibility requirement, not a nicety: the app has animated live-dots and
   auto-advancing marquees/carousels that must stop moving on request. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001s !important;
    animation-delay:0s !important;
    /* Without this, `infinite` animations run ~1000 iterations/sec and strobe
       at refresh rate — a flashing hazard aimed at the users who asked for
       less motion. Capping iterations is what actually stops them. */
    animation-iteration-count:1 !important;
    transition-duration:.001s !important;
    transition-delay:0s !important;
    scroll-behavior:auto !important;
  }
}