/* reserve scrollbar space so page never shifts when teaser hides */
body { overflow-x: hidden; }

body.teaser-active {
    overflow: hidden;
}

/* TEASER OVERLAY */

/* envelope base */
#teaser {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    z-index: 9999;
    cursor: pointer; overflow: hidden;
}

/* full-screen panels painted with clip-path */
#t-left, #t-right, #t-bottom, #t-flap, #t-flap-wrap, #t-body-wrap, #t-body {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    pointer-events: none;
}
#t-left, #t-right, #t-bottom { display: none; }
#t-flap-wrap {
    z-index: 3;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.45)) drop-shadow(0 12px 32px rgba(0,0,0,0.38));
}
#t-flap {
    clip-path: url(#flap-clip);
    background: #6b7840;
    transform-origin: 50% 0;
}
#t-flap::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    clip-path: url(#flap-clip);
    background: linear-gradient(to bottom, rgba(255,255,255,0.18) 0%, transparent 80%);
}

/* envelope body */
#t-body-wrap {
    z-index: 1;
}
#t-body {
    clip-path: url(#body-clip);
    background: #8fa06a;
}

/* date */
#env-date {
    position: absolute;
    top: 73%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5; pointer-events: none;
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    font-size: clamp(20px, 5.5vw, 32px);
    font-weight: 700;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
}

/* hint */
#teaser-hint {
    position: absolute; bottom: 44px; left: 50%;
    transform: translateX(-50%);
    display: flex; flex-direction: column;
    align-items: center; gap: 8px;
    color: rgba(255,255,255,0.85); z-index: 10;
    font-family: 'Cormorant Garamond', serif;
    font-size: 13px; letter-spacing: 0.22em;
    text-transform: uppercase; white-space: nowrap;
}
#teaser-hint .t-arrow {
    width: 1px; height: 28px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.85));
    animation: tpulse 2s ease-in-out infinite;
}
@keyframes tpulse { 0%,100%{opacity:.3} 50%{opacity:1} }

/* names */
#env-names {
    position: absolute;
    top: 24%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5; pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1em;
    text-align: center;
    margin-top: 8vw;
}
#env-names .t-script {
    display: inline-block;
    font-family: 'Great Vibes', cursive;
    font-size: 76px;
    font-size: clamp(52px, 16vw, 96px);
    color: rgba(255,255,255,0.95); line-height: 1;
}
#env-names .t-amp {
    display: inline-block;
    font-family: 'Great Vibes', cursive;
    font-size: 40px;
    font-size: clamp(28px, 8vw, 50px);
    color: rgba(255,255,255,0.6); line-height: 1.2;
    margin: 0 0.2em;
    vertical-align: middle;
}
#env-names .t-env-date { display: none; }

/* mobile column order - Alaturi section */
@media (max-width: 767px) {
    #alaturi-mireasa { order: 2; }
    #alaturi-nasii   { order: 1; }
    #alaturi-mire    { order: 3; }
}

/* hero background position on mobile */
@media (max-width: 767px) {
    #hero-section {
        background-attachment: scroll !important;
        background-position: 15% 20% !important;
    }
}

/* olive form controls */
input[type="radio"].peer:checked ~ div:not(.border-2) { border-color: rgba(107,120,64,0.75) !important; }
input[type="radio"].peer:checked ~ div.border-2 { border-color: #6b7840 !important; background-color: #6b7840 !important; }
input[type="radio"].peer:checked ~ span { color: #6b7840 !important; }

/* countdown section mobile tweaks */
@media (max-width: 767px) {
    section[style*="background-color: #8fa06a;"] .relative.z-10.px-8 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    section[style*="background-color: #8fa06a;"] .text-5xl {
        font-size: 2rem !important;
        line-height: 1.1 !important;
        margin-bottom: 1.5rem !important;
    }

    section[style*="background-color: #8fa06a;"] .text-6xl {
        font-size: 2rem !important;
        line-height: 1.1 !important;
    }

    section[style*="background-color: #8fa06a;"] .text-xs {
        font-size: 0.65rem !important;
        letter-spacing: 0.12em !important;
    }

    section[style*="background-color: #8fa06a;"] .flex.items-end.justify-center.gap-4 {
        gap: 0.75rem !important;
    }
}

/* poza responsiva */
#poza-main { height: 75vw; max-height: 520px; border-radius: 50% 50% 0 0; }
#poza-section { padding: 16px 24px; }
@media (min-width: 768px) {
    #poza-main { height: 50vw; }
    #poza-main { height: clamp(260px, 50vw, 580px); border-radius: 0; }
    #poza-section { padding: 0; }
}

#hero-section h1 {
    font-size: 6rem !important;
    font-size: clamp(4rem, 12vw, 9rem) !important;
}

#hero-section p {
    font-size: 2rem !important;
    font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
}

#rsvp-success p:first-child {
    font-size: 48px !important;
    font-size: clamp(36px, 9vw, 58px) !important;
}

#rsvp-success p:last-child {
    font-size: 20px !important;
    font-size: clamp(18px, 3vw, 22px) !important;
}

footer p:first-child {
    font-size: 22px !important;
    font-size: clamp(20px, 3vw, 26px) !important;
}

@supports not (clip-path: url("#flap-clip")) {
    #t-flap,
    #t-flap::after,
    #t-body {
        clip-path: none;
    }

    #t-flap {
        height: 52%;
    }

    #t-body {
        top: 52%;
    }
}