/*
 * The event microsite's opening: a gift being unwrapped.
 * Brief: "Unbox the Holidays — Microsite Design Brief", section "The opening".
 * Driven by js/showcase-unwrap.js, which decides WHETHER it plays; this file only
 * says how. SVG + CSS, no library: it has to be cheap on a phone on venue wifi.
 *
 * Timeline (ms): 0 wobble · 450 bow falls · 900 lid lifts, glow · 1100 sparkles ·
 * 1500 title writes in · 2400 overlay fades. Every step keys off .su-play on the
 * overlay, so .su-done (a tap to skip) can jump every step to its end state at once.
 */
.su-overlay {
    --su-paper: #F5EFE6;
    --su-box: #5A1E2B;
    --su-box-lid: #6B2535;
    --su-box-shade: #43141F;
    --su-gold: #C6A15B;
    --su-gold-light: #E3C98E;
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--su-paper);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 500ms ease, visibility 0s linear 500ms;
}
.su-overlay.su-gone { opacity: 0; visibility: hidden; pointer-events: none; }

.su-art { width: min(64vw, 260px); height: auto; overflow: visible; }

.su-title {
    margin: 8px 0 0;
    font-family: 'Pinyon Script', 'Great Vibes', cursive;
    font-weight: 400;
    font-size: clamp(40px, 12vw, 64px);
    line-height: 1.1;
    color: var(--su-box);
    text-align: center;
    clip-path: inset(0 100% 0 0);
}
.su-skip {
    position: absolute;
    bottom: calc(24px + env(safe-area-inset-bottom));
    font: 500 13px/1 'Public Sans', system-ui, sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7A6A5E;
    opacity: 0;
}

/* SVG parts rotate about their own box, not the viewport's origin. */
.su-box, .su-lid, .su-loop, .su-knot, .su-tail, .su-glow, .su-spark {
    transform-box: fill-box;
}
.su-box   { transform-origin: 50% 100%; }
.su-lid   { transform-origin: 0% 100%; }
.su-loop-l { transform-origin: 100% 100%; }
.su-loop-r { transform-origin: 0% 100%; }
.su-knot, .su-spark { transform-origin: 50% 50%; }
.su-tail  { transform-origin: 50% 0%; }
.su-glow  { opacity: 0; }
.su-spark { opacity: 0; }

/* ── The play ─────────────────────────────────────────────────────────── */
.su-play .su-box    { animation: su-wobble 480ms ease-in-out 1; }
.su-play .su-loop-l { animation: su-loop-l 520ms cubic-bezier(.5,0,.75,0) 450ms forwards; }
.su-play .su-loop-r { animation: su-loop-r 520ms cubic-bezier(.5,0,.75,0) 450ms forwards; }
.su-play .su-knot   { animation: su-fade-out 300ms ease 600ms forwards; }
.su-play .su-tail   { animation: su-tail 500ms ease-in 500ms forwards; }
.su-play .su-lid    { animation: su-lid 700ms cubic-bezier(.2,.8,.2,1) 900ms forwards; }
.su-play .su-glow   { animation: su-glow 900ms ease 950ms forwards; }
.su-play .su-spark  { animation: su-spark 1000ms ease-out forwards; }
.su-play .su-spark:nth-of-type(1) { animation-delay: 1100ms; }
.su-play .su-spark:nth-of-type(2) { animation-delay: 1200ms; }
.su-play .su-spark:nth-of-type(3) { animation-delay: 1280ms; }
.su-play .su-spark:nth-of-type(4) { animation-delay: 1380ms; }
.su-play .su-spark:nth-of-type(5) { animation-delay: 1450ms; }
.su-play .su-spark:nth-of-type(6) { animation-delay: 1560ms; }
.su-play .su-title  { animation: su-write 850ms cubic-bezier(.4,0,.2,1) 1500ms forwards; }
.su-play .su-skip   { animation: su-fade-in 400ms ease 700ms forwards; }

@keyframes su-wobble {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-3deg); }
    60% { transform: rotate(2.5deg); }
    85% { transform: rotate(-1deg); }
}
@keyframes su-loop-l { to { transform: translate(-34px, 58px) rotate(-70deg); opacity: 0; } }
@keyframes su-loop-r { to { transform: translate(34px, 58px) rotate(70deg); opacity: 0; } }
@keyframes su-tail   { to { transform: translateY(46px) scaleY(.6); opacity: 0; } }
@keyframes su-lid {
    0%   { transform: translate(0, 0) rotate(0); }
    60%  { transform: translate(-6px, -62px) rotate(-18deg); }
    100% { transform: translate(-10px, -54px) rotate(-14deg); }
}
@keyframes su-glow  { to { opacity: 1; } }
@keyframes su-spark {
    0%   { opacity: 0; transform: translateY(0) scale(.4); }
    30%  { opacity: 1; transform: translateY(-22px) scale(1); }
    100% { opacity: 0; transform: translateY(-78px) scale(.6) rotate(45deg); }
}
@keyframes su-write    { to { clip-path: inset(0 0 0 0); } }
@keyframes su-fade-out { to { opacity: 0; } }
@keyframes su-fade-in  { to { opacity: 1; } }

/* ── Skipped, or finished: every part at its end state, no motion ─────── */
.su-done .su-box, .su-done .su-spark, .su-done .su-skip { animation: none; }
.su-done .su-loop-l, .su-done .su-loop-r,
.su-done .su-knot, .su-done .su-tail { animation: none; opacity: 0; }
.su-done .su-lid   { animation: none; transform: translate(-10px, -54px) rotate(-14deg); }
.su-done .su-glow  { animation: none; opacity: 1; }
.su-done .su-title { animation: none; clip-path: inset(0 0 0 0); }

/* ── The still, for reduced motion and the event header ───────────────── */
.su-still { display: block; width: 88px; height: auto; margin: 0 auto 4px; overflow: visible; }
.su-still .su-loop-l, .su-still .su-loop-r, .su-still .su-knot, .su-still .su-tail { opacity: 0; }
.su-still .su-lid  { transform: translate(-10px, -54px) rotate(-14deg); }
.su-still .su-glow { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .su-overlay, .su-overlay * { animation: none !important; transition: none !important; }
}