/* ============================================================
   Elie & Joyce — Wedding Invitation
   Tokens
   ============================================================ */
:root{
  --ink:        #121208;
  --paper:      #f4eeda;
  --gold:       #b98a45;
  --gold-light: #ddc48c;
  --gold-dim:   #8a693a;
  --charcoal:   #2a2818;
  --charcoal-70: rgba(42,40,24,.7);

  --display: "Cormorant Garamond", "Times New Roman", serif;
  --body: "Jost", "Helvetica Neue", Arial, sans-serif;

  --container: 620px;
  --gap: 1.5rem;

  --ease: cubic-bezier(.65,0,.35,1);

  /* The invitation video is a 9:16 portrait frame. --frame-w keeps the
     backdrop, the hotspots and the scrolling content all locked to that
     same true 9:16 column, centered, on any screen shape. */
  --frame-w: min(100vw, calc(100dvh * 9 / 16));
}

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

html{ scroll-behavior:smooth; }

html,body{
  margin:0;
  font-family:var(--body);
  color:var(--charcoal);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* The page is not scrollable until the seal has been tapped — the
   person must open the invitation before they can reach the details
   below it.

   Safari (especially iOS) has a well-known issue where locking scroll
   with plain overflow:hidden on html/body makes position:fixed
   children — like our invisible hotspot buttons — stop reliably
   receiving touch/click events. Locking with position:fixed on the
   body instead avoids that entirely and is the standard cross-browser
   technique for this. */
html.sealed{
  overflow:hidden;
}
body.sealed{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
}

img,svg{ display:block; max-width:100%; }

a{ color:inherit; }

button{
  font-family:inherit;
  cursor:pointer;
  background:none;
  border:none;
  color:inherit;
  padding:0;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
button::-moz-focus-inner{ border:0; }

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

/* ============================================================
   Fixed video/image backdrop — purely visual, never scrolls.
   ============================================================ */
.backdrop{
  position:fixed;
  inset:0;
  width:100%;
  height:100dvh;
  z-index:0;
  background:var(--ink);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.backdrop__frame{
  position:relative;
  width:var(--frame-w);
  height:100dvh;
  overflow:hidden;
  box-shadow:0 0 80px rgba(0,0,0,.5);
}
.backdrop__layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
/* Video starts on top; the garden still fades in as the person reaches
   the details section (driven by scroll position in script.js). */
.backdrop__video{ z-index:1; }
/* Sits directly over the video and only fades once real frames are
   actually painting (the 'playing' event) — masks any buffering/seek
   gap so the transition from "sealed" to "playing" never shows a
   flash of black. */
.backdrop__poster{
  z-index:2;
  opacity:1;
  transition:opacity .35s var(--ease);
}
body.video-live .backdrop__poster{ opacity:0; pointer-events:none; }
.backdrop__image{
  z-index:3;
  opacity:0;
  transition:opacity 1s var(--ease);
}
body.show-image .backdrop__image{ opacity:1; }
/* Subpages (en/fr/ar) have no video — the garden still is always on. */
.backdrop__image--static{ opacity:1; }

/* Small cross-link between the three language pages — appears only
   on the detail subpages, not on the root envelope/choice screen. */
.page-switch{
  position:fixed;
  top:max(1rem, env(safe-area-inset-top));
  right:max(1rem, env(safe-area-inset-right));
  z-index:5;
  display:flex;
  gap:.5rem;
  padding:.35rem .7rem;
  background:rgba(18,18,8,.32);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(221,196,140,.35);
  border-radius:999px;
  font-family:var(--body);
  font-size:.64rem;
  letter-spacing:.08em;
}
.page-switch a{
  color:rgba(244,238,218,.8);
  text-decoration:none;
  transition:color .2s var(--ease);
}
.page-switch a:hover{ color:var(--gold-light); }
[dir="rtl"] .page-switch{
  right:auto;
  left:max(1rem, env(safe-area-inset-left));
}

.backdrop__scrim{
  position:absolute;
  inset:0;
  z-index:4;
  background:
    linear-gradient(180deg, rgba(18,18,8,.28) 0%, rgba(18,18,8,0) 20%, rgba(18,18,8,0) 80%, rgba(18,18,8,.34) 100%);
  pointer-events:none;
}

/* ============================================================
   Invisible hotspots — tap targets only, no visible graphics.
   Positioned in percentages measured directly from the source
   video, over the same --frame-w column as the backdrop.
   ============================================================ */
.hotspots{
  position:fixed;
  inset:0;
  width:100%;
  height:100dvh;
  z-index:4;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hotspots__frame{
  position:relative;
  width:var(--frame-w);
  height:100dvh;
}
.hotspot{
  position:absolute;
  pointer-events:auto;
  background:transparent;
  -webkit-tap-highlight-color:transparent;
}
.hotspot:disabled{ pointer-events:none; }

/* Wax seal, measured from the closed-envelope frame. */
.hotspot--seal{
  left:49.7%;
  top:48.5%;
  width:22%;
  height:12.5%;
  transform:translate(-50%,-50%);
  border-radius:50%;
}

/* Baked-in "CLICK FOR DETAILS" box. Coordinates measured directly from
   the video's border lines (not eyeballed) — do not nudge without
   re-measuring, since the previous guess landed on the "Château
   Vaudreuil" text sitting just above the real button. */
.hotspot--details{
  left:30%;
  top:83%;
  width:40%;
  height:7%;
}

body.sealed .hotspot--seal{ cursor:pointer; }
body.sealed .hotspot--details,
body:not(.details-ready) .hotspot--details{ pointer-events:none; }
body.details-ready .hotspot--details{ pointer-events:auto; cursor:pointer; }
body:not(.sealed) .hotspot--seal{ pointer-events:none; }

/* ============================================================
   Stage — wraps hero + details, matched in width to the backdrop.
   ============================================================ */
/* ============================================================
   Language choice — revealed once the intro video ends, over the
   garden still. Each option is a real page navigation (/en/, /fr/,
   /ar/), not a client-side toggle.
   ============================================================ */
/* ============================================================
   Language choice — revealed once the intro video ends, over the
   garden still. Each option is a real page navigation (/en/, /fr/,
   /ar/), not a client-side toggle.

   Positioned as its own fixed, full-viewport flex container rather
   than being absolutely centered relative to .hero — that previous
   approach broke on wide desktop screens where .hero's own box
   model (inside the letterboxed --frame-w column) didn't behave the
   way percentage-based centering assumed. Fixed + flexbox centers
   correctly on any screen shape.
   ============================================================ */
.lang-choice{
  position:fixed;
  inset:0;
  z-index:6;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
  opacity:0;
  pointer-events:none;
  transition:opacity 1s var(--ease);
}
body.show-language .lang-choice{
  opacity:1;
  pointer-events:auto;
}

.lang-choice__inner{
  width:min(88%, 380px);
  text-align:center;
  transform:translateY(14px);
  transition:transform 1s var(--ease);
}
body.show-language .lang-choice__inner{
  transform:translateY(0);
}

.lang-choice__eyebrow{
  margin:0 0 1.4rem;
  font-family:var(--body);
  font-weight:300;
  font-size:.68rem;
  letter-spacing:.12em;
  color:var(--paper);
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}

.lang-choice__options{
  display:flex;
  flex-direction:column;
  gap:.85rem;
}
.lang-choice__btn{
  display:block;
  padding:.9rem 1.5rem;
  font-family:var(--display);
  font-weight:500;
  font-size:1.15rem;
  color:var(--paper);
  text-decoration:none;
  background:rgba(244,238,218,.12);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(221,196,140,.55);
  border-radius:4px;
  transition:background .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.lang-choice__btn:hover{
  background:var(--gold);
  color:var(--ink);
  border-color:var(--gold);
  transform:translateY(-2px);
}
.lang-choice__btn--ar{
  font-family:"Noto Naskh Arabic", var(--display);
  font-size:1.3rem;
}

.stage{
  position:relative;
  z-index:2;
  width:var(--frame-w);
  margin:0 auto;
}

.hero{
  position:relative;
  height:100vh;
  height:100dvh;
}

/* buttons used in the details section */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.85rem 1.7rem;
  font-family:var(--body);
  font-weight:400;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  border-radius:999px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn--solid{
  color:var(--paper);
  background:linear-gradient(180deg,var(--gold),var(--gold-dim));
  box-shadow:0 8px 20px rgba(120,90,30,.3);
}
.btn--solid:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(120,90,30,.4); }
.btn__icon{ width:15px; height:15px; stroke:currentColor; stroke-width:2; fill:none; }

/* ============================================================
   Details section
   ============================================================ */
.details{
  position:relative;
  padding:8vh 1.25rem 12vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--gap);
}

.eyebrow{
  font-family:var(--body);
  font-weight:400;
  font-size:.68rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold-dim);
  margin:0 0 1rem;
}

.panel{
  width:100%;
  max-width:var(--container);
  background:rgba(244,238,218,.86);
  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
  border:1px solid rgba(185,138,69,.35);
  border-radius:4px;
  padding:2.4rem 2rem;
  text-align:center;
  box-shadow:0 18px 40px rgba(10,10,4,.22);

  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.panel.is-visible{ opacity:1; transform:none; }

.panel__families{
  margin:0 0 .5rem;
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1rem,2.6vw,1.15rem);
  color:var(--charcoal-70);
}
.panel__title{
  margin:0;
  font-family:var(--display);
  font-weight:500;
  font-style:italic;
  font-size:clamp(1.9rem,5vw,2.6rem);
  line-height:1.28;
  color:var(--charcoal);
}
.panel__amp{
  display:inline-block;
  font-style:normal;
  font-weight:400;
  font-size:.6em;
  color:var(--gold);
  vertical-align:.05em;
}
.panel__marrying{
  margin:.7rem 0 1.6rem;
  font-family:var(--body);
  font-weight:400;
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold-dim);
}
.panel__event{
  margin:0 0 .6rem;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.5rem,4vw,1.9rem);
  color:var(--charcoal);
}
.panel__place{
  margin:0;
  font-family:var(--body);
  font-weight:500;
  font-size:1rem;
  letter-spacing:.03em;
}
.panel__address{
  margin:.25rem 0 1.2rem;
  font-family:var(--body);
  font-weight:300;
  font-size:.85rem;
  color:var(--charcoal-70);
}
.panel__note{
  margin:1rem 0 0;
  font-family:var(--body);
  font-weight:300;
  font-size:.78rem;
  color:var(--charcoal-70);
}
.panel__date{
  margin:1.4rem 0 0;
  font-family:var(--body);
  font-weight:500;
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-dim);
}

.link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-family:var(--body);
  font-weight:400;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-dim);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.link:hover{ border-color:var(--gold-dim); color:var(--charcoal); }
.link__icon{ width:12px; height:12px; stroke:currentColor; stroke-width:2; fill:none; }

/* countdown */
.countdown{
  display:flex;
  justify-content:center;
  gap:clamp(.9rem,4vw,2.2rem);
}
.countdown__unit{ display:flex; flex-direction:column; align-items:center; min-width:52px; }
.countdown__num{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.9rem,7vw,2.8rem);
  color:var(--gold-dim);
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.countdown__label{
  margin-top:.4rem;
  font-family:var(--body);
  font-weight:300;
  font-size:.6rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--charcoal-70);
}

.panel--calendar .btn--solid{ margin-top:.4rem; }

.panel--followup{
  padding:1.8rem 2rem;
}
.panel--followup .panel__note--lead{
  margin-bottom:.6rem;
}
.panel--followup .link{
  margin-top:.3rem;
}

/* ============================================================
   Signup form
   ============================================================ */
.panel--form{ text-align:start; }
.panel--form .eyebrow,
.panel--form .panel__event{ text-align:center; }

.panel__note--lead{
  text-align:center;
  margin:0 0 1.8rem;
}

/* Honeypot field — hidden from real visitors, left in the tab/DOM
   flow so simple bots that auto-fill every field get caught. */
.form__trap{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.form__row{
  display:flex;
  gap:1rem;
}
.form__row .form__field{ flex:1; min-width:0; }

.form__field{
  margin-bottom:1.1rem;
}
.form__field label{
  display:block;
  margin-bottom:.4rem;
  font-family:var(--body);
  font-weight:400;
  font-size:.64rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-dim);
}
.form__optional{
  color:var(--charcoal-70);
  letter-spacing:.05em;
  text-transform:none;
  font-weight:300;
}
.form__field input{
  width:100%;
  font-family:var(--body);
  font-weight:400;
  font-size:.95rem;
  color:var(--charcoal);
  background:rgba(255,255,255,.5);
  border:1px solid rgba(185,138,69,.4);
  border-radius:3px;
  padding:.75rem .85rem;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.form__field input::placeholder{ color:var(--charcoal-70); }
.form__field input:hover{ border-color:rgba(185,138,69,.65); }
.form__field input:focus{
  outline:none;
  border-color:var(--gold);
  background:rgba(255,255,255,.75);
}
.form__field input:invalid:not(:placeholder-shown){
  border-color:#a8483f;
}

.form__submit{
  display:flex;
  width:100%;
  justify-content:center;
  margin-top:.4rem;
}
.form__submit:disabled{
  opacity:.6;
  cursor:default;
  transform:none !important;
}

.form__status{
  margin:1rem 0 0;
  text-align:center;
  font-family:var(--body);
  font-weight:400;
  font-size:.8rem;
  min-height:1.2em;
}
.form__status[data-state="success"]{ color:#3f6b3f; }
.form__status[data-state="error"]{ color:#a8483f; }

@media (max-width:480px){
  .form__row{ flex-direction:column; gap:0; }
}

/* footer — safe to place text here: it sits over the plain garden
   still, which has no baked-in typography to collide with. */
.footer{
  margin-top:2rem;
  text-align:center;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.footer.is-visible{ opacity:1; transform:none; }

/* Polaroid-style photo frame that now carries the sign-off caption,
   replacing the plain text footer. */
.polaroid{
  display:inline-block;
  background:#fbfaf6;
  padding:14px 14px 28px;
  border-radius:2px;
  box-shadow:0 22px 46px rgba(0,0,0,.4), 0 2px 0 rgba(255,255,255,.4) inset;
  transform:rotate(-2.5deg);
  max-width:280px;
}
.polaroid__photo{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:1px;
}
.polaroid__caption{
  margin:16px 0 0;
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  font-size:1.25rem;
  color:var(--charcoal);
}
.polaroid__note{
  margin:.35rem 0 0;
  font-family:var(--body);
  font-weight:300;
  font-size:.74rem;
  letter-spacing:.03em;
  color:var(--charcoal-70);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:420px){
  .panel{ padding:2rem 1.4rem; }
  .countdown{ gap:.8rem; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
/* ============================================================
   RTL (Arabic page)
   ============================================================ */
[dir="rtl"] .link__icon{
  transform:scaleX(-1);
}
[dir="rtl"] .countdown__num{
  font-variant-numeric:normal; /* let Eastern Arabic numerals render as authored */
}
[dir="rtl"] .btn__chevron{
  transform:scaleX(-1);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .panel,.footer,.btn,.backdrop__image{
    transition:none !important;
    animation:none !important;
  }
}