/* ============================================================
   Hairy Melon — split-flap countdown
   ============================================================ */
.fp-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:clamp(8px,1.4vw,14px)}
.fp-unit{text-align:center}
.fp-unit .fp-k{display:block;margin-top:16px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fp{--fp-w:148px;--fp-h:164px;position:relative;width:var(--fp-w);height:var(--fp-h);perspective:600px;border-radius:16px;box-shadow:0 10px 0 rgba(15,15,13,.18)}
.fp::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:rgba(245,240,232,.14);z-index:5;pointer-events:none;border-radius:1px}
.fp-half,.fp-flip{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:var(--ink)}
.fp-half.top,.fp-flip-top{top:0;border-radius:16px 16px 0 0}
.fp-half.bottom,.fp-flip-bottom{bottom:0;border-radius:0 0 16px 16px}
.fp-half span,.fp-flip span{position:absolute;left:0;right:0;text-align:center;height:var(--fp-h);font-family:var(--playful-display);font-size:calc(var(--fp-h)*.7);line-height:var(--fp-h);letter-spacing:-.01em;color:var(--cream);font-variant-numeric:tabular-nums}
.fp-half.top span,.fp-flip-top span{top:0}
.fp-half.bottom span,.fp-flip-bottom span{bottom:0}
.fp-flip{z-index:3;backface-visibility:hidden;transform-style:preserve-3d;visibility:hidden}
.fp.flipping .fp-flip{visibility:visible}
.fp-flip-top{transform-origin:bottom;transform:rotateX(0deg)}
.fp-flip-bottom{transform-origin:top;transform:rotateX(90deg)}
.fp-flip::before{content:"";position:absolute;inset:0;background:rgba(15,15,13,.55);opacity:0}
.fp.flipping .fp-flip-top{animation:fpTop .58s cubic-bezier(.42,0,.58,1) forwards}
.fp.flipping .fp-flip-top::before{animation:fpShadeTop .58s cubic-bezier(.42,0,.58,1) forwards}
.fp.flipping .fp-flip-bottom{animation:fpBot .58s cubic-bezier(.42,0,.58,1) forwards}
.fp.flipping .fp-flip-bottom::before{animation:fpShadeBot .58s cubic-bezier(.42,0,.58,1) forwards}
@keyframes fpTop{0%{transform:rotateX(0deg)}50%,100%{transform:rotateX(-90deg)}}
@keyframes fpBot{0%,50%{transform:rotateX(90deg)}100%{transform:rotateX(0deg)}}
@keyframes fpShadeTop{0%{opacity:0}50%,100%{opacity:.7}}
@keyframes fpShadeBot{0%,50%{opacity:.7}100%{opacity:0}}
.fp.sec .fp-half,.fp.sec .fp-flip{background:var(--coral)}
.fp.sec{box-shadow:0 10px 0 var(--coral-deep)}
.fp-sep{align-self:center;display:flex;flex-direction:column;gap:12px;margin:0 clamp(2px,.5vw,6px) 34px}
.fp-sep i{display:block;width:8px;height:8px;border-radius:50%;background:var(--coral)}
@media (max-width:720px){.fp-sep{display:none}}
@media (max-width:900px){.fp{--fp-w:120px;--fp-h:132px}}
@media (max-width:640px){.fp{--fp-w:84px;--fp-h:94px}.fp-unit .fp-k{font-size:9.5px;letter-spacing:.1em;margin-top:12px}}
@media (max-width:400px){.fp{--fp-w:68px;--fp-h:76px}}
@media (prefers-reduced-motion:reduce){.fp.flipping .fp-flip-top,.fp.flipping .fp-flip-bottom,.fp.flipping .fp-flip-top::before,.fp.flipping .fp-flip-bottom::before{animation:none}}