/* Guardian — ceremony module
   Shared primitives for cold-boot, auth ceremonies, install prompt,
   and (later) write-action surfaces.

   Vocabulary:
     .cer-frame   full-viewport canvas (replaces mockup .phone bezel)
     .cer-scan    cyan scanline texture overlay
     .cer-stack   container for the Stack disc (200×200)
     .cer-ring*   expanding sonar rings around the disc
     .cer-dc      centred ceremony disc during auth
     .cer-card    bordered ceremony card (Sentinel call / write surface)
     .wax-*       wax-seal colour palette (mag, gld, brz, red, cmd, gcy)
   Imported by /css/guardian-ceremony.css from the four ceremony pages. */

/* ─── fonts (Cinzel + Share Tech Mono + Cormorant Garamond) ──────── */
/* Already declared in guardian-stations.css — do not re-declare here.
   This module assumes those @font-face rules have run. */

/* ─── reset + canvas ────────────────────────────────────────────── */
.cer-canvas{
  margin:0;padding:0;
  background:radial-gradient(ellipse 75% 50% at 50% 42%,
    #04161e 0%,#020b14 35%,#01060c 72%,#000308 100%);
  font-family:'Share Tech Mono',monospace;
  color:#d6f5ee;
  min-height:100vh;
  overflow:hidden;
  position:relative;
}
.cer-canvas *{box-sizing:border-box}

/* Scanline texture — fills viewport */
.cer-scan{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(180deg,
    transparent 0,transparent 3px,
    rgba(26,184,164,.022) 3px,rgba(26,184,164,.022) 4px);
}

/* Scripture quote at top */
.cer-quot{
  position:absolute;top:80px;left:0;right:0;text-align:center;
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:13px;color:#5a7a72;letter-spacing:.5px;line-height:1.4;
  padding:0 36px;z-index:2;
}

/* ─── Stack disc (idle, full size, breathing halo) ─────────────── */
.cer-stack{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-58%);
  width:200px;height:200px;z-index:3;
}
.cer-stack::after{
  content:'';position:absolute;inset:-25px;border-radius:50%;
  background:radial-gradient(circle,rgba(26,184,164,.25) 0%,transparent 65%);
  animation:cer-halo 2.4s ease-in-out infinite;
}
.cer-ring1,.cer-ring2{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:200px;height:200px;border-radius:50%;
  border:1px solid rgba(58,236,208,.6);opacity:0;
  animation:cer-sonar 3.2s ease-out infinite;
  z-index:2;
}
.cer-ring1{top:calc(50% - 32px)}
.cer-ring2{top:calc(50% - 32px);animation-delay:1.6s}

@keyframes cer-halo{
  0%,100%{opacity:.55;transform:scale(1)}
  50%{opacity:.95;transform:scale(1.08)}
}
@keyframes cer-sonar{
  0%{opacity:.7;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}
}
@keyframes cer-blink{
  0%,100%{opacity:.3}50%{opacity:1}
}

/* ─── CTA + sub-CTA below the disc ──────────────────────────────── */
.cer-cta{
  position:absolute;bottom:200px;left:0;right:0;text-align:center;
  font-family:'Cinzel',serif;font-size:14px;letter-spacing:6px;
  color:#3aecd0;text-shadow:0 0 6px rgba(58,236,208,.65);z-index:3;
  cursor:pointer;user-select:none;
  padding:14px 0;
}
.cer-chev{
  display:inline-block;color:#3aecd0;font-weight:500;
  animation:cer-blink 1.4s ease-in-out infinite;
}
.cer-cta-sub{
  position:absolute;bottom:178px;left:0;right:0;text-align:center;
  font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:3px;
  color:#4a8a7e;z-index:3;
}

/* ─── Wordmark (cold-boot frame V) ──────────────────────────────── */
.cer-wordmark{
  position:absolute;left:0;right:0;text-align:center;
  font-family:'Cinzel',serif;letter-spacing:6px;color:#3aecd0;
  font-size:22px;z-index:3;
  text-shadow:0 0 4px rgba(58,236,208,.55),0 0 10px rgba(26,184,164,.35);
  opacity:0;transition:opacity .35s ease-in;
}
.cer-wordmark.show{opacity:.85}

/* ─── Decree + commenced footer ─────────────────────────────────── */
.cer-decree{
  position:absolute;bottom:34px;left:0;right:0;text-align:center;
  font-family:'Cinzel',serif;font-size:10px;letter-spacing:4px;
  color:#d4a000;text-shadow:0 0 5px rgba(212,160,0,.45);z-index:3;
}
.cer-decree::before,.cer-decree::after{content:'  ─  '}
.cer-commenced{
  position:absolute;bottom:14px;left:0;right:0;text-align:center;
  font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:2.5px;
  color:#7a6020;z-index:3;
}

/* ─── Cold-boot frame states ────────────────────────────────────── */
/* The cold-boot.js driver adds these classes to .cer-canvas to step
   through the I→VI frames. Each frame fades/scales the disc differently. */
.cer-canvas .cb-disc-anchor{
  position:absolute;left:50%;top:42%;
  transform:translate(-50%,-50%);
  z-index:3;
  /* default: invisible (frame I = void) */
  opacity:0;
  width:200px;height:200px;
  transition:transform .35s ease-out,opacity .35s ease-out,width .35s ease-out,height .35s ease-out,top .35s ease-out;
}
/* Frame II — birth (small cyan point) */
.cer-canvas.cb-f2 .cb-disc-anchor{opacity:1;width:8px;height:8px}
/* Frame III — expand (rings out) */
.cer-canvas.cb-f3 .cb-disc-anchor{opacity:1;width:130px;height:130px}
/* Frame IV — materialise (full disc + sigil) */
.cer-canvas.cb-f4 .cb-disc-anchor{opacity:1;width:160px;height:160px}
/* Frame V — wordmark (disc settles, wordmark fades in) */
.cer-canvas.cb-f5 .cb-disc-anchor{opacity:1;width:135px;height:135px;top:35%}
/* Frame VI — reveal (disc scales to HUB position) */
.cer-canvas.cb-f6 .cb-disc-anchor{opacity:.85;width:60px;height:60px;top:12%}

/* ─── Auth ceremony — centred ceremony disc ───────────────────────
   2026-05-22 Vanguard (Admiral observed sigil below viewport on long
   pages): position:absolute anchored disc to body's initial containing
   block — when operator scrolled /bailout, disc fell below visible
   viewport. Switched to position:fixed so disc tracks viewport
   regardless of scroll. Same for .cer-fg, .cer-dl, .cer-dx — all
   ceremony overlay elements need viewport-relative positioning. */
.cer-dc{
  position:fixed;left:50%;top:46%;
  transform:translate(-50%,-50%);
  width:108px;height:108px;
  z-index:5;
  transition:width .25s ease-out,height .25s ease-out,top .25s ease-out,opacity .25s ease-out;
}
.cer-dl{
  position:fixed;left:0;right:0;bottom:80px;text-align:center;
  font-family:'Cinzel',serif;letter-spacing:3px;font-size:13px;
  color:#3aecd0;text-shadow:0 0 6px rgba(58,236,208,.6);z-index:5;
  transition:color .2s ease,opacity .2s ease;
}
.cer-dl.bright{color:#7afbe0;text-shadow:0 0 8px rgba(122,251,224,.85)}
.cer-dx{
  position:fixed;left:0;right:0;bottom:64px;text-align:center;
  font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:2px;
  color:#4a8a7e;z-index:5;
}
.cer-dx.live{color:#3aecd0}

/* Finger glow over the disc during TOUCH frame */
.cer-fg{
  position:fixed;left:50%;top:46%;
  transform:translate(-50%,-12%);
  width:84px;height:96px;pointer-events:none;
  background:radial-gradient(ellipse,rgba(255,225,205,.18),transparent 65%);
  border:.5px solid rgba(255,225,205,.22);
  border-radius:42px 42px 28px 28px;
  z-index:4;opacity:0;
  transition:opacity .15s ease-out;
}
.cer-fg.show{opacity:1}

/* Auth ceremony state machine — body classes toggled by auth-ceremony.js.
   2026-05-17 Sortie 5a post-test: positions moved DOWN into thumb-zone
   (was 46% — too high; touch happens at bottom of phone screen). Outcome
   states (ac-success / ac-failure) added with proper hold times.
   2026-05-17 Sortie 5a post-test #2: cer-canvas is added to body by ceremony
   driver at start, removed at end. Three-colour journey added:
     ac-bloom   = GOLD AMBER halo  (waiting for thumb)
     ac-touch   = TEAL halo         (reading)
     ac-verified= TEAL emanation    (matched)
     ac-commit  = GOLD halo + WORKING banner (POST running)
     ac-success = TEAL emanation + TEAL banner (sealed)
     ac-failure = RED shake + RED banner (denied / failed)
*/
/* Disc position: anchored from BOTTOM so disc bottom-edge never overflows.
   Uses safe-area-inset to respect iPhone home-bar + Android nav-bar.
   bottom anchor + same translate(-50%,-50%) keeps centring. Sortie 5a iter-3. */
.cer-canvas .cer-dc{
  opacity:0;
  transition:opacity .35s ease-out,filter .4s ease-out,width .35s cubic-bezier(.4,.0,.2,1),height .35s cubic-bezier(.4,.0,.2,1),bottom .4s cubic-bezier(.4,.0,.2,1),transform .4s cubic-bezier(.4,.0,.2,1);
  top:auto;
}
.cer-canvas.ac-lift  .cer-dc{opacity:1;width:72px;height:72px;
  bottom:calc(22% + env(safe-area-inset-bottom, 0px))}
.cer-canvas.ac-bloom .cer-dc{opacity:1;width:128px;height:128px;
  bottom:calc(26% + env(safe-area-inset-bottom, 0px));
  filter:drop-shadow(0 0 12px rgba(240,196,64,.78)) drop-shadow(0 0 28px rgba(212,160,0,.45))}
.cer-canvas.ac-touch .cer-dc{opacity:1;width:128px;height:128px;
  bottom:calc(26% + env(safe-area-inset-bottom, 0px));
  transform:translate(-50%,-50%) scale(1.05);  /* subtle press-registered pulse */
  filter:drop-shadow(0 0 12px rgba(122,251,224,.8)) drop-shadow(0 0 26px rgba(58,236,208,.45))}
.cer-canvas.ac-verified .cer-dc{opacity:1;width:128px;height:128px;
  bottom:calc(26% + env(safe-area-inset-bottom, 0px));
  filter:drop-shadow(0 0 14px rgba(122,251,224,.9)) drop-shadow(0 0 30px rgba(58,236,208,.6))}
.cer-canvas.ac-commit .cer-dc{opacity:1;width:128px;height:128px;
  bottom:calc(26% + env(safe-area-inset-bottom, 0px));
  filter:drop-shadow(0 0 14px rgba(240,196,64,.88)) drop-shadow(0 0 30px rgba(212,160,0,.55))}
.cer-canvas.ac-success .cer-dc{opacity:1;width:128px;height:128px;
  bottom:calc(26% + env(safe-area-inset-bottom, 0px));
  filter:drop-shadow(0 0 14px rgba(58,236,208,.9)) drop-shadow(0 0 32px rgba(122,251,224,.6));
  animation:cer-success-breath 1.4s ease-in-out 1}
.cer-canvas.ac-failure .cer-dc{opacity:1;width:128px;height:128px;
  bottom:calc(26% + env(safe-area-inset-bottom, 0px));
  filter:drop-shadow(0 0 14px rgba(255,53,128,.9)) drop-shadow(0 0 32px rgba(255,138,166,.6));
  animation:cer-fail-shake .32s ease-in-out 3}
@keyframes cer-success-breath{
  0%,100%{filter:drop-shadow(0 0 14px rgba(58,236,208,.9)) drop-shadow(0 0 32px rgba(122,251,224,.6))}
  50%{filter:drop-shadow(0 0 22px rgba(58,236,208,1))    drop-shadow(0 0 44px rgba(122,251,224,.85))}
}
@keyframes cer-fail-shake{
  0%,100%{transform:translate(-50%,-50%)}
  25%{transform:translate(calc(-50% - 8px),-50%)}
  75%{transform:translate(calc(-50% + 8px),-50%)}
}
/* Label colour per state — gold during waiting, teal during reading/verified */
.cer-canvas.ac-bloom .cer-dl{color:#ffe9a8;text-shadow:0 0 8px rgba(240,196,64,.8),0 0 16px rgba(212,160,0,.4)}
.cer-canvas.ac-bloom .cer-dx{color:#a08440;text-shadow:0 0 4px rgba(212,160,0,.45)}
.cer-canvas.ac-touch .cer-dl{color:#7afbe0;text-shadow:0 0 8px rgba(122,251,224,.8)}

/* Outcome banner — sits ABOVE the disc (in viewport upper-mid) so disc + banner
   both visible. Slower fade for polish. */
.cer-outcome{
  /* 2026-05-18 Vanguard (Admiral feedback): nudged top 32% → 42%. Was
     floating too high on the screen — out of natural reading-eye-line and
     visually disconnected from the disc activity below. 42% lands it just
     above mid-screen, where the eye expects active content. */
  position:fixed;left:0;right:0;top:42%;text-align:center;z-index:6;
  font-family:'Cinzel',serif;font-size:20px;letter-spacing:5px;font-weight:500;
  padding:18px 24px;opacity:0;transform:translateY(-8px);
  transition:opacity .45s ease,transform .45s cubic-bezier(.4,.0,.2,1);
  pointer-events:none;
}
.cer-outcome.show{opacity:1;transform:translateY(0)}
.cer-outcome.gold{color:#ffe9a8;text-shadow:0 0 10px rgba(240,196,64,.9),0 0 22px rgba(212,160,0,.55)}
.cer-outcome.teal{color:#7afbe0;text-shadow:0 0 10px rgba(122,251,224,.9),0 0 22px rgba(58,236,208,.55)}
.cer-outcome.red {color:#ff8aa6;text-shadow:0 0 10px rgba(255,138,166,.9),0 0 22px rgba(255,53,128,.55)}
.cer-outcome-sub{
  font-family:'Share Tech Mono',monospace;font-size:12px;letter-spacing:2px;
  margin-top:8px;opacity:.85;
}

/* ─── Sortie 5a-bis: AWAITING panel (Admiral feedback 2026-05-18) ─────────
   The gold outcome state during upstream LLM work was too quiet — text only,
   no visual sense of progress. Add a black panel backdrop + estimated-fill
   progress rail when the caller passes awaitingDurationMs. The bar is a
   pure-CSS animation keyed to the duration, so JS doesn't have to tick.

   2026-05-18 Vanguard (Admiral colour feedback): swapped gold → magenta neon
   palette (matches Sentinel escalation hues in guardian-stations.css, hex
   #ff3580 / #ff7a98). Gold reads "gacha game"; magenta reads techno-noir
   and is distinct from teal (success) and red (failure). The text still
   uses the gold .cer-outcome.gold colour because changing that affects
   non-panel awaiting states elsewhere — only the panel chrome shifts. */
.cer-outcome.gold.awaiting{
  /* opacity bumped .92 → .97 per Admiral 2026-05-18 — more solid backdrop
     reads as definitively "panel" rather than translucent overlay */
  background: rgba(8,10,14,.97);
  border: 1px solid rgba(255,53,128,.40);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.55),
              0 0 24px rgba(255,53,128,.22);
  padding: 22px 28px 24px;
  max-width: min(380px, 78vw);
  margin: 0 auto;
  left: 50%;
  right: auto;
  transform: translate(-50%, -8px);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* Override gold text-shadow inside the panel — softer magenta glow keeps
     the headline readable against the black panel without over-saturating */
  color: #ffe0ec;
  text-shadow: 0 0 8px rgba(255,53,128,.85),
               0 0 18px rgba(255,53,128,.45);
}
.cer-outcome.gold.awaiting.show{transform: translate(-50%, 0)}
.cer-progress-rail{
  margin: 16px auto 0;
  width: min(280px, 64vw);
  height: 6px;
  background: rgba(255,53,128,.12);
  border: 1px solid rgba(255,53,128,.30);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.cer-progress-fill{
  position: absolute; top:0; left:0;
  height: 100%; width: 0%;
  background: linear-gradient(90deg,
    rgba(255,53,128,.55) 0%,
    rgba(255,122,152,.95) 50%,
    rgba(255,53,128,.95) 100%);
  box-shadow: 0 0 10px rgba(255,53,128,.65),
              0 0 18px rgba(255,53,128,.40);
  animation: cer-progress-grow var(--cer-progress-dur, 30s)
             cubic-bezier(.25,.65,.55,.95) forwards;
}
/* Subtle sheen sweep — shows the bar is "live" even while filling slowly */
.cer-progress-fill::after{
  content:'';
  position:absolute; top:0; left:0; right:0; bottom:0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.45) 50%,
    transparent 100%);
  animation: cer-progress-sheen 1.8s ease-in-out infinite;
}
@keyframes cer-progress-grow {
  from{width:0%}
  to  {width:100%}
}
@keyframes cer-progress-sheen {
  0%   {transform: translateX(-100%)}
  100% {transform: translateX(100%)}
}

/* ─── Sortie 5a-bis: outcome CTA (Admiral 2026-05-18) ──────────────────
   When ceremony succeeds with a "view full result" path (e.g. CONFLUENCE+
   ARBITER → AUSPEX), render a black panel matching the awaiting style with
   a tappable CTA. Banner persists 8s instead of 2.5s so the operator can
   read AND tap. Magenta accent keeps the ceremony palette coherent. */
.cer-outcome.teal.with-cta{
  /* opacity bumped .92 → .97 per Admiral 2026-05-18 — matches awaiting panel */
  background: rgba(8,10,14,.97);
  border: 1px solid rgba(122,251,224,.40);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.55),
              0 0 24px rgba(122,251,224,.22);
  padding: 22px 28px 20px;
  max-width: min(380px, 78vw);
  margin: 0 auto;
  left: 50%;
  right: auto;
  transform: translate(-50%, -8px);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #d8fff5;
  text-shadow: 0 0 8px rgba(122,251,224,.85),
               0 0 18px rgba(58,236,208,.45);
}
.cer-outcome.teal.with-cta.show{transform: translate(-50%, 0)}
.cer-cta{
  display: inline-block;
  margin-top: 14px;
  padding: 9px 18px 8px;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 3px;
  font-weight: 500;
  text-decoration: none;
  color: #ffe0ec;
  background: rgba(255,53,128,.18);
  border: 1px solid rgba(255,53,128,.55);
  border-radius: 4px;
  text-shadow: 0 0 6px rgba(255,53,128,.65);
  box-shadow: 0 0 10px rgba(255,53,128,.25),
              inset 0 0 8px rgba(255,53,128,.10);
  transition: background .18s ease, box-shadow .18s ease, transform .12s ease;
  cursor: pointer;
}
.cer-cta:hover, .cer-cta:active{
  background: rgba(255,53,128,.32);
  box-shadow: 0 0 16px rgba(255,53,128,.55),
              inset 0 0 12px rgba(255,53,128,.20);
  transform: translateY(-1px);
}

/* Labels — anchored ABOVE the disc, so they sit at lower-mid height */
body.cer-canvas .cer-dl{
  position:fixed;top:auto;bottom:calc(54% + env(safe-area-inset-bottom, 0px));
  left:0;right:0;text-align:center;
  transition:color .35s ease,opacity .35s ease;
}
body.cer-canvas .cer-dx{
  position:fixed;top:auto;bottom:calc(50% + env(safe-area-inset-bottom, 0px));
  left:0;right:0;text-align:center;
  transition:color .35s ease,opacity .35s ease;
}
body.cer-canvas .cer-fg{
  bottom:calc(26% + env(safe-area-inset-bottom, 0px));top:auto;
  transition:opacity .25s ease;
}

/* ─── Ceremony card (Sentinel call / write surface) ─────────────── */
.cer-card{
  position:absolute;left:18px;right:18px;top:32px;
  border-radius:2px;padding:14px 12px;
  border:1px solid;z-index:4;
  transition:opacity .3s ease,filter .3s ease,background .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.cer-card.dim{opacity:.32;filter:blur(.3px)}
.cer-card.hidden{opacity:0;pointer-events:none}
.cer-wax{
  width:18px;height:18px;border-radius:50%;
  margin:0 auto 8px;
  border:.5px solid;
}
.cer-prose{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:13px;text-align:center;line-height:1.4;margin-bottom:10px;
}
.cer-bts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cer-b{
  font-family:'Cinzel',serif;font-size:11px;letter-spacing:1.5px;
  padding:8px 4px;text-align:center;border-radius:1px;
  border:.5px solid;cursor:pointer;user-select:none;
  background:transparent;color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.cer-b.primary{
  box-shadow:0 0 0 1.5px rgba(255,200,220,.85),0 0 10px currentColor;
}
.cer-stmp{
  font-family:'Cinzel',serif;font-size:11px;letter-spacing:2.5px;
  text-align:center;margin-top:8px;
}
.cer-stmp::before,.cer-stmp::after{content:'  ─  '}

/* Wax palette — applied to .cer-card */
.wax-mag{
  background:linear-gradient(180deg,rgba(255,53,128,.18),rgba(255,53,128,.04));
  border-color:rgba(255,53,128,.75);
  box-shadow:inset 0 1px 0 rgba(255,120,170,.55),0 0 14px rgba(255,53,128,.22);
}
.wax-mag .cer-wax{background:radial-gradient(circle,#ff3580,#a02060);border-color:#ff7aa6;box-shadow:0 0 6px rgba(255,53,128,.6)}
.wax-mag .cer-prose{color:#ffc8dc}
.wax-mag .cer-b{border-color:rgba(255,53,128,.6);background:rgba(255,53,128,.1);color:#ffc8dc}
.wax-mag .cer-b.primary{background:rgba(255,53,128,.3);color:#ffe0ec;box-shadow:0 0 0 1.5px rgba(255,200,220,.85),0 0 10px rgba(255,53,128,.85)}
.wax-mag .cer-stmp{color:#ff80a8;text-shadow:0 0 6px rgba(255,53,128,.7)}

.wax-gld{
  background:linear-gradient(180deg,rgba(212,160,0,.2),rgba(212,160,0,.04));
  border-color:rgba(212,160,0,.8);
  box-shadow:inset 0 1px 0 rgba(240,196,64,.55),0 0 14px rgba(212,160,0,.25);
}
.wax-gld .cer-wax{background:radial-gradient(circle,#f0c440,#806000);border-color:#f0c440;box-shadow:0 0 8px rgba(212,160,0,.8)}
.wax-gld .cer-prose{color:#ffe9a8}
.wax-gld .cer-b{border-color:rgba(212,160,0,.6);background:rgba(212,160,0,.1);color:#ffe9a8}
.wax-gld .cer-stmp{color:#f0c440;text-shadow:0 0 6px rgba(212,160,0,.7)}

.wax-brz{
  background:linear-gradient(180deg,rgba(184,116,34,.2),rgba(120,70,16,.04));
  border-color:rgba(184,116,34,.8);
  box-shadow:inset 0 1px 0 rgba(210,150,60,.5),0 0 14px rgba(184,116,34,.22);
}
.wax-brz .cer-wax{background:radial-gradient(circle,#d29440,#7a4810);border-color:#d29440;box-shadow:0 0 6px rgba(184,116,34,.7)}
.wax-brz .cer-prose{color:#f2c898}
.wax-brz .cer-stmp{color:#e4a45c;text-shadow:0 0 6px rgba(184,116,34,.7)}

.wax-red{
  background:linear-gradient(180deg,rgba(255,32,48,.2),rgba(255,32,48,.04));
  border-color:rgba(255,32,48,.8);
  box-shadow:inset 0 1px 0 rgba(255,120,120,.5),0 0 14px rgba(255,32,48,.28);
}
.wax-red .cer-wax{background:radial-gradient(circle,#ff5060,#a01018);border-color:#ff8898;box-shadow:0 0 6px rgba(255,32,48,.8)}
.wax-red .cer-prose{color:#ffb0b8}
.wax-red .cer-stmp{color:#ff8090;text-shadow:0 0 8px rgba(255,32,48,.8)}

.wax-cmd{
  background:linear-gradient(180deg,rgba(212,160,0,.22),rgba(212,160,0,.04));
  border-color:rgba(212,160,0,.85);
  box-shadow:inset 0 1px 0 rgba(240,196,64,.6),0 0 14px rgba(212,160,0,.3);
}
.wax-cmd .cer-prose{color:#ffe9a8}

.wax-gcy{
  background:linear-gradient(180deg,rgba(212,160,0,.2),rgba(26,184,164,.06));
  border-color:rgba(212,160,0,.8);
  box-shadow:inset 0 1px 0 rgba(240,196,64,.55),0 0 14px rgba(26,184,164,.25);
}
.wax-gcy .cer-wax{background:radial-gradient(circle,#3aecd0,#0c6450);border-color:#3aecd0;box-shadow:0 0 6px rgba(58,236,208,.7)}
.wax-gcy .cer-prose{color:#ffe9a8}
.wax-gcy .cer-stmp{color:#f0c440;text-shadow:0 0 8px rgba(212,160,0,.6),0 0 14px rgba(26,184,164,.4)}

/* ─── HALT hazard stripes (for halt ceremony surfaces, Sortie 5) ── */
.cer-haz{
  position:absolute;left:0;right:0;height:3px;z-index:5;
  background:repeating-linear-gradient(135deg,
    #ff2030 0,#ff2030 3px,#1a0408 3px,#1a0408 6px);
  opacity:.65;
}
.cer-haz.top{top:0}
.cer-haz.bot{bottom:0}

/* ─── Install ceremony (§H) ─────────────────────────────────────── */
/* 2026-05-18 Vanguard iOS fix: was bottom:140px which collided with the
 * wordmark+decree+commenced when Safari's URL bar + toolbar ate vertical
 * viewport on iPhone. Now a full-screen centered modal with backdrop;
 * body.has-install-prompt hides the underlying cold-boot static elements
 * so nothing layers underneath. */
.cer-install{
  position:fixed;inset:0;
  display:none;align-items:center;justify-content:center;
  flex-direction:column;
  padding:32px 28px;
  background:radial-gradient(ellipse at center,rgba(2,11,20,.94) 0%,rgba(2,11,20,.98) 70%);
  text-align:center;z-index:50;
  font-family:'Cinzel',serif;
  box-sizing:border-box;
}
.cer-install.show{display:flex}
/* When install prompt is visible, hide the cold-boot static decorations so
 * they don't show through / underneath on small iOS viewports. */
body.has-install-prompt .cer-wordmark,
body.has-install-prompt .cer-decree,
body.has-install-prompt .cer-commenced,
body.has-install-prompt .cb-disc-anchor{
  opacity:0 !important;
  transition:opacity .25s ease;
}
.cer-install-title{
  font-size:12px;letter-spacing:5px;color:#3aecd0;
  text-shadow:0 0 6px rgba(58,236,208,.55);
  margin-bottom:10px;
}
.cer-install-sub{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:12px;color:#9ac0b6;line-height:1.4;margin-bottom:14px;
  letter-spacing:.3px;
}
.cer-install-btn{
  display:inline-block;padding:10px 22px;
  font-family:'Cinzel',serif;font-size:12px;letter-spacing:3px;
  color:#d4a000;border:1px solid rgba(212,160,0,.65);
  background:linear-gradient(180deg,rgba(212,160,0,.15),rgba(212,160,0,.03));
  border-radius:2px;cursor:pointer;
  text-shadow:0 0 5px rgba(212,160,0,.5);
  box-shadow:0 0 12px rgba(212,160,0,.25),inset 0 1px 0 rgba(240,196,64,.4);
}
.cer-install-btn.secondary{
  color:#3aecd0;border-color:rgba(58,236,208,.5);
  background:transparent;box-shadow:none;text-shadow:0 0 4px rgba(58,236,208,.45);
  margin-left:8px;
}
.cer-install-arrow{
  font-size:18px;color:#3aecd0;
  display:inline-block;animation:cer-arrow-bob 1.8s ease-in-out infinite;
  text-shadow:0 0 8px rgba(58,236,208,.7);
}
.cer-install-steps{
  display:flex;flex-direction:column;gap:12px;
  text-align:left;margin:8px auto 18px;max-width:280px;
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:14px;color:#b8d4cc;line-height:1.35;
}
.cer-install-step{
  display:flex;gap:12px;align-items:flex-start;
}
.cer-step-n{
  flex:0 0 22px;height:22px;border-radius:50%;
  border:1px solid rgba(58,236,208,.6);
  background:rgba(58,236,208,.08);
  color:#3aecd0;font-family:'Cinzel',serif;font-style:normal;
  font-size:11px;letter-spacing:0;text-align:center;
  line-height:21px;
}
@keyframes cer-arrow-bob{
  0%,100%{transform:translateY(0);opacity:.5}
  50%{transform:translateY(-4px);opacity:1}
}

/* ─── Reduced motion fallback ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .cer-stack::after,.cer-ring1,.cer-ring2,.cer-chev,.cer-arrow-bob{
    animation-duration:.001s !important;animation-iteration-count:1 !important;
  }
  .cer-canvas .cb-disc-anchor,.cer-dc,.cer-card,.cer-wordmark{
    transition:none !important;
  }
}