/* =========================================================
   Silvia e Nicola — RSVP
   Palette da "Partecipazioni ... - VETTORIALE - colore.pdf":
   oro testo #CBA461 · oro linee #C8A260 · fondo grigio ardesia #2E393D
   Grafiche (images/*.svg): vettoriali estratte da "VETTORIALE - colore.pdf", ricolorate in oro #CBA461, sfondo trasparente
   ========================================================= */

@font-face {
    font-family: "Palmera Emilia";
    src: url("../fonts/PalmeraEmilia.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Bodoni FLF";
    src: url("../fonts/BodoniFLF-Bold.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --green: #2E393D;          /* fondo grigio ardesia (nome variabile storico) */
    --green-2: #354347;
    --green-3: #3D4C51;
    --gold: #CBA461;
    --gold-line: #C8A260;
    --gold-soft: rgba(203, 164, 97, .55);
    --gold-faint: rgba(203, 164, 97, .18);
    --cream: #F3E7CF;
    --error: #F2A08B;
    --script: "Palmera Emilia", "Snell Roundhand", cursive;
    --serif: "Bodoni FLF", "Bodoni 72", "Didot", Georgia, serif;
    --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--green);
    color: var(--gold);
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
em { font-style: italic; }
[hidden] { display: none !important; }

::selection { background: var(--gold); color: var(--green); }

/* ---------- Tipografia comune ---------- */

.names {
    font-family: var(--script);
    font-weight: normal;
    font-size: clamp(4rem, 18vw, 7.4rem);
    line-height: 1.05;
    margin: .25em 0 .3em;
    letter-spacing: 0;
}
.names-e { font-size: .8em; padding: 0 .08em; }
.names-small { font-size: clamp(3.2rem, 13vw, 4.6rem); margin: 0; }

.section-title {
    font-weight: normal;
    font-size: clamp(2.2rem, 9vw, 3.2rem);
    letter-spacing: .02em;
    margin: 0 0 .4em;
    text-align: center;
}

.divider {
    width: 190px;
    height: auto;
    margin: 1.6rem auto;
}

/* ---------- HERO ---------- */

.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px var(--gutter) 0;
    overflow: hidden;
}

.invite {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 640px;
    padding: 64px 30px 58px;
    text-align: center;
}

.corner {
    position: absolute;
    width: 92px;
    height: 92px;
    pointer-events: none;
}
.corner.tl { top: 0; left: 0; }
.corner.tr { top: 0; right: 0; transform: scaleX(-1); }
.corner.bl { bottom: 0; left: 0; transform: scaleY(-1); }
.corner.br { bottom: 0; right: 0; transform: scale(-1, -1); }

.kicker {
    text-transform: uppercase;
    font-size: clamp(.95rem, 4.2vw, 1.3rem);
    letter-spacing: .03em;
    line-height: 1.3;
    margin: 0;
}

.date {
    font-size: clamp(1.15rem, 5vw, 1.5rem);
    margin: 0 0 .2em;
    letter-spacing: .02em;
}
.date .sep { padding: 0 .15em; }

.place, .follow {
    font-size: clamp(1.05rem, 4.5vw, 1.35rem);
    line-height: 1.35;
    margin: 0 0 1.1em;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
    border-radius: 0;
    transition: background-color .25s, color .25s, border-color .25s, opacity .25s;
}

.btn-ghost {
    margin-top: .6rem;
    padding: .8em 1.6em;
    color: var(--gold);
    border: 1px solid var(--gold-line);
    background: transparent;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .85rem;
}
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--gold); color: var(--green); }

.forest {
    position: relative;
    z-index: 1;
    width: 100vw;
    height: 46vw;
    min-height: 220px;
    max-height: 520px;
    margin-top: auto;
    background: url("../images/forest.svg") center top / cover no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
}

/* ---------- FOTO ---------- */

.photo-section {
    padding: 72px var(--gutter) 24px;
    text-align: center;
    background: linear-gradient(var(--green-2), var(--green));
}

.photo {
    position: relative;
    margin: 0 auto;
    width: min(86vw, 420px);
    aspect-ratio: 3 / 4;
}
/* doppia cornice oro sfalsata, squadrata */
.photo::before {
    content: "";
    position: absolute;
    inset: -12px;
    border: 1px solid var(--gold-line);
    pointer-events: none;
}
.photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 55% 60%;
    filter: grayscale(1) contrast(1.05);
}

.photo-caption {
    margin: 2.2rem 0 0;
    font-size: clamp(1.1rem, 4.6vw, 1.4rem);
    font-style: italic;
    line-height: 1.4;
}

/* ---------- PROGRAMMA ---------- */

.program {
    padding: 56px var(--gutter) 64px;
}

.program-body {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 18px;
    max-width: 640px;
    margin: 0 auto;
}

.itinerary {
    width: 33%;
    max-width: 200px;
    height: auto;
    align-self: center;
}

.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    /* ordine cronologico dall'alto (h 14:00) — l'illustrazione accanto richiama la "risalita in montagna" */
    flex-direction: column;
    justify-content: space-around;
    flex: 1;
}
.timeline li {
    position: relative;
    padding: 14px 0 14px 22px;
    border-left: 1px solid var(--gold-faint);
}
.timeline li::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 21px;
    width: 11px;
    height: 11px;
    background: var(--gold);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath d='M0-10C.7-2.6 2.6-.7 10 0 2.6.7.7 2.6 0 10-.7 2.6-2.6.7-10 0-2.6-.7-.7-2.6 0-10Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath d='M0-10C.7-2.6 2.6-.7 10 0 2.6.7.7 2.6 0 10-.7 2.6-2.6.7-10 0-2.6-.7-.7-2.6 0-10Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.timeline .time {
    display: block;
    font-size: clamp(1.4rem, 6vw, 1.9rem);
    line-height: 1.1;
}
.timeline .what {
    display: block;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .9rem;
    margin-top: .25em;
}
.timeline .where {
    display: block;
    font-size: .98rem;
    line-height: 1.35;
    margin-top: .3em;
    color: var(--cream);
    opacity: .85;
}

/* ---------- RSVP ---------- */

.rsvp {
    padding: 56px var(--gutter) 80px;
    text-align: center;
    background: var(--green-2);
    border-top: 1px solid var(--gold-faint);
    border-bottom: 1px solid var(--gold-faint);
}

.rsvp-intro {
    font-size: clamp(1.1rem, 4.8vw, 1.4rem);
    line-height: 1.35;
    margin: 0;
}

.rsvp-form, .success {
    max-width: 560px;
    margin: 0 auto;
    text-align: left;
}

.row { display: grid; gap: 0 18px; grid-template-columns: 1fr; }

.field { margin-bottom: 18px; }

.field label, .companions-toggle legend {
    display: block;
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.field input {
    width: 100%;
    font: inherit;
    font-size: 1.1rem;
    color: var(--cream);
    background: rgba(0, 0, 0, .14);
    border: 0;
    border-bottom: 1px solid var(--gold-soft);
    border-radius: 0;
    padding: 10px 12px;
    outline: none;
    transition: border-color .2s, background-color .2s;
    -webkit-appearance: none;
    appearance: none;
}
.field input:focus { border-bottom-color: var(--gold); background: rgba(0, 0, 0, .24); }
.field input[aria-invalid="true"] { border-bottom-color: var(--error); }
.field input:-webkit-autofill {
    -webkit-text-fill-color: var(--cream);
    -webkit-box-shadow: 0 0 0 100px var(--green-3) inset;
    caret-color: var(--cream);
}

.field-error {
    margin: 4px 0 0;
    min-height: 0;
    font-size: .9rem;
    color: var(--error);
}
.field-error:empty { display: none; }

.form-alert {
    margin-bottom: 22px;
    padding: 12px 16px;
    border: 1px solid var(--error);
    color: var(--error);
    text-align: center;
    background: rgba(242, 160, 139, .07);
}

.companions-toggle {
    border: 0;
    margin: 8px 0 18px;
    padding: 0;
}
.companions-toggle legend {
    text-transform: none;
    letter-spacing: 0;
    font-size: 1.1rem;
    margin-bottom: 12px;
    line-height: 1.35;
}

.choice { display: flex; gap: 12px; flex-wrap: wrap; }
.choice label { cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span {
    display: inline-block;
    padding: .55em 1.3em;
    border: 1px solid var(--gold-soft);
    transition: background-color .2s, color .2s;
}
.choice input:checked + span { background: var(--gold); color: var(--green); border-color: var(--gold); }
.choice input:focus-visible + span { outline: 2px solid var(--cream); outline-offset: 2px; }

.companions {
    border-left: 1px solid var(--gold-faint);
    padding: 4px 0 4px 16px;
    margin-bottom: 26px;
}
.companions-hint { margin: 0 0 14px; font-size: .95rem; color: var(--cream); opacity: .8; }

.companion {
    position: relative;
    padding: 8px 36px 0 0;
    animation: fade-in .35s ease;
}
.companion-n {
    display: block;
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .7;
    margin-bottom: 4px;
}
.companion-remove {
    position: absolute;
    top: 30px;
    right: 0;
    width: 32px;
    height: 32px;
    border: 1px solid var(--gold-soft);
    background: transparent;
    color: var(--gold);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}
.companion-remove:hover { background: var(--gold); color: var(--green); }

/* ---------- Allergie / intolleranze ---------- */

.dietary {
    border: 0;
    margin: 0 0 22px;
    padding: 0;
}
.dietary legend {
    font-size: 1rem;
    line-height: 1.35;
    margin-bottom: 10px;
    padding: 0;
}
.choice-sm span { padding: .4em 1.1em; font-size: .95rem; }

.dietary-options {
    margin-top: 14px;
    padding: 14px;
    background: rgba(0, 0, 0, .12);
    border: 1px solid var(--gold-faint);
    animation: fade-in .3s ease;
}
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.chip { cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
    display: inline-block;
    padding: .35em .85em;
    font-size: .9rem;
    border: 1px solid var(--gold-soft);
    border-radius: 99px;
    color: var(--cream);
    transition: background-color .2s, color .2s, border-color .2s;
}
.chip input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--green); }
.chip input:focus-visible + span { outline: 2px solid var(--cream); outline-offset: 2px; }
.dietary-options .field { margin-bottom: 0; }
.dietary-options .field input::placeholder { color: var(--cream); opacity: .4; }
.companion .dietary { margin-bottom: 18px; }

.btn-link {
    background: none;
    border: 0;
    color: var(--gold);
    padding: 6px 0;
    font-size: 1rem;
    border-bottom: 1px solid transparent;
}
.btn-link:hover { border-bottom-color: var(--gold); }
.btn-link svg { width: 14px; height: 14px; fill: var(--gold); }

.btn-gold {
    width: 100%;
    padding: 1em 1.4em;
    border: 1px solid var(--gold);
    background: var(--gold);
    color: var(--green);
    font-size: 1.05rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.btn-gold:hover, .btn-gold:focus-visible { background: transparent; color: var(--gold); }
.btn-gold[disabled] { opacity: .6; cursor: progress; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.success {
    text-align: center;
    padding: 28px 8px 8px;
    animation: fade-in .6s ease;
}
.success-star { width: 34px; height: 34px; fill: var(--gold); margin: 0 auto 10px; display: block; }
.success-title { font-size: clamp(1.6rem, 7vw, 2.2rem); margin: 0 0 .4em; }
.success-text { font-size: 1.15rem; margin: 0 0 .6em; color: var(--cream); }
.success-note { font-size: .95rem; opacity: .75; margin: 0; }
.success-sign { font-family: var(--script); font-size: 2.6rem; margin: .5em 0 0; }

/* ---------- FOOTER ---------- */

.footer {
    position: relative;
    text-align: center;
    overflow: hidden;
}
.forest-footer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    opacity: .22;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 60%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 60%);
}
.footer-inner { position: relative; z-index: 2; padding: 90px var(--gutter) 110px; text-shadow: 0 0 18px var(--green), 0 0 6px var(--green); }
.footer-date { letter-spacing: .3em; margin: .4em 0 0; }

/* ---------- NEVE ---------- */

.snow {
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;   /* non blocca mai i click */
    overflow: hidden;
    contain: strict;
}

.flake {
    position: absolute;
    top: -24px;
    left: 0;
    width: var(--s, 10px);
    height: var(--s, 10px);
    will-change: transform;
    /* "backwards": durante l'attesa iniziale il fiocco resta fuori schermo, sopra il bordo alto */
    animation: fall var(--d, 12s) linear var(--delay, 0s) infinite backwards;
}
.flake > i {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--gold);
    opacity: var(--o, .8);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cg stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0-11V11M-9.5-5.5L9.5 5.5M-9.5 5.5L9.5-5.5M0-11l-2.5 2.5M0-11l2.5 2.5M0 11l-2.5-2.5M0 11l2.5-2.5M9.5 5.5l-3.4.9M9.5 5.5l-.9-3.4M-9.5-5.5l3.4-.9M-9.5-5.5l.9 3.4M9.5-5.5l-3.4-.9M9.5-5.5l-.9 3.4M-9.5 5.5l3.4.9M-9.5 5.5l.9-3.4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cg stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0-11V11M-9.5-5.5L9.5 5.5M-9.5 5.5L9.5-5.5M0-11l-2.5 2.5M0-11l2.5 2.5M0 11l-2.5-2.5M0 11l2.5-2.5M9.5 5.5l-3.4.9M9.5 5.5l-.9-3.4M-9.5-5.5l3.4-.9M-9.5-5.5l.9 3.4M9.5-5.5l-3.4-.9M9.5-5.5l-.9 3.4M-9.5 5.5l3.4.9M-9.5 5.5l.9-3.4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
    animation: sway var(--sw, 4s) ease-in-out infinite alternate;
}
.flake.dot > i { -webkit-mask: none; mask: none; border-radius: 50%; }

@keyframes fall {
    from { transform: translate3d(var(--x, 50vw), -5vh, 0) rotate(0deg); }
    to   { transform: translate3d(calc(var(--x, 50vw) + var(--drift, 0px)), 105vh, 0) rotate(var(--r, 180deg)); }
}
@keyframes sway {
    from { transform: translateX(-12px); }
    to   { transform: translateX(12px); }
}
@keyframes fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Tablet / desktop ---------- */

@media (min-width: 640px) {
    :root { --gutter: 32px; }
    .row { grid-template-columns: 1fr 1fr; }
    .corner { width: 130px; height: 130px; }
    .invite { padding: 84px 70px 76px; }
    .btn-gold { width: auto; min-width: 260px; display: flex; margin: 8px auto 0; }
    .program-body { gap: 40px; }
}

@media (min-width: 1024px) {
    .hero { padding-top: 64px; }
    .forest { max-height: 460px; }
    .photo-section { padding-top: 100px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .snow { display: none; }
    .companion, .success { animation: none; }
}