/* =========================================================================
   Tesnim & Anas — wedding invitation
   Every page is drawn on the original 1080 × 1920 artboard. All overlay
   positions below are written in those artboard pixels and converted with
   --u (1 artboard px), so overlays scale 1:1 with the artwork on any screen.
   ========================================================================= */

@font-face {
  font-family: "Noto Serif";
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/noto-serif-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Alexandria";
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/alexandria-arabic-400-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Alexandria";
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/alexandria-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: "Alexandria";
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/alexandria-arabic-600-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

:root {
  /* palette sampled from the design files */
  --olive-900: #4d5725;   /* card border, button, headings */
  --olive-800: #4e5635;   /* countdown digits */
  --gold-600:  #b98028;   /* input borders */
  --gold-500:  #8e7a4c;   /* script labels, accents */
  --cream-100: #f5f2ed;   /* card paper */
  --white:     #ffffff;
  --ink-dark:  #1f2018;

  --invite-max: 540px;    /* desktop width of the vertical invitation */
  --font-digits: "Noto Serif", Georgia, serif;
  --font-arabic: "Alexandria", "Segoe UI", Tahoma, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: #2b2d22;
}
body {
  margin: 0;
  min-height: 100vh;
  background: transparent;
  overflow-x: hidden;
  font-family: var(--font-arabic);
  color: var(--olive-900);
}

/* Desktop surroundings: soft paper → sage → evening olive, taken from the pages */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(245, 242, 237, .55), transparent 60%),
    radial-gradient(90% 50% at 50% 100%, rgba(31, 32, 24, .9), transparent 70%),
    linear-gradient(180deg, #cfd0c2 0%, #8d9478 45%, #5b6146 75%, #2b2d22 100%);
}

/* ---------- invitation column ---------- */
.invitation {
  position: relative;
  width: min(100%, var(--invite-max));
  margin: 0 auto;
  box-shadow: 0 0 0 1px rgba(77, 87, 37, .15), 0 30px 80px rgba(20, 22, 14, .45);
  background: var(--cream-100);
}

.page {
  position: relative;
  width: 100%;
  aspect-ratio: 1080 / 1920;
  overflow: hidden;
  container-type: inline-size;
  --u: calc(100cqw / 1080);
}
@supports not (width: 1cqw) {
  .page { --u: calc(min(100vw, var(--invite-max)) / 1080); }
}

/* ---------- artwork layers ----------
   art--base : background pieces of the original design (always visible)
   art.fx    : one design element (envelope, frame, a text line, a swan…)
               placed at its exact original box, faded in on scroll       */
.art {
  position: absolute;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.art--base { inset: 0; width: 100%; height: 100%; }
.fx-on .art--base { opacity: 0; transition: opacity 1.1s ease; }
.fx-on .art--base.is-loaded { opacity: 1; }

/* while a page's artwork downloads, its area shows the page's own tone (no white flash) */
.page--hero    { background: #c0bba7; }
.page--details { background: #b1b1a7; }
.page--wishes  { background: #65635d; }

/* fade-in system — only active once JS confirms it can run it */
.fx-on .fx {
  opacity: 0;
  translate: 0 calc(14 * var(--u, 1px));
  transition:
    opacity var(--fx-dur, .9s) ease var(--fx-delay, 0s),
    translate calc(var(--fx-dur, .9s) + .2s) cubic-bezier(.2, .7, .2, 1) var(--fx-delay, 0s);
}
.fx-on .fx.is-in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fx-on .fx, .fx-on .art--base { opacity: 1; translate: none; transition: none; }
}

html.is-locked, body.is-locked { overflow: hidden; }

/* =========================================================================
   INTRO — envelope video, tap to open
   ========================================================================= */
.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  background: #e8e2d8;
  transition: opacity 1s ease, visibility 0s linear 1s;
}
.intro.is-leaving { opacity: 0; visibility: hidden; }
.intro__stage {
  position: relative;
  width: min(100%, var(--invite-max));
  height: 100%;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(20, 22, 14, .35);
}
.intro__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #e8e2d8 center / cover no-repeat;
}
.intro__open {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.intro__open:focus-visible { outline: 2px solid var(--gold-600); outline-offset: -6px; }
.intro__hint {
  position: absolute;
  left: 50%;
  top: 63.5%;
  translate: -50% 0;
  white-space: nowrap;
  font-family: var(--font-arabic);
  font-weight: 400;
  font-size: clamp(12px, 3.3vw, 14px);
  letter-spacing: .06em;
  color: var(--olive-900);
  padding: .38em 1.15em .45em;
  border-radius: 999px;
  background: rgba(245, 242, 237, .55);
  box-shadow: 0 0 0 .5px rgba(185, 128, 40, .55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: hintIn 1s ease .4s both, hintBreath 2.6s ease-in-out 1.4s infinite;
}
@keyframes hintIn { from { opacity: 0; translate: -50% 10px; } }
@keyframes hintBreath { 50% { opacity: .55; } }

/* soft gold ring breathing around the wax seal */
.intro__ring {
  position: absolute;
  left: 50%;
  top: 50.6%;
  width: min(30vw, 160px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1.5px solid rgba(214, 178, 106, .9);
  pointer-events: none;
  animation: ring 2.6s ease-out infinite;
}
@keyframes ring {
  0%   { scale: .62; opacity: 0; }
  25%  { opacity: .9; }
  100% { scale: 1.35; opacity: 0; }
}
.intro.is-playing .intro__ring,
.intro.is-playing .intro__hint { animation: none; opacity: 0; transition: opacity .4s ease; }

/* =========================================================================
   MUSIC TOGGLE
   ========================================================================= */
.music-toggle {
  position: fixed;
  z-index: 60;
  top: calc(14px + env(safe-area-inset-top, 0px));
  left: calc(50% - min(50vw, var(--invite-max) / 2) + 14px);
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(185, 128, 40, .75);
  background: rgba(245, 242, 237, .82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(31, 32, 24, .22);
  cursor: pointer;
  animation: fadeIn .8s ease both;
}
.music-toggle[hidden] { display: none; }
.music-toggle:focus-visible { outline: 2px solid var(--gold-600); outline-offset: 2px; }
.music-toggle__bars { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.music-toggle__bars i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: var(--olive-900);
  transform-origin: bottom;
  animation: eq 1.1s ease-in-out infinite;
}
.music-toggle__bars i:nth-child(2) { animation-delay: -.35s; }
.music-toggle__bars i:nth-child(3) { animation-delay: -.7s; }
@keyframes eq { 0%, 100% { scale: 1 .35; } 50% { scale: 1 1; } }
.music-toggle[aria-pressed="false"] .music-toggle__bars i { animation: none; scale: 1 .3; opacity: .55; }
@keyframes fadeIn { from { opacity: 0; } }

/* =========================================================================
   WISHES TICKER — fixed strip under the invitation
   ========================================================================= */
:root { --ticker-h: 46px; }
.ticker {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  width: min(100%, var(--invite-max));
  height: calc(var(--ticker-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  align-items: stretch;
  direction: rtl;
  background: rgba(47, 53, 25, .9);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  backdrop-filter: blur(8px) saturate(1.1);
  border-top: 1px solid rgba(185, 128, 40, .75);
  box-shadow: inset 0 1px 0 rgba(245, 242, 237, .12), 0 -10px 30px rgba(20, 22, 14, .25);
  transition: translate .8s cubic-bezier(.2, .7, .2, 1), opacity .8s ease;
}
.ticker[hidden] { display: none; }
.ticker.is-entering { translate: -50% 100%; opacity: 0; }

.ticker__badge {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px 0 12px;
  background: var(--olive-900);
  border-left: 1px solid rgba(185, 128, 40, .6);
  color: #dcbb72;
  font: 600 14px/1 var(--font-arabic);
  text-decoration: none;
  white-space: nowrap;
}
.ticker__star { width: 12px; height: 12px; fill: #dcbb72; animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .45; scale: .8; } }

.ticker__track {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ticker__item {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  direction: rtl;
  white-space: nowrap;
  will-change: transform;
  font: 400 15px/1 var(--font-arabic);
  color: var(--cream-100);
}
.ticker__name { color: #dcbb72; font-weight: 600; }
.ticker__dot { width: 5px; height: 5px; rotate: 45deg; background: var(--gold-600); flex: none; }
.ticker__item.is-prompt { color: rgba(245, 242, 237, .85); }

/* the strip must never hide the end of the invitation */
.invitation { margin-bottom: calc(var(--ticker-h) + env(safe-area-inset-bottom, 0px)); }

/* =========================================================================
   COUNTDOWN  (page 2) — positions measured from the original digit glyphs
   ========================================================================= */
.countdown {
  position: absolute;
  inset: 0;
  direction: ltr;
  pointer-events: none;
  color: var(--olive-800);
  font-family: var(--font-digits);
  font-weight: 600;
  font-size: calc(84 * var(--u));
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.countdown__num,
.countdown__sep {
  position: absolute;
  /* baseline of the original digits sits at y = 305.7 */
  top: calc((305.7 - 84 * 0.888) * var(--u));
  white-space: nowrap;
  transform-origin: 50% 100%;
}
.countdown__num { transform: translateX(-50%) scaleX(var(--digit-stretch, 1.06)); }
.countdown__num--days {
  /* days grow to the left, so the "N:" rhythm of the design is kept */
  left: auto;
  right: calc((1080 - 317.1) * var(--u));
  transform: scaleX(var(--digit-stretch, 1.06));
  transform-origin: 100% 100%;
}
.countdown__num--hours   { left: calc(411.2 * var(--u)); }
.countdown__num--minutes { left: calc(561.9 * var(--u)); }
.countdown__num--seconds { left: calc(706.3 * var(--u)); }

.countdown__sep { transform: translateX(-50%); }
.countdown__sep--1 { left: calc(330.3 * var(--u)); }
.countdown__sep--2 { left: calc(477.9 * var(--u)); }
.countdown__sep--3 { left: calc(625.6 * var(--u)); }

.countdown__labels {
  position: absolute;
  left: calc(267.9 * var(--u));
  top: calc(313.57 * var(--u));
  width: calc(493.33 * var(--u));
  height: calc(53.33 * var(--u));
}

.countdown__done {
  position: absolute;
  margin: 0;
  left: calc(168 * var(--u));
  width: calc(680 * var(--u));
  top: calc(229 * var(--u));
  height: calc(130 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: calc(58 * var(--u));
  line-height: 1.1;
  color: var(--olive-800);
  animation: doneIn 1.2s ease-out both;
}
@keyframes doneIn { from { opacity: 0; letter-spacing: .08em; } to { opacity: 1; letter-spacing: 0; } }

.countdown.is-finished .countdown__num,
.countdown.is-finished .countdown__sep,
.countdown.is-finished .countdown__labels { display: none; }

/* =========================================================================
   LOCATION HOTSPOTS (page 2) — invisible links over the original artwork
   ========================================================================= */
.hotspot {
  position: absolute;
  display: block;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.hotspot--map {
  left: calc(170 * var(--u));
  top: calc(762 * var(--u));
  width: calc(352 * var(--u));
  height: calc(446 * var(--u));
}
.hotspot--flower {
  left: calc(80 * var(--u));
  top: calc(1074 * var(--u));
  width: calc(224 * var(--u));
  height: calc(226 * var(--u));
  border-radius: 50%;
  transition: background-color .3s ease;
}
.hotspot--flower:hover,
.hotspot--flower:active { background: rgba(245, 242, 237, .10); }
.hotspot:focus-visible { box-shadow: 0 0 0 calc(4 * var(--u)) rgba(185, 128, 40, .8); }
.hotspot--map:focus-visible { border-radius: calc(8 * var(--u)); }

/* =========================================================================
   WISHES FORM (page 3) — fields rebuilt on the original boxes
   name box    : x 236 · y 602.5 · 640 × 68  · r 10 · 2px #b98028 (inner half of a clipped 4px stroke)
   message box : x 236 · y 751.5 · 640 × 170 · r 10/14
   button      : x 446 · y 981.5 · 220 × 72  · r 18 · #4d5725
   ========================================================================= */
.wish-form { position: absolute; inset: 0; margin: 0; pointer-events: none; }
.wish-form > * { pointer-events: auto; }

.wish-form__field {
  position: absolute;
  left: calc(236 * var(--u));
  width: calc(640 * var(--u));
  margin: 0;
  border: calc(2 * var(--u)) solid var(--gold-600);
  background: var(--white);
  color: var(--olive-900);
  font-family: var(--font-arabic);
  font-weight: 400;
  font-size: max(16px, calc(28 * var(--u)));   /* ≥16px stops iOS zoom-on-focus */
  line-height: 1.5;
  direction: rtl;
  text-align: right;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.wish-form__name {
  top: calc(602.5 * var(--u));
  height: calc(68 * var(--u));
  padding: 0 calc(22 * var(--u));
  border-radius: calc(10 * var(--u));
}
.wish-form__message {
  top: calc(751.5 * var(--u));
  height: calc(170.3 * var(--u));
  padding: calc(14 * var(--u)) calc(22 * var(--u)) calc(34 * var(--u));
  border-radius: calc(10 * var(--u)) / calc(14 * var(--u));
  resize: none;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-600) transparent;
}
.wish-form__field:focus { box-shadow: 0 0 0 calc(5 * var(--u)) rgba(185, 128, 40, .18); }
.wish-form__field[aria-invalid="true"] {
  border-color: #a8442c;
  box-shadow: 0 0 0 calc(5 * var(--u)) rgba(168, 68, 44, .14);
}

.wish-form__counter {
  position: absolute;
  left: calc(252 * var(--u));
  top: calc(886 * var(--u));
  direction: ltr;
  font-family: var(--font-digits);
  font-size: calc(19 * var(--u));
  color: var(--gold-500);
  opacity: .8;
  pointer-events: none;
}
.wish-form__counter.is-near { color: var(--gold-600); opacity: 1; }

.wish-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.wish-form__status {
  position: absolute;
  margin: 0;
  left: calc(236 * var(--u));
  width: calc(640 * var(--u));
  top: calc(928 * var(--u));
  height: calc(50 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: calc(22 * var(--u));
  line-height: 1.2;
  color: var(--olive-900);
  opacity: 0;
  transition: opacity .35s ease;
}
.wish-form__status.is-visible { opacity: 1; }
.wish-form__status.is-error { color: #a8442c; }
.wish-form__status.is-success { color: var(--olive-900); }

.wish-form__submit {
  position: absolute;
  left: calc(445.94 * var(--u));
  top: calc(981.55 * var(--u));
  width: calc(220 * var(--u));
  height: calc(72 * var(--u));
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: calc(18 * var(--u));
  background: var(--olive-900);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter .2s ease, transform .15s ease, opacity .25s ease;
}
.wish-form__submit img { display: block; width: 100%; height: 100%; pointer-events: none; }
.wish-form__submit:hover { filter: brightness(1.12); }
.wish-form__submit:active { transform: scale(.98); }
.wish-form__submit:focus-visible { outline: none; box-shadow: 0 0 0 calc(5 * var(--u)) rgba(185, 128, 40, .45); }
.wish-form__submit[disabled] { cursor: default; opacity: .6; filter: none; transform: none; }
.wish-form__submit.is-sending { animation: sending 1.1s ease-in-out infinite; }
@keyframes sending { 50% { opacity: .55; } }

/* =========================================================================
   WISHES WALL — optional public list (hidden unless enabled in config)
   ========================================================================= */
.wishes-wall {
  container-type: inline-size;
  --u: calc(100cqw / 1080);
  background: #1f2018;
  padding: calc(40 * var(--u)) calc(70 * var(--u)) calc(120 * var(--u));
}
.wishes-wall[hidden] { display: none; }
.wishes-wall__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: calc(28 * var(--u));
}
.wish-card {
  background: var(--cream-100);
  border: calc(4 * var(--u)) solid var(--olive-900);
  border-radius: calc(22 * var(--u));
  padding: calc(30 * var(--u)) calc(40 * var(--u));
  animation: wishIn .6s ease-out both;
}
@keyframes wishIn { from { opacity: 0; transform: translateY(calc(12 * var(--u))); } }
.wish-card__message {
  margin: 0 0 calc(16 * var(--u));
  font-size: calc(30 * var(--u));
  line-height: 1.7;
  color: var(--olive-900);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.wish-card__meta {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: calc(16 * var(--u));
  font-size: calc(22 * var(--u));
  color: var(--gold-500);
  border-top: calc(2 * var(--u)) solid rgba(185, 128, 40, .45);
  padding-top: calc(12 * var(--u));
}
.wish-card__name { font-weight: 600; color: var(--gold-600); }

/* ---------- utilities ---------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}