/* =============================================
   Wedding Website — Stylesheet
   Sahil & Gayatri | 9 July 2026
   
   Table of Contents:
   1. Base / Reset
   2. Typography Utilities
   3. Intro Overlay Animation
   4. 3D Card Flip System
   5. Card Image
   6. Card Content Area
   7. Page Peel Button
   8. Responsive Breakpoints
   9. Reduced Motion Preference
   ============================================= */


/* =============================================
   1. BASE / RESET
   ============================================= */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #f7fafc;
}

/* Lock scrolling during intro animation */
body.noscroll {
    overflow: hidden;
    touch-action: none;
}


/* =============================================
   2. TYPOGRAPHY UTILITIES
   ============================================= */
.font-playfair {
    font-family: 'Playfair Display', serif;
}

.save-date-word {
    font-family: 'Dancing Script', cursive;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: opacity 0.5s;
}

/* Responsive font sizing for card elements */
.card-label {
    font-size: clamp(0.75rem, 2vw, 1.125rem);
}

.card-title {
    font-size: clamp(2rem, 7vw, 3rem);
}

.card-date {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
}

/* Link to wedding invite page */
.invite-link {
    display: inline-block;
    margin-top: clamp(0.75rem, 2vw, 1.25rem);
    font-size: clamp(0.875rem, 2.5vw, 1.125rem);
    color: #6b7280;
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: color 0.2s;
}

.invite-link:hover,
.invite-link:focus-visible {
    color: #ec4899;
}

.back-title {
    font-size: clamp(2rem, 6vw, 4rem);
}

.back-subtitle {
    font-size: clamp(1rem, 3vw, 1.5rem);
}


/* =============================================
   3. INTRO OVERLAY ANIMATION
   - Fixed overlay shows "SAVE THE DATE" words
   - Each word fades in with staggered delay
   - Overlay fades out after all words finish
   ============================================= */
.save-date-overlay {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 50;
    /* Sits above the card in normal document flow */
    padding: clamp(1rem, 3vh, 2.5rem) 0;
    gap: clamp(0.5rem, 2vw, 1.5rem);
}

.save-date-text {
    font-size: clamp(2rem, 8vw, 6rem);
    line-height: 1;
}

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

/* Staggered animation delays for each word */
.animate-save-date-1 {
    animation: fadeInWord 0.8s forwards 0.2s;
}
.animate-save-date-2 {
    animation: fadeInWord 0.8s forwards 1.0s;
}
.animate-save-date-3 {
    animation: fadeInWord 0.8s forwards 1.8s;
}


/* =============================================
   4. 3D CARD FLIP SYSTEM
   
   Structure:
   .scene       → perspective container (sets 3D space)
   └─ .card     → the element that rotates on Y axis
      ├─ .card__face--front  → visible by default
      └─ .card__face--back   → revealed on flip
   
   Toggle .is-flipped on .card to trigger rotation.
   ============================================= */
.scene {
    width: 100%;
    max-width: min(450px, 90vw);
    /* dvh accounts for mobile browser chrome (address bar, etc.) */
    height: min(620px, 85dvh);
    perspective: 1500px;
    margin: 0 auto;
}

.card {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.card.is-flipped {
    transform: rotateY(-180deg);
}

.card__face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: white;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow:
        0 10px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.card__face--back {
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}


/* =============================================
   5. CARD IMAGE
   ============================================= */
.card-image {
    width: 100%;
    height: clamp(200px, 50%, 350px);
    object-fit: cover;
    object-position: 75% center;
}


/* =============================================
   6. CARD CONTENT AREA
   ============================================= */
.card-content {
    padding: clamp(1rem, 4vw, 2rem);
}

/* Reusable horizontal divider for cards */
.card-divider {
    border-top: 1px solid #e5e7eb;
    width: 33%;
    margin-left: auto;
    margin-right: auto;
}


/* =============================================
   7. PAGE PEEL BUTTON
   - Styled as a folded corner triangle
   - Uses data-flip-target to identify which card to flip
   - Converted from <div> to <button> for accessibility
   ============================================= */
.page-peel {
    position: absolute;
    width: clamp(40px, 8vw, 60px);
    height: clamp(40px, 8vw, 60px);
    cursor: pointer;
    z-index: 1;
    bottom: 0;
    right: 0;
    /* Reset native button styles */
    background: none;
    border: none;
    padding: 0;
    outline: none;
}

.page-peel::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fafafa;
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
    border-bottom-right-radius: 0.5rem;
    transition: box-shadow 0.2s, background-color 0.2s, transform 0.2s;
}

.page-peel:hover::before,
.page-peel:focus-visible::before {
    box-shadow: 0 12px 30px -2px rgba(0, 0, 0, 0.25);
    background-color: #e0e0e0;
    transform: scale(1.08);
}

/* Visible focus ring for keyboard navigation */
.page-peel:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 0.25rem;
}

.peel-back {
    right: clamp(20px, 5vw, 30px);
}


/* =============================================
   8. RESPONSIVE BREAKPOINTS
   ============================================= */

/* --- Small phones (< 640px) --- */
@media (max-width: 640px) {
    .scene {
        max-width: 95vw;
        height: min(80dvh, 600px);
    }

    .save-date-overlay {
        padding: 1rem 0;
        gap: 0.5rem;
    }

    .save-date-text {
        font-size: clamp(1.5rem, 12vw, 4rem);
    }

    .card-image {
        height: clamp(180px, 40%, 320px);
    }
}

/* --- Tablets (641px – 1024px) --- */
@media (min-width: 641px) and (max-width: 1024px) {
    .scene {
        max-width: 80vw;
        height: min(75dvh, 580px);
    }

    .save-date-text {
        font-size: clamp(3rem, 7vw, 5rem);
    }
}

/* --- Desktop (1025px+) --- */
@media (min-width: 1025px) {
    .scene {
        max-width: 450px;
        height: 620px;
    }

    .save-date-text {
        font-size: 6rem;
    }
}

/* --- Landscape mobile --- */
@media (max-height: 500px) and (orientation: landscape) {
    .scene {
        height: 85dvh;
        max-width: 60vw;
    }

    .save-date-overlay {
        padding: 0.5rem 0;
    }

    .save-date-text {
        font-size: clamp(1.5rem, 8vw, 3rem);
    }

    .card-image {
        height: clamp(120px, 35%, 200px);
    }
}

/* --- Very small screens (< 360px width or short portrait) --- */
@media (max-width: 360px), (max-height: 600px) and (orientation: portrait) {
    .card-content {
        padding: 0.75rem;
    }

    .card-title {
        font-size: 1.75rem;
    }

    .card-date {
        font-size: 1.25rem;
    }
}

/* --- Retina / High DPI --- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .page-peel::before {
        border-bottom-right-radius: 0.375rem;
    }
}


/* =============================================
   9. REDUCED MOTION PREFERENCE
   - Disables animations for users who prefer less motion
   ============================================= */
@media (prefers-reduced-motion: reduce) {
    .card {
        transition: none;
    }

    .animate-save-date-1,
    .animate-save-date-2,
    .animate-save-date-3 {
        animation: none;
        opacity: 1;
    }

    .save-date-overlay {
        transition: none;
    }
}


/* =============================================
   10. INVITE PAGE
   - Video container maintains 9:16 portrait aspect ratio
   - Back link sits above the video
   ============================================= */

/* Back navigation link */
.invite-back-link {
    display: inline-block;
    margin-bottom: clamp(0.75rem, 2vw, 1.5rem);
    font-size: clamp(0.875rem, 2.5vw, 1.125rem);
    color: #6b7280;
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: color 0.2s;
}

.invite-back-link:hover,
.invite-back-link:focus-visible {
    color: #ec4899;
}

/* Video wrapper — 9:16 aspect ratio (177.78%) */
.invite-video-container {
    position: relative;
    width: 100%;
    max-width: min(420px, 90vw);
    /* 9:16 aspect ratio via padding-top */
    padding-top: min(calc(min(420px, 90vw) * 1.7778), 80dvh);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow:
        0 10px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.invite-video-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* --- Landscape mobile: constrain video height --- */
@media (max-height: 500px) and (orientation: landscape) {
    .invite-video-container {
        max-width: 40vw;
        padding-top: min(calc(40vw * 1.7778), 85dvh);
    }
}