/* ============================================================================
   THE IDENTITY EDIT — Atmosphere & Ceremony stylesheet (rebuilt)
   Shared premium visual system: living background, Identity Card ritual,
   archetype reveal scene, glass materials. Additive to index.html tokens.
   Motion is GPU-only (transform/opacity/filter). Honors reduced-motion.
   ========================================================================== */

:root{
  --gold:#C9A96A;            /* champagne gold — transformation accent */
  --gold-soft:#E6D2A8;
  --ivory:#F7F1E6;
  --pearl:#FBF9F4;
  --glow-warm:rgba(226,196,140,.5);
  --glow-cool:rgba(190,196,214,.32);
  --scene-ease:cubic-bezier(.22,.61,.36,1);
  --scene-ease-soft:cubic-bezier(.4,0,.2,1);
  --scene-ease-slow:cubic-bezier(.3,0,.15,1);
}

/* ---- LIVING BACKGROUND ------------------------------------------------- */
/* Sits behind everything. Animated warm gradient + drifting glow blobs +
   a particle canvas + fine grain. Subtle, always alive, never distracting. */
#atmos{position:fixed;inset:0;z-index:-3;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(120% 105% at 50% 38%, transparent 52%, rgba(76,60,38,.09) 78%, rgba(62,48,30,.17) 100%),
    radial-gradient(140% 120% at 50% -20%, #FDFBF6 0%, #FAF6EF 45%, #F4EFE6 100%);
}
#atmos::before{content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(38% 42% at 22% 30%, rgba(226,196,140,.16), transparent 70%),
    radial-gradient(42% 46% at 82% 68%, rgba(198,190,216,.14), transparent 70%),
    radial-gradient(36% 40% at 62% 18%, rgba(232,214,168,.12), transparent 70%);
  animation:atmosDrift 42s var(--scene-ease-soft) infinite alternate;will-change:transform,opacity}
@keyframes atmosDrift{
  0%{transform:translate3d(0,0,0) scale(1);opacity:.9}
  50%{transform:translate3d(1.5%,-1.5%,0) scale(1.06);opacity:1}
  100%{transform:translate3d(-1.5%,1%,0) scale(1.03);opacity:.92}
}
#atmosParticles{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.95}

/* travelling light — a warm sheen glides across the room now and then,
   then the room rests. Moving light reads as light; standing light on an
   ivory page reads as a stain, so nothing here ever stands still. */
#atmosRays{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
#atmosRays i{position:absolute;top:-14%;bottom:-14%;left:0;opacity:0;
  transform:translateX(-70vw) rotate(0.001deg);filter:blur(12px);
  will-change:transform,opacity}
#atmosRays i:nth-child(1){width:38vw;
  background:linear-gradient(102deg, transparent 36%, rgba(250,236,200,.38) 50%, transparent 64%);
  animation:sheenPass1 34s linear 2s infinite}
#atmosRays i:nth-child(2){width:30vw;
  background:linear-gradient(96deg, transparent 38%, rgba(252,240,210,.3) 50%, transparent 62%);
  animation:sheenPass2 47s linear 16s infinite}
#atmosRays i:nth-child(3){width:26vw;
  background:linear-gradient(107deg, transparent 38%, rgba(248,232,192,.26) 50%, transparent 62%);
  animation:sheenPass3 41s linear 29s infinite}
@keyframes sheenPass1{0%{transform:translateX(-70vw);opacity:0}5%{opacity:1}
  40%{opacity:1}47%{transform:translateX(125vw);opacity:0}100%{transform:translateX(125vw);opacity:0}}
@keyframes sheenPass2{0%{transform:translateX(-70vw);opacity:0}4%{opacity:1}
  33%{opacity:1}39%{transform:translateX(125vw);opacity:0}100%{transform:translateX(125vw);opacity:0}}
@keyframes sheenPass3{0%{transform:translateX(125vw);opacity:0}4%{opacity:1}
  36%{opacity:1}42%{transform:translateX(-70vw);opacity:0}100%{transform:translateX(-70vw);opacity:0}}
#atmosGrain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px}

/* a soft parallax wrapper the engine nudges with the mouse */
.parallax{will-change:transform;transition:transform .5s var(--scene-ease-soft)}

/* the page cannot be scrolled while the ritual is running */
body.ceremony-lock{overflow:hidden}

/* ---- CEREMONY OVERLAY (Processing ritual) ------------------------------ */
#ceremony{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;
  opacity:0;transition:opacity 1.6s var(--scene-ease);
  background:radial-gradient(120% 100% at 50% 44%, rgba(252,248,241,.34) 0%, rgba(246,241,232,.5) 45%, rgba(52,43,31,.14) 100%)}
#ceremony.show{display:flex;opacity:1}
#ceremony.fading{opacity:0;pointer-events:none;transition:opacity 2s var(--scene-ease)}

/* the room dims for the ritual: dusk falls at the edges so the light reads */
.ceremony-dim{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(115% 95% at 50% 42%, transparent 34%, rgba(58,47,33,.10) 62%, rgba(44,35,24,.30) 100%)}

/* stage: generous, overflow stays visible so light can breathe */
.card-stage{position:relative;width:min(78vw,380px);aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;transform:translateZ(0)}

/* first light: a quiet seed the card is born from */
.card-seed{position:absolute;left:30%;top:28%;width:40%;aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(255,247,226,.95), rgba(240,222,180,.4) 45%, transparent 72%);
  opacity:0;transform:scale(.4);filter:blur(12px);will-change:transform,opacity;
  transition:opacity 2.4s var(--scene-ease-slow),transform 3s var(--scene-ease-slow)}
.card-stage.seeded .card-seed{opacity:.9;transform:scale(1);
  animation:seedBreath 4.6s var(--scene-ease-soft) 2s infinite}
@keyframes seedBreath{0%,100%{opacity:.72;transform:scale(.95)}50%{opacity:.95;transform:scale(1.06)}}
.card-stage.materialize .card-seed{animation:none;opacity:0;transform:scale(1.3);
  transition:opacity 2.2s var(--scene-ease-soft),transform 2.8s var(--scene-ease-soft)}

/* halo behind the card, breathing */
.card-halo{position:absolute;inset:-28% -28%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(232,214,168,.42), rgba(232,214,168,.12) 45%, transparent 70%);
  opacity:0;filter:blur(8px);transform:scale(.72);will-change:transform,opacity;
  transition:opacity 2.8s var(--scene-ease-slow)}
.card-stage.materialize .card-halo{opacity:1;animation:haloBreath 8s var(--scene-ease-soft) infinite}
@keyframes haloBreath{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:.85;transform:scale(1.04)}}
.card-stage.luminous .card-halo{animation-duration:5s}
.card-stage.gather .card-halo{animation:none;opacity:.95;transform:scale(.98);
  transition:opacity 1.4s var(--scene-ease),transform 1.6s var(--scene-ease)}
.card-stage.peak .card-halo{animation:none;opacity:1;transform:scale(1.22);
  transition:opacity 1.4s var(--scene-ease),transform 1.8s var(--scene-ease)}

/* motion layers: lift (rise + dissolve) > float (idle breathing) > fig (optical centering) */
.card-lift{position:absolute;inset:0;will-change:transform,opacity;transform:translateY(30px)}
.card-stage.materialize .card-lift{transform:translateY(0);
  transition:transform 3s var(--scene-ease-slow)}
/* the gather: one held moment — the card rises a breath before the release */
.card-stage.gather .card-lift{transform:translateY(-8px);
  transition:transform 1.6s var(--scene-ease)}
.card-stage.materialize .card-lift.dissolve{opacity:0;transform:translateY(-22px) scale(1.14);
  transition:opacity 1.9s var(--scene-ease),transform 2.3s var(--scene-ease)}
.card-float{position:absolute;inset:0;will-change:transform}
.card-stage.float .card-float{animation:cardFloat 9s var(--scene-ease-soft) infinite}
@keyframes cardFloat{0%,100%{transform:translateY(0) rotate(-0.5deg)}50%{transform:translateY(-9px) rotate(0.5deg)}}
/* optical centering: the card body sits at (51.4%,54.2%) of its canvas, so
   pull it back to true center. No oversizing — nothing may ever clip. */
.card-fig{position:absolute;inset:0;transform:translate(-1.4%,-4.2%) scale(1.06);
  filter:drop-shadow(0 26px 60px rgba(150,120,60,.24))}
.card-fig picture{position:absolute;inset:0;display:block}

.idcard{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  will-change:transform,opacity,filter}
.idcard.dormant{opacity:0;filter:blur(18px);transform:scale(.985);
  transition:opacity 2.7s var(--scene-ease-slow),filter 3s var(--scene-ease-slow),transform 3s var(--scene-ease-slow)}
.card-stage.materialize .idcard.dormant{opacity:1;filter:blur(0);transform:scale(1)}
.card-stage.awaken .idcard.dormant{opacity:0;transition:opacity 2.6s var(--scene-ease-soft)}
.idcard.awaken{opacity:0;transform:scale(1.008);
  transition:opacity 2.6s var(--scene-ease-soft),transform 2.6s var(--scene-ease-soft),filter 2.6s var(--scene-ease-slow)}
.card-stage.awaken .idcard.awaken{opacity:1;transform:scale(1)}
.card-stage.luminous .idcard.awaken{filter:brightness(1.34) saturate(1.05)}
.card-stage.gather .idcard.awaken{filter:brightness(1.5) saturate(1.02);
  transition:filter 1.6s var(--scene-ease)}

/* light sweep that lives only on the card itself (masked by the card art) */
.card-sweep{position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity 2s var(--scene-ease);
  -webkit-mask-image:url("identity-card-dormant.png");-webkit-mask-size:contain;
  -webkit-mask-position:center;-webkit-mask-repeat:no-repeat;
  mask-image:url("identity-card-dormant.png");mask-size:contain;
  mask-position:center;mask-repeat:no-repeat}
.card-sweep.show{opacity:1}
.card-sweep::before{content:"";position:absolute;top:-30%;left:-60%;width:44%;height:160%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:rotate(9deg);filter:blur(4px);animation:sweep 11s var(--scene-ease-soft) infinite}
@keyframes sweep{0%{left:-60%}55%,100%{left:130%}}

/* processing whisper line */
.ceremony-line{position:absolute;bottom:12%;left:0;right:0;text-align:center;
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:18px;
  letter-spacing:.4px;color:var(--light);
  opacity:0;transition:opacity 2.2s var(--scene-ease)}
.ceremony-line.show{opacity:1}

/* ---- BLOOM (the light the card opens into; persists across the swap) --- */
#bloom{position:fixed;inset:-20%;z-index:90;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%, rgba(255,250,238,.98) 0%, rgba(249,238,212,.95) 20%,
    rgba(244,228,190,.6) 42%, rgba(244,230,196,.18) 58%, transparent 72%);
  transform:scale(.12);will-change:transform,opacity}
#bloom.grow{opacity:1;transform:scale(2);
  transition:opacity 1.5s var(--scene-ease),transform 2.4s var(--scene-ease)}
#bloom.recede{opacity:0;transform:scale(2.75);
  transition:opacity 3.6s var(--scene-ease-slow),transform 4s var(--scene-ease-slow)}

/* ---- REVEAL SCENE (archetype artwork as hero) --------------------------
   The artwork is never a dropped-in rectangle: its edges dissolve into the
   room (feathered mask), it condenses out of the bloom light, and it lives
   inside its own atmosphere — glow behind, mist in front, light escaping
   through the gap, reflections travelling across it. */
/* bottom padding reserves the scroll-hint's room: it can never overlap the title */
.scene{position:relative;width:100%;min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:40px 20px 96px;overflow:hidden}
.scene-glow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 3s var(--scene-ease-slow);
  background:radial-gradient(62% 52% at 50% 40%, var(--glow-warm), transparent 70%)}
.scene.lit .scene-glow{opacity:1;animation:glowBreath 12s var(--scene-ease-soft) 3s infinite}
@keyframes glowBreath{0%,100%{opacity:.8}50%{opacity:1}}

/* archetype whisper: the locked accent color meets the gold in the outer light,
   never on the artwork itself. Painted inline by ceremony.js per archetype. */
.scene-tint{position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity 4s var(--scene-ease-slow) 1.2s}
.scene.lit .scene-tint{opacity:1;animation:tintBreath 14s var(--scene-ease-soft) 5s infinite}
@keyframes tintBreath{0%,100%{opacity:.7}50%{opacity:1}}

/* motion layers: wrap (parallax, JS transform) > float (idle) > art (emergence) */
.scene-art-wrap{position:relative;width:min(94vw,560px);aspect-ratio:1/1;margin:0 auto;
  will-change:transform}
/* the feather lives on the float layer so art, sweep and sparkles all
   dissolve into the room together — no rectangle lines, ever */
.scene-art-float{position:absolute;inset:0;will-change:transform;
  -webkit-mask-image:radial-gradient(62% 64% at 50% 55%, #000 68%, rgba(0,0,0,.5) 84%, transparent 99%);
  mask-image:radial-gradient(62% 64% at 50% 55%, #000 68%, rgba(0,0,0,.5) 84%, transparent 99%)}
/* deep feather for artwork with a baked (opaque) background: the scene keeps
   the painted atmosphere but its edges melt away well before the canvas ends */
.scene-art-wrap.feather-deep .scene-art-float{
  -webkit-mask-image:radial-gradient(56% 58% at 50% 52%, #000 44%, rgba(0,0,0,.55) 66%, transparent 88%);
  mask-image:radial-gradient(56% 58% at 50% 52%, #000 44%, rgba(0,0,0,.55) 66%, transparent 88%)}
.scene.lit .scene-art-float{animation:artFloat 11s var(--scene-ease-soft) 3.4s infinite}
@keyframes artFloat{0%,100%{transform:translateY(0) rotate(-0.4deg)}50%{transform:translateY(-9px) rotate(0.4deg)}}
.scene-art-float picture{position:absolute;inset:0;display:block}

/* the artwork condenses out of the light: it IS the light at first, then
   slowly remembers its own shape. Edges stay feathered forever. */
.scene-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transform:scale(1.09);filter:blur(26px) brightness(2.05) saturate(.8);
  will-change:transform,opacity,filter;
  transition:opacity 3s var(--scene-ease-slow),transform 4.4s var(--scene-ease-slow),filter 4.4s var(--scene-ease-slow)}
.scene.emerge .scene-art{opacity:1;transform:scale(1);filter:blur(0) brightness(1) saturate(1)}

/* light escaping through the curtains: a warm column breathing behind the gap */
.scene-gap-glow{position:absolute;left:32%;right:32%;top:22%;bottom:4%;pointer-events:none;
  background:radial-gradient(46% 42% at 50% 62%, rgba(244,214,150,.5), rgba(244,214,150,.14) 55%, transparent 75%);
  filter:blur(14px);opacity:0;transform:scale(.9);will-change:transform,opacity;
  transition:opacity 3.2s var(--scene-ease-slow) .8s}
.scene.lit .scene-gap-glow{opacity:1;animation:gapBreath 9s var(--scene-ease-soft) 4s infinite}
@keyframes gapBreath{0%,100%{opacity:.65;transform:scale(.94)}50%{opacity:1;transform:scale(1.03)}}

/* gentle mist drifting at the foot of the scene (Hider atmosphere) */
.scene-mist{position:absolute;left:-12%;right:-12%;height:34%;bottom:-2%;pointer-events:none;
  opacity:0;filter:blur(10px);will-change:transform,opacity;
  transition:opacity 4s var(--scene-ease-slow) 1.6s}
.scene-mist.m1{background:radial-gradient(52% 62% at 34% 68%, rgba(252,248,240,.5), transparent 72%)}
.scene-mist.m2{background:radial-gradient(48% 58% at 68% 74%, rgba(248,241,229,.42), transparent 70%);height:28%}
.scene.lit .scene-mist{opacity:1}
.scene.lit .scene-mist.m1{animation:mistDrift1 30s var(--scene-ease-soft) 2s infinite alternate}
.scene.lit .scene-mist.m2{animation:mistDrift2 38s var(--scene-ease-soft) 2s infinite alternate}
@keyframes mistDrift1{0%{transform:translate3d(-2.5%,0,0) scale(1)}100%{transform:translate3d(3%,-1.5%,0) scale(1.07)}}
@keyframes mistDrift2{0%{transform:translate3d(2.5%,0,0) scale(1.04)}100%{transform:translate3d(-3%,-1%,0) scale(1)}}

/* grounding: a soft floor shadow breathing against the float */
.scene-shadow{position:absolute;left:22%;bottom:0;width:56%;height:6%;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(90,74,50,.2), transparent 70%);
  filter:blur(10px);opacity:0;transition:opacity 3s var(--scene-ease-slow) 1s;will-change:transform,opacity}
.scene.lit .scene-shadow{opacity:1;animation:shadowBreath 11s var(--scene-ease-soft) 3.4s infinite}
@keyframes shadowBreath{0%,100%{transform:scale(1)}50%{transform:scale(.93)}}

/* reflection sweep that lives only on the artwork (masked in JS per archetype) */
.scene-sweep{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 2.4s var(--scene-ease) 1.6s}
.scene.lit .scene-sweep{opacity:1}
.scene-sweep::before{content:"";position:absolute;top:-30%;left:-70%;width:40%;height:160%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);transform:rotate(10deg);
  filter:blur(7px);animation:sceneSweep 15s var(--scene-ease-soft) 5s infinite}
@keyframes sceneSweep{0%{left:-70%}55%,100%{left:140%}}

/* scene sparkles — three species, one per artwork temperament:
   rise (default), firefly (drifts and wanders), crystal (cool shimmer) */
.scene-spark{position:absolute;width:4px;height:4px;border-radius:50%;
  background:radial-gradient(circle at 50% 42%, #FFF8E6 0%, var(--gold-soft) 55%, transparent 75%);
  opacity:0;filter:blur(.2px);box-shadow:0 0 8px 2px rgba(240,220,168,.85);will-change:transform,opacity}
.scene.lit .scene-spark{animation:sparkRise linear infinite}
@keyframes sparkRise{0%{opacity:0;transform:translateY(20px) scale(.6)}
  15%{opacity:.9}85%{opacity:.6}100%{opacity:0;transform:translateY(-130px) scale(1)}}

/* fireflies: gold lights wandering around the artwork's heart, never straight lines */
.scene.lit .scene-spark.firefly{
  animation:fireflyMove var(--fdur,14s) ease-in-out var(--fdelay,0s) infinite alternate,
            fireflyGlow var(--gdur,3.6s) ease-in-out var(--fdelay,0s) infinite}
@keyframes fireflyMove{
  0%{transform:translate(0,0) scale(var(--fs,1))}
  33%{transform:translate(var(--dx1,18px),var(--dy1,-14px)) scale(var(--fs,1))}
  66%{transform:translate(var(--dx2,-12px),var(--dy2,-26px)) scale(var(--fs,1))}
  100%{transform:translate(var(--dx3,10px),var(--dy3,-6px)) scale(var(--fs,1))}}
@keyframes fireflyGlow{0%,100%{opacity:.15}50%{opacity:.95}}

/* crystal shimmer: cooler, brighter pinpoints that hold still and breathe */
.scene-spark.crystal{background:radial-gradient(circle at 50% 42%, #FFFFFF 0%, #F2EEFF 50%, transparent 75%);
  box-shadow:0 0 9px 2px rgba(226,224,244,.9)}
.scene.lit .scene-spark.crystal{animation:crystalBreath var(--gdur,4.4s) ease-in-out var(--fdelay,0s) infinite}
@keyframes crystalBreath{0%,100%{opacity:.1;transform:scale(var(--fs,.9))}50%{opacity:.9;transform:scale(calc(var(--fs,.9)*1.25))}}

/* title: label, then name, then tag — three slow breaths, each earned */
.scene .hero-inner{position:relative;z-index:2;margin-top:20px;opacity:1;transform:none;filter:none;animation:none}
.scene .hero-inner>*{opacity:0;transform:translateY(16px);filter:blur(8px)}
.scene .hero-inner.show>*{opacity:1;transform:translateY(0);filter:blur(0);
  transition:opacity 1.7s var(--scene-ease),transform 1.7s var(--scene-ease),filter 1.7s var(--scene-ease)}
.scene .hero-inner.show>:nth-child(1){transition-delay:0s}
.scene .hero-inner.show>:nth-child(2){transition-delay:.9s}
.scene .hero-inner.show>:nth-child(3){transition-delay:1.9s}

/* the scroll hint waits for the ceremony to hand the page back */
.scene .scroll-hint{animation:none;opacity:0;transition:opacity 1.6s var(--scene-ease)}
.scene .scroll-hint.show{opacity:1}

/* ---- GLASS COMPONENTS (shared) ---------------------------------------- */
.glass{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(16px) saturate(1.1);
  backdrop-filter:blur(16px) saturate(1.1);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 10px 40px -18px rgba(120,96,50,.28),inset 0 1px 0 rgba(255,255,255,.7);border-radius:20px}

/* ---- COMPLETION RITE (shared celebration language) ---------------------
   A quiet glass panel rises from a warm glow, a few crystal sparks drift,
   one held breath, then it lets go. Used by the workbook chapters and,
   later, the trackers. Never confetti. */
#rite{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;transition:opacity .6s var(--scene-ease)}
#rite.show{opacity:1}
#rite.leaving{opacity:0;transition:opacity .7s var(--scene-ease)}
.rite-glow{position:absolute;inset:-10%;opacity:0;transform:scale(.85);will-change:transform,opacity;
  transition:opacity 1.1s var(--scene-ease-slow),transform 1.4s var(--scene-ease-slow)}
#rite.show .rite-glow{opacity:1;transform:scale(1)}
.rite-panel{position:relative;max-width:min(84vw,380px);padding:26px 34px;text-align:center;
  opacity:0;transform:translateY(14px) scale(.97);filter:blur(6px);will-change:transform,opacity,filter;
  transition:opacity .9s var(--scene-ease) .15s,transform 1s var(--scene-ease) .15s,filter 1s var(--scene-ease) .15s}
#rite.show .rite-panel{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
#rite.leaving .rite-panel{opacity:0;transform:translateY(-10px) scale(1.01);filter:blur(4px);
  transition:opacity .6s var(--scene-ease),transform .7s var(--scene-ease),filter .6s var(--scene-ease)}
.rite-label{font-family:'Inter',sans-serif;font-size:10px;font-weight:500;letter-spacing:2.6px;
  text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.rite-line{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:500;line-height:1.45;color:#2D2A26}
.rite-spark{position:absolute;bottom:-6px;width:5px;height:5px;border-radius:18%;
  background:linear-gradient(135deg, #FFFCEE 0%, #E8C67A 60%, #B8964F 100%);
  box-shadow:0 0 7px 1px rgba(240,220,168,.8);opacity:0;will-change:transform,opacity;
  animation-name:riteSpark;animation-timing-function:linear;animation-iteration-count:1;animation-fill-mode:forwards}
@keyframes riteSpark{0%{opacity:0;transform:translateY(6px) rotate(0deg) scale(.6)}
  18%{opacity:.95}80%{opacity:.5}100%{opacity:0;transform:translateY(-72px) rotate(200deg) scale(1)}}

/* celebrate tier: the milestone earns real festivity — bigger light,
   a shower of sparks, a sweep of light across the glass */
#rite.celebrate .rite-glow{transform:scale(1.15)}
#rite.celebrate.show .rite-glow{animation:riteGlowPulse 2.6s var(--scene-ease-soft) .2s infinite alternate}
@keyframes riteGlowPulse{0%{opacity:.8;transform:scale(1.05)}100%{opacity:1;transform:scale(1.2)}}
#rite.celebrate .rite-panel{overflow:hidden}
#rite.celebrate .rite-panel::after{content:"";position:absolute;top:-40%;left:-70%;width:44%;height:180%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:rotate(10deg);filter:blur(5px);animation:riteSweep 1.8s var(--scene-ease-soft) .5s 2}
@keyframes riteSweep{0%{left:-70%}100%{left:130%}}
#rite.celebrate .rite-label{color:#B8964F}

/* grand tier: the light burst — the sanctuary's fireworks */
#riteBurst{position:fixed;inset:0;z-index:118;pointer-events:none;display:flex;
  align-items:center;justify-content:center}
.burst-flash{position:absolute;inset:-15%;opacity:0;transform:scale(.3);will-change:transform,opacity}
#riteBurst.go .burst-flash{animation:burstFlash 2.2s var(--scene-ease) forwards}
@keyframes burstFlash{0%{opacity:0;transform:scale(.3)}14%{opacity:1;transform:scale(1)}
  55%{opacity:.65}100%{opacity:0;transform:scale(1.45)}}
.burst-ring{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;
  border-radius:50%;border:1.5px solid rgba(236,214,164,.85);opacity:0;will-change:transform,opacity}
#riteBurst.go .burst-ring{animation:burstRing 1.5s cubic-bezier(.16,.62,.35,1) .05s forwards}
#riteBurst.go .burst-ring.r2{animation-delay:.3s;animation-duration:1.8s;border-color:rgba(255,246,222,.7)}
@keyframes burstRing{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(9)}}
.burst-light{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:radial-gradient(circle at 50% 42%, #FFFDF6 0%, #F2DFAE 50%, transparent 78%);
  box-shadow:0 0 10px 3px rgba(244,222,164,.9);opacity:0;will-change:transform,opacity}
#riteBurst.go .burst-light{animation:burstFly var(--bd,1.6s) cubic-bezier(.16,.62,.35,1) forwards}
@keyframes burstFly{0%{opacity:0;transform:translate(0,0) scale(.4)}
  10%{opacity:1}70%{opacity:.75}
  100%{opacity:0;transform:translate(var(--bx,0px),var(--by,0px)) scale(var(--bs,1))}}

@media(prefers-reduced-motion:reduce){
  .rite-glow,.rite-panel,#rite{transition:opacity .2s ease}
  .rite-glow{transform:none}
  .rite-panel{transform:none;filter:none}
  .rite-spark,.burst-light,.burst-ring{display:none}
  #rite.celebrate .rite-glow,#rite.celebrate .rite-panel::after{animation:none}
  #riteBurst.go .burst-flash{animation:burstFlash 1s ease forwards}
}

/* ---- AMBIENT SOUND TOGGLE (shared; pages without their own .snd rules) -- */
.snd{position:fixed;right:18px;bottom:18px;z-index:60;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(45,42,38,.08);box-shadow:0 1px 2px rgba(45,42,38,.05);color:#8A7E72;cursor:pointer;
  display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(8px);
  transition:transform .3s var(--scene-ease),box-shadow .3s var(--scene-ease),color .3s var(--scene-ease),opacity .5s var(--scene-ease) .8s}
.snd.ready{opacity:1;transform:translateY(0)}
.snd:hover{color:#2D2A26;box-shadow:0 6px 22px -8px rgba(45,42,38,.14);transform:translateY(-1px)}
.snd:active{transform:translateY(0) scale(.94)}
.snd svg{display:block;overflow:visible}
.snd .wave{opacity:0;transition:opacity .35s var(--scene-ease)}
.snd.on .wave{opacity:1}
.snd .slash{opacity:.9;transition:opacity .35s var(--scene-ease)}
.snd.on .slash{opacity:0}
.snd.on::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid currentColor;
  opacity:.22;animation:sndpulseShared 2.6s var(--scene-ease) infinite}
@keyframes sndpulseShared{0%{transform:scale(1);opacity:.22}70%{opacity:0}100%{transform:scale(1.55);opacity:0}}
@media(prefers-reduced-motion:reduce){.snd.on::after{animation:none;opacity:0}}

/* ---- REDUCED MOTION ---------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  #atmos::before,#atmosRays i,.card-seed,.card-halo,.card-stage.float .card-float,.card-sweep::before,
  .scene.lit .scene-glow,.scene.lit .scene-art-float,.scene-sweep::before,
  .scene.lit .scene-spark,.scene.lit .scene-spark.firefly,.scene.lit .scene-spark.crystal,
  .scene.lit .scene-shadow,.scene.lit .scene-gap-glow,
  .scene.lit .scene-mist,.scene.lit .scene-tint{animation:none!important}
  .scene-tint{opacity:.7;transition:none}
  .card-lift{transform:none}
  .idcard.dormant{filter:none;transform:none}
  .scene-art{opacity:1;transform:none;filter:none}
  .scene-gap-glow,.scene-mist{opacity:.8;transition:none}
  #bloom{display:none}
  .scene .hero-inner>*,.scene .hero-inner.show>*{transition:none;opacity:1;transform:none;filter:none}
}