/* ==================================================================
   Save the Date — Adriana & Andrei
   Tokens, layout and timings follow ref/SPEC.md (§2, §3, §4).
   Deliberate deviations are marked "DEVIATION".
================================================================== */

/* ---------- Fonts: self-hosted Fontsource subsets. latin-ext carries ă/ș/ț and is only
   fetched when a page contains those glyphs (unicode-range). ---------- */
@font-face{font-family:"Cormorant SC";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/cormorant-sc-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant SC";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/cormorant-sc-latin-ext-400-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant SC";font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/cormorant-sc-latin-600-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant SC";font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/cormorant-sc-latin-ext-600-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/cormorant-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/cormorant-latin-ext-400-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400;font-display:swap;
  src:url(../fonts/playfair-display-latin-400-italic.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400;font-display:swap;
  src:url(../fonts/playfair-display-latin-ext-400-italic.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens (SPEC §2) ---------- */
:root{
  --granate:hsl(0 0% 10%);
  --granate-90:hsl(0 0% 10% / .9);
  --granate-80:hsl(0 0% 10% / .8);
  --granate-70:hsl(0 0% 10% / .7);
  --granate-20:hsl(0 0% 10% / .2);
  --granate-10:hsl(0 0% 10% / .1);
  --ivory:hsl(42 17% 89%);
  --envelope-bg:#eae5d9;
  --font-display:"Cormorant SC",Georgia,serif;
  --font-names:"Playfair Display",Georgia,serif;
  --font-body:"Cormorant",Georgia,serif;

  --safe-top:max(env(safe-area-inset-top),1rem);
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ivory);height:100%}
body{
  color:var(--granate);font-family:var(--font-body);
  background:var(--ivory) url(../assets/hero/paper.webp) repeat;background-size:400px 200px;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;
  min-height:100vh;min-height:100svh;overflow:hidden;overscroll-behavior:none;
}
h1{font-size:inherit;font-weight:inherit}
button{font:inherit;color:inherit}

/* ---------- Language switch ---------- */
.lang{
  position:fixed;top:var(--safe-top);right:.75rem;z-index:60;display:flex;align-items:center;
  font-family:var(--font-display);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--granate-70);
}
.lang button{background:none;border:0;padding:10px 6px;cursor:pointer;font-family:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;border-radius:4px}
.lang button:focus-visible{outline:1px solid var(--granate-70);outline-offset:2px}
.lang button[aria-pressed="true"]{color:var(--granate);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.lang span{opacity:.5}

/* ==================================================================
   SCREEN 1 · ENVELOPE (SPEC §3) — fixed, full screen, z 50
================================================================== */
.envelope{position:fixed;inset:0;z-index:50;cursor:pointer;overflow:hidden;background:var(--envelope-bg);outline:none}
.envelope:focus-visible{box-shadow:inset 0 0 0 2px var(--granate-70)}
.envelope.leaving{opacity:0;transition:opacity .4s ease;pointer-events:none}   /* DEVIATION 6: 0.4 s cross-fade from white into the card instead of a hard cut */
.env-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
#env-canvas{opacity:0}
#env-canvas.on{opacity:1}
/* "Tap to open": opacity .5 → 1 → .5, 2 s, ease-in-out, infinite */
.hint-tap{
  position:absolute;left:0;right:0;bottom:max(env(safe-area-inset-bottom),2rem);margin:auto;width:fit-content;z-index:10;
  font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:.4em;text-transform:uppercase;color:var(--granate);
  white-space:nowrap;pointer-events:none;animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
.hint-tap.hide{animation:none;opacity:0;transition:opacity .3s}
/* white curtain: 1.2 s ease-in-out, then Screen 2 */
.curtain{position:absolute;inset:0;z-index:10;background:#fff;opacity:0;pointer-events:none;transition:opacity 1.5s ease-in-out}   /* duration overridden from config (whiteFadeDuration) */
.curtain.on{opacity:1}

/* ==================================================================
   SCREEN 2 · HERO (SPEC §4) — section min-h 100svh; the 9:16 stage inside it
================================================================== */
.hero{
  position:relative;min-height:100vh;min-height:100svh;overflow:hidden;
  display:flex;align-items:flex-start;justify-content:center;
  padding-top:var(--safe-top);padding-bottom:max(env(safe-area-inset-bottom),5rem);
  user-select:none;-webkit-user-select:none;
}
.stage{
  position:relative;width:100%;max-width:460px;aspect-ratio:9/16;margin:0 auto;
  display:flex;align-items:center;justify-content:center;padding:0 24px;
  transform:translateY(-5%);
}
/* Layered route (SPEC §5): the photo sits in the oval, under the frame plate whose oval is punched out */
.oval{position:absolute;left:22.79%;top:38.59%;width:54.43%;height:22.82%;border-radius:50%;overflow:hidden;z-index:0;background:#c9c4b8}
.oval img{width:100%;height:100%;object-fit:cover;object-position:var(--photo-pos,50% 50%);display:block}   /* original colour, no filter (Andrei, 2026-09-22) */
.plate{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;z-index:1}

.copy{position:absolute;top:17%;left:0;right:0;z-index:30;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 32px;pointer-events:none}
.copy>*{opacity:0;transform:translateY(8px);transition:opacity .9s ease-out .3s,transform .9s ease-out .3s}
.hero.revealed .copy>*{opacity:1;transform:none}
.copy .kicker{font-family:var(--font-display);font-size:13px;letter-spacing:.35em;text-transform:uppercase;white-space:pre-line;margin-bottom:12px;color:var(--granate-90)}
.copy .names{font-family:var(--font-names);font-style:italic;font-weight:400;font-size:2.05rem;line-height:1.1;margin-bottom:8px;color:var(--granate);white-space:nowrap}
.copy .date{font-family:var(--font-display);font-size:15px;letter-spacing:.25em;text-transform:uppercase;color:var(--granate-90)}
@media (min-width:768px){.copy .names{font-size:2.75rem}}   /* SPEC 3.3rem fits "Clara & Hugo"; 16 characters need less */

.scratch{position:absolute;inset:0;z-index:20;width:100%;height:100%;display:block;touch-action:none;cursor:pointer}
.hint-scratch{
  position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;pointer-events:none;
  font-family:var(--font-display);font-weight:600;font-size:14px;letter-spacing:.35em;text-transform:uppercase;color:var(--granate-70);
  text-align:center;padding:0 40px;transition:opacity .4s;
}
.hint-scratch span{display:block;max-width:56%;line-height:2;animation:pulse-hint 2.2s ease-in-out infinite}   /* wraps inside the oval for the longer RO string */
@keyframes pulse-hint{0%,100%{opacity:.6}50%{opacity:1}}
.hint-scratch.hide{opacity:0}
@media (min-width:768px){.hint-scratch{font-size:16px}}

/* keyboard path: visually hidden until focused, then a small pill under the stage */
.reveal-kb{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;background:none}
.reveal-kb:focus-visible{
  width:auto;height:auto;clip:auto;clip-path:none;overflow:visible;
  left:50%;bottom:6%;transform:translateX(-50%);z-index:40;
  padding:8px 20px;border-radius:999px;background:var(--granate);color:var(--ivory);
  font-family:var(--font-display);font-size:10px;letter-spacing:.35em;text-transform:uppercase;outline:2px solid var(--granate-70);outline-offset:2px;
}
.hero.revealed .reveal-kb{display:none}

/* ---------- countdown + calendar: inside the stage, positioned from the PHOTO (DEVIATION 5).
   The oval ends at 61.41 % of the stage; the SPEC anchored these to the viewport bottom, which put them
   under the browser's bottom bar on short phones. ---------- */
.countdown{
  position:absolute;left:0;right:0;margin:auto;width:fit-content;z-index:30;
  top:65.5%;transform:scale(1.05);
  display:flex;align-items:center;gap:12px;color:var(--granate);
  opacity:0;visibility:hidden;transition:opacity 2.5s ease-in-out,visibility 0s linear 2.5s;
}
.hero.stage-countdown .countdown{opacity:1;visibility:visible;transition:opacity 2.5s ease-in-out}
.countdown .cell{display:flex;flex-direction:column;align-items:center}
.countdown .num{font-family:var(--font-names);font-style:italic;font-size:2.1rem;line-height:1;font-variant-numeric:tabular-nums}
.countdown .lbl{margin-top:4px;font-family:var(--font-display);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--granate-70)}
.countdown .sep{height:28px;width:1px;background:var(--granate-20)}
@media (min-width:768px){.countdown .num{font-size:3.3rem}.countdown .lbl{font-size:12px}}

.calendar{
  position:absolute;left:0;right:0;margin:auto;width:fit-content;z-index:35;
  bottom:18%;transform:scale(1.05) translateY(8px);          /* button's bottom edge at 82 % of the stage; the menu grows upward */
  display:flex;flex-direction:column;align-items:center;
  opacity:0;visibility:hidden;transition:opacity .7s ease-out,transform .7s ease-out,visibility 0s linear .7s;
}
.hero.stage-calendar .calendar{opacity:1;visibility:visible;transform:scale(1.05) translateY(0);transition:opacity .7s ease-out,transform .7s ease-out}
.cal-menu{
  margin-bottom:8px;display:none;flex-direction:column;align-items:stretch;min-width:176px;
  border-radius:12px;overflow:hidden;background:var(--ivory);
  box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
  border:1px solid var(--granate-20);
}
.cal-menu.open{display:flex;animation:menu-in .2s ease-out}
@keyframes menu-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cal-menu a{
  padding:8px 16px;text-align:center;text-decoration:none;color:var(--granate);cursor:pointer;
  font-family:var(--font-display);font-size:11px;letter-spacing:.25em;text-transform:uppercase;white-space:nowrap;
}
.cal-menu a+a{border-top:1px solid var(--granate-10)}
.cal-menu a:hover,.cal-menu a:focus-visible{background:var(--granate-10);outline:none}
.btn{
  display:inline-flex;align-items:center;justify-content:center;width:fit-content;
  padding:8px 20px;border:0;cursor:pointer;border-radius:999px;white-space:nowrap;
  background:var(--granate);color:var(--ivory);
  font-family:var(--font-display);font-size:10px;letter-spacing:.35em;text-transform:uppercase;
  transition:background-color .15s;
}
.btn:hover{background:hsl(0 0% 10% / .9)}
.btn:focus-visible{outline:2px solid var(--granate-70);outline-offset:3px}
@media (min-width:768px){.btn{font-size:11px}}

/* ---------- reduced motion: keep the fades, drop the pulses (confetti is skipped in JS) ---------- */
@media (prefers-reduced-motion:reduce){
  .hint-tap,.hint-scratch span{animation:none;opacity:.85}
  .cal-menu.open{animation:none}
}