/* ==============================
   Motion — subtle reveals for the invitation
   Only active once scripts/motion.js adds .motion-ready to <html>,
   so the page still shows everything if JavaScript fails.
   ============================== */

:root {
    --m-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Cover: plays as the opening video fades out ---------- */

.motion-ready .m-cover .sub-date,
.motion-ready .m-cover .names-en,
.motion-ready .m-cover .cover-footer {
    opacity: 0;
    transform: translateY(10px);
}

.motion-ready .m-cover .names-en {
    letter-spacing: 7px;
}

.motion-ready .m-cover .cover-photo-container {
    opacity: 0;
    transform: scale(1.03);
}

.motion-ready .m-cover.m-cover-in .sub-date,
.motion-ready .m-cover.m-cover-in .names-en,
.motion-ready .m-cover.m-cover-in .cover-footer,
.motion-ready .m-cover.m-cover-in .cover-photo-container {
    opacity: 1;
    transform: none;
}

.motion-ready .m-cover.m-cover-in .names-en {
    letter-spacing: 2px;
}

.motion-ready .m-cover.m-cover-in .cover-photo-container {
    transition: opacity 1.4s var(--m-ease), transform 1.8s var(--m-ease);
}

.motion-ready .m-cover.m-cover-in .sub-date {
    transition: opacity 1s var(--m-ease) 0.35s, transform 1s var(--m-ease) 0.35s;
}

.motion-ready .m-cover.m-cover-in .names-en {
    transition: opacity 1.2s var(--m-ease) 0.5s, transform 1.2s var(--m-ease) 0.5s,
        letter-spacing 1.6s var(--m-ease) 0.5s;
}

.motion-ready .m-cover.m-cover-in .cover-footer {
    transition: opacity 1s var(--m-ease) 0.85s, transform 1s var(--m-ease) 0.85s;
}

/* ---------- Scroll reveals: fade and rise ---------- */

.motion-ready .m-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.9s var(--m-ease), transform 0.9s var(--m-ease);
}

.motion-ready .m-reveal.m-in {
    opacity: 1;
    transform: none;
}

/* The thin accent line under the greeting draws itself instead of rising */
.motion-ready .divider.m-reveal {
    transform: scaleX(0);
}

.motion-ready .divider.m-reveal.m-in {
    transform: scaleX(1);
}

/* ---------- Calendar: the wedding day blooms in ---------- */

.cal-grid .day-num.target {
    position: relative;
}

.motion-ready .calendar-box.m-reveal .day-num.target {
    opacity: 0;
    transform: scale(0.4);
}

.motion-ready .calendar-box.m-in .day-num.target,
.motion-ready .calendar-box:not(.m-reveal) .day-num.target {
    opacity: 1;
    transform: none;
    animation: m-bloom 0.9s var(--m-ease) 0.45s backwards;
}

.motion-ready .calendar-box.m-in .day-num.target::after,
.motion-ready .calendar-box:not(.m-reveal) .day-num.target::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--accent);
    opacity: 0;
    animation: m-ring 1.6s ease-out 1.1s backwards;
    pointer-events: none;
}

@keyframes m-bloom {
    0% { opacity: 0; transform: scale(0.4); }
    60% { opacity: 1; transform: scale(1.06); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes m-ring {
    0% { opacity: 0.7; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.9); }
}

/* ---------- Countdown: each changing digit settles softly ---------- */

.dday-num.m-tick {
    animation: m-tick 0.45s var(--m-ease);
}

@keyframes m-tick {
    from { opacity: 0.25; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

/* ---------- Buttons: light lift on hover, gentle press on tap ---------- */

.btn-contact-modal,
.map-btn,
.btn-copy,
.btn-submit {
    transition: transform 0.18s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.btn-contact-modal:active,
.map-btn:active,
.btn-copy:active,
.btn-submit:not(:disabled):active {
    transform: scale(0.97);
}

@media (hover: hover) {
    .btn-contact-modal:hover,
    .map-btn:hover,
    .btn-copy:hover,
    .btn-submit:not(:disabled):hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(196, 154, 130, 0.22);
    }

    .btn-submit:not(:disabled):hover {
        background-color: var(--accent-hover);
    }
}

/* ---------- Reduced motion: opacity-only fades, no movement ---------- */

@media (prefers-reduced-motion: reduce) {
    .motion-ready .m-cover .sub-date,
    .motion-ready .m-cover .names-en,
    .motion-ready .m-cover .cover-footer,
    .motion-ready .m-cover .cover-photo-container,
    .motion-ready .m-reveal,
    .motion-ready .divider.m-reveal,
    .motion-ready .calendar-box.m-reveal .day-num.target {
        transform: none !important;
    }

    .motion-ready .m-cover .names-en {
        letter-spacing: 2px;
    }

    .motion-ready .m-reveal {
        transition: opacity 0.5s ease;
    }

    .motion-ready .m-cover.m-cover-in .cover-photo-container,
    .motion-ready .m-cover.m-cover-in .sub-date,
    .motion-ready .m-cover.m-cover-in .names-en,
    .motion-ready .m-cover.m-cover-in .cover-footer {
        transition: opacity 0.6s ease;
    }

    .motion-ready .calendar-box .day-num.target,
    .motion-ready .calendar-box .day-num.target::after,
    .dday-num.m-tick {
        animation: none !important;
    }

    .btn-contact-modal:active,
    .map-btn:active,
    .btn-copy:active,
    .btn-submit:active,
    .btn-contact-modal:hover,
    .map-btn:hover,
    .btn-copy:hover,
    .btn-submit:hover {
        transform: none;
    }
}