:root {
    --bg: #667255;
    /* оливковый как на видео */
    --bg2: #5b654c;
    --ink: #f3f0e6;
    /* “молочный” текст */
    --ink-dim: rgba(243, 240, 230, .75);
    --stroke: rgba(243, 240, 230, .6);
    --seal: #b08a64;
    --seal2: #8a6a4a;
    --card: #f5f2ea;
    --shadow: rgba(0, 0, 0, .25);
    --radius: 28px;
    --max: 420px;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    background: #5b654c;
    color: var(--ink);
    overflow-x: hidden;
}

a {
    color: inherit;
}

.page {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .6s ease, transform .6s ease;
    pointer-events: none;
}

.page.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.section {
    width: 100%;
    padding: 54px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.text-center {
    text-align: center;
    max-width: var(--max);
    color: var(--ink-dim);
    font-size: 18px;
    line-height: 1.35;
}

.h-script {
    font-family: "Great Vibes", cursive;
    font-weight: 400;
    letter-spacing: .5px;
    font-size: 46px;
    line-height: 1;
    margin: 0;
}

.lead {
    margin: 10px 0 0;
    text-align: center;
    color: var(--ink-dim);
    font-size: 18px;
}

.fineprint {
    margin: 12px 0 0;
    color: rgba(243, 240, 230, .55);
    font-size: 14px;
    text-align: center;
    max-width: var(--max);
}

/* INTRO */
.intro {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    z-index: 1;
}

/*.intro.is-hidden {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}*/

.intro__safe-area {
    width: min(480px, 100%);
    height: min(860px, 100vh);
    border-radius: 34px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
    background:
        radial-gradient(800px 520px at 50% -15%, rgba(255, 255, 255, .08), transparent 60%),
        linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .22));
}

.intro__top {
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 5;
}

.intro__title {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.intro__title-1 {
    font-size: 26px;
    opacity: .9;
}

.intro__title-2 {
    font-size: 30px;
    opacity: .95;
}

.intro__title-3 {
    margin-top: 10px;
    font-family: "Great Vibes", cursive;
    text-transform: none;
    letter-spacing: 0;
    font-size: 52px;
    opacity: .95;
}

.intro__bottom {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 58px;
    z-index: 5;
    text-align: center;
    color: rgba(243, 240, 230, .7);
    font-size: 18px;
    line-height: 1.35;
}

.envelope {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* сам “конверт” */
.env {
    position: absolute;
    inset: 0;
    background: transparent;
    transition: transform 1.05s cubic-bezier(.2, .9, .15, 1), opacity .6s ease;
    will-change: transform;
}

/* левая/правая диагонали, как на конверте */
.env--left {
    background: linear-gradient(135deg, rgba(0, 0, 0, .14), rgba(0, 0, 0, .02));
    clip-path: polygon(0 40%, 50% 50%, 0 60%);
    opacity: .9;
}

.env--right {
    background: linear-gradient(225deg, rgba(0, 0, 0, .14), rgba(0, 0, 0, .02));
    clip-path: polygon(100% 40%, 50% 50%, 100% 60%);
    opacity: .9;
}

.env--bottom {
    background: linear-gradient(0deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0));
    clip-path: polygon(0 60%, 50% 50%, 100% 60%, 100% 100%, 0 100%);
    opacity: .9;
}

.env--top {
background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .18));
    clip-path: polygon(0 0, 100% 0, 100% 40%, 50% 50%, 0 40%);
    transform-origin: 50% 40%;
    opacity: .85;
}

/* контент внутри конверта */
.env__content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(.98);
    transition: opacity .9s ease .25s, transform .9s ease .25s;
    padding: 16px;
    z-index: 10;
    pointer-events: none;
}

.env__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 34px;
    filter: saturate(.95) contrast(.98);
    position: relative;
    z-index: 11;
}
.intro__top,
.intro__bottom {
   position: absolute;
    z-index: 5;
}

/* печать */
.seal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 110px;
    border: none;
    cursor: pointer;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .35), transparent 45%),
        radial-gradient(circle at 65% 75%, rgba(0, 0, 0, .18), transparent 45%),
        linear-gradient(180deg, var(--seal), var(--seal2));
    border-radius: 999px;
    box-shadow: 0 18px 35px rgba(0, 0, 0, .35);
    display: grid;
    place-items: center;
    z-index: 6;
    transition: transform .25s ease, opacity .6s ease, box-shadow .25s ease;
}

.seal:hover {
    transform: translate(-50%, -50%) scale(1.03);
    box-shadow: 0 22px 45px rgba(0, 0, 0, .42);
}

.seal:active {
    transform: translate(-50%, -50%) scale(.98);
}

.seal__ring {
    position: absolute;
    inset: 10px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, .22);
    box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .08);
}

.seal__text {
    font-family: "Cormorant Garamond", serif;
    letter-spacing: 1.5px;
    color: rgba(30, 18, 10, .75);
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
}

/* подсказка “листай вниз” */
.scroll-hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .6s ease, transform .6s ease;
    z-index: 10;
    pointer-events: none;
    color: rgba(243, 240, 230, .75);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
}

.scroll-hint i {
    width: 22px;
    height: 36px;
    border: 1.5px solid rgba(243, 240, 230, .5);
    border-radius: 20px;
    position: relative;
}

.scroll-hint i:after {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 4px;
    height: 4px;
    background: rgba(243, 240, 230, .75);
    border-radius: 99px;
    transform: translateX(-50%);
    animation: dot 1.2s ease-in-out infinite;
}

@keyframes dot {
    0% {
        transform: translate(-50%, 0);
        opacity: .9;
    }

    70% {
        transform: translate(-50%, 12px);
        opacity: .25;
    }

    100% {
        transform: translate(-50%, 0);
        opacity: .9;
    }
}

/* ОТКРЫТИЕ КОНВЕРТА */
.intro.is-open .seal {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.9);
}

.intro.is-open .env--left {
    transform: translateX(-38vw);
}

.intro.is-open .env--right {
    transform: translateX(38vw);
}

.intro.is-open .env--bottom {
    transform: translateY(18vh);
    opacity: .3;
}

.intro.is-open .env--top {
    transform: rotateX(72deg);
    opacity: .25;
}

.intro.is-open .env__content {
    opacity: 1;
    transform: scale(1);
}

.intro.is-open .scroll-hint {
    opacity: 1;
    transform: none;
}

/* ИМЕНА / РАМКА */
.section--names {
    padding-top: 70px;
}

.frame {
    width: min(var(--max), 100%);
    border: 2px solid rgba(243, 240, 230, .55);
    border-radius: 34px;
    padding: 26px 18px 28px;
    position: relative;
    background: rgba(0, 0, 0, .08);
}

.frame:before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(243, 240, 230, .28);
    border-radius: 28px;
    pointer-events: none;
}

.frame__badge {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(243, 240, 230, .45);
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
    font-weight: 600;
    color: rgba(243, 240, 230, .85);
}

.names {
    margin: 0;
    text-align: center;
    font-family: "Great Vibes", cursive;
    font-size: 52px;
    line-height: 1.05;
    font-weight: 400;
}

.names span {
    font-family: "Cormorant Garamond", serif;
    font-size: 34px;
    opacity: .8;
}

/* КАЛЕНДАРЬ */
.calendar {
    width: min(var(--max), 100%);
    display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 8px;
    }
    
    .calendar__week {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 10px;
        color: rgba(243, 240, 230, .75);
        font-weight: 600;
        letter-spacing: 1px;
        text-align: center;
    }
    
    .calendar__grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 10px;
        text-align: center;
        color: rgba(243, 240, 230, .85);
        font-size: 18px;
    }
    
    .day {
        padding: 6px 0;
        border-radius: 12px;
        opacity: .95;
    }
    
    .day.is-empty {
        opacity: .2;
    }
    
    .day.is-heart {
        background: rgba(178, 200, 120, .25);
        position: relative;
    }
    
    .day.is-heart:before {
        content: "";
        position: absolute;
        inset: -4px;
        background: rgba(178, 200, 120, .25);
        filter: blur(1px);
        border-radius: 14px;
    }
    
    .day.is-heart:after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 34px;
        height: 30px;
        transform: translate(-50%, -55%);
        background: rgba(178, 200, 120, .55);
        clip-path: path("M17 28 C8 23,2 18,2 11 C2 6,6 2,11 2 C14 2,16 4,17 6 C18 4,20 2,23 2 C28 2,32 6,32 11 C32 18,26 23,17 28 Z");
        opacity: .9;
    }
    
    .day.is-heart b {
        position: relative;
        z-index: 2;
    }
    
    .calendar__month {
        text-align: center;
        margin-top: 8px;
    }
    
    /* ТАЙМИНГ */
    .timeline {
        width: min(var(--max), 100%);
        position: relative;
        padding: 6px 0 10px;
    }
    
    .timeline__line {
        position: absolute;
        left: 26px;
        top: 0;
        bottom: 0;
        width: 1px;
        background: rgba(243, 240, 230, .35);
        border-radius: 2px;
        opacity: .7;
    }
    
    .timeline__item {
        display: flex;
        gap: 14px;
        align-items: center;
        padding: 18px 0;
    }
    
    .icon {
        width: 52px;
        height: 52px;
        border-radius: 999px;
        border: 1px solid rgba(243, 240, 230, .35);
        display: grid;
        place-items: center;
        background: rgba(0, 0, 0, .08);
        box-shadow: 0 10px 18px rgba(0, 0, 0, .18);
        position: relative;
    }
    
    .icon svg {
        width: 34px;
        height: 34px;
        fill: none;
        stroke: rgba(243, 240, 230, .85);
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    
    .timeline__text {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    
    .timeline__title {
        font-size: 38px;
    }
    
    .timeline__time {
        font-size: 20px;
        color: rgba(243, 240, 230, .75);
        letter-spacing: 1px;
    }
    
    /* ДРЕСС */
    .palette {
        display: flex;
        gap: 10px;
        margin-top: 10px;
    }
    
    .swatch {
        width: 46px;
        height: 46px;
        border-radius: 999px;
        border: 1px solid rgba(243, 240, 230, .35);
        box-shadow: 0 14px 22px rgba(0, 0, 0, .18);
    }
    
    .swatch:nth-child(1) {
        background: #6b7a5a;
    }
    
    .swatch:nth-child(2) {
        background: #a8b38a;
    }
    
    .swatch:nth-child(3) {
        background: #d7c8b6;
    }
    
    .swatch:nth-child(4) {
        background: #9b6b57;
    }
    
    .swatch:nth-child(5) {
        background: #2c2f2b;
    }
    
    .note {
        width: min(var(--max), 100%);
        padding: 16px 16px;
        border: 1px solid rgba(243, 240, 230, .35);
        border-radius: 22px;
        background: rgba(0, 0, 0, .08);
        color: rgba(243, 240, 230, .8);
    }
    
    /* карточки */
    .card {
        width: min(var(--max), 100%);
        padding: 18px 18px;
        border: 1px solid rgba(243, 240, 230, .35);
        border-radius: 22px;
        background: rgba(0, 0, 0, .08);
        color: rgba(243, 240, 230, .8);
        line-height: 1.35;
    }
    
    /* QR */
    .qr {
        width: min(var(--max), 100%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    
    .qr img {
        width: 190px;
        height: 190px;
        object-fit: cover;
        border-radius: 18px;
        background: #fff;
        padding: 12px;
    }
    
    .qr__caption {
        font-size: 16px;
        color: rgba(243, 240, 230, .75);
        text-align: center;
    }
    
    /* Организатор */
    .org {
        width: min(var(--max), 100%);
        background: rgba(245, 242, 234, .95);
        color: rgba(20, 18, 14, .86);
        border-radius: 22px;
        padding: 18px 18px;
        box-shadow: 0 20px 45px rgba(0, 0, 0, .25);
    }
    
    .org p {
        margin: 0 0 14px;
        line-height: 1.35;
    }
    
    /* Кнопка */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        height: 44px;
        padding: 0 18px;
        border-radius: 14px;
        border: 1px solid rgba(0, 0, 0, .18);
        background: transparent;
        color: rgba(20, 18, 14, .86);
        text-decoration: none;
        font-weight: 600;
        letter-spacing: 1px;
        cursor: pointer;
    }
    
    .btn--wide {
        width: min(var(--max), 100%);
        border-color: rgba(243, 240, 230, .45);
        color: rgba(243, 240, 230, .9);
        background: rgba(0, 0, 0, .10);
    }
    
    /* Таймер */
    .countdown {
        width: min(520px, 100%);
        border-radius: 28px;
        overflow: hidden;
        background: rgba(0, 0, 0, .10);
        border: 1px solid rgba(243, 240, 230, .25);
    }
    
    .countdown__top {
        padding: 18px 18px 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    
    .ring-icon svg {
        width: 52px;
        height: 52px;
        fill: none;
        stroke: rgba(243, 240, 230, .85);
        stroke-width: 2.2;
    }
    
    .timer {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        text-align: center;
    }
    
    .timer b {
        display: block;
        font-size: 34px;
        font-weight: 600;
        line-height: 1;
    }
    
    .timer span {
        display: block;
        margin-top: 4px;
        font-size: 14px;
        color: rgba(243, 240, 230, .7);
        letter-spacing: 1px;
    }
    
    .rip {
        height: 18px;
        background:
            radial-gradient(12px 10px at 10px 9px, transparent 58%, rgba(243, 240, 230, .0) 60%) repeat-x;
        background-size: 24px 18px;
        opacity: .7;
        filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .18));
    }
    
    .countdown__photo img {
        width: 100%;
        height: 320px;
        object-fit: cover;
        display: block;
        filter: saturate(.96) contrast(.98);
    }
    
    /* RSVP форма */
    .form {
        width: min(var(--max), 100%);
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    
    .fieldset {
        border: 1px solid rgba(243, 240, 230, .35);
        border-radius: 20px;
        padding: 14px 14px;
        background: rgba(0, 0, 0, .08);
    }
    
    .fieldset legend {
        padding: 0 8px;
        color: rgba(243, 240, 230, .8);
        font-weight: 600;
    }
    
    .radio {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        padding: 10px 4px;
        color: rgba(243, 240, 230, .82);
    }
    
    .radio input {
        margin-top: 4px;
    }
    
    .field {
        display: flex;
        flex-direction: column;
        gap: 6px;
        color: rgba(243, 240, 230, .82);
    }
    
    .field input,
    .field textarea {
        width: 100%;
        border-radius: 14px;
        border: 1px solid rgba(243, 240, 230, .25);
        background: rgba(0, 0, 0, .10);
        color: rgba(243, 240, 230, .9);
        padding: 12px 12px;
        font-family: inherit;
        font-size: 16px;
        outline: none;
    }
    
    .field input::placeholder,
    .field textarea::placeholder {
        color: rgba(243, 240, 230, .45);
    }
    
    .footer {
        padding: 34px 18px 46px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        color: rgba(243, 240, 230, .7);
    }
    
    .footer__line {
        width: 120px;
        height: 1px;
        background: rgba(243, 240, 230, .35);
    }
    
    .footer__text {
        letter-spacing: 1px;
    }
        /* === ФОНЫ СЕКЦИЙ (НЕ ДВИГАЮТСЯ) === */
        .section {
            position: relative;
            overflow: hidden;
            background: transparent;
        }
    
        
    
        .section::before {
           
            position: absolute;
            inset: 0;
            background:
                radial-gradient(240px 180px at 20% 30%, rgba(0, 0, 0, .10), transparent 60%),
                radial-gradient(220px 160px at 70% 55%, rgba(255, 255, 255, .05), transparent 65%);
            opacity: .5;
            pointer-events: none;
        }
    
        .section>* {
            position: relative;
            z-index: 1;
        }