/* The countdown layer. Everything the client can set on Look > Countdown
   lands here as a data attribute or a custom property on #layer-countdown
   (stage/countdown.js and stage/access.js set them): the style (numerals,
   ring, bar, none), the motion a numeral enters with (data-motion), how it
   leaves (data-exit), size (--count-scale), position (--count-x/--count-y),
   the tick length (--tick-ms), colour and font (--count-color/--count-font),
   an effect (data-fx, --count-fx-color), a sticker set instead of text
   (data-art) and a backdrop clip. Every animation is decorative: with all
   of them removed (prefers-reduced-motion in theme.css, or the Still stage
   switch, #stage[data-still]) the number simply appears and is replaced.
   Nothing here reaches the saved photo. */

#layer-countdown { display: none; align-items: center; justify-content: center; pointer-events: none; overflow: hidden; }
#layer-countdown * { pointer-events: none; }
#stage[data-state="countdown"] #layer-countdown, #stage[data-state="capture"] #layer-countdown, #layer-countdown[data-preview] { display: flex; }

/* The slot: one box holds the numeral, its sticker and the ring, so the
   position and size settings move all of them together. */
#countdown-slot {
  position: absolute; left: var(--count-x, 50%); top: var(--count-y, 50%); translate: -50% -50%;
  display: flex; align-items: center; justify-content: center;
}
#countdown-num {
  font-size: calc(clamp(120px, 32vh, 420px) * var(--count-scale, 1)); font-weight: 800; line-height: 1;
  color: var(--count-color, #fff); font-family: var(--count-font, inherit); text-shadow: 0 4px 40px rgba(0, 0, 0, .7);
  padding: 0 .08em;
}
#countdown-num.mini { font-size: clamp(48px, 12vh, 160px); }
#countdown-num:empty { display: none; }
#countdown-art { display: none; height: calc(min(46vh, 46vw) * var(--count-scale, 1)); width: auto; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .55)); }
#layer-countdown[data-art] #countdown-art[src] { display: block; }
#layer-countdown[data-art] #countdown-num:not(.mini) { position: absolute; visibility: hidden; animation: none !important; }

#countdown-ready {
  position: absolute; left: 50%; top: 18%; translate: -50% -50%; margin: 0; width: 92vw; text-align: center;
  font-size: calc(clamp(32px, 7vw, 120px) * var(--count-scale, 1)); font-weight: 800; line-height: 1.1;
  color: var(--count-color, #fff); font-family: var(--count-font, inherit); text-shadow: 0 4px 40px rgba(0, 0, 0, .7);
}
#layer-countdown[data-ready-only] #countdown-ready { top: var(--count-y, 50%); }

/* Backdrop clip (optional): a muted loop drawn on black, screen-blended over the camera so only the light parts show. */
#countdown-clip { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; }
#layer-countdown[data-clip] #countdown-clip { display: block; }

/* Styles: ring and bar frames around the number. */
#countdown-ring { display: none; position: absolute; width: calc(min(64vh, 64vw) * var(--count-scale, 1)); height: calc(min(64vh, 64vw) * var(--count-scale, 1)); transform: rotate(-90deg); }
#layer-countdown[data-style="ring"] #countdown-ring { display: block; }
#layer-countdown[data-style="ring"] #countdown-num { font-size: calc(clamp(96px, 26vh, 340px) * var(--count-scale, 1)); }
#countdown-ring circle { fill: none; stroke-width: 5; }
#countdown-ring .track { stroke: rgba(255, 255, 255, .25); }
#countdown-ring .sweep { stroke: var(--count-color, #fff); stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: 0; }
#countdown-ring .sweep.go { animation: ring-sweep var(--tick-ms, 1000ms) linear both; }
@keyframes ring-sweep { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 289; } }
#countdown-bar { display: none; position: absolute; left: 10vw; right: 10vw; bottom: 8vh; height: 1.6vh; border-radius: 999px; background: rgba(255, 255, 255, .2); overflow: hidden; }
#layer-countdown[data-style="bar"] #countdown-bar { display: block; }
#countdown-bar-fill { display: block; height: 100%; width: 100%; background: var(--count-color, #fff); transform-origin: left; }
#countdown-bar-fill.run { animation: count-drain var(--count-ms, 3000ms) linear both; }
@keyframes count-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
#layer-countdown[data-style="none"] #countdown-num:not(.mini), #layer-countdown[data-style="none"] #countdown-art { display: none; }

/* Effects on the numeral (data-fx). Outline and glow take the effect colour. */
#layer-countdown[data-fx="glow"] #countdown-num, #layer-countdown[data-fx="glow"] #countdown-ready { text-shadow: 0 0 .12em var(--count-fx-color, #fff), 0 0 .4em var(--count-fx-color, #fff), 0 4px 40px rgba(0, 0, 0, .6); }
#layer-countdown[data-fx="outline"] #countdown-num, #layer-countdown[data-fx="outline"] #countdown-ready { -webkit-text-stroke: .04em var(--count-fx-color, #000); paint-order: stroke fill; }
#layer-countdown[data-fx="shadow"] #countdown-num, #layer-countdown[data-fx="shadow"] #countdown-ready { text-shadow: .06em .06em 0 var(--count-fx-color, #000), 0 4px 40px rgba(0, 0, 0, .5); }
#layer-countdown[data-fx="neon"] #countdown-num, #layer-countdown[data-fx="neon"] #countdown-ready { text-shadow: 0 0 .05em #fff, 0 0 .15em var(--count-fx-color, #fff), 0 0 .5em var(--count-fx-color, #fff), 0 0 1em var(--count-fx-color, #fff); animation: neon-hum 1.6s ease-in-out infinite alternate; }
@keyframes neon-hum { from { opacity: 1; } to { opacity: .82; } }
#layer-countdown[data-fx="glow"] #countdown-art, #layer-countdown[data-fx="neon"] #countdown-art { filter: drop-shadow(0 0 .3em var(--count-fx-color, #fff)) drop-shadow(0 0 1em var(--count-fx-color, #fff)); }

/* Readability: dark plates, white only. */
#stage[data-contrast] #countdown-num, #stage[data-contrast] #countdown-ready { background: rgba(0, 0, 0, .75); padding: 0 .25em; border-radius: .15em; text-shadow: none; -webkit-text-stroke: 0; animation: none; }
#stage[data-contrast] #countdown-ring .track { stroke: rgba(0, 0, 0, .8); }
#stage[data-contrast] #countdown-bar { background: rgba(0, 0, 0, .8); }

/* Preview from the Look panel: the drawer steps aside while the count runs. */
body[data-peek] #admin { opacity: .06; pointer-events: none; animation: none; transition: opacity .25s ease; }