* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, sans-serif;
    background: linear-gradient(135deg, #faf9f5 0%, #ead9c7 45%, #cc785c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: #2d3a5f;
}

.card {
    background: #fffaf2;
    border-radius: 24px;
    padding: 56px 48px;
    box-shadow:
        0 20px 60px rgba(45, 58, 95, 0.18),
        0 4px 12px rgba(45, 58, 95, 0.08);
    max-width: 460px;
    width: 100%;
    text-align: center;
    animation: float-in 0.7s cubic-bezier(0.22, 0.9, 0.3, 1.2);
}

@keyframes float-in {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.icon-wrap {
    width: 200px;
    height: 200px;
    margin: 0 auto 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 55%, #ffe9d4 0%, #fffaf2 75%);
    border-radius: 50%;
}

.icon {
    width: 180px;
    height: auto;
}

/* --- timing ---
   0.0s – 1.0s : closed box, no text
   1.0s – 1.6s : lid lifts/fades, flaps open out
   1.6s – 2.1s : tumbleweed + dust appear
   2.1s        : heading fades in
*/

/* SVG transform-box so user-space transform-origin works on inline SVG groups */
.flap, .lid, .tumbleweed, .dust, .rim {
    transform-box: fill-box;
    transform-origin: center;
}

/* closed lid — visible initially, lifts and fades */
.lid {
    animation: lid-out 0.6s ease-in 1s forwards;
}
@keyframes lid-out {
    0%   { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-14px); }
}

/* front rim — only appears once box opens */
.rim {
    opacity: 0;
    animation: fade-in 0.4s ease 1.3s forwards;
}

/* flaps — hidden initially, then unfold */
.flap {
    opacity: 0;
}
.flap-back {
    transform: scaleY(0.1);
    transform-origin: 50% 100%;
    animation: flap-back-open 0.55s cubic-bezier(0.34, 1.4, 0.5, 1) 1.15s forwards;
}
@keyframes flap-back-open {
    0%   { opacity: 0; transform: scaleY(0.1); }
    60%  { opacity: 1; transform: scaleY(1.05); }
    100% { opacity: 1; transform: scaleY(1); }
}

.flap-left {
    transform: rotate(45deg) scale(0.6);
    transform-origin: 100% 100%;
    animation: flap-left-open 0.55s cubic-bezier(0.34, 1.4, 0.5, 1) 1.25s forwards;
}
@keyframes flap-left-open {
    0%   { opacity: 0; transform: rotate(45deg) scale(0.6); }
    100% { opacity: 1; transform: rotate(0) scale(1); }
}

.flap-right {
    transform: rotate(-45deg) scale(0.6);
    transform-origin: 0% 100%;
    animation: flap-right-open 0.55s cubic-bezier(0.34, 1.4, 0.5, 1) 1.25s forwards;
}
@keyframes flap-right-open {
    0%   { opacity: 0; transform: rotate(-45deg) scale(0.6); }
    100% { opacity: 1; transform: rotate(0) scale(1); }
}

/* tumbleweed rolls out */
.tumbleweed {
    opacity: 0;
    transform: translateX(-30px) rotate(-180deg);
    animation: roll-in 0.8s ease-out 1.7s forwards;
}
@keyframes roll-in {
    0%   { opacity: 0; transform: translateX(-30px) rotate(-180deg); }
    100% { opacity: 1; transform: translateX(0) rotate(0); }
}

/* dust puffs */
.dust {
    opacity: 0;
    transform: translateY(8px);
    animation: puff-up 0.6s ease-out 1.7s forwards;
}
@keyframes puff-up {
    0%   { opacity: 0; transform: translateY(8px) scale(0.6); }
    100% { opacity: 0.9; transform: translateY(0) scale(1); }
}

/* heading appears last */
h1 {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #2d3a5f;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(8px);
    animation: text-in 0.6s ease-out 2.1s forwards;
}
@keyframes text-in {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
    to { opacity: 1; }
}

@media (max-width: 480px) {
    .card { padding: 40px 28px; border-radius: 20px; }
    .icon-wrap { width: 160px; height: 160px; }
    .icon { width: 140px; }
    h1 { font-size: 1.3rem; }
}