/* ══════════════════════════════════════════════════════════════════════════
   DINGO INVITATIONS — design system
   Mobile-first (360–430px e ținta reală). Fără dependențe în afară de fonts.

   TIPOGRAFIE — roluri distincte:
     --font-names    Cormorant Garamond ITALIC · numele mirilor (lizibil; era Monsieur
                     La Doulaise, cu majuscule ilizibile — „Ioana"→„Joana"). Are diacriticele.
     --font-script   Pinyon Script · titluri de secțiune + monogramă (are diacriticele).
     --font-serif    Cormorant Garamond · corpul de text.
     --font-ui       Inter · etichete, butoane, formulare.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─────────────── 1. TOKENS ─────────────── */
:root {
  /* culoare */
  --burgundy:       #7A1728;
  --burgundy-deep:  #5E0F1E;
  --burgundy-soft:  #93203A;
  --cream:          #FAF6F0;
  --cream-2:        #F1E7DA;
  --gold:           #C9A14E;
  --gold-light:     #E6D3A3;   /* text auriu pe roșu → contrast AA */
  --gold-dark:      #8F701F;   /* text auriu pe crem  → contrast AA */
  --sage:           #6E7F63;
  --ink:            #33241F;
  --ink-soft:       #6B564F;
  --white:          #FFFFFF;
  --danger:         #A32014;

  /* ACCENT de conținut — comută cu tema (titluri, punct timeline, ore-venue, story,
     countdown, floral-band). Default = burgundy (zero regresie); tema ivory → salvie. */
  --accent:         var(--burgundy);
  --accent-soft:    var(--burgundy-soft);
  --accent-deep:    var(--burgundy-deep);

  /* tipografie */
  --font-names:   'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;  /* numele mirilor — italic, lizibil (era Monsieur, ilizibil la majuscule) */
  --font-script:  'Pinyon Script', 'Cormorant Garamond', cursive;           /* titluri + monogramă */
  --font-serif:   'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ritm */
  --wrap:    min(100% - 2.5rem, 34rem);
  --sec-pad: clamp(4rem, 13vw, 7rem);
  --torn-h:  34px;
  --foot-deep: 40,6,14;            /* stopul cel mai profund al footer-ului (fallback burgundy) */
  /* florale așezate chiar deasupra zonei de ruptură, cu marginea de jos ESTOMPATĂ:
     marginea DREAPTĂ a asseturilor corner-bl/br (compoziția AI tăiată de cadru) cade în
     interiorul fade-ului de mască → se topește, nu se vede. Poziția ține floralele DEASUPRA
     rândului rupturii (crem↔roșu) la orice lățime → la graniță rămâne DOAR conturul rupt
     organic (fără muchie floral la rândul verificat de torn-checker). */
  --hero-floral-bottom: calc(var(--torn-h) + 6px);
  /* plasă de siguranță INDEPENDENTĂ de poziție: ultimii --hero-floral-fade px ai floralelor
     se estompează gradual (mask-image) → muchia dreaptă se topește la ORICE lățime/înălțime
     de hero și la orice fază de parallax. Recomandat pt orice temă viitoare cu florale. */
  --hero-floral-fade: 70px;
  /* PEREChE de măști COMPLEMENTARE, aceeași linie zigzag Z(x). torn-b = opac DEASUPRA liniei;
     torn-t = opac SUB linie. Cu secțiunile suprapuse --torn-h, marginea-jos a secțiunii de sus
     (torn-b) și marginea-sus a celei de jos (torn-t) coincid pe ACEEAȘI linie → cele două
     suprafețe REALE se întâlnesc exact pe contur, fără dublă-stivuire (fără pas) și fără gol. */
  --torn-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0,0 H1200 V30 L1179.1,33.4 L1148.7,28.3 L1108.4,28.5 L1085.4,19.6 L1051.8,14 L1028.8,18.9 L1011.8,15.8 L992.3,23.9 L971.7,20.9 L939.1,18.1 L917.5,14 L894.5,19 L849.4,26.1 L810.5,27.6 L790.9,27.2 L768.8,34.8 L740.5,32.4 L713,41.3 L696.2,33.9 L650.4,33.9 L617.9,38.3 L583.6,39.4 L562.2,33.4 L518.4,30.7 L493.2,14 L465.9,17.3 L423,25.5 L377.3,33.9 L334.8,33.7 L311.4,40.5 L293.3,46 L262.8,46 L245.8,41.5 L203.6,44.1 L183.1,36.5 L151.3,29.2 L124.4,22.9 L85.2,22.7 L54.9,16.2 L34.7,20.1 L14.9,24 L0,19.5 Z'/%3E%3C/svg%3E");
  --torn-t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M1200,30 L1179.1,33.4 L1148.7,28.3 L1108.4,28.5 L1085.4,19.6 L1051.8,14 L1028.8,18.9 L1011.8,15.8 L992.3,23.9 L971.7,20.9 L939.1,18.1 L917.5,14 L894.5,19 L849.4,26.1 L810.5,27.6 L790.9,27.2 L768.8,34.8 L740.5,32.4 L713,41.3 L696.2,33.9 L650.4,33.9 L617.9,38.3 L583.6,39.4 L562.2,33.4 L518.4,30.7 L493.2,14 L465.9,17.3 L423,25.5 L377.3,33.9 L334.8,33.7 L311.4,40.5 L293.3,46 L262.8,46 L245.8,41.5 L203.6,44.1 L183.1,36.5 L151.3,29.2 L124.4,22.9 L85.2,22.7 L54.9,16.2 L34.7,20.1 L14.9,24 L0,19.5 L0,60 L1200,60 Z'/%3E%3C/svg%3E");

  /* mișcare */
  --ease-out:  cubic-bezier(.16, .84, .28, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --ease-back: cubic-bezier(.34, 1.4, .5, 1);

  /* umbre multi-strat */
  --sh-sm: 0 1px 2px rgba(51,36,31,.06), 0 2px 6px rgba(51,36,31,.05);
  --sh-md: 0 2px 4px rgba(51,36,31,.05), 0 8px 20px -8px rgba(51,36,31,.22);
  --sh-lg: 0 4px 8px rgba(51,36,31,.06), 0 24px 48px -20px rgba(51,36,31,.42);

  /* textură de hârtie — SVG inline, zero request-uri */
  --paper: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='0.42'/></svg>");
  /* grain cinematic pentru imagini */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23g)' opacity='0.5'/></svg>");
}

/* ─────────────── 2. RESET ─────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  min-height: 100dvh;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-variant-numeric: lining-nums;   /* Cormorant e oldstyle implicit */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; height: 100dvh; }

[hidden] { display: none !important; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ol, ul { list-style: none; padding: 0; }
a { color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1.15em; height: 1.15em; flex: 0 0 auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; top: -100%; left: 50%; transform: translateX(-50%);
  z-index: 200; padding: .8rem 1.4rem;
  background: var(--burgundy); color: var(--cream);
  font-family: var(--font-ui); font-size: .8rem; text-decoration: none;
}
.skip-link:focus { top: .5rem; }

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

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

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

/* ─────────────── 3. TIPOGRAFIE ─────────────── */
.script {
  font-family: var(--font-script);
  font-weight: 400;
  line-height: 1.3;
  font-size: clamp(2.3rem, 10vw, 3.5rem);
  padding-block: .06em .2em;   /* Pinyon are descendente lungi */
  letter-spacing: .005em;
}

/* numele mirilor + monograma */
.display {
  font-family: var(--font-names); font-style: italic;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .01em;
}

.lead {
  font-size: clamp(1.0625rem, 4.1vw, 1.2rem);
  font-weight: 300;
  line-height: 1.85;
  margin-top: 1.15rem;
  text-wrap: pretty;
}
.lead--ink { color: var(--ink-soft); }

.muted {
  margin-top: 1.7rem;
  font-size: .95rem; font-style: italic; letter-spacing: .04em;
  color: var(--ink-soft);
}

.eyebrow, .card__label, .cd__lbl, .field__legend {
  font-family: var(--font-ui);
  font-size: .62rem; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
}

/* ─────────────── 4. SECȚIUNI + TORN EDGE ─────────────── */
.wrap { width: var(--wrap); margin-inline: auto; text-align: center; position: relative; z-index: 2; }

.sec { position: relative; padding-block: var(--sec-pad); isolation: isolate; }
.sec::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image: var(--paper);
  mix-blend-mode: multiply; opacity: .5; pointer-events: none;
}
.sec--cream { background: var(--cream); }
.sec--cream .script { color: var(--accent); }
.sec--red {
  background: radial-gradient(120% 80% at 50% 0%, var(--burgundy-soft) 0%, transparent 62%), var(--burgundy);
  color: var(--cream);
}
.sec--red .script { color: var(--cream); }
.sec--red::after { opacity: .26; mix-blend-mode: overlay; }

/* ─────────────── SCENĂ CONTINUĂ (Faza B) ───────────────
   Lumea ilustrată sub <main>: wash (gradient CSS, 0 KB) = „cerul care nu se
   resetează" · botanic repeat-y cu parallax DOAR prin transform (iOS-safe, nicicum
   background-attachment:fixed) · secțiunile devin scrim-uri translucide ca lumea să
   curgă pe sub ele. Totul gated pe .scene-on → calea fără scenă rămâne neatinsă. */
#main { position: relative; isolation: isolate; }

.scene {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg,
    var(--wash-top) 0%, var(--wash-mid) 50%, var(--wash-lo) 84%, var(--wash-bot) 100%);
}
.scene__botanical {
  position: absolute; left: 0; right: 0; top: -1200px; bottom: -1200px;
  background-repeat: repeat-y; background-position: center top; background-size: 100% auto;
  transform: translate3d(0, var(--scene-par, 0px), 0);   /* parallax = doar transform */
  will-change: transform;
}
/* imaginile scenei = sub fold → încărcate DUPĂ load (JS pune .scene-ready), ca să
   NU concureze la prioritate cu asseturile critice above-fold (plic/hero). Wash-ul
   (gradient CSS) rămâne imediat, deci nu apare gol. */
html.scene-ready .scene__botanical { background-image: var(--scene-botanical); }

/* teme: paletă wash + urls (JS adaugă clasa .scene-<theme> din CONFIG.scene.theme) */
/* Wash: rămâne DESCHIS aproape tot drumul, plonjează în profund doar la final
   (ultima secțiune roșie). Așa secțiunile crem nu se întunecă → contrastul
   textului auriu-închis (gold-dark, text mic) rămâne AA. */
html.scene-burgundy {
  --wash-top: #FAF6F0; --wash-mid: #F3E9DB; --wash-lo: #ECDBC8; --wash-bot: #6A1524;
  --scene-botanical: url("../assets/scene/burgundy/scene-botanical.webp");
  --scene-venue: url("../assets/scene/burgundy/venue.webp");
  --hero-floral-bl: url("../assets/florals/burgundy/corner-bl.webp");
  --hero-floral-br: url("../assets/florals/burgundy/corner-br.webp");
  --scrim-cream: 250,246,240; --scrim-red: 94,15,30; --scrim-red-glow: 147,32,58;
  /* wash hero burgundy — monocrom CALD: plum fumuriu (sus) → mauve → rose prăfuit →
     ton cald lângă florale (jos). Zero albastru; doar luminozitatea variază. */
  --hero-wash-1: #3A2029;   /* plum-brun fumuriu, închis */
  --hero-wash-2: #542B37;   /* mauve profund */
  --hero-wash-3: #714551;   /* mauve-rose prăfuit */
  --hero-wash-4: #9C7168;   /* rose prăfuit cald */
  --hero-wash-5: #BE967D;   /* ton cald care curge în florale */
  --hero-wash-6: var(--wash-top);   /* = wash-ul scenei → hero curge CONTINUU în lumea paginii
       (ruptura hero→story dezvăluie scena; egale → nicio muchie, doar dizolvare) */
  --hero-veil-glow: rgba(94,15,30,.28);
  --hero-veil-bot: rgba(74,12,26,.52);
  --torn-deep: rgb(94,15,30);   /* hârtia rupturilor „profunde" (rsvp→footer) pe temă */
  --foot-deep: 40,6,14;         /* footer se așază în burgundy-negru */
}
html.scene-ivory {
  --wash-top: #F7F4EE; --wash-mid: #EFEBE0; --wash-lo: #DCE0D2; --wash-bot: #3F4A39;
  --scene-botanical: url("../assets/scene/ivory/scene-botanical.webp");
  --scene-venue: url("../assets/scene/ivory/venue.webp");
  --hero-floral-bl: url("../assets/florals/ivory/corner-bl.webp");
  --hero-floral-br: url("../assets/florals/ivory/corner-br.webp");
  --scrim-cream: 247,244,238; --scrim-red: 63,74,57; --scrim-red-glow: 110,127,99;
  /* accente de conținut pe paleta ivory (salvie) — coerență completă */
  --accent: #4C5B41; --accent-soft: #6E7F63; --accent-deep: #3A4634;
  /* wash hero ivory — monocrom CALD pe familia salvie/olive: olive-charcoal (sus) →
     salvie → salvie-taupe → ivoriu cald lângă florale (jos). Zero albastru. */
  --hero-wash-1: #2F332A;   /* olive-charcoal cald */
  --hero-wash-2: #454C3B;   /* salvie profundă */
  --hero-wash-3: #6B7259;   /* salvie */
  --hero-wash-4: #9AA084;   /* salvie-taupe deschis */
  --hero-wash-5: #C6C2AC;   /* ivoriu-salvie cald în florale */
  --hero-wash-6: var(--wash-top);   /* = wash-ul scenei ivory → hero curge continuu în pagină */
  --hero-veil-glow: rgba(63,74,57,.26);
  --hero-veil-bot: rgba(50,60,45,.52);
  --torn-deep: rgb(63,74,57);   /* sage profund — rupturile „profunde" pe tema ivory */
  --foot-deep: 24,30,20;        /* footer se așază în sage-negru (nu burgundy) */
}

/* secțiunile devin scrim-uri translucide DOAR cu scena activă (altfel opace, ca înainte).
   Crem la .90 ca textul auriu-închis să rămână lizibil peste scenă. */
html.scene-on .sec--cream { background: rgba(var(--scrim-cream), .9); }
html.scene-on .sec--red {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(var(--scrim-red-glow), .5) 0%, transparent 62%),
    rgba(var(--scrim-red), .84);
}

/* venue: ilustrația în capul #venues, în spatele cardurilor */
.venue-illus {
  position: absolute; left: 0; right: 0; top: 0; z-index: 0;
  height: min(50vh, 320px);
  background-repeat: no-repeat; background-position: center top; background-size: contain;
  opacity: .5; pointer-events: none;
}
html.scene-ready .venue-illus { background-image: var(--scene-venue); }
html:not(.scene-on) .venue-illus { display: none; }

@media (prefers-reduced-motion: reduce) {
  .scene__botanical { transform: none; }   /* parallax oprit, scena statică */
}

/* ═══ GRANIȚE ORGANICE prin MĂȘTI COMPLEMENTARE pe CONTAINER ═══
   PRINCIPIU: nicio muchie dreaptă pe verticala paginii, ȘI nicio bandă de dublă-stivuire.
   Fiecare secțiune se maschează SUS (torn-t = opac SUB zigzag) și JOS (torn-b = opac DEASUPRA
   zigzag) și urcă --torn-h peste secțiunea de deasupra. Marginea-jos a secțiunii de sus și
   marginea-sus a celei de jos folosesc ACEEAȘI linie zigzag → se întâlnesc EXACT pe contur:
   deasupra liniei = suprafața reală de sus, sub linie = cea de jos. Complementare → NU se
   stivuiesc (translucidele nu se dublează → fără pasul de la top+torn-h) și NU lasă gol.
   Singura tranziție rămasă e conturul rupt real (crem↔roșu), niciodată o muchie dreaptă. */
#main > .sec {
  --torn-mask:
    var(--torn-t) top / 100% var(--torn-h) no-repeat,
    linear-gradient(#000, #000) center / 100% calc(100% - 2 * var(--torn-h) + 2px) no-repeat,
    var(--torn-b) bottom / 100% var(--torn-h) no-repeat;
  -webkit-mask: var(--torn-mask);
          mask: var(--torn-mask);
  -webkit-mask-composite: source-over;   /* union (WebKit vechi) */
          mask-composite: add;           /* union (standard) */
  margin-top: calc(-1 * var(--torn-h));  /* suprapunere → zigzagul de jos coincide cu cel de sus */
  padding-block: calc(var(--sec-pad) + var(--torn-h));  /* conținut liber de ambele zone rupte */
}
/* footer = capătul paginii: doar marginea de SUS ruptă (complementară cu marginea-jos a rsvp). */
.foot {
  --torn-mask:
    var(--torn-t) top / 100% var(--torn-h) no-repeat,
    linear-gradient(#000, #000) left bottom / 100% calc(100% - var(--torn-h) + 1px) no-repeat;
  -webkit-mask: var(--torn-mask);
          mask: var(--torn-mask);
  -webkit-mask-composite: source-over;
          mask-composite: add;
  margin-top: calc(-1 * var(--torn-h));
  padding-top: var(--torn-h);
}
/* hero rămâne dreptunghiular sus (e capul paginii); prima secțiune se rupe complementar peste el. */

.ornament { margin-top: 2.2rem; color: var(--gold); display: flex; justify-content: center; }
.ornament svg { width: min(240px, 62%); height: auto; }
.sec--cream .ornament, .ornament--ink { color: var(--gold-dark); }
.sec--red .ornament { color: var(--gold-light); opacity: .8; }

/* bandă hortensii — separator orizontal pictat (garland), per temă (JS pune src-ul).
   Lățime armonioasă, centrată deasupra conținutului secțiunii; fade-in la intrarea în viewport. */
.floral-band {
  display: block; width: min(84%, 26rem); height: auto;
  margin: 0 auto clamp(1.1rem, 4.5vw, 2.2rem);
  position: relative; z-index: 2; pointer-events: none;
}

/* ─────────────── 5. HUD (limbă + muzică) ─────────────── */
.hud {
  position: fixed; z-index: 60;
  right: max(.9rem, env(safe-area-inset-right));
  bottom: max(.9rem, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: .6rem;
}
.hud__btn {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  color: var(--gold-light);
  background: rgba(var(--scrim-red, 94,15,30), .88);   /* comută cu tema (burgundy/salvie) */
  border: 1px solid rgba(201,161,78,.55);
  border-radius: 50%;
  box-shadow: var(--sh-md);
  backdrop-filter: blur(6px);
  transition: transform .25s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.hud__btn:active { transform: scale(.92); }

.lang { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1; }
.lang .ic { width: 15px; height: 15px; opacity: .6; }
.lang__code { font-family: var(--font-ui); font-size: .55rem; font-weight: 500; letter-spacing: .06em; }

/* equalizer */
.eq { display: flex; align-items: flex-end; gap: 2.5px; height: 15px; }
.eq i { width: 2.5px; height: 4px; background: currentColor; border-radius: 1px; }
.music[aria-pressed="true"] .eq i { animation: bar .9s var(--ease-soft) infinite; }
.music[aria-pressed="true"] .eq i:nth-child(2) { animation-delay: .18s; }
.music[aria-pressed="true"] .eq i:nth-child(3) { animation-delay: .36s; }
.music[aria-pressed="true"] .eq i:nth-child(4) { animation-delay: .1s; }
.music[aria-pressed="false"] .eq { opacity: .45; }
.music[aria-pressed="false"] .eq i { height: 4px; }
@keyframes bar { 0%,100% { height: 4px } 50% { height: 15px } }

/* ─────────────── 6. PLIC (straturi de imagini) ───────────────
   Geometrie canonică (docs/ASSET-SPEC-PLIC.md), în procente din scenă:
     balamaua clapei  y = 0        vârful clapei  y = 56%
     centrul sigiliului (50%, 56%) cartonașul     7% / 86%
   Fiecare strat e un <img> pe aceeași pânză 1500×1000 → inset:0 le aliniază.
   Umbrele și glow-ul sunt CSS: imaginile vin FĂRĂ ele.                      */
/* HIBRID (webgency): plicul e un OVERLAY FIX peste hero — imaginea coaptă fullscreen.
   La tap se DIZOLVĂ (scale + fade) dezvăluind hero-ul de dedesubt (care e la scroll 0,
   fiindcă plicul e `fixed`, nu ocupă spațiu în flux). Straturile (env-scene) = deprecated. */
.envelope {
  position: fixed; inset: 0; z-index: 40; overflow: hidden;
  background: var(--burgundy-deep);   /* anti-flash până se încarcă imaginea coaptă */
  --unfold-ease: cubic-bezier(.62, .02, .9, .38);   /* ease-IN prelungit: pornește lent, accelerează */
  /* fundalul devine transparent pe măsură ce clapele se pliază → hero-ul de dedesubt se revelează */
  transition: background var(--unfold-dur, 1.95s) var(--ease-soft) var(--unfold-delay, .34s);
}
/* deschidere fizică: fundalul plicului dispare (clapele fac reveal-ul), nu se mai dizolvă întregul */
.envelope.is-open { background: transparent; pointer-events: none; }
.envelope.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.envelope.is-instant { transition: none !important; }

.env-scene {
  position: absolute; top: 50%; left: 50%;
  width: max(100vw, 150dvh); aspect-ratio: 3 / 2;
  transform: translate(-50%, -50%);
}

.env-body {
  position: absolute; inset: 0;
  perspective: 1400px;
  /* filtrul aplatizează contextul 3D al clapei → cartonașul rămâne ascuns sub
     clapă/buzunar în starea închisă (fără el, translateZ-ul clapei îl lasă să
     răzbată pe margini). Bonus: umbră subtilă pe plic. */
  filter: drop-shadow(0 10px 22px rgba(51,36,31,.28));
  /* burgundy sub straturi: dacă un WebP întârzie se vede plicul, nu un gol */
  background: var(--burgundy-deep);
}

/* ── HIBRID: imaginea coaptă a plicului închis, peste straturi ──
   Fullscreen cover, centrată pe sigiliu (sigiliul stă la ~50% orizontal, ~51% vertical
   în sursă). Monograma = text HTML (Pinyon) suprapusă pe centrul gol al sigiliului.
   Glow pulsant CSS = call-to-action. La `is-open` → cross-fade, straturile rulează D0. */
.env-closed {
  position: absolute; inset: 0; z-index: 5; overflow: hidden;
  perspective: 1500px;   /* profunzime 3D pt plierea clapelor */
  /* lățimea AFIȘATĂ a imaginii 9:16 în crop-ul „cover" — baza unică pe care inelul,
     monograma și clapele urmăresc sigiliul la orice viewport (aceeași ca .env-unfold) */
  --cover-w: max(100vw, 56.25dvh);
}
.env-closed__img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 50%; display: block;
}
/* la tap: img (starea LCP) se stinge instant → clapele identice de dedesubt preiau, apoi se pliază */
.envelope.is-open .env-closed__img { opacity: 0; transition: opacity .12s linear; }

/* ── DESCHIDERE FIZICĂ: cele 4 clape ──
   Container dimensionat exact la „cover" (centrat, deverse → clip de .envelope) astfel încât
   geometria clapelor e în % din imagine (simplă, robustă pe orice aspect, fără JS de layout). */
.env-unfold {
  position: absolute; top: 50%; left: 50%;
  --cover-w: max(100vw, 56.25dvh);
  width: var(--cover-w); height: calc(var(--cover-w) * 1.777778);
  transform: translate(-50%, -50%); transform-style: preserve-3d;
  opacity: 0;   /* ascunse până la tap (img e starea închisă / LCP) */
}
.envelope.is-open .env-unfold { opacity: 1; }   /* instant, sub img care se stinge → fără flash */
.flap {
  position: absolute; inset: 0;
  background-image: var(--closed-img); background-size: 100% 100%; background-position: center;
  backface-visibility: hidden;   /* dincolo de 90° fa+a din spate e ascunsă → clapa dispare, nu se „oglindește" */
  will-change: transform;
  filter: drop-shadow(0 3px 8px rgba(24,8,12,.42));   /* grosime de hârtie pe muchia de tăiere */
  /* hârtie SOLIDĂ care se pliază (fără fade — fade = „dissolve" respins); dispare via backface la >90° */
  transition: transform var(--unfold-dur, 1.95s) var(--unfold-ease) var(--fd, var(--unfold-delay, .34s));
}
/* fiecare clapă = triunghi de la 2 colțuri ale imaginii la punctul sigiliului; balama pe muchia exterioară.
   STAGGER (întârzieri diferite) → rupe simetria de „caleidoscop": clapa de sus deschide prima, laterale, apoi jos. */
.flap--top    { clip-path: polygon(0 0, 100% 0, var(--seal-x, 50%) var(--seal-y, 51%)); transform-origin: 50% 0;  --fd: var(--unfold-delay, .34s); }
.flap--left   { clip-path: polygon(0 0, 0 100%, var(--seal-x, 50%) var(--seal-y, 51%)); transform-origin: 0 50%;  --fd: calc(var(--unfold-delay, .34s) + 170ms); }
.flap--right  { clip-path: polygon(100% 0, 100% 100%, var(--seal-x, 50%) var(--seal-y, 51%)); transform-origin: 100% 50%; --fd: calc(var(--unfold-delay, .34s) + 250ms); }
.flap--bottom { clip-path: polygon(100% 100%, 0 100%, var(--seal-x, 50%) var(--seal-y, 51%)); transform-origin: 50% 100%; --fd: calc(var(--unfold-delay, .34s) + 380ms); }
/* bloom: clapele se pliază ÎNAPOI (spre exterior, departe de privitor) din punctul sigiliului */
.envelope.is-open .flap--top    { transform: rotateX(var(--fold-deg, 166deg)); }
.envelope.is-open .flap--bottom { transform: rotateX(calc(-1 * var(--fold-deg, 166deg))); }
.envelope.is-open .flap--left   { transform: rotateY(calc(-1 * var(--fold-deg, 166deg))); }
.envelope.is-open .flap--right  { transform: rotateY(var(--fold-deg, 166deg)); }
/* mono + inel: CENTRAȚI PE SIGILIUL DIN IMAGINE, nu pe viewport. Sigiliul stă la
   (--seal-fx, --seal-fy) — fracții din imaginea afișată (--cover-w × 16/9, centrată).
   Deplasarea față de centrul viewport-ului = (fracție − .5) × dimensiunea imaginii →
   urmăresc sigiliul exact prin crop-ul cover la ORICE lățime/aspect (fără hack-uri
   pe media query). Fracțiile vin din config (geometry.sealX/sealY) prin envelope.js. */
.env-closed__mono, .env-closed__glow {
  left: calc(50% + (var(--seal-fx, .5) - .5) * var(--cover-w));
  top:  calc(50% + (var(--seal-fy, .51) - .5) * var(--cover-w) * 1.777778);
}
.env-closed__mono {
  position: absolute; transform: translate(-50%, -50%);
  /* dimensiune legată de CROP-ul „cover" al imaginii (--cover-w = lățimea afișată
     a imaginii 9:16) → scalează cu SIGILIUL real, nu cu vw; pe telefoane înalte nu mai iese
     din coroana de lauri. */
  font-family: var(--font-script); font-size: clamp(1.35rem, calc(var(--cover-w) * .052), 2.4rem);
  font-weight: 600; color: #4A3410; opacity: 1; letter-spacing: .05em; pointer-events: none;
  /* gravat în ceară: umbră întunecată sus-interior + highlight cald dedesubt (relief) */
  text-shadow:
    0 -1px 1px rgba(46,28,6,.55),
    0  1px 1px rgba(255,236,190,.75),
    0  2px 3px rgba(255,220,160,.35);
}
.env-closed__glow {
  /* INEL de lumină pe conturul cerii (nu halo difuz): un segment cald (conic-gradient)
     parcurge circumferința în loop — „marginea incandescentă". Dimensiunea urmează
     ACEEAȘI bază ca monograma (crop-ul cover al imaginii 9:16), deci inelul rămâne
     pe contur la orice aspect ratio. Rotația e transform pur (60fps pe mobil).
     --ring-k (diametrul, fracție din lățimea imaginii) vine din config
     (geometry.ringK, per asset/variantă) prin envelope.js; fallback .365 (closed-v2). */
  --ring-w: 14%;         /* grosimea benzii luminoase (din rază) */
  --ring-arc: 130deg;    /* lungimea segmentului care se rotește */
  --ring-max: .95;       /* intensitatea vârfului de lumină */
  --ring-base: .2;       /* inelul de bază, uniform (mereu ușor incandescent) */
  --ring-dur: 3.6s;      /* un tur complet */
  position: absolute;
  width: calc(var(--cover-w) * var(--ring-k, .365)); aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(0deg); border-radius: 50%; pointer-events: none;
  background:
    conic-gradient(
      transparent 0deg,
      rgba(255, 186, 110, .35) calc(var(--ring-arc) * .3),
      rgba(255, 222, 168, var(--ring-max)) calc(var(--ring-arc) * .5),
      rgba(255, 186, 110, .35) calc(var(--ring-arc) * .7),
      transparent var(--ring-arc)),
    linear-gradient(rgba(255, 194, 124, var(--ring-base)), rgba(255, 194, 124, var(--ring-base)));
  /* masca taie discul în inel: feather interior mare, feather exterior mic = atingerea
     discretă a hârtiei imediat lângă sigiliu */
  -webkit-mask: radial-gradient(closest-side, transparent calc(88% - var(--ring-w)), #000 calc(97% - var(--ring-w)), #000 94%, transparent 100%);
  mask: radial-gradient(closest-side, transparent calc(88% - var(--ring-w)), #000 calc(97% - var(--ring-w)), #000 94%, transparent 100%);
  mix-blend-mode: screen;
  animation: ringSpin var(--ring-dur) linear infinite;
}
@keyframes ringSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
/* (fostul hack @media min-aspect-ratio pt landscape a dispărut: matematica pe
   --cover-w × --seal-fy dă poziția EXACTĂ la orice aspect, nu doar aproximată) */
/* FAZA 1 — sigiliul cedează: INELUL se intensifică scurt (nu un halo), se dilată puțin,
   apoi cedează pe măsură ce clapele încep să se desfacă din punctul sigiliului.
   filter animat doar aici (one-shot la tap), nu în loop-ul continuu. */
.envelope.is-open .env-closed__glow { animation: ringFlare var(--flare-dur, 1s) var(--ease-out) forwards; }
@keyframes ringFlare {
  0%   { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0deg);      filter: brightness(1.3); }
  35%  { opacity: 1; transform: translate(-50%,-50%) scale(1.14) rotate(40deg);  filter: brightness(2.4); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.5) rotate(90deg);   filter: brightness(1.6); }
}
/* monograma A&I dispare când sigiliul cedează */
.envelope.is-open .env-closed__mono { opacity: 0; transition: opacity .3s var(--ease-soft); }
/* env-scene (straturi flap/card/buzunar) = DEPRECATED la intro (nu mai e folosit; păstrat
   pt un posibil upsell „deschidere ceremonială"). Nu se randează, nu se încarcă. */
.env-scene { display: none; }

.env-layer, .env-flap, .env-card { position: absolute; }
.env-layer { inset: 0; width: 100%; height: 100%; }

.env-interior { z-index: 1; }
.env-pocket   { z-index: 3; }

/* cartonașul: 7% margine, 86% lățime — aceeași geometrie ca în spec */
.env-card {
  left: 7%; top: 7%; width: 86%; z-index: 2;
  transition: transform var(--card-dur, 1.2s) var(--card-ease, cubic-bezier(.2,.7,.25,1)) var(--card-delay, 2.2s);
  will-change: transform;
}
.env-card__img { width: 100%; height: auto; display: block; }
.env-card__text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
  padding: 8% 6%;
}
.env-card__rule { width: 44%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.env-card__eyebrow { font-family: var(--font-ui); font-size: clamp(.44rem, 1.6vw, .55rem); letter-spacing: .4em; text-transform: uppercase; color: var(--gold-dark); margin-top: .5rem; }
.env-card__names { font-family: var(--font-names); font-style: italic; font-weight: 500; font-size: clamp(1.6rem, 8vw, 2.2rem); line-height: 1.1; color: var(--burgundy); }
.display-fallback .env-card__names { font-family: var(--font-script); }
.env-card__date { font-family: var(--font-ui); font-size: clamp(.52rem, 2vw, .68rem); letter-spacing: .26em; color: var(--ink-soft); margin-bottom: .5rem; }

/* clapa: două fețe, pivot pe balama (marginea de sus) */
.env-flap {
  inset: 0; z-index: 5;
  transform-style: preserve-3d;
  transform-origin: 50% 0;
  transform: rotateX(0deg);
  transition: transform var(--flap-dur, 1.8s) var(--flap-ease, cubic-bezier(.42,.04,.32,1)) var(--flap-delay, .35s);
  will-change: transform;
}
.env-flap__face { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; }
.env-flap__out { transform: translateZ(.6px); }
/* fața interioară: imaginea vine OGLINDITĂ VERTICAL din pipeline —
   rotateX(180deg) în jurul centrului e chiar o oglindire pe verticală.
   Ușor mai întunecată: interiorul plicului stă în umbră, altfel 3D-ul citește plat. */
.env-flap__in  { transform: rotateX(180deg) translateZ(.6px); filter: brightness(.93) saturate(.95); }

/* sigiliul */
.seal {
  position: absolute; left: 50%; top: var(--flap-apex, 56%); z-index: 6;
  width: 20%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}
.seal__img { width: 100%; height: 100%; filter: drop-shadow(0 3px 6px rgba(51,36,31,.45)); }

/* glow cald — pur CSS, ca să poată pulsa și să reacționeze la hover */
.seal__glow {
  position: absolute; inset: -34%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(232,201,126,.55) 38%, rgba(232,201,126,0) 70%);
  opacity: 0;
  transition: opacity .45s var(--ease-soft);
}
.seal:hover .seal__glow, .seal:focus-visible .seal__glow, .seal.is-warm .seal__glow { opacity: 1; }

.seal__mono {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.seal__mono text {
  font-family: var(--font-script); font-size: 112px;
  fill: #6A5222; fill-opacity: .72;
  paint-order: stroke;
  stroke: rgba(255,244,214,.5); stroke-width: 1.6px;
}

.seal:not(.is-broken) { animation: sealPulse 3.6s var(--ease-soft) infinite; }
@keyframes sealPulse {
  0%, 100% { transform: translate(-50%,-50%) scale(1); }
  50%      { transform: translate(-50%,-50%) scale(1.035); }
}

/* overlay-uri suprapuse peste plic: taps trec prin ele către plic (deschidere),
   doar butonul „sari peste" prinde click. Scrim subtil pentru lizibilitate pe piele. */
.env-overlay {
  position: absolute; left: 0; right: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(1rem, 4vh, 1.8rem);
  padding: calc(1.6rem + env(safe-area-inset-top)) 1.25rem 1.6rem;
  pointer-events: none; text-align: center;
  /* strat de compozit propriu → textul (hint = candidat LCP) se pictează independent
     de imaginea coaptă de dedesubt, deci nu așteaptă încărcarea ei (LCP stabil, nu 2.6-4s). */
  transform: translateZ(0);
}
.env-overlay--top {
  top: 0;
  background: linear-gradient(180deg, rgba(40,8,16,.42), transparent);
}
.env-overlay--bottom {
  bottom: 0; justify-content: flex-end;
  padding: 1.6rem 1.25rem calc(1.8rem + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(40,8,16,.48), transparent);
}
.env-overlay .env-skip { pointer-events: auto; }

.env-guest { text-align: center; text-shadow: 0 1px 6px rgba(40,8,16,.55); }
.env-guest__label { display: block; font-family: var(--font-ui); font-size: .6rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-light); opacity: .9; }
.env-guest__name { display: block; margin-top: .12rem; font-family: var(--font-script); font-size: clamp(1.8rem, 8vw, 2.4rem); color: var(--cream); }

.env-hint {
  /* font de SISTEM (nu web font): e elementul pe care Chrome îl alege LCP (imaginea
     full-viewport e exclusă), deci nu trebuie să aștepte cele ~327KB de fonturi → LCP rapid. */
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: .68rem; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase; color: var(--cream); text-align: center;
  text-shadow: 0 1px 6px rgba(40,8,16,.6);
  opacity: 1;
  animation: hintFade 2.8s var(--ease-soft) infinite;
}
/* porneș­te la opacity 1 (nu .55) → paint-ul contentful e imediat, LCP nu se amână în simulate */
@keyframes hintFade { 0%,100% { opacity: 1 } 50% { opacity: .62 } }

.env-skip {
  min-height: 44px; padding: .6rem 1.2rem;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: .68rem; letter-spacing: .1em;
  color: var(--cream); text-decoration: underline; text-underline-offset: 4px;
  text-shadow: 0 1px 6px rgba(40,8,16,.6);
  opacity: .75; transition: opacity .3s;
}
.env-skip:hover { opacity: 1; }

/* ── DEPRECATED: secvența de deschidere pe STRATURI (clapă/card/buzunar/sigiliu) ──
   Nu se mai folosește — intro-ul e HIBRID (imagine coaptă → dissolve în hero). `.env-scene`
   e display:none, deci regulile de mai jos nu se aplică. PĂSTRATE pentru un posibil upsell
   „deschidere ceremonială pe straturi" (Ediția Regală). register-envelope.py & straturile
   assets/env/*.webp rămân pe disc (doar seal.webp e folosit acum — butonul RSVP). */
.envelope.is-open .seal {
  animation: sealBreak 1000ms forwards;
  pointer-events: none;
}
@keyframes sealBreak {
  0%   { transform: translate(-50%,-50%) scale(1)    rotate(0deg);   opacity: 1; filter: none;                animation-timing-function: cubic-bezier(.25,.9,.35,1); }
  8%   { transform: translate(-50%,-52%) scale(1.07) rotate(-2.6deg); opacity: 1; filter: brightness(1.16);   animation-timing-function: cubic-bezier(.3,0,.7,1); }
  16%  { transform: translate(-50%,-50%) scale(1.01) rotate(1.6deg);  opacity: 1; filter: none;                animation-timing-function: cubic-bezier(.55,0,1,.45); /* gravitație */ }
  70%  { opacity: 1; }
  100% { transform: translate(-46%, 150%) scale(.70) rotate(-38deg);  opacity: 0; }
}
.envelope.is-open .seal__glow { opacity: 0; transition: opacity .25s; }

.envelope.is-open .env-flap { transform: rotateX(-172deg); z-index: 1; transition: transform var(--flap-dur, 1.8s) var(--flap-ease, cubic-bezier(.42,.04,.32,1)) var(--flap-delay, .35s), z-index 0s 1.3s; }
/* cardul iese și SE OPREȘTE cu numele focal (nu off-screen). --card-lift reglabil. */
.envelope.is-open .env-card { transform: translateY(var(--card-lift, -20%)) scale(1.04); }
.envelope.is-open .env-hint,
.envelope.is-open .env-skip,
.envelope.is-open .env-guest { opacity: 0; transition: opacity .35s; animation: none; }

/* „sari peste intro" / reduced-motion: fără animație, direct starea finală */
.envelope.is-instant, .envelope.is-instant * { transition: none !important; animation: none !important; }

/* ─────────────── 7. HERO ─────────────── */
.hero {
  position: relative; min-height: 100dvh;
  display: grid; place-items: center;
  overflow: hidden; isolation: isolate;
  /* wash hero = fallback sub media + ceea ce transpare pe la margini. Monocrom-CALD,
     variație de LUMINOZITATE nu de NUANȚĂ (referință: reel webgency). Stop-urile sunt
     variabile per temă (html.scene-*) ca să le reglăm la validare fără rescriere.
     5 stop-uri apropiate → tranziție imperceptibilă, ochiul nu „vede linia". */
  background: linear-gradient(180deg,
    var(--hero-wash-1) 0%,
    var(--hero-wash-2) 24%,
    var(--hero-wash-3) 46%,
    var(--hero-wash-4) 66%,
    var(--hero-wash-5) 80%,
    var(--hero-wash-6) 92%);   /* wash-6 = wash-ul scenei, atins la 92% → ultimii ~8%
       (zona rupturii hero→story) sunt CREM plat = exact suprafața pe care o dezvăluie
       ruptura → dizolvare fără muchie. */
  color: var(--cream);
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__poster, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ═══════════════ HERO — SCENĂ VIE (hero.style: 'scene') ═══════════════
   Backdrop pictat 9:16 (cover) + lebede animate pe lac + petale. Se activează prin
   clasa .hero-scene pe <html> (main.js, doar în modul scene). În modul wash rămâne
   ascunsă și fundalul e wash-ul + floralele de colț (comportamentul vechi). */
.hero__scene { position: absolute; inset: 0; overflow: hidden; opacity: 0; }
html.hero-scene .hero__scene { opacity: 1; }
/* în modul scene, floralele de colț și ve-ul roșu greu dispar (backdrop-ul are propriul
   arc floral + propria adâncime) — altfel s-ar dubla. */
html.hero-scene .hero__florals { display: none; }
/* scroll-cue-ul (linie aurie vertical jos-centru) ar sta pe zona de dizolvare crem →
   citește ca artefact vertical; backdrop-ul + lebedele sunt destul de imersive ca
   afordanță de scroll. Ascuns în modul scene. */
html.hero-scene .scroll-cue { display: none; }
.hero__backdrop {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
  opacity: 0; transition: opacity .9s var(--ease-soft);
  /* masca de siguranță: ultimii ~12% ai imaginii se estompează → chiar dacă gradientul
     de dizolvare de mai jos nu se aliniază perfect la o lățime, muchia dreaptă e topită. */
  -webkit-mask: linear-gradient(to bottom, #000 88%, transparent 99%);
          mask: linear-gradient(to bottom, #000 88%, transparent 99%);
}
.hero__backdrop.is-ready { opacity: 1; }
/* DIZOLVARE în crem: backdrop-ul (lac închis) se termină în ACELAȘI crem (--wash-top) ca
   wash-ul scenei care preia la main-top (~96%) → hero-ul se sfârșește CREM = scena, exact
   ca în modul wash (--hero-wash-6). Ruptura de hârtie a story-ului taie apoi crem-pe-crem
   → singura graniță vizibilă = conturul rupt. Peste backdrop+lebede, sub benzile de nume;
   pornește SUB corpul lebedelor (88%) ca să nu le atingă (reflexia lor se topește firesc). */
html.hero-scene .hero__scene::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 87%, var(--wash-top) 96%);
}

/* scrim radial în spatele numelor — lizibilitate crem+gold pe centrul backdrop-ului.
   Doar în modul scene. Intensitatea (--hero-scrim) e per temă: ivory (pal) → mai puternic,
   burgundy (deja închis) → discret. Verticala urmează blocul de text (~48%). */
.hero__scrim { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
html.hero-scene .hero__scrim {
  opacity: 1;
  /* elipsă înaltă (urmează coloana de text), o singură cădere lină → vignetă, nu „blob" */
  background: radial-gradient(52% 50% at 50% 46%,
    var(--hero-scrim, rgba(40,20,30,.34)) 0%,
    transparent 74%);
}
html.scene-burgundy { --hero-scrim: rgba(36,10,20,.32); }
html.scene-ivory    { --hero-scrim: rgba(60,56,44,.5); }

/* ── lebedele: pereche (inimă), plutesc pe lac ──
   poziția (--swan-x/y) și lățimea (--swan-w) vin din config prin main.js, per temă.
   3 straturi de mișcare independente: .hero__swans = DRIFT orizontal lent; -body = LEGĂNARE
   verticală subtilă (defazată); -refl = reflexia sincronă. Transform pur → 60fps. */
.hero__swans {
  position: absolute;
  left: var(--swan-x, 50%); top: var(--swan-y, 84%);
  width: var(--swan-w, 46%);
  transform: translate(-50%, -50%);
  will-change: transform;
  animation: swanDrift var(--swan-drift-dur, 22s) var(--ease-soft) infinite alternate;
}
.hero__swans-body, .hero__swans-refl {
  display: block; width: 100%; aspect-ratio: 680 / 275;
  background: var(--swan-img) center / contain no-repeat;
}
.hero__swans-body { position: relative; animation: swanBob var(--swan-bob-dur, 4.5s) var(--ease-soft) infinite; }
/* reflexia: clonă răsturnată sub lebede, ștearsă + blurată + estompată la bază */
.hero__swans-refl {
  position: absolute; top: 100%; left: 0;
  transform: scaleY(-1); transform-origin: top;
  opacity: .25; filter: blur(2px);
  -webkit-mask: linear-gradient(to bottom, #000, transparent 72%);
          mask: linear-gradient(to bottom, #000, transparent 72%);
  animation: swanBob var(--swan-bob-dur, 4.5s) var(--ease-soft) infinite;
}
@keyframes swanDrift {
  0%   { transform: translate(calc(-50% - 3.5%), -50%); }
  100% { transform: translate(calc(-50% + 3.5%), -50%); }
}
@keyframes swanBob { 0%, 100% { transform: translateY(-2.5px); } 50% { transform: translateY(2.5px); } }
/* -body și -refl legănă defazat prin delay negativ diferit → nu se mișcă „lipite" */
.hero__swans-refl { animation-delay: -2.2s; }

/* ── petale care cad — PRIM-PLAN peste tot (backdrop + nume), doar benzile laterale ── */
.hero__petals { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hero__petals i {
  position: absolute; top: -4%;
  width: var(--pw, 8px); height: calc(var(--pw, 8px) * .72);
  background: var(--petal-col, rgba(150,40,60,.62));
  border-radius: 60% 40% 55% 45% / 55% 50% 50% 45%;
  opacity: 0;
  animation: petalFall var(--pd, 15s) linear var(--pdelay, 0s) infinite;
}
@keyframes petalFall {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  8%   { opacity: var(--po, .6); }
  92%  { opacity: var(--po, .6); }
  100% { opacity: 0; transform: translate(var(--pdx, 22px), 108vh) rotate(var(--prot, 220deg)); }
}
/* culoarea petalelor per temă. Blush deschis (nu burgundy închis) ca să se DESPRINDĂ de
   fundalul pictat (mauve + trandafiri închiși) — altfel petala se pierde. Discretă prin
   opacitate (0.5-0.7), nu prin culoare invizibilă. */
html.scene-burgundy .hero__petals i { --petal-col: rgba(224,168,182,.66); }
html.scene-ivory    .hero__petals i { --petal-col: rgba(236,224,200,.74); }
.hero__video { opacity: 0; transition: opacity .8s var(--ease-soft); }
.hero__video.is-playing { opacity: 1; }
/* grain = și DITHER pentru gradientul mare al hero-ului (rupe banding-ul pe 8-biți în zona
   deschisă crem, unde overlay-ul era prea slab) → .1 opacitate. */
.hero__grain { position: absolute; inset: 0; background-image: var(--grain); background-size: 150px; opacity: .1; mix-blend-mode: overlay; pointer-events: none; }
.hero__veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 55% at 50% 42%, var(--hero-veil-glow, rgba(94,15,30,.30)), transparent 70%),
    linear-gradient(180deg,
      rgba(30,20,26,.30) 0%, rgba(30,20,26,.06) 36%,
      var(--hero-veil-bot, rgba(94,15,30,.58)) 56%,
      rgba(74,12,26,.13) 74%, rgba(74,12,26,.03) 85%, transparent 92%);
    /* veil-ul se stinge ASIMPTOTIC (pași descrescători) și ajunge la 0 ÎNAINTE de zona rupturii
       (92%): panta scade lin → fără bandă Mach, iar baza hero-ului (95-100%, unde e ruptura) e
       CREM PUR = exact scena/story dezvăluită → fără pas la ruptură. */
}

.hero__inner { width: var(--wrap); text-align: center; padding-bottom: 10vh; text-shadow: 0 2px 18px rgba(40,16,22,.45); z-index: 1; }

.hero__dear { font-family: var(--font-script); font-size: clamp(1.4rem, 6vw, 1.9rem); color: var(--gold-light); margin-bottom: .3rem; }
.hero__eyebrow { font-family: var(--font-ui); font-size: .68rem; font-weight: 500; letter-spacing: .5em; text-transform: uppercase; color: var(--gold-light); }
.hero__date { margin-top: .9rem; font-family: var(--font-ui); font-size: .82rem; letter-spacing: .34em; }

.hero__names {
  margin-top: .4rem; font-weight: 500; font-style: italic;
  font-family: var(--font-names);
  font-size: clamp(3.2rem, 18vw, 6rem);
  letter-spacing: .01em; line-height: 1.02;
  display: flex; flex-direction: column; align-items: center;
}
.display-fallback .hero__names { font-family: var(--font-script); font-size: clamp(3rem, 17vw, 5.6rem); line-height: 1.05; }
.hero__name { padding-block: .02em .06em; }
/* ampersand: Cormorant italic (`&` clar, elegant) + Georgia fallback GARANTAT — nu Pinyon,
   al cărui `&` ornat se citește ca box/tofu pe ecran mic de telefon. */
.hero__amp { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: .58em; font-weight: 500; color: var(--gold-light); margin-block: .02em .06em; opacity: .95; }

.hero__city { margin-top: 1.2rem; font-family: var(--font-ui); font-size: .74rem; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: rgba(250,246,240,.9); }

/* reveal caligrafic — masca „scrie" numele */
.hero-anim { opacity: 0; transform: translateY(14px); }
.hero.hero-in .hero-anim { opacity: 1; transform: none; transition: opacity .9s var(--ease-soft), transform 1s var(--ease-out); }
.hero.hero-in .hero__eyebrow { transition-delay: .05s; }
.hero.hero-in .hero__date    { transition-delay: .2s; }
.hero.hero-in .hero__city    { transition-delay: 1.05s; }
/* ampersand auriu: apare prin SCALE bloom + fade (nu e SVG → nu stroke-draw), nu translate */
.hero__amp.hero-anim { transform: scale(.7); }
.hero.hero-in .hero__amp.hero-anim {
  transform: scale(1);
  transition: opacity .7s var(--ease-soft), transform .85s var(--ease-back);
  transition-delay: .6s;
}

/* Reveal caligrafic: masca mătură de la stânga la dreapta, „scriind" numele.
   Cu mask-size:300%, offsetul e (100% - 300%) × poziție = -2W × p.
   p=100% → masca neagră e complet în stânga elementului (invizibil)
   p=0%   → masca neagră acoperă tot elementul (vizibil)
   mask-repeat:no-repeat e OBLIGATORIU — altfel tile-urile readuc negru în cadru. */
.hero.hero-in .hero__name {
  transform: none;
  -webkit-mask-image: linear-gradient(100deg, #000 0 45%, transparent 62%);
          mask-image: linear-gradient(100deg, #000 0 45%, transparent 62%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  opacity: 1;
  animation: writeIn 1.1s var(--ease-soft) forwards;
}
.hero.hero-in .hero__name:first-of-type { animation-delay: .3s; }
.hero.hero-in .hero__names .hero__name:last-of-type { animation-delay: .72s; }
@keyframes writeIn {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0% 0;   mask-position: 0% 0; }
}

/* ── florale pictate în colțurile de jos ale hero-ului (înlocuiesc SVG-urile plate) ──
   3 niveluri ca să nu se bată transformările: .hero__floral = parallax (JS, data-parallax);
   .hero__floral-in = entrance (fade+drift la hero-in); .hero__floral-img = sway (rotate). */
.hero__florals { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.hero__floral {
  position: absolute; bottom: var(--hero-floral-bottom, 0px); width: min(54vw, 360px); aspect-ratio: 1;
  opacity: 0; will-change: transform;
  /* fade pe marginea de JOS (topește muchia dreaptă a asset-ului). Masca stă pe cutia
     de parallax → rămâne lipită de baza imaginii prin translate-ul de scroll. */
  -webkit-mask: linear-gradient(to top, transparent 0, #000 var(--hero-floral-fade, 46px));
          mask: linear-gradient(to top, transparent 0, #000 var(--hero-floral-fade, 46px));
}
.hero__floral--bl { left: -3%; }
.hero__floral--br { right: -3%; }
.hero.hero-in .hero__floral { opacity: 1; transition: opacity 1.3s var(--ease-soft) .3s; }
.hero__floral-in { display: block; width: 100%; height: 100%; transform: translateY(10px) scale(.97); transform-origin: bottom center; }
.hero.hero-in .hero__floral-in { transform: none; transition: transform 1.4s var(--ease-out) .3s; }
.hero__floral-img {
  display: block; width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat;
  animation: floralSway var(--sway-dur, 9s) var(--ease-soft) infinite;
}
/* imaginile se încarcă abia la revelarea hero-ului (hero-in) → lazy, zero impact LCP/Lighthouse */
.hero.hero-in .hero__floral--bl .hero__floral-img { background-image: var(--hero-floral-bl); background-position: bottom left; transform-origin: bottom left; }
.hero.hero-in .hero__floral--br .hero__floral-img { background-image: var(--hero-floral-br); background-position: bottom right; transform-origin: bottom right; animation-duration: 10.5s; animation-delay: -4.7s; }
/* sway abia perceptibil: ≤0.6°, cele două colțuri defazate prin durată+delay diferite */
@keyframes floralSway { 0%,100% { transform: rotate(-.5deg); } 50% { transform: rotate(.5deg); } }

.scroll-cue {
  position: absolute; z-index: 3;
  bottom: calc(2rem + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  width: 1px; height: 44px; overflow: hidden;
  background: linear-gradient(180deg, transparent, rgba(250,246,240,.7));
}
.scroll-cue span { position: absolute; inset: 0; background: var(--gold-light); animation: cue 2.2s var(--ease-soft) infinite; }
@keyframes cue { 0% { transform: translateY(-100%) } 60%,100% { transform: translateY(100%) } }

/* ─────────────── 8. LOVE STORY ─────────────── */
.story__rail {
  display: flex; gap: 1.4rem;
  margin-top: 2.2rem; padding: 1.5rem max(1.25rem, calc((100% - var(--wrap)) / 2)) 2.5rem;
  overflow-x: auto;
  /* `mandatory` re-snapează când copiii își schimbă transform-ul (scroll-reveal)
     și sare la ultimul item. `proximity` nu face asta. */
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.story__rail::-webkit-scrollbar { display: none; }

.story__item { flex: 0 0 min(74vw, 17rem); scroll-snap-align: center; text-align: center; }
.story__item:nth-child(odd)  .polaroid { rotate: -2.2deg; }
.story__item:nth-child(even) .polaroid { rotate: 2.4deg; }

/* reveal-ul NU atinge elementul de snap — doar conținutul lui */
.story__item[data-reveal] { transform: none; }
.story__item[data-reveal] .polaroid { transform: translateY(22px) scale(.98); transition: transform .95s var(--ease-out), rotate .5s var(--ease-out); }
.story__item[data-reveal].is-visible .polaroid { transform: none; }

.polaroid {
  background: var(--white); padding: .7rem .7rem 2.4rem;
  box-shadow: var(--sh-lg); border-radius: 2px;
}
.polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.story__when { margin-top: .9rem; font-family: var(--font-ui); font-size: .58rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-dark); }
.story__title { margin-top: .3rem; font-family: var(--font-script); font-size: 1.75rem; color: var(--accent); }
.story__text { margin-top: .4rem; font-size: .95rem; font-weight: 300; font-style: italic; color: var(--ink-soft); line-height: 1.65; }

/* ─────────────── 9. COUNTDOWN (flip) ─────────────── */
.cd { margin-top: 2.4rem; display: flex; align-items: flex-start; justify-content: center; gap: clamp(.1rem, 1.4vw, .7rem); }
.cd__unit { display: flex; flex-direction: column; align-items: center; min-width: clamp(3.6rem, 19vw, 5rem); }

.flip {
  position: relative; display: block;
  height: 1em; width: 100%;
  font-size: clamp(2.4rem, 12vw, 3.6rem);
  line-height: 1; color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  perspective: 320px;
}
.flip__v {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  backface-visibility: hidden;
}
.flip__v--in  { animation: flipIn  .42s var(--ease-out) both; }
.flip__v--out { animation: flipOut .42s var(--ease-soft) both; }
@keyframes flipIn  { from { transform: rotateX(-88deg); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes flipOut { from { transform: none; opacity: 1 } to { transform: rotateX(88deg); opacity: 0 } }

.cd__lbl { margin-top: .8rem; color: var(--ink-soft); }
.cd__sep { font-size: clamp(1.6rem, 8vw, 2.3rem); line-height: 1.3; color: var(--gold); }

.cd-over { position: relative; margin-top: 2rem; }
.cd-over .script { color: var(--accent); }
.confetti { position: absolute; inset: -40% -10% -60%; pointer-events: none; overflow: hidden; }
.confetti i {
  position: absolute; top: -12%;
  width: 7px; height: 11px; border-radius: 1px;
  animation: fall linear infinite;
}
@keyframes fall {
  0%   { transform: translate3d(0,0,0) rotate(0);        opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate3d(var(--dx,0), 260px, 0) rotate(540deg); opacity: 0; }
}

/* ─────────────── 10. TIMELINE ─────────────── */
.tl { position: relative; margin-top: 2.6rem; }
.tl__line { position: absolute; left: 50%; top: 6px; bottom: 6px; width: 2px; height: calc(100% - 12px); transform: translateX(-50%); overflow: visible; }
/* pathLength="1" e ATRIBUT pe <line>, nu proprietate CSS — normalizează dasharray */
.tl__stroke {
  stroke: var(--gold); stroke-width: 1; stroke-opacity: .8;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--ease-soft);
}
.tl.is-drawn .tl__stroke { stroke-dashoffset: 0; }

.tl__item { position: relative; display: grid; grid-template-columns: 1fr 44px 1fr; align-items: center; padding-block: clamp(.9rem, 3.4vw, 1.4rem); }
.tl__mark {
  grid-column: 2; width: 30px; height: 30px; margin-inline: auto;
  color: var(--gold-light);
  background: radial-gradient(circle, var(--accent) 60%, transparent 64%);
  border-radius: 50%; padding: 2px;
}
.tl__mark .ic { width: 100%; height: 100%; }
.tl__content { padding-inline: .5rem; }
.tl__item--l .tl__content { grid-column: 1; grid-row: 1; text-align: right; }
.tl__item--r .tl__content { grid-column: 3; grid-row: 1; text-align: left; }

.tl__time { display: block; font-family: var(--font-ui); font-size: 1rem; font-weight: 500; letter-spacing: .1em; color: var(--gold-light); font-variant-numeric: tabular-nums; }
.tl__title { display: block; margin-top: .15rem; font-size: clamp(1.15rem, 5vw, 1.4rem); color: var(--cream); }
.tl__desc { display: block; margin-top: .1rem; font-size: .84rem; font-weight: 300; font-style: italic; color: rgba(250,246,240,.72); line-height: 1.5; }

.tl__item[data-reveal] { transform: none; }
.tl__item[data-reveal] .tl__content { transition: transform .9s var(--ease-out), opacity .8s var(--ease-soft); }
.tl__item--l[data-reveal] .tl__content { transform: translateX(-18px); }
.tl__item--r[data-reveal] .tl__content { transform: translateX(18px); }
.tl__item.is-visible .tl__content { transform: none; }
.tl__item[data-reveal] .tl__mark { transform: scale(0); transition: transform .7s var(--ease-back) .1s; }
.tl__item.is-visible .tl__mark { transform: scale(1); }

/* ─────────────── 11. LOCAȚII ─────────────── */
.venues { display: flex; flex-direction: column; gap: 2rem; margin-top: 2.4rem; }
.venue {
  padding: 1.8rem 1.3rem 2rem;
  background: linear-gradient(180deg, #FFFDFA, var(--cream));
  border: 1px solid rgba(201,161,78,.4); border-radius: 2px;
  box-shadow: var(--sh-md);
}
.venue__label { font-family: var(--font-ui); font-size: .58rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-dark); }
/* ilustrația pictată: bandă de înălțime FIXĂ (rezervă spațiul → zero CLS la lazy-load și
   uniformizează cardurile — biserica înaltă și ballroom-ul lat respiră în același gabarit) */
.venue__art { display: block; height: clamp(9rem, 26vw, 12.5rem); width: auto; max-width: 88%; object-fit: contain; margin: 1.1rem auto .8rem; }
.venue__name { font-size: 1.35rem; font-weight: 500; letter-spacing: .04em; }
.venue__time { font-family: var(--font-ui); font-size: .8rem; letter-spacing: .18em; color: var(--accent); margin-top: .2rem; }
.venue__addr { margin-top: .5rem; font-size: .92rem; font-style: italic; color: var(--ink-soft); }
.venue__links { display: flex; justify-content: center; gap: .6rem; margin-top: 1.3rem; flex-wrap: wrap; }

/* ─────────────── 12. BUTOANE ─────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .8rem 1.5rem;
  font-family: var(--font-ui); font-size: .7rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  border: 1px solid currentColor; border-radius: 2px;
  position: relative; overflow: hidden;
  transition: transform .28s var(--ease-out), color .28s, background-color .28s, border-color .28s;
  -webkit-tap-highlight-color: transparent;
}
.btn::before { content: ""; position: absolute; inset: 3px; border: 1px solid currentColor; opacity: .3; pointer-events: none; }
.btn:active { transform: scale(.97); }

.btn--gold { margin-top: 1.8rem; color: var(--gold-dark); background: transparent; }
.sec--red .btn--gold { color: var(--gold-light); }
.btn--gold:hover { background: var(--gold); color: var(--white); border-color: var(--gold); }
.sec--red .btn--gold:hover { background: var(--gold-light); color: var(--burgundy-deep); border-color: var(--gold-light); }

.btn--small { min-height: 44px; padding: .65rem 1rem; font-size: .64rem; margin-top: 0; }
.btn--big   { padding: 1rem 2.4rem; font-size: .76rem; }
.btn--burgundy { background: var(--burgundy); border-color: var(--burgundy); color: var(--cream); }
.btn--burgundy:hover { background: var(--burgundy-deep); border-color: var(--burgundy-deep); }
.btn--burgundy[disabled] { opacity: .75; cursor: progress; }
.btn--ghost { color: var(--burgundy); margin-top: 1.8rem; }
.btn--ghost:hover { background: var(--burgundy); color: var(--cream); }
.btn--block { width: 100%; margin-top: 1.6rem; }

/* CTA-ul RSVP = sigiliul de ceară de la intrare (motiv recurent).
   Ceara e imaginea reală (seal.webp), scalată; eticheta e text REAL deasupra
   (i18n + a11y), gravată în centrul gol al sigiliului. */
.btn--seal {
  position: relative; display: inline-grid; place-items: center;
  width: min(66vw, 190px); aspect-ratio: 1;
  margin-top: 2rem; padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .3s var(--ease-soft), filter .3s var(--ease-soft);
  filter: drop-shadow(0 7px 16px rgba(51,36,31,.4));
}
.btn--seal__wax {
  position: absolute; inset: 0;
  background: url("../assets/env/seal.webp") center / contain no-repeat;
}
/* glow static discret — spectacolul (inelul rotativ) e la sigiliul plicului; butonul
   are deja textul, aici doar o încălzire moderată la hover/focus. Un inel geometric
   perfect în jurul conturului NEREGULAT al cerii ar arăta digital. */
.btn--seal__glow {
  position: absolute; inset: -12%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(232,201,126,.45) 40%, rgba(232,201,126,0) 70%);
  opacity: 0; transition: opacity .4s var(--ease-soft);
}
.btn--seal__label {
  position: relative; z-index: 1; max-width: 60%;
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(.74rem, 3.3vw, .92rem); line-height: 1.14;
  letter-spacing: .1em; text-transform: uppercase; color: var(--burgundy);
  text-shadow: 0 1px 0 rgba(255,246,222,.6);
}
.btn--seal:hover, .btn--seal:focus-visible { transform: translateY(-2px) scale(1.03); filter: drop-shadow(0 10px 22px rgba(51,36,31,.46)); }
.btn--seal:hover .btn--seal__glow, .btn--seal:focus-visible .btn--seal__glow { opacity: 1; }
.btn--seal:active { transform: scale(.98); }
.display-fallback .btn--seal__label { font-family: var(--font-script); letter-spacing: .04em; }

/* ─────────────── 13. DRESS CODE ─────────────── */
.swatches { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(.9rem, 4vw, 1.5rem); margin-top: 2.2rem; }
.swatch { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.swatch__dot {
  width: clamp(42px, 12vw, 52px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(230,211,163,.6);
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.5), inset 0 1px 2px rgba(255,255,255,.35);
}
.swatch__name { font-family: var(--font-ui); font-size: .56rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(250,246,240,.75); }

.dc { display: flex; flex-direction: column; align-items: center; gap: 2.8rem; margin-top: 3rem; }
.dc__item { width: min(78%, 17rem); }
.dc__item:first-child { rotate: -2.4deg; }
.dc__item:last-child  { rotate: 2.4deg; }
.dc__item figcaption { margin-top: 1rem; font-size: .88rem; font-style: italic; font-weight: 300; color: var(--gold-light); }

.frame {
  position: relative; padding: 11px; border-radius: 2px;
  background: linear-gradient(135deg, #EBDCB9 0%, var(--gold) 22%, #8F701F 48%, #E1CE9F 70%, #A9863F 100%);
  box-shadow: 0 20px 40px -22px rgba(0,0,0,.75), 0 2px 5px rgba(0,0,0,.25);
}
.frame::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(255,255,255,.45); pointer-events: none; }
.frame::after  { content: ""; position: absolute; inset: 0; border: 1px solid rgba(94,15,30,.28); pointer-events: none; }
.frame img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border: 1px solid rgba(94,15,30,.35); }
/* varianta ILUSTRAȚIE (default temă): ținuta pictată (cutout) pe un passe-partout crem,
   încadrată în aur — ca o schiță de modă înrămată. object-fit:contain → ținuta întreagă. */
.frame--illus img { object-fit: contain; padding: 7% 9%; background: radial-gradient(115% 115% at 50% 28%, #FCF8F1, #EFE3D0); border-color: rgba(94,15,30,.18); }

/* ─────────────── 14. GALERIE ─────────────── */
.masonry { column-count: 2; column-gap: .6rem; width: var(--wrap); margin: 2rem auto 0; }
.masonry li { break-inside: avoid; margin-bottom: .6rem; }
.masonry button { display: block; width: 100%; border-radius: 2px; overflow: hidden; box-shadow: var(--sh-sm); }
.masonry img { width: 100%; transition: transform .6s var(--ease-out), filter .4s; }
.masonry button:hover img { transform: scale(1.04); filter: brightness(1.05); }

/* ─────────────── 15. DETALII ─────────────── */
#details .wrap { padding-top: 2.5rem; }
.contacts { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.2rem; }
.contact {
  padding: 1.3rem 1rem;
  background: linear-gradient(180deg, #FFFDFA, var(--cream));
  border: 1px solid rgba(201,161,78,.4); border-radius: 2px; box-shadow: var(--sh-sm);
}
.contact__name { font-size: 1.25rem; font-weight: 500; }
.contact__role { font-size: .85rem; font-style: italic; color: var(--ink-soft); }
.tel {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: .7rem;
  min-height: 44px;                       /* țintă de atingere WCAG 2.5.8 */
  padding: .6rem 1.2rem; font-family: var(--font-ui); font-size: .95rem; letter-spacing: .06em;
  color: var(--burgundy); text-decoration: none; border-bottom: 1px solid var(--gold);
}
.tel:hover { color: var(--burgundy-deep); border-color: var(--burgundy); }

.card { margin-top: 2rem; padding: 1.8rem 1.4rem; border: 1px solid rgba(201,161,78,.45); border-radius: 2px; }
.card--quiet { background: transparent; border-style: dashed; }
.card__label { color: var(--gold-dark); }
.sec--red .card__label { color: var(--gold-light); }

.deadline { margin-top: 1.3rem; font-family: var(--font-ui); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-light); }

/* ─────────────── 16. MODAL RSVP ─────────────── */
.modal {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: rgba(48,12,20,.55); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .35s var(--ease-soft);
}
.modal.is-open { opacity: 1; }
.modal__panel {
  position: relative; width: 100%; height: 100dvh; overflow-y: auto;
  background: var(--white); text-align: center;
  padding: calc(3.6rem + env(safe-area-inset-top)) 1.4rem calc(2.5rem + env(safe-area-inset-bottom));
  transform: translateY(2.5%); transition: transform .45s var(--ease-out);
}
.modal.is-open .modal__panel { transform: none; }
.modal__panel .script { color: var(--burgundy); }

.modal__close {
  position: fixed; z-index: 2;
  top: calc(.7rem + env(safe-area-inset-top)); right: calc(.7rem + env(safe-area-inset-right));
  width: 44px; height: 44px; display: grid; place-items: center;
  color: var(--ink-soft); border-radius: 50%;
}
.modal__close:hover { color: var(--burgundy); background: var(--cream); }
.modal__close .ic { width: 22px; height: 22px; }

.modal__sub { margin-top: .2rem; font-family: var(--font-ui); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.modal__msg { margin-top: .9rem; font-size: 1.05rem; font-weight: 300; font-style: italic; line-height: 1.7; color: var(--ink-soft); }

#rsvpForm { margin-top: 2.2rem; text-align: left; }
.field { margin-bottom: 1.7rem; border: 0; padding: 0; }
.field > label:not(.radio):not(.meal), .field > legend, .field__legend {
  display: block; margin-bottom: .7rem; padding: 0;
  font-family: var(--font-ui); font-size: .62rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft);
}
.field input[type="text"], .field textarea {
  width: 100%; padding: .8rem .2rem; font-size: 1.05rem;
  background: transparent; border: 0; border-bottom: 1px solid rgba(107,86,79,.3);
  border-radius: 0; transition: border-color .3s; resize: vertical;
}
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--burgundy); }
.field.has-error input, .field.has-error textarea { border-bottom-color: var(--danger); }
.field__err, .form__error { margin-top: .5rem; font-family: var(--font-ui); font-size: .78rem; color: var(--danger); }
.form__error { padding: .8rem 1rem; background: #FDECEA; border-left: 2px solid var(--danger); }

.radio { display: flex; align-items: center; gap: .8rem; padding: .65rem 0; cursor: pointer; font-size: 1.02rem; font-weight: 300; text-transform: none; letter-spacing: normal; color: var(--ink); }
.radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio__dot { flex: 0 0 auto; width: 20px; height: 20px; border: 1px solid rgba(107,86,79,.45); border-radius: 50%; position: relative; transition: border-color .25s; }
.radio__dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--burgundy); transform: scale(0); transition: transform .25s var(--ease-back); }
.radio input:checked + .radio__dot { border-color: var(--burgundy); }
.radio input:checked + .radio__dot::after { transform: scale(1); }
.radio input:focus-visible + .radio__dot { outline: 2px solid var(--gold); outline-offset: 3px; }
.field--radio.has-error .radio__dot { border-color: var(--danger); }

.stepper { display: flex; align-items: center; gap: .4rem; }
.stepper__btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  font-family: var(--font-ui); font-size: 1.2rem; color: var(--burgundy);
  border: 1px solid rgba(107,86,79,.3); border-radius: 2px;
  transition: background-color .2s, border-color .2s;
}
.stepper__btn:hover:not([disabled]) { background: var(--cream); border-color: var(--burgundy); }
.stepper__btn[disabled] { opacity: .3; cursor: not-allowed; }
.stepper input {
  width: 4.5rem; text-align: center; padding: .7rem 0; font-size: 1.15rem;
  background: transparent; border: 0; border-bottom: 1px solid rgba(107,86,79,.3);
  font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.meal { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .8rem; padding: .6rem 0; border-bottom: 1px dashed rgba(107,86,79,.18); }
.meal:last-child { border-bottom: 0; }
.meal__who { font-family: var(--font-ui); font-size: .8rem; color: var(--ink-soft); }
.meal select {
  padding: .55rem 2rem .55rem .6rem; font-size: .95rem;
  background: var(--cream) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0h10L5 6z' fill='%236B564F'/></svg>") no-repeat right .7rem center;
  border: 1px solid rgba(107,86,79,.25); border-radius: 2px;
  -webkit-appearance: none; appearance: none;
}
#guestsField, #mealsField { transition: opacity .3s, max-height .4s var(--ease-soft); overflow: hidden; max-height: 40rem; }
#guestsField.is-hidden, #mealsField.is-hidden { opacity: 0; max-height: 0; margin-bottom: 0; pointer-events: none; }

.spinner { width: 16px; height: 16px; border: 2px solid rgba(250,246,240,.35); border-top-color: var(--cream); border-radius: 50%; display: none; animation: spin .7s linear infinite; }
.is-sending .spinner { display: block; }
.is-sending .btn__label { opacity: .75; }
@keyframes spin { to { transform: rotate(360deg) } }

.form__note { margin-top: 1.1rem; font-family: var(--font-ui); font-size: .72rem; color: var(--ink-soft); text-align: center; }

/* succes: sigiliul se re-lipește */
.modal__success { padding-top: 8vh; }
.reseal { width: 96px; height: 96px; margin: 0 auto 1.4rem; overflow: visible; }
.reseal__wax { transform-origin: center; animation: stamp .7s var(--ease-back) .15s both; }
.reseal__ring { transform-origin: center; animation: ringOut .9s var(--ease-out) .5s both; }
@keyframes stamp {
  0%   { transform: scale(2.4) translateY(-18px); opacity: 0; }
  55%  { transform: scale(.94); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes ringOut { from { transform: scale(.8); opacity: 0 } 40% { opacity: .9 } to { transform: scale(1.28); opacity: 0 } }

.modal__success h2, .modal__success .modal__msg, .modal__success .ornament, .modal__success .btn {
  opacity: 0; animation: riseIn .7s var(--ease-out) forwards;
}
.modal__success h2 { animation-delay: .7s; }
.modal__success .modal__msg { animation-delay: .85s; }
.modal__success .ornament { animation-delay: 1s; }
.modal__success .btn { animation-delay: 1.15s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

/* ─────────────── 17. LIGHTBOX ─────────────── */
.lb {
  position: fixed; inset: 0; z-index: 95;
  display: grid; grid-template-columns: 56px 1fr 56px; align-items: center;
  background: rgba(24,10,14,.94);
  opacity: 0; transition: opacity .3s var(--ease-soft);
  touch-action: pan-y;
}
.lb.is-open { opacity: 1; }
.lb__stage { grid-column: 2; display: grid; place-items: center; height: 100dvh; padding: 3rem 0; }
.lb__stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 2px; transition: transform .3s var(--ease-out), opacity .2s; }
.lb.is-swiping .lb__stage img { transition: none; }
.lb__nav, .lb__close { display: grid; place-items: center; color: rgba(250,246,240,.8); width: 48px; height: 48px; }
.lb__nav { z-index: 1; }
.lb__nav:hover, .lb__close:hover { color: var(--gold-light); }
.lb__nav .ic, .lb__close .ic { width: 24px; height: 24px; }
.lb__close { position: absolute; top: calc(.8rem + env(safe-area-inset-top)); right: .8rem; }
.lb__count { position: absolute; bottom: calc(1.4rem + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); font-family: var(--font-ui); font-size: .72rem; letter-spacing: .2em; color: rgba(250,246,240,.6); }

/* ─────────────── 18. FOOTER ─────────────── */
.foot { position: relative; min-height: 76vh; display: grid; place-items: center; overflow: hidden; background: var(--wash-bot, var(--burgundy-deep)); color: var(--cream); text-align: center; }
.foot__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foot__grain { position: absolute; inset: 0; background-image: var(--grain); background-size: 160px; opacity: .08; mix-blend-mode: overlay; }
/* veil footer = tonul profund AL SCENEI (per temă), nu burgundy fix — ivory se așază în sage */
.foot__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--scrim-red),.45) 0%, rgba(var(--scrim-red),.64) 45%, rgba(var(--foot-deep),.9) 100%); }
.foot__inner { position: relative; width: var(--wrap); padding-block: 4rem calc(4.5rem + env(safe-area-inset-bottom)); }
.foot__msg { font-family: var(--font-ui); font-size: .7rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--gold-light); }
.foot__names {
  margin-top: .9rem; font-family: var(--font-names); font-style: italic; font-weight: 500;
  font-size: clamp(2.4rem, 13vw, 3.9rem); line-height: 1.12;
  text-wrap: balance; padding-block: .04em .14em;
  text-shadow: 0 2px 20px rgba(30,8,14,.5);
}
.display-fallback .foot__names { font-family: var(--font-script); font-size: clamp(2.1rem, 11vw, 3.6rem); }
.foot__mono { margin-top: .4rem; font-family: var(--font-script); font-size: 1.6rem; color: var(--gold-light); opacity: .55; }
.foot__date { margin-top: .8rem; font-family: var(--font-ui); font-size: .74rem; letter-spacing: .3em; color: rgba(250,246,240,.75); }

.credit { margin-top: 2.6rem; font-family: var(--font-ui); font-size: .66rem; letter-spacing: .12em; color: rgba(250,246,240,.5); }
.credit a { color: rgba(230,211,163,.85); text-decoration: none; border-bottom: 1px solid rgba(230,211,163,.3); }
.credit a:hover { color: var(--gold-light); border-color: var(--gold-light); }

/* atribuire muzică CC BY — discretă, în tonul footerului (sub credit, deasupra marginii) */
.music-credit { margin-top: 2.2rem; font-family: var(--font-ui); font-size: .62rem; letter-spacing: .08em; color: rgba(250,246,240,.42); }
.music-credit + .credit { margin-top: .7rem; }
.music-credit a { color: rgba(230,211,163,.7); text-decoration: none; border-bottom: 1px solid rgba(230,211,163,.25); }
.music-credit a:hover { color: var(--gold-light); border-color: var(--gold-light); }

/* ─────────────── 19. SCROLL REVEAL ─────────────── */
[data-reveal] {
  opacity: 0; transform: translateY(24px) scale(.985);
  transition: opacity .9s var(--ease-soft), transform 1s var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal][style*="--d"] { transition-delay: var(--d); }

.no-js [data-reveal], .no-js .hero-anim { opacity: 1; transform: none; }
.no-js .envelope, .no-js .hud { display: none; }
.no-js [data-section] { display: block !important; }

/* ─────────────── 20. DESKTOP ─────────────── */
@media (min-width: 40em) {
  :root { --torn-h: 48px; --wrap: min(100% - 4rem, 40rem); }

  .venues { flex-direction: row; }
  .venue { flex: 1; }
  .dc { flex-direction: row; justify-content: center; align-items: flex-start; gap: 2.2rem; }
  .dc__item { width: 48%; max-width: 15rem; }
  .masonry { column-count: 3; column-gap: .8rem; }
  .story__rail { justify-content: center; }
  .tl { max-width: 34rem; margin-inline: auto; }
  .tl__item { grid-template-columns: 1fr 64px 1fr; }
  .tl__content { padding-inline: 1.2rem; }
  .cd { gap: .6rem; }

  .floral-band { width: min(72%, 30rem); }

  .modal__panel { width: min(100% - 3rem, 32rem); height: auto; max-height: min(92dvh, 46rem); border-radius: 3px; padding: 3.2rem 2.5rem 2.6rem; box-shadow: var(--sh-lg); }
  .modal__close { position: absolute; top: .8rem; right: .8rem; }
  .modal__success { padding-top: 1rem; }
  .lb { grid-template-columns: 90px 1fr 90px; }
}

/* ─────────────── 21. REDUCED MOTION ─────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], .hero-anim { opacity: 1 !important; transform: none !important; }
  .tl__item[data-reveal] .tl__content { transform: none !important; }
  .tl__item[data-reveal] .tl__mark { transform: scale(1) !important; }
  .tl__stroke { stroke-dashoffset: 0 !important; }
  .hero.hero-in .hero__name { -webkit-mask-image: none; mask-image: none; opacity: 1; }
  .modal__success h2, .modal__success .modal__msg,
  .modal__success .ornament, .modal__success .btn { opacity: 1 !important; }
  .seal { animation: none !important; }
  /* inel STATIC uniform (segmentul rotitor înghețat ar arăta asimetric) */
  .env-closed__glow {
    animation: none !important; opacity: .8;
    background: linear-gradient(rgba(255, 200, 132, .55), rgba(255, 200, 132, .55));
  }
  .hero__floral { opacity: 1 !important; }
  .hero__floral-in { transform: none !important; }
  .hero__floral-img { animation: none !important; }
  /* scenă vie static: backdrop + lebede fixe (fără drift/legănare), reflexie păstrată; petale OFF */
  .hero__swans, .hero__swans-body, .hero__swans-refl { animation: none !important; }
  .hero__swans { transform: translate(-50%, -50%) !important; }
  .hero__petals { display: none; }
  .scroll-cue, .confetti { display: none; }
  .hero__video { display: none; }
  .hero__layer { transform: none !important; }
}