/* ceremonies.css — plasma / CY1 compact seal / CY2 full victory (uplift P6, lock §3e).
   Ported from mocks/uplift-chrome-ceremonies-mock.html — the CE4 ceremony ladder.
   Consumes uplift-foundation .u-* vars/easings (--u-ease-cine/juice/calm, --u-font-zone,
   --u-glass-*) + tokens.css (--kernel/--heat/--heat2/--ink/--ink2/--ink3/--mono/--line).
   Namespaced .cer-* — the shared module (src/ceremonies.js) is the only writer.
   ALL animation lives inside @media (prefers-reduced-motion: no-preference): with
   reduced motion the plasma/flash never paint and the panel + chip land settled.
   Cold base — the gold/plate voice appears ONLY inside the ceremony DOM, never on body. */

:root {
  --cer-line: rgba(150, 160, 220, .16);
  --cer-crit: #ff6b6b;
}

/* ═ tier 1 · PLASMA — in-frame kernel burst ═ */
/* Fixed-position FX layer centred over the anchor (JS sets left/top; translate re-centres). */
.cer-plasma-fx {
  position: fixed;
  z-index: 1180;                 /* above hub chrome (footer 1150), below the CY2 takeover */
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.cer-plasma {
  display: block;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle at 40% 35%, #fff, var(--kernel) 45%, var(--heat2));
  box-shadow: 0 0 30px rgba(255, 178, 77, .8);
}

/* ═ tier 2 · CY1 — compact "GATE SEALED" victory chip ═ */
.cer-sealchip {
  position: fixed;
  left: 50%;
  bottom: 84px;                  /* clears the floating footer (bottom ~10px + edge chips) */
  transform: translateX(-50%);
  z-index: 1180;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 210, 122, .5);
  border-radius: 999px;
  background: rgba(10, 14, 30, .55);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  cursor: pointer;
  box-shadow: 0 0 30px -10px var(--kernel), 0 14px 34px -18px rgba(0, 0, 0, .8);
}
.cer-sealchip .cer-k {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex: none;
  background: radial-gradient(circle at 40% 35%, #fff, var(--kernel) 45%, var(--heat2));
  box-shadow: 0 0 10px rgba(255, 178, 77, .7);
}
.cer-sealchip .cer-seal-t {
  font-family: var(--u-font-zone);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kernel);
}
.cer-sealchip small {
  font: 600 8.5px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink3);
}

/* ═ tier 3 · CY2 — full letterbox victory takeover ═ */
/* Fixed overlay — the window never scrolls; this floats over everything. */
.cer-cy2 {
  position: fixed;
  inset: 0;
  z-index: 1400;                 /* above the entered-stage surface (1200) + Eva panel (1300) */
  display: grid;
  place-items: center;
}
.cer-cy2 .cer-bk {
  position: absolute;
  inset: 0;
  background: rgba(2, 3, 8, .9);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
/* flash layer — invisible unless animated (reduced motion = it never shows) */
.cer-cy2 .cer-flash {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
}
.cer-cy2 .cer-lbar {
  position: absolute;
  left: 0;
  right: 0;
  height: 70px;
  background: rgba(2, 3, 8, .97);
}
.cer-cy2 .cer-lbar.cer-t { top: 0; }
.cer-cy2 .cer-lbar.cer-b { bottom: 0; }
.cer-cy2 .cer-fin { text-align: center; }
.cer-cy2 .cer-kern5 {
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin: 0 auto 14px;
  background: radial-gradient(circle at 40% 35%, #fff, var(--kernel) 45%, var(--heat2));
  box-shadow: 0 0 26px rgba(255, 178, 77, .7);
}
.cer-cy2 .cer-ft {
  font-family: var(--u-font-zone);
  font-size: 25px;
  letter-spacing: .16em;
  color: #fff;
  text-transform: uppercase;
}
.cer-cy2 .cer-fs {
  font: 600 10px var(--mono);
  letter-spacing: .3em;
  color: var(--kernel);
  text-transform: uppercase;
  margin-top: 8px;
}
/* the victory panel — default state IS the final state (reduced motion lands here) */
.cer-cy2 .cer-vic {
  position: relative;
  width: min(470px, 92%);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 0 0 1px rgba(255, 210, 122, .35),
    0 0 40px -14px var(--kernel),
    0 14px 34px -18px rgba(0, 0, 0, .8);
}
.cer-cy2 .cer-vt {
  font-family: var(--u-font-zone);
  font-size: 18px;
  letter-spacing: .12em;
  color: var(--kernel);
  text-transform: uppercase;
  text-align: center;
}
.cer-cy2 .cer-vs {
  font: 600 9px var(--mono);
  letter-spacing: .26em;
  color: var(--ink3);
  text-transform: uppercase;
  text-align: center;
}
.cer-cy2 .cer-crew {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
}
.cer-cy2 .cer-tok {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--kernel);
  background: #0a0e1e;
  overflow: hidden;
  display: grid;
  place-items: center;
  font: 700 10px var(--sans);
  color: var(--ink);
  flex: none;
  box-shadow: 0 0 12px -3px var(--kernel);
}
.cer-cy2 .cer-tok img { width: 100%; height: 100%; object-fit: cover; }
.cer-cy2 .cer-sealbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  font: 650 13px var(--u-font-hud);
  color: #1a1206;
  border: 0;
  border-radius: 999px;
  padding: 10px 26px;
  background: linear-gradient(180deg, var(--kernel), var(--heat));
  box-shadow: 0 0 28px -8px var(--heat);
  cursor: pointer;
  align-self: center;
}
/* CSS-drawn ring glyph on the seal button (glyph over emoji) */
.cer-cy2 .cer-ring {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  flex: none;
  border: 2px solid #1a1206;
  position: relative;
}
.cer-cy2 .cer-ring::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: #1a1206;
}
.cer-cy2 .cer-dismiss {
  align-self: center;
  min-height: 30px;
  font: 600 9.5px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink3);
  border: 1px solid var(--cer-line);
  border-radius: 999px;
  padding: 4px 14px;
  background: transparent;
  cursor: pointer;
}
.cer-cy2 .cer-dismiss:hover { color: var(--ink2); }

/* ═ MOTION — every keyframe lives inside this gate. Reduced motion = instant final
   states (no plasma, no flash; chip + panel + bars + crew land settled). ═ */
@media (prefers-reduced-motion: no-preference) {
  /* tier 1 — plasma burst */
  .cer-plasma.cer-go { animation: cerPlasma .95s var(--u-ease-cine) forwards; }
  @keyframes cerPlasma {
    0%   { opacity: 0; transform: scale(.3); }
    35%  { opacity: 1; transform: scale(1.25); }
    60%  { transform: scale(.9); }
    100% { opacity: 0; transform: scale(3.2); filter: blur(6px); }
  }

  /* tier 2 — compact seal chip springs in */
  .cer-sealchip.cer-on { animation: cerChipIn .5s var(--u-ease-juice); }
  @keyframes cerChipIn {
    from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.8); }
    to   { opacity: 1; transform: translateX(-50%); }
  }
  .cer-sealchip { transition: transform .28s var(--u-ease-juice); }
  .cer-sealchip:hover { transform: translateX(-50%) scale(1.04); }
  .cer-sealchip:active { transform: translateX(-50%) scale(.94); }

  /* tier 3 — CY2 choreography · flash 0→1.5s · panel resolves at 1.25s · bars sweep
     cubic-bezier(.2,.6,.2,1) from 1.55s (80ms stagger) · crew pops from 1.9s (120ms) */
  .cer-cy2.cer-run .cer-bk { animation: cerBk .4s var(--u-ease-calm) backwards; }
  @keyframes cerBk { from { opacity: 0; } to { opacity: 1; } }

  .cer-cy2.cer-run .cer-flash { animation: cerFlash 1.5s ease forwards; }
  @keyframes cerFlash { 0% { opacity: 0; } 8% { opacity: 1; } 72% { opacity: 1; } 100% { opacity: 0; } }

  .cer-cy2.cer-run .cer-lbar.cer-t { animation: cerLbarT 1.5s var(--u-ease-cine) forwards; }
  @keyframes cerLbarT { 0% { transform: translateY(-100%); } 10%, 78% { transform: none; } 100% { transform: translateY(-100%); } }

  .cer-cy2.cer-run .cer-lbar.cer-b { animation: cerLbarB 1.5s var(--u-ease-cine) forwards; }
  @keyframes cerLbarB { 0% { transform: translateY(100%); } 10%, 78% { transform: none; } 100% { transform: translateY(100%); } }

  .cer-cy2.cer-run .cer-kern5 { animation: cerKernIn 1.5s var(--u-ease-cine) forwards; }
  @keyframes cerKernIn { 0% { transform: scale(.4); } 14% { transform: scale(1.15); } 26%, 100% { transform: scale(1); } }

  .cer-cy2.cer-run .cer-vic { animation: cerVicIn .7s var(--u-ease-cine) 1.25s backwards; }
  @keyframes cerVicIn {
    from { opacity: 0; transform: translateY(36px) scale(.97); filter: blur(8px); }
    to   { opacity: 1; transform: none; filter: none; }
  }

  /* crew tokens pop in with a 120ms stagger from 1.9s */
  .cer-cy2.cer-run .cer-crew .cer-tok { animation: cerTokPop .5s cubic-bezier(.34, 1.8, .5, 1) backwards; }
  .cer-cy2.cer-run .cer-crew .cer-tok:nth-child(1) { animation-delay: 1.90s; }
  .cer-cy2.cer-run .cer-crew .cer-tok:nth-child(2) { animation-delay: 2.02s; }
  .cer-cy2.cer-run .cer-crew .cer-tok:nth-child(3) { animation-delay: 2.14s; }
  .cer-cy2.cer-run .cer-crew .cer-tok:nth-child(4) { animation-delay: 2.26s; }
  @keyframes cerTokPop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }

  .cer-cy2 .cer-sealbtn { transition: transform .28s var(--u-ease-juice); }
  .cer-cy2 .cer-sealbtn:hover { transform: scale(1.07); }
  .cer-cy2 .cer-sealbtn:active { transform: scale(.9); }
}