@font-face { font-family: 'Oxanium'; src: url('fonts/Oxanium.ttf') format('truetype'); font-weight: 200 800; font-style: normal; font-display: swap; }
:root { color-scheme: normal; font-family: Arial, sans-serif; color: #f1f3f7; background: transparent; }
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 0; overflow: hidden; background: transparent; }
.countdown { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 184px; margin: 0; padding: 36px clamp(28px, 4vw, 40px); overflow: visible; text-align: center; }
.countdown__digits { width: 100%; }
.countdown__decoration { position: absolute; inset: 0; z-index: 2; overflow: visible; pointer-events: none; }
.countdown__corner { position: absolute; top: 24px; left: 24px; width: clamp(36px, 6vw, 82px); height: 38px; opacity: .85; background: linear-gradient(90deg, #fff0cb, #ffaf55 18%, #bb5a20 48%, transparent 100%) top left / 100% 2px no-repeat, linear-gradient(180deg, #fff0cb, #ffaf55 25%, #bb5a20 58%, transparent 100%) top left / 2px 100% no-repeat; filter: drop-shadow(0 0 2px #ffad55); }
.countdown__corner::after { content: ''; position: absolute; inset: -1px; background: inherit; filter: blur(4px); opacity: .45; animation: countdown-corner-glow 8s ease-in-out infinite alternate; }
.countdown__corner--tr { left: auto; right: 24px; transform: scaleX(-1); }
.countdown__corner--bl { top: auto; bottom: 24px; transform: scaleY(-1); }
.countdown__corner--br { top: auto; left: auto; bottom: 24px; right: 24px; transform: scale(-1); }
.countdown__corner--tr::after, .countdown__corner--bl::after { animation-delay: -4s; }
.countdown__firefly { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #ffd18b; box-shadow: 0 0 4px 1px #ff982c, 0 0 9px 2px #ff790c55; opacity: .25; animation: countdown-firefly 19s ease-in-out infinite; }
.countdown__firefly:nth-of-type(1) { left: 9%; top: 66%; --dx: 16px; --dy: -14px; animation-delay: -3s; }
.countdown__firefly:nth-of-type(2) { left: 25%; top: 24%; --dx: -12px; --dy: 13px; animation-duration: 23s; animation-delay: -15s; }
.countdown__firefly:nth-of-type(3) { left: 52%; top: 79%; --dx: 20px; --dy: -10px; animation-duration: 27s; animation-delay: -8s; }
.countdown__firefly:nth-of-type(4) { left: 77%; top: 22%; --dx: -18px; --dy: 14px; animation-duration: 21s; animation-delay: -12s; }
.countdown__firefly:nth-of-type(5) { left: 91%; top: 64%; --dx: -15px; --dy: -13px; animation-duration: 25s; animation-delay: -19s; }
@keyframes countdown-corner-glow { from { opacity: .32; } to { opacity: .65; } }
@keyframes countdown-firefly { 0%, 100% { transform: translate(0, 0); opacity: .12; } 35% { transform: translate(var(--dx), var(--dy)); opacity: .4; } 70% { transform: translate(calc(var(--dx) * -.4), calc(var(--dy) * .5)); opacity: .2; } }
.countdown-motion-paused .countdown__corner::after, .countdown-motion-paused .countdown__firefly, .countdown-motion-paused .countdown__progress::before, .countdown-motion-paused .countdown__progress::after { animation-play-state: paused; }
.countdown__digits { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: start; max-width: 570px; margin: auto; }
.countdown__unit { display: grid; gap: 1px; min-width: 0; }
.countdown__value { font-family: 'Oxanium', monospace; font-weight: 600; font-size: clamp(32px, 9vw, 62px); line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.countdown__colon { color: #657084; font: 500 32px/1.7 'Oxanium', monospace; }
.countdown__label { font-size: 10px; line-height: 1.5; letter-spacing: .1em; color: #bcc5d4; }
.countdown__status { margin-top: 2px; font-size: 10px; line-height: 12px; color: #bcc5d4; }
.countdown__status:empty { display: none; }
.countdown__complete { margin: 0; font-size: clamp(24px, 6vw, 38px); font-weight: bold; }
.countdown__progress { position: relative; isolation: isolate; height: 4px; width: calc(100% - 24px); max-width: 550px; margin: 9px auto 7px; border-radius: 4px; background: rgba(213, 145, 78, .16); }
.countdown__progress::before, .countdown__progress::after { content: ''; position: absolute; left: 0; top: 50%; width: 100%; transform: translateY(-50%); border-radius: inherit; background-repeat: no-repeat; background-size: 28% 100%; pointer-events: none; z-index: 1; animation: countdown-glow-drift 9s ease-in-out infinite alternate; }
.countdown__progress::before { height: 14px; background-image: radial-gradient(ellipse, rgba(255, 161, 54, .65), rgba(255, 122, 27, .22) 45%, transparent 74%); filter: blur(3px); }
.countdown__progress::after { height: 3px; background-image: linear-gradient(90deg, transparent, rgba(255, 218, 156, .45), transparent); }
@keyframes countdown-glow-drift { from { background-position: 0% 50%; opacity: .5; } 50% { opacity: .9; } to { background-position: 100% 50%; opacity: .5; } }
.countdown__fill { position: relative; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #b94c13, #ef821f 60%, #ffc166); }
.countdown__fill::before { content: ''; position: absolute; top: 50%; right: 0; width: 36px; height: 22px; transform: translate(50%, -50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 221, 146, .95), rgba(255, 151, 38, .7) 30%, rgba(255, 103, 20, .25) 57%, transparent 78%); filter: blur(4px); pointer-events: none; z-index: 2; }
.countdown__fill::after { content: ''; position: absolute; top: 50%; right: 0; width: 5px; height: 12px; transform: translate(50%, -50%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: linear-gradient(180deg, #ffb24c, #fff4d7 45%, #fff8e8 55%, #ffb24c); pointer-events: none; z-index: 3; }
@media (prefers-reduced-motion: reduce) { .countdown__progress::before, .countdown__progress::after { animation: none; background-position: 50% 50%; opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .countdown__corner::after { animation: none; opacity: .4; } .countdown__firefly { animation: none; display: none; } }
@media (max-width: 480px) { .countdown { padding: 36px 28px; } .countdown__corner { width: 36px; height: 28px; } .countdown__firefly { box-shadow: 0 0 4px #ff982c; } }
[hidden] { display: none !important; }
noscript { display: block; font-size: 12px; margin-top: 8px; }
@media (max-width: 360px) { .countdown__colon { font-size: 23px; } .countdown__label { font-size: 9px; letter-spacing: .04em; } }
/* One final scene: flash 0–220ms, fade 220–550ms, corners 500–900ms,
   iframe height and margins collapse 900–1400ms (controlled by JS). */
.countdown--last-seconds .countdown__value { animation: countdown-warning 1s ease-in-out infinite; }
@keyframes countdown-warning { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.countdown--ending .countdown__fill::before { animation: countdown-final-flash 220ms ease-out forwards; }
.countdown--ending .countdown__fill::after { animation: countdown-final-hide 1ms 220ms forwards; }
.countdown--ending .countdown__fill { animation: countdown-final-grey 1ms 220ms forwards; }
.countdown--ending .countdown__progress::before,
.countdown--ending .countdown__progress::after { animation: countdown-final-hide 1ms 220ms forwards; }
.countdown--ending .countdown__digits { animation: countdown-final-hide 330ms 220ms ease-out forwards; }
.countdown--ending .countdown__fireflies { animation: countdown-final-hide 220ms forwards; }
.countdown--ending .countdown__progress { animation: countdown-final-hide 200ms 650ms forwards; }
.countdown--ending .countdown__corner { animation: countdown-corners-close 400ms 500ms ease-in-out forwards; }
.countdown--ending .countdown__corner--bl,
.countdown--ending .countdown__corner--br { --corner-direction: -1; }
@keyframes countdown-final-flash { 0% { opacity: 1; scale: 1; } 35% { opacity: 1; scale: 2; } 100% { opacity: 0; scale: 1; } }
@keyframes countdown-final-grey { to { background: #697079; } }
@keyframes countdown-final-hide { to { opacity: 0; } }
@keyframes countdown-corners-close { 75% { opacity: .7; } to { translate: 0 calc(var(--corner-travel) * var(--corner-direction, 1)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .countdown--last-seconds .countdown__value { animation: none; }
}