/* ceremony.css — the ceremony's stage (kit/ceremony.js, ASGceremony; Move 1 · lane 4; scores/move-1/ceremony.md).
   The face is the host's (--cer-face; /beneath/ sets Newsreader, the crossing's face); the ring wears the Point's colour
   at depth .8 (#CA6513, C9's gold → ember in OKLCH). Colours from Lalita's Mirror: the ink #ECE7DD, the soft #B9B2C9,
   the dim #8D86A0, the pill's rim #4A4260 and its fill rgba(139,130,170,.22). */
.cer{position:relative;--cer-c:#CA6513;--cer-ink:#ECE7DD;--cer-soft:#B9B2C9;--cer-dim:#8D86A0;--cer-rim:#4A4260;
 --cer-face:Lora,Georgia,serif;font-family:var(--cer-face);font-weight:300;color:var(--cer-soft);text-align:center}
.cer [hidden]{display:none!important}
/* the stage takes the focus a hidden control would drop (kit/ceremony.js settle()): programmatic, never a ring */
[data-ceremony][tabindex="-1"]:focus{outline:none}
/* open: the breath ring, a button so a tap or Enter can skip it; its words are its name only */
.cer-breath{position:relative;display:block;width:280px;height:280px;margin:0 auto;padding:0;border:0;border-radius:50%;
 background:none;color:var(--cer-c);cursor:pointer;opacity:0;transition:opacity .8s ease;-webkit-tap-highlight-color:transparent;z-index:2}
.cer-breath.in{opacity:1}.cer-breath.out{opacity:0;pointer-events:none}
.cer-breath:focus-visible{outline:1px solid rgba(185,178,201,.5);outline-offset:-30px}
.cer-breath svg{position:absolute;left:-40px;top:-40px;width:360px;height:360px;overflow:visible;pointer-events:none}
/* word: a plain line */
.cer-form{display:flex;gap:10px;align-items:center;justify-content:center;max-width:360px;margin:18px auto 0;position:relative;z-index:2}
.cer-word{flex:1;min-width:0;min-height:48px;box-sizing:border-box;padding:0 18px;border:1px solid var(--cer-rim);border-radius:999px;
 background:rgba(7,6,12,.5);color:var(--cer-ink);font:300 20px/1.2 var(--cer-face);text-align:center;outline:none;caret-color:#F7C478}
.cer-word:focus{border-color:#8B82AA;box-shadow:0 0 0 3px rgba(139,130,170,.25)}
.cer-offer,.cer-acts button{position:relative;overflow:hidden;min-height:48px;min-width:48px;padding:0 22px;border:1px solid var(--cer-rim);
 border-radius:999px;background:none;color:var(--cer-soft);font:italic 300 16px/1 var(--cer-face);cursor:pointer;-webkit-tap-highlight-color:transparent}
.cer-offer:focus-visible,.cer-acts button:focus-visible{outline:1px solid var(--cer-soft);outline-offset:3px}
/* the frame: the offered word, then the same line cut into the glass (The Mirror.dc.html:133) */
.cer-frame{position:relative;z-index:2;max-width:22ch;margin:20px auto 0;color:var(--cer-ink);font:300 27px/1.35 var(--cer-face);
 overflow-wrap:anywhere;transition:text-shadow .6s ease,color .6s ease}
.cer-frame.cut{text-shadow:0 1px 0 rgba(0,0,0,.9),0 -1px 0 rgba(217,211,224,.18)}
.cer-frame.sink{animation:cer-sink 1.7s ease .2s both}
@keyframes cer-sink{to{opacity:0;transform:translateY(34px) scale(.9)}}
.cer-acts{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;margin:22px auto 0}
.cer-acts button::before{content:'';position:absolute;left:0;top:0;bottom:0;width:calc(var(--asg-hold,0)*100%);
 background:rgba(139,130,170,.22);pointer-events:none}
.cer-acts button>span{position:relative}
.cer-acts .asg-hold-stop{font-style:normal;font-family:'DM Sans',system-ui,sans-serif;font-size:13px;letter-spacing:.06em;color:var(--cer-ink);border-color:#6E6880}
.cer-hint{flex-basis:100%;margin:2px 0 0;font:400 10.5px/1.4 'DM Sans',system-ui,sans-serif;letter-spacing:.16em;color:var(--cer-dim)}
/* whisper: one word, fading in (mirror-state.jsx Settle: 1.6 s), in role=status */
.cer-whisper{position:relative;z-index:2;min-height:1.3em;margin:18px auto 0;color:rgba(244,239,230,.9);font:300 26px/1.3 var(--cer-face);opacity:0}
.cer-whisper.in{animation:cer-in 1.6s ease both}
@keyframes cer-in{from{opacity:0}to{opacity:1}}
.cer-glint{position:fixed;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;z-index:2147483000;pointer-events:none;
 background:#FFFCF4;box-shadow:0 0 12px 4px rgba(247,196,120,.8);animation:cer-glint 2.6s ease-out both}
@keyframes cer-glint{0%{opacity:0;transform:translate(0,0)}20%{opacity:1}100%{opacity:0;transform:translate(14px,-22px)}}
/* answers: the room's material answering (the Living Rite's element answers, E6 §3.1; the Mirror's glass) */
.cer-answer{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.cer-answer i{position:absolute;display:block}
.cer-glass{border-radius:4px;border:1px solid rgba(217,211,224,.16);overflow:hidden;opacity:0;animation:cer-in .9s ease both;
 background:linear-gradient(135deg,rgba(190,182,210,.10) 0%,rgba(217,211,224,.16) 40%,rgba(190,182,210,.08) 100%);
 box-shadow:0 0 60px rgba(217,211,224,.14),0 0 140px rgba(217,211,224,.07)}
.cer-answer .cer-glass .sh{inset:0;background:linear-gradient(135deg,rgba(217,211,224,.07) 0%,transparent 30%,transparent 70%,rgba(217,211,224,.04) 100%);
 animation:cer-shimmer 7s ease-in-out 2}
.cer-answer .cer-glass .sw{top:-20%;left:-60%;width:45%;height:140%;opacity:0;filter:blur(6px);
 background:linear-gradient(105deg,transparent 0%,rgba(217,211,224,.28) 50%,transparent 100%);
 animation:cer-catch 2.2s cubic-bezier(.4,0,.3,1) 1.4s forwards}
@keyframes cer-shimmer{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes cer-catch{0%{opacity:0;transform:translateX(0) skewX(-18deg)}15%{opacity:.9}50%{opacity:1}85%{opacity:.6}
 100%{opacity:0;transform:translateX(340%) skewX(-18deg)}}
.cer-answer .cer-resp{inset:0;opacity:.4;transform-origin:var(--fx) var(--fy);animation-timing-function:ease-in-out;animation-iteration-count:1;
 animation-fill-mode:both;background:radial-gradient(ellipse 105% 72% at var(--fx) var(--fy),var(--g),transparent 74%)}
.cer-pool{animation-name:cer-pool}.cer-settle{animation-name:cer-settle}.cer-flare{animation-name:cer-flare}
@keyframes cer-pool{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(1.07);opacity:.58}}
@keyframes cer-settle{0%,100%{transform:scale(1);opacity:.34}50%{transform:scale(1.015);opacity:.46}}
@keyframes cer-flare{0%,100%{transform:translateY(0) scale(1);opacity:.32}50%{transform:translateY(-16px) scale(1.06);opacity:.58}}
.cer-answer .cer-rip,.cer-answer .cer-rise{left:var(--fx);top:var(--fy);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
 border:1px solid var(--a);opacity:0;animation-timing-function:ease-out;animation-fill-mode:both}
.cer-rip{animation-name:cer-ripple}.cer-rise{animation-name:cer-rise}
@keyframes cer-ripple{0%{transform:scale(1);opacity:.5}100%{transform:scale(34);opacity:0}}
@keyframes cer-rise{0%{transform:translateY(0) scale(1);opacity:.55}100%{transform:translateY(-120px) scale(30);opacity:0}}
.cer-answer .cer-mote{width:2px;height:2px;border-radius:50%;background:var(--a);opacity:0;animation:cer-mote 6s ease-in-out both}
@keyframes cer-mote{0%{opacity:0;transform:translateY(0)}30%{opacity:.42}100%{opacity:0;transform:translateY(-18px)}}
/* paper folds (authored for the bench: no export draws it): a pale sheet folds in half and lies down, 3.6 s */
.cer-answer .cer-paper{left:27%;top:36%;width:46%;height:36%;perspective:800px;animation:cer-out 1.2s ease 2.4s both}
.cer-answer .cer-paper i{left:0;right:0;height:50%;box-sizing:border-box;background:rgba(242,235,221,.12);border:1px solid rgba(242,235,221,.26)}
.cer-answer .cer-paper i:first-child{top:0;transform-origin:50% 100%;animation:cer-fold 1.8s cubic-bezier(.4,0,.2,1) .2s both;backface-visibility:visible}
.cer-answer .cer-paper i:last-child{bottom:0}
@keyframes cer-fold{to{transform:rotateX(-178deg)}}
@keyframes cer-out{to{opacity:0}}
@media (prefers-reduced-motion:reduce){
 .cer-breath,.cer-frame,.cer-whisper{transition:none;animation:none}
 .cer-breath.out{display:none}
 .cer-whisper.in{opacity:1}
 .cer-frame.sink{display:none}
 .cer-glass{animation:none;opacity:1}.cer-answer .cer-glass i{display:none}
 .cer-answer .cer-rip,.cer-answer .cer-rise,.cer-answer .cer-mote,.cer-answer .cer-paper,.cer-glint{display:none}
 .cer-answer .cer-resp{animation:none}}