@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
}

@keyframes photoDrift {
    from {
        opacity: 0.72;
    }
    to {
        opacity: 1;
    }
}

@keyframes lightboxIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
}

@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroShimmer {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.07);
    }
}

@keyframes heroGlow {
    0%, 100% {
        opacity: 0.52;
        transform: scale(1);
    }
    50% {
        opacity: 0.88;
        transform: scale(1.08);
    }
}

@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
    }
    16% {
        transform: scale(1.18);
    }
    28% {
        transform: scale(0.96);
    }
    42% {
        transform: scale(1.12);
    }
}

@keyframes envelopeFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes confettiDrop {
    to {
        transform: translateY(112vh) rotate(calc(var(--spin) + 540deg));
    }
}

@keyframes blobFloat {
    from {
        transform: translate(0, 0) scale(1);
    }
    to {
        transform: translate(30px, 20px) scale(1.08);
    }
}

@keyframes barBounce {
    from {
        height: 4px;
    }
    to {
        height: 14px;
    }
}

@keyframes trackPulse {
    from {
        opacity: 0.4;
    }
    to {
        opacity: 1;
    }
}

@keyframes playlistIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes gnomeBodyDance {
    from {
        transform: translateY(0) rotate(-4deg);
    }
    to {
        transform: translateY(-8px) rotate(4deg);
    }
}

@keyframes gnomeArmL {
    from {
        transform: rotate(-50deg);
    }
    to {
        transform: rotate(20deg);
    }
}

@keyframes gnomeArmR {
    from {
        transform: rotate(50deg);
    }
    to {
        transform: rotate(-20deg);
    }
}

@keyframes gnomeLegL {
    from {
        transform: rotate(-18deg);
    }
    to {
        transform: rotate(8deg);
    }
}

@keyframes gnomeLegR {
    from {
        transform: rotate(18deg);
    }
    to {
        transform: rotate(-8deg);
    }
}

@keyframes gnomeHat {
    from {
        transform: rotate(-6deg);
    }
    to {
        transform: rotate(6deg);
    }
}

@keyframes gnomePompom {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.3);
    }
}

@keyframes gnomeWink {
    0%, 85%, 100% {
        transform: scaleY(1);
    }
    92% {
        transform: scaleY(0.1);
    }
}

@keyframes confettiFloat {
    from {
        transform: translateY(0) rotate(0deg);
        opacity: 0.7;
    }
    to {
        transform: translateY(-6px) rotate(30deg);
        opacity: 1;
    }
}

@keyframes gnomePeek {
    0%, 100% {
        transform: translateX(-50%) rotate(-3deg);
    }
    50% {
        transform: translateX(-50%) translateY(-6px) rotate(3deg);
    }
}

@keyframes magicShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes magicPulse {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(183, 63, 85, 0.14), 0 16px 40px rgba(103, 29, 44, 0.34), 0 0 40px rgba(183, 63, 85, 0.14);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(183, 63, 85, 0.24), 0 20px 50px rgba(103, 29, 44, 0.4), 0 0 80px rgba(216, 154, 66, 0.32);
    }
}

@keyframes glowSweep {
    0% {
        transform: translateX(-120%);
    }
    60%, 100% {
        transform: translateX(120%);
    }
}

@keyframes starSpin {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.4) rotate(180deg);
    }
}

@keyframes bowShine {
    from {
        filter: brightness(1);
    }
    to {
        filter: drop-shadow(0 0 18px rgba(216, 154, 66, 0.65)) brightness(1.14);
    }
}

@keyframes hintPulse {
    from {
        opacity: 0.8;
        transform: scale(1);
    }
    to {
        opacity: 1;
        transform: scale(1.04);
    }
}

@keyframes greetingFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes greetingFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes cardPop {
    from {
        transform: scale(0.5) rotate(-8deg);
        opacity: 0;
    }
    to {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes sparkleFloat {
    from {
        transform: translateY(0) rotate(-10deg) scale(1);
    }
    to {
        transform: translateY(-8px) rotate(10deg) scale(1.15);
    }
}

@keyframes heartRise {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-50px) scale(0.4);
        opacity: 0;
    }
}

@media (max-width: 900px) {
    .story-layout,
    .photo-stage {
        grid-template-columns: 1fr;
    }

    .timeline {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .timeline::before {
        display: none;
    }

    .timeline button {
        padding: 14px;
    }

    .timeline button::before {
        display: none;
    }

    .timeline button.is-active {
        transform: translateY(-4px);
    }

    .photo-strip {
        flex-direction: row;
        max-height: none;
        overflow-x: auto;
        overflow-y: visible;
        padding-top: 5px;
    }

    .photo-strip button {
        width: 96px;
        height: 96px;
        flex-shrink: 0;
    }

    .photo-strip button.is-active {
        transform: translateY(-4px);
    }

    .photo-main {
        height: 60vw;
        max-height: 520px;
        min-height: 300px;
    }

    .video-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    h1 {
        font-size: 54px;
    }

    h2 {
        font-size: 42px;
    }

    .letter-section,
    .story-section,
    .gallery-section,
    .video-section {
        padding-left: 16px;
        padding-right: 16px;
    }

    .envelope-paper {
        padding: 20px;
    }

    .photo-main {
        height: 55vw;
        min-height: 260px;
    }

    .photo-main figcaption {
        right: 12px;
        bottom: 12px;
        left: 12px;
        padding: 14px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .countdown {
        flex-wrap: wrap;
    }

    .countdown span {
        min-width: 76px;
    }

    .gnome-greeting-card {
        padding: 28px 32px 32px;
        min-width: 280px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 768px) {
    body {
        background-attachment: scroll;
    }

    .page-shell::before,
    .page-shell::after {
        animation: none;
    }
}