/* ============================================================================
   Infinitum Cor - ATMOSPHERE (Layer 1 of the One Organism build)
   Grain, aurora, cursor synapse glow, glass, revelation, page continuity.
   Pure progressive enhancement: every effect degrades to the plain page.
   Load AFTER tokens.css/site.css on every content page (not the WebGL pages,
   which carry their own world). See DESIGN-DIRECTION.md.
   ========================================================================== */

/* ---- 1. THE AURORA: slow bioluminescent weather behind everything -------- */
body{position:relative; isolation:isolate;}
body::before{
  content:""; position:fixed; inset:-20%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(42% 34% at 18% 22%, rgba(95,230,206,.10), transparent 70%),
    radial-gradient(38% 30% at 82% 12%, rgba(79,169,138,.09), transparent 70%),
    radial-gradient(50% 40% at 60% 88%, rgba(43,179,163,.07), transparent 72%),
    radial-gradient(30% 26% at 40% 55%, rgba(230,198,106,.035), transparent 75%);
  filter:blur(42px);
}
@media (prefers-reduced-motion: no-preference){
  body::before{animation:aurora-drift calc(var(--breath) * 7) ease-in-out infinite alternate}
}
@keyframes aurora-drift{
  0%  {transform:translate3d(-2.5%,-1.5%,0) scale(1);   opacity:.85}
  50% {transform:translate3d( 1.5%, 2.5%,0) scale(1.06); opacity:1}
  100%{transform:translate3d( 3%, -2%,0)   scale(1.02); opacity:.9}
}

/* ---- 2. THE GRAIN: film over the void ------------------------------------ */
body::after{
  content:""; position:fixed; inset:0; z-index:9990; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* ---- 3. CURSOR SYNAPSE GLOW (js/atmosphere.js writes --mx/--my) ---------- */
.synapse-field{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(560px circle at var(--mx,50vw) var(--my,38vh),
    rgba(95,230,206,.055), rgba(95,230,206,.02) 38%, transparent 62%);
  transition:opacity calc(var(--breath) / 6) ease;
}
@media (hover:none){ .synapse-field{display:none} } /* touch: the aurora is enough */

/* links fire like synapses */
main a:not(.btn), .site-foot a{
  transition:color .35s ease, text-shadow .5s ease;
}
main a:not(.btn):hover, .site-foot a:hover{
  color:var(--teal);
  text-shadow:0 0 14px rgba(95,230,206,.55), 0 0 42px rgba(95,230,206,.18);
}
.btn{transition:box-shadow .45s ease, border-color .35s ease, transform .35s ease}
.btn:hover{box-shadow:0 0 22px rgba(95,230,206,.22), inset 0 0 12px rgba(95,230,206,.06)}

/* ---- 4. GLASS: panes with thickness and light, floating on the weather.
   Same physical language as the home doors: gradient edge lit where the
   sky-light lands, three shadows (contact / near / far). ---------------- */
.card, .panel{
  background:
    linear-gradient(165deg,var(--glass),var(--glass-2)) padding-box,
    linear-gradient(155deg,rgba(255,255,255,.42),rgba(244,237,220,.12) 34%,rgba(244,237,220,.05) 62%,rgba(95,230,206,.28)) border-box;
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 -1px 0 rgba(4,10,7,.5) inset,
    0 2px 4px rgba(4,10,7,.3), 0 10px 22px rgba(4,10,7,.28), 0 28px 56px rgba(4,10,7,.3);
}
.panel{
  background:
    linear-gradient(165deg,var(--glass),var(--glass-2)) padding-box,
    linear-gradient(155deg,rgba(255,255,255,.34),rgba(244,237,220,.1) 34%,rgba(244,237,220,.05) 62%,rgba(95,230,206,.22)) border-box;
}

/* ---- 5. EDITORIAL SCALE: the type carries the room ----------------------- */
.hero .title, .hero h1{
  font-family:var(--font-display);
  font-size:clamp(2.9rem, 8.5vw, 7rem);
  line-height:1.02; letter-spacing:.005em; font-weight:500;
  text-wrap:balance;
}
.hero .subtitle{font-size:clamp(1rem, 1.6vw, 1.2rem); line-height:1.75}
.eyebrow, .tag, .kicker{
  font-family:var(--font-mono); font-size:.68rem;
  letter-spacing:.34em; text-transform:uppercase; color:var(--muted);
}
/* mono section indices: <h2 data-index="01"> renders "01 · " before itself */
h2[data-index]::before{
  content:attr(data-index) " / ";
  font-family:var(--font-mono); font-size:.62em;
  letter-spacing:.3em; color:var(--teal); vertical-align:.18em;
}
main h2{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.7rem, 3.4vw, 2.6rem);
}
/* hairline rules instead of boxes */
main section + section{border-top:1px solid var(--line-2); margin-top:56px; padding-top:44px}

/* ---- 6. REVELATION: content surfaces as you descend ----------------------
   Scroll-driven, zero JS. Older browsers / reduced-motion: content is simply
   there. Never applied to anything crisis-related. ------------------------- */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    main > section, main > .panel, .grid > article{
      animation:surface linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 72%;
    }
    @keyframes surface{
      from{opacity:0; transform:translateY(26px); filter:blur(7px)}
      to  {opacity:1; transform:none;             filter:blur(0)}
    }
    .grid > article:nth-child(2){animation-range:entry 6% entry 78%}
    .grid > article:nth-child(3){animation-range:entry 12% entry 84%}
  }
}
/* crisis path is exempt from all motion, always visible instantly */
.crisis-bar, .crisis-bar *, a[href*="crisis"], a[href*="support"].btn.solid{
  animation:none !important; opacity:1 !important; filter:none !important;
}

/* ---- 7. CONTINUITY: pages are one space (cross-document View Transitions) */
@view-transition{ navigation:auto; }
.nav .brand{view-transition-name:ic-brand}
.hero .title, .hero h1{view-transition-name:ic-title}
::view-transition-old(root){animation:vt-out .32s ease both}
::view-transition-new(root){animation:vt-in  .44s ease both}
@keyframes vt-out{to{opacity:0; filter:blur(6px)}}
@keyframes vt-in {from{opacity:0; filter:blur(6px)}}
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root), ::view-transition-new(root){animation:none}
}

/* ---- 8. BREATH: the organism is never perfectly still -------------------- */
@media (prefers-reduced-motion: no-preference){
  .live-dot{animation:pulse var(--breath) ease-in-out infinite}
  @keyframes pulse{
    0%,100%{box-shadow:0 0 0 4px rgba(107,123,94,.16)}
    50%    {box-shadow:0 0 0 7px rgba(95,230,206,.13)}
  }
}

/* ---- 6. READABILITY: over a living sky, the type carries its own shade.
   Bright cloud can drift behind any line at any moment · every reading
   surface gets a soft pocket of dark so it never washes out.
   (h1.title is gradient-clipped: shadow must ride a filter, not text-shadow,
   or it bleeds through the transparent glyphs.) ---- */
main h1:not(.title), main h2, main h3, main p, main li, main blockquote,
main .stat .n, main .stat .l, main .eyebrow, main .subtitle, main .lede,
main .tag, main .chapnum, main .sec-lede{
  text-shadow:0 1px 3px rgba(8,16,12,.6), 0 2px 16px rgba(8,16,12,.6);
}
.hero .title, main h1.title{
  filter:drop-shadow(0 2px 4px rgba(8,16,12,.65)) drop-shadow(0 4px 18px rgba(8,16,12,.55));
}