/* =========================================================================
   Extra Care — Emblem: cinematic formation
   blueprint draws → 4 chevrons bloom/spiral in (staggered) → light-ripple lock
   ========================================================================= */
.em{ display:inline-block; line-height:0; vertical-align:middle; }
.emblem{ display:block; inline-size:100%; block-size:100%; overflow:visible; transform-origin:center; }
.emblem .em-piece{ transform-box:fill-box; transform-origin:center; opacity:1; }
.emblem .em-guides{ opacity:0; }
.emblem .em-ring{ opacity:0; transform-box:fill-box; transform-origin:center; }

/* ---- keyframes ---- */
@keyframes em-gdraw{ from{ stroke-dashoffset:100; } to{ stroke-dashoffset:0; } }
@keyframes em-gfade{ to{ opacity:0; } }
@keyframes em-bloom{
  0%   { opacity:0; transform:scale(.08) rotate(-185deg); filter:blur(7px); }
  45%  { opacity:1; }
  68%  { transform:scale(1.08) rotate(8deg); filter:blur(0); }
  84%  { transform:scale(.98) rotate(-2deg); }
  100% { opacity:1; transform:scale(1) rotate(0); filter:blur(0); }
}
@keyframes em-ring{ 0%{ opacity:0; transform:scale(.25); } 28%{ opacity:.85; } 100%{ opacity:0; transform:scale(2.6); } }
@keyframes em-glow{ 0%,100%{ filter:none; } 50%{ filter:drop-shadow(0 0 14px color-mix(in oklch,var(--accent) 60%,transparent)); } }
@keyframes em-breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.015); } }

/* ---- the reveal ---- */
.emblem.playing .em-guides{ opacity:1; animation:em-gfade .55s ease 2.05s forwards; }
.emblem.playing .em-g{ stroke-dashoffset:100; animation:em-gdraw .85s var(--e-out) forwards; }
.emblem.playing .em-g:nth-child(1){ animation-delay:.04s; }
.emblem.playing .em-g:nth-child(2){ animation-delay:.16s; }
.emblem.playing .em-g:nth-child(3){ animation-delay:.23s; }
.emblem.playing .em-g:nth-child(4){ animation-delay:.32s; }
.emblem.playing .em-g:nth-child(5){ animation-delay:.39s; }
.emblem.playing .em-g:nth-child(6){ animation-delay:.47s; }
.emblem.playing .em-g:nth-child(7){ animation-delay:.55s; }
.emblem.playing .em-g:nth-child(8){ animation-delay:.62s; }
.emblem.playing .em-g:nth-child(9){ animation-delay:.69s; }
.emblem.playing .em-g:nth-child(10){ animation-delay:.76s; }

.emblem.playing .em-piece{ opacity:0; animation:em-bloom 1.15s cubic-bezier(.2,.9,.3,1) both; }
.emblem.playing .em-piece[data-dir="n"]{ animation-delay:.60s; }
.emblem.playing .em-piece[data-dir="e"]{ animation-delay:.78s; }
.emblem.playing .em-piece[data-dir="s"]{ animation-delay:.96s; }
.emblem.playing .em-piece[data-dir="w"]{ animation-delay:1.14s; }
.emblem.playing .em-piece[data-dir="all"]{ animation-delay:.60s; }   /* white/mono single image */
.emblem.playing .em-ring{ animation:em-ring 1.1s var(--e-out) 1.95s forwards; }
.emblem.playing{ animation:em-glow 1.4s ease 1.7s; }

/* ---- settled / static ---- */
.emblem.settled .em-piece{ opacity:1 !important; transform:none !important; filter:none !important; animation:none !important; }
.emblem.settled .em-guides{ opacity:0 !important; animation:none !important; }
.emblem.settled .em-ring{ opacity:0 !important; animation:none !important; }
.emblem.breathe.settled{ animation:em-breathe 6s ease-in-out infinite; }

@media (prefers-reduced-motion:reduce){
  .emblem .em-guides,.emblem .em-ring{ opacity:0 !important; }
  .emblem .em-piece{ opacity:1 !important; transform:none !important; filter:none !important; animation:none !important; }
}