/* DuelVerse Ceremonies — shared start/end ceremony styling.
   Pure presentation: transform/opacity only, no layout cost.
   Lite (html[data-experience="lite"]) and prefers-reduced-motion
   collapse everything to instant — see the kill-switch block below. */

/* ---------- splash (start ceremony) ---------- */
.ceremony-splash{
  position:absolute;inset:0;z-index:8;display:grid;place-items:center;
  text-align:center;border-radius:20px;padding:16px;
  background:rgba(6,4,12,.58);backdrop-filter:blur(2px);
  animation:cerFadeIn .25s ease both;
}
.ceremony-splash.ceremony-out{animation:cerFadeOut .18s ease both}
.ceremony-splash-inner{display:grid;justify-items:center;gap:7px}
.ceremony-splash-crown{width:92px;filter:drop-shadow(0 6px 18px rgba(124,58,237,.55))}
.ceremony-splash-game{
  font-size:clamp(1.7rem,5.5vw,2.4rem);font-weight:800;line-height:1.05;
  text-shadow:0 6px 24px rgba(124,58,237,.6);animation:cerRise .45s .30s cubic-bezier(.2,.85,.3,1) both;
}
.ceremony-splash-vs{
  color:var(--accent-2);font-weight:700;font-size:1.08rem;
  animation:cerRise .45s .45s cubic-bezier(.2,.85,.3,1) both;
}
.ceremony-handoff{
  margin-top:8px;padding:7px 18px;border-radius:999px;color:#fff;font-weight:800;
  background:linear-gradient(160deg,#8b5cf6,var(--accent) 60%,#6d28d9);
  box-shadow:0 0 22px rgba(124,58,237,.65);
  opacity:0;animation:cerChip .5s 1.35s cubic-bezier(.2,.9,.3,1.3) both;
}
.ceremony-skip{
  position:absolute;left:0;right:0;bottom:10px;font-size:.78rem;
  color:rgba(231,226,245,.72);animation:cerFadeIn .4s 1.15s ease both;
}
/* fast ceremony (Play again / New game restarts) */
.ceremony-fast .ceremony-splash-game{animation-delay:.10s}
.ceremony-fast .ceremony-splash-vs{animation-delay:.18s}
.ceremony-fast .ceremony-handoff{animation-delay:.50s}
.ceremony-fast .ceremony-skip{display:none}
.ceremony-fast .ceremony-crown-path{animation-duration:.45s;animation-delay:.03s}
.ceremony-fast .ceremony-crown-band{animation-duration:.3s;animation-delay:.3s}
.ceremony-fast .ceremony-crown-fill{animation-delay:.3s}
.ceremony-fast .ceremony-crown-token{animation-delay:.42s}

/* ---------- crown artwork (logo-tied: purple crown, one gold token) ---------- */
.ceremony-crown{width:100%;height:auto;display:block}
.ceremony-crown-path{
  fill:none;stroke:#a78bfa;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:100;stroke-dashoffset:100;animation:cerDraw .75s .12s ease forwards;
}
.ceremony-crown-band{
  fill:none;stroke:#e8b34b;stroke-width:4;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100;animation:cerDraw .4s .62s ease forwards;
}
.ceremony-crown-fill{
  fill:#7c3aed;fill-opacity:0;stroke:none;animation:cerFill .5s .55s ease forwards;
}
.ceremony-crown-token{
  fill:#e8b34b;opacity:0;transform:scale(.3);transform-box:fill-box;transform-origin:center;
  animation:cerToken .4s .82s cubic-bezier(.2,.9,.3,1.45) forwards;
}
.ceremony-token-a,.ceremony-token-b{
  stroke-width:3;opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center;
}
.ceremony-token-a{fill:#7c3aed;stroke:#a78bfa;animation:cerToken .45s .10s cubic-bezier(.2,.9,.3,1.4) forwards}
.ceremony-token-b{fill:#e8b34b;stroke:#f5d07a;animation:cerToken .45s .24s cubic-bezier(.2,.9,.3,1.4) forwards}

/* ---------- board assembly (start) ---------- */
.ceremony-assemble.cer-game-pool{animation:cerSettle .7s ease both}
.ceremony-assemble.cer-game-oware [data-cer]{
  animation:cerDrop .55s cubic-bezier(.25,.9,.35,1.22) both;
  animation-delay:calc(var(--cer-i,0)*45ms);
}
.ceremony-assemble.cer-game-ludo [data-cer]{
  animation:cerFadeUp .5s ease both;
  animation-delay:calc(var(--cer-i,0)*14ms);
}
.ceremony-assemble.cer-game-draughts .dk-sq[data-cer]{
  animation:cerFade .45s ease both;
  animation-delay:calc(var(--cer-i,0)*10ms);
}
.ceremony-assemble.cer-game-draughts .dk-piece[data-cer]{
  animation:cerDrop .5s cubic-bezier(.25,.9,.35,1.22) both;
  animation-delay:calc(var(--cer-i,0)*10ms + 120ms);
}
.ceremony-assemble.cer-game-whot [data-cer]{
  animation:cerDeal .5s cubic-bezier(.2,.8,.3,1.08) both;
  animation-delay:calc(var(--cer-i,0)*50ms);
}
.ceremony-assemble.cer-game-chess .sq[data-cer]{
  animation:cerFade .4s ease both;
  animation-delay:calc(var(--cer-i,0)*9ms);
}
.ceremony-assemble.cer-game-chess .pc[data-cer]{
  animation:cerPop .45s cubic-bezier(.2,.9,.3,1.3) both;
  animation-delay:calc(var(--cer-i,0)*9ms + 90ms);
}

/* ---------- result dressing (end ceremony) ---------- */
.ceremony-mark{width:76px;margin:0 auto 2px;filter:drop-shadow(0 6px 18px rgba(124,58,237,.5))}
.ceremony-mark-lose{opacity:.55;filter:grayscale(.55)}
.ceremony-mark-lose .ceremony-crown-path{stroke-dashoffset:0;animation:none}
.ceremony-mark-lose .ceremony-crown-band{stroke-dashoffset:0;animation:none}
.ceremony-mark-lose .ceremony-crown-fill{fill-opacity:.3;animation:none}
.ceremony-mark-lose .ceremony-crown-token{opacity:.7;transform:none;animation:none}
.board-banner.ceremony-result>*{animation:cerRise .55s cubic-bezier(.2,.85,.3,1) both}
.board-banner.ceremony-result>*:nth-child(2){animation-delay:.08s}
.board-banner.ceremony-result>*:nth-child(3){animation-delay:.16s}
.board-banner.ceremony-result>*:nth-child(4){animation-delay:.24s}
.ceremony-board-dim{filter:brightness(.7) saturate(.75);transition:filter .5s ease}

/* ---------- keyframes ---------- */
@keyframes cerFadeIn{from{opacity:0}to{opacity:1}}
@keyframes cerFadeOut{to{opacity:0}}
@keyframes cerRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes cerChip{
  0%{opacity:0;transform:translateY(8px) scale(.8)}
  55%{opacity:1;transform:translateY(0) scale(1.07)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes cerDraw{to{stroke-dashoffset:0}}
@keyframes cerFill{to{fill-opacity:.45}}
@keyframes cerToken{to{opacity:1;transform:scale(1)}}
@keyframes cerDrop{from{opacity:0;transform:translateY(-16px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes cerFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes cerFade{from{opacity:.15}to{opacity:1}}
@keyframes cerPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes cerDeal{
  from{opacity:0;transform:rotateY(72deg) translateY(-10px)}
  to{opacity:1;transform:rotateY(0) translateY(0)}
}
@keyframes cerSettle{
  from{opacity:.35;transform:scale(1.022);filter:brightness(1.22)}
  to{opacity:1;transform:scale(1);filter:brightness(1)}
}

/* ---------- calm kill-switches: Lite + reduced motion ---------- */
html[data-experience="lite"] .ceremony-splash{display:none!important}
html[data-experience="lite"] .ceremony-assemble [data-cer],
html[data-experience="lite"] .ceremony-assemble.cer-game-pool,
html[data-experience="lite"] .board-banner.ceremony-result>*{animation:none!important}
html[data-experience="lite"] .ceremony-crown-path,
html[data-experience="lite"] .ceremony-crown-band{stroke-dashoffset:0;animation:none!important}
html[data-experience="lite"] .ceremony-crown-fill{fill-opacity:.45;animation:none!important}
html[data-experience="lite"] .ceremony-crown-token,
html[data-experience="lite"] .ceremony-token-a,
html[data-experience="lite"] .ceremony-token-b{opacity:1;transform:none;animation:none!important}
@media (prefers-reduced-motion:reduce){
  .ceremony-splash{display:none!important}
  .ceremony-assemble [data-cer],
  .ceremony-assemble.cer-game-pool,
  .board-banner.ceremony-result>*{animation:none!important}
  .ceremony-crown-path,
  .ceremony-crown-band{stroke-dashoffset:0;animation:none!important}
  .ceremony-crown-fill{fill-opacity:.45;animation:none!important}
  .ceremony-crown-token,
  .ceremony-token-a,
  .ceremony-token-b{opacity:1;transform:none;animation:none!important}
}