/* ================================================================
   v3.css — Version 3 polish layer
   ================================================================
   Loaded LAST (after modern.css) so these rules win the cascade.

   V3 CHANGES:
   1. Opening invitation card — glossy + colored:
      rich crimson/gold stage, animated gloss sweep, glossy
      envelope with light reflections, glossy gold open button.
   2. Love sign (scratch heart) — bigger on desktop and long-size
      in phone portrait (fills the screen edge-to-edge).
   3. Less space between the love sign and the video.
   4. Video on mobile — real size (true aspect ratio), full-bleed
      edge-to-edge covering the whole screen width.
   ================================================================ */


/* ================================================================
   1. GLOSSY COLORFUL OPENING CARD
   ================================================================ */

/* Rich crimson velvet stage with golden glows (replaces ivory) */
.invitation-stage {
    background:
        radial-gradient(58vw 48vh at 16% 10%, rgba(240, 201, 110, 0.22) 0%, transparent 65%),
        radial-gradient(52vw 52vh at 86% 84%, rgba(240, 201, 110, 0.15) 0%, transparent 65%),
        radial-gradient(45vw 34vh at 80% 12%, rgba(255, 122, 140, 0.13) 0%, transparent 70%),
        radial-gradient(40vw 36vh at 8% 90%, rgba(150, 12, 34, 0.55) 0%, transparent 75%),
        linear-gradient(168deg, #9c1430 0%, #6b0e1c 38%, #4d0813 70%, #2e040c 100%);
}

/* Light paper grain → soft golden shimmer dust on the dark stage */
.invitation-stage::before {
    background-image: radial-gradient(rgba(255, 238, 200, 0.06) 1px, transparent 1.4px);
    background-size: 8px 8px;
    mix-blend-mode: screen;
    opacity: 0.8;
}

/* Brighter gold speckles */
.invitation-stage::after {
    background-image:
        radial-gradient(circle 2.4px at 12% 24%, rgba(240, 201, 110, 0.75) 98%, transparent),
        radial-gradient(circle 1.7px at 28% 68%, rgba(240, 201, 110, 0.60) 98%, transparent),
        radial-gradient(circle 2.8px at 88% 30%, rgba(244, 212, 136, 0.70) 98%, transparent),
        radial-gradient(circle 1.9px at 72% 78%, rgba(240, 201, 110, 0.65) 98%, transparent),
        radial-gradient(circle 2.1px at 46% 14%, rgba(240, 201, 110, 0.55) 98%, transparent),
        radial-gradient(circle 1.6px at 60% 90%, rgba(240, 201, 110, 0.60) 98%, transparent),
        radial-gradient(circle 2.5px at 8%  52%, rgba(240, 201, 110, 0.55) 98%, transparent),
        radial-gradient(circle 1.8px at 94% 58%, rgba(244, 212, 136, 0.65) 98%, transparent),
        radial-gradient(circle 2.2px at 34% 40%, rgba(240, 201, 110, 0.45) 98%, transparent),
        radial-gradient(circle 2.0px at 66% 20%, rgba(240, 201, 110, 0.45) 98%, transparent);
    animation: invSpeckleTwinkle 4.5s ease-in-out infinite alternate;
}

@keyframes invSpeckleTwinkle {
    from { opacity: 0.65; }
    to   { opacity: 1; }
}

/* Animated glossy light sweep across the whole stage
   (element added in index.html right after the botanicals) */
.inv-gloss {
    position: absolute;
    inset: -12%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(115deg,
        transparent 32%,
        rgba(255, 255, 255, 0.06) 42%,
        rgba(255, 244, 214, 0.16) 50%,
        rgba(255, 255, 255, 0.06) 58%,
        transparent 68%);
    background-size: 240% 240%;
    background-position: 0% 0%;
    animation: invGlossSweep 7s ease-in-out infinite;
    mix-blend-mode: screen;
    will-change: background-position;
}

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

/* ---- Text colors re-tuned for the crimson stage ---- */
.inv-eyebrow {
    color: #f4d488;
    text-shadow: 0 0 16px rgba(240, 201, 110, 0.45);
}

.inv-heading {
    color: #fff8e7;
    text-shadow:
        0 2px 22px rgba(0, 0, 0, 0.40),
        0 0 42px rgba(240, 201, 110, 0.22);
}

.inv-h-dash { background: linear-gradient(90deg, transparent, #e9be5f); }
.inv-h-dash:last-child { background: linear-gradient(90deg, #e9be5f, transparent); }
.inv-h-heart { color: #f0c96e; }

.inv-hint { color: rgba(255, 240, 214, 0.82); }

/* ---- Glossy envelope with light reflections ---- */
.envelope {
    filter:
        drop-shadow(0 28px 52px rgba(8, 0, 4, 0.60))
        drop-shadow(0 0 34px rgba(240, 201, 110, 0.20));
}

/* Static glass reflection + soft diagonal sheen on the envelope */
.envelope::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 8;
    border-radius: 12px;
    pointer-events: none;
    background:
        radial-gradient(130% 90% at 18% 0%, rgba(255, 255, 255, 0.34) 0%, transparent 46%),
        linear-gradient(115deg,
            transparent 36%,
            rgba(255, 255, 255, 0.14) 46%,
            rgba(255, 255, 255, 0.26) 50%,
            rgba(255, 255, 255, 0.14) 54%,
            transparent 64%);
    mix-blend-mode: screen;
}

/* Envelope floor cue → soft dark glow on crimson */
.envelope-scene::after {
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.50) 0%, transparent 70%);
}

/* ---- Glossy gold "Open Invitation" button ---- */
.inv-open-btn {
    background: linear-gradient(135deg, #f6d98e 0%, #e9be5f 45%, #c9943a 100%);
    border: 1px solid #f0c96e;
    color: #4d0813;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.40),
        0 0 24px rgba(240, 201, 110, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 -3px 8px rgba(120, 70, 0, 0.28);
}

.inv-open-btn:hover,
.inv-open-btn:focus-visible {
    background: linear-gradient(135deg, #ffeeb0 0%, #f0c96e 50%, #d9a945 100%);
    border-color: #ffe9ad;
    color: #2e040c;
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.45),
        0 0 42px rgba(240, 201, 110, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
    outline: none;
}

/* ---- Grand reveal card — pops on the crimson stage ---- */
.inv-reveal-card {
    box-shadow:
        inset 0 0 0 1px #e7dabb,
        inset 0 0 0 7px #fffdf6,
        inset 0 0 0 8px #ddcc9f,
        0 34px 80px rgba(0, 0, 0, 0.60),
        0 0 70px rgba(240, 201, 110, 0.28);
}


/* ================================================================
   2. LOVE SIGN — BIGGER HEART (desktop + long portrait phones)
   ================================================================ */

/* Desktop / tablets / landscape — big statement heart
   (min with 90vh keeps it fully visible on short screens) */
.scratch-heart-stage {
    width:  min(92vw, 90vh, 840px);
    height: min(92vw, 90vh, 840px);
}

/* Phones & small tablets in PORTRAIT — long, edge-to-edge heart */
@media (orientation: portrait) and (max-width: 768px) {
    .scratch-heart-stage {
        width:  min(96vw, 94svh, 560px);
        height: min(116vw, 112svh, 660px);
    }
}


/* ================================================================
   3. LESS SPACE BETWEEN LOVE SIGN AND VIDEO
   ================================================================ */

.scratch-love-section {
    padding-bottom: 20px;
}

.scratch-love-subtitle {
    margin-bottom: 24px;
}

/* Progress chip + Reveal button occupy ZERO space while hidden,
   so the video sits right below the heart. They expand smoothly
   the moment scratching starts. */
.scratch-progress {
    height: 0;
    padding: 0 18px;
    margin: 0 auto;
    overflow: hidden;
    border-width: 0;
}

.scratch-progress.active {
    height: auto;
    padding: 8px 18px;
    margin-top: 14px;
    border-width: 1px;
}

.scratch-reveal-all-btn {
    display: block;
    width: max-content;
    height: 0;
    padding: 0 28px;
    margin: 0 auto;
    border-width: 0;
    overflow: hidden;
}

.scratch-reveal-all-btn.show {
    height: auto;
    padding: 12px 28px;
    margin-top: 12px;
    border-width: 2px;
}

/* After full reveal the button collapses again (no leftover gap) */
.scratch-heart-stage.revealed ~ .scratch-reveal-all-btn {
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-width: 0 !important;
    overflow: hidden !important;
}


/* ================================================================
   4. VIDEO — REAL SIZE, FULL-SCREEN COVER ON MOBILE
   ================================================================ */
@media (max-width: 768px) {

    /* Full-bleed section — no side padding, no rounded card */
    .hero-video-section {
        padding: 0 !important;
    }

    .video-wrapper {
        aspect-ratio: auto !important;
        max-height: none !important;
        height: auto !important;
        max-width: none !important;
        border-radius: 0 !important;
        /* slim gold top/bottom rails keep the premium framing */
        box-shadow:
            inset 0  2px 0 rgba(240, 201, 110, 0.35),
            inset 0 -2px 0 rgba(240, 201, 110, 0.35) !important;
    }

    /* The video shows at its TRUE aspect ratio (real size),
       spanning the full screen width edge-to-edge */
    .hero-video {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: center !important;
    }
}


/* ================================================================
   REDUCED MOTION — disable the new gloss/twinkle animations
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    .inv-gloss,
    .invitation-stage::after {
        animation: none !important;
    }
}