/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: "Amiri";
  font-weight: 400;
  font-display: swap;
  src: url("fonts/amiri-400-ar.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "Amiri";
  font-weight: 400;
  font-display: swap;
  src: url("fonts/amiri-400-lat.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: "Amiri";
  font-weight: 700;
  font-display: swap;
  src: url("fonts/amiri-700-ar.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "Amiri";
  font-weight: 700;
  font-display: swap;
  src: url("fonts/amiri-700-lat.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: "Aref Ruqaa";
  font-weight: 700;
  font-display: swap;
  src: url("fonts/arefruqaa-700-ar.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;

  --cream: #fbf5f1;
  --cream-deep: #f8ebe7;
  --blush: #f4d9d5;
  --blush-deep: #ebc3bd;
  --rose: #c98c8c;
  --rose-deep: #a8676b;
  --burgundy: #6e1f2e;
  --burgundy-deep: #521523;
  --ink: #4a1a24;
  --ink-soft: #7d4c55;

  --serif: "Amiri", "Noto Naskh Arabic", "Geeza Pro", "Times New Roman", serif;
  --script: "Aref Ruqaa", "Amiri", "Geeza Pro", serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --t-stage: 600ms;

  --measure: 22em;
  --gutter: clamp(20px, 6vw, 48px);
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--cream);
  background-image:
    radial-gradient(ellipse 80% 55% at 85% 0%, rgba(244, 217, 213, .75), transparent 70%),
    radial-gradient(ellipse 70% 50% at 10% 100%, rgba(235, 195, 189, .45), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(255, 255, 255, .6), transparent 75%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + 1.1vw, 1.45rem);
  line-height: 1.9;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* faint paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .3 0 0 0 0 .33 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: 0;
}

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

/* ---------- Floating hearts ---------- */
.hearts {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hearts span {
  position: absolute;
  bottom: -24px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  opacity: 0;
  background: var(--rose);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5C5.5 16 3 12.6 3 9.2 3 6.6 5 4.5 7.5 4.5c1.8 0 3.4 1 4.5 2.6 1.1-1.6 2.7-2.6 4.5-2.6C19 4.5 21 6.6 21 9.2c0 3.4-2.5 6.8-9 11.3z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5C5.5 16 3 12.6 3 9.2 3 6.6 5 4.5 7.5 4.5c1.8 0 3.4 1 4.5 2.6 1.1-1.6 2.7-2.6 4.5-2.6C19 4.5 21 6.6 21 9.2c0 3.4-2.5 6.8-9 11.3z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: drift var(--d) linear var(--delay) infinite;
  will-change: transform, opacity;
}
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) rotate(-8deg); opacity: 0; }
  12%  { opacity: var(--o); }
  50%  { transform: translate3d(14px, -55vh, 0) rotate(6deg); }
  85%  { opacity: var(--o); }
  100% { transform: translate3d(-8px, -112vh, 0) rotate(-4deg); opacity: 0; }
}

/* ---------- Layout ---------- */
.letter {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding:
    max(clamp(32px, 7vh, 72px), env(safe-area-inset-top))
    max(var(--gutter), env(safe-area-inset-right))
    max(clamp(32px, 7vh, 72px), env(safe-area-inset-bottom))
    max(var(--gutter), env(safe-area-inset-left));
}

.stage {
  grid-area: 1 / 1;
  width: 100%;
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: opacity var(--t-stage) var(--ease-soft), transform var(--t-stage) var(--ease-soft), filter var(--t-stage) var(--ease-soft);
}
.stage[hidden] { display: none; }
.stage.is-leaving {
  opacity: 0;
  transform: translateY(-10px);
  filter: blur(3px);
  pointer-events: none;
}

/* children fade up in sequence when a stage becomes active */
.stage.is-active > * {
  animation: rise 1100ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 260ms + 120ms);
}
.stage > :nth-child(1) { --i: 0; }
.stage > :nth-child(2) { --i: 1; }
.stage > :nth-child(3) { --i: 2; }
.stage > :nth-child(4) { --i: 3; }
.stage > :nth-child(5) { --i: 4; }

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

h1, h2, p { margin: 0; font-weight: 400; }
[tabindex="-1"]:focus { outline: none; }

/* ---------- Stage 1 ---------- */
.envelope {
  margin: 0 0 clamp(20px, 4vh, 36px);
  width: min(70vw, 270px);
}
.envelope svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  animation: float 7s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.envelope__flap {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  transition: transform 900ms var(--ease-soft);
}
.envelope__seal {
  transition: opacity 420ms var(--ease-soft);
}
.sparkles { animation: twinkle 4.5s ease-in-out infinite; }
@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}
/* opening the envelope before moving on */
.is-opening .envelope__seal { opacity: 0; }
.is-opening .envelope__flap { transform: scaleY(-1); transition-delay: 220ms; }

.message {
  max-width: var(--measure);
  font-size: clamp(1.4rem, 1.05rem + 1.9vw, 2rem);
  line-height: 1.85;
  color: var(--ink);
  text-wrap: balance;
}
.message span { display: block; }
.message span + span { margin-top: .1em; }

.whisper {
  margin-top: clamp(22px, 4vh, 34px);
  color: var(--rose-deep);
  font-size: clamp(1.05rem, .95rem + .6vw, 1.25rem);
}

/* ---------- Buttons ---------- */
.btn {
  -webkit-appearance: none;
  appearance: none;
  margin-top: clamp(22px, 4vh, 32px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 52px;
  padding: .55em 1.9em .65em;
  border-radius: 999px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.25rem);
  line-height: 1.4;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    transform 260ms var(--ease),
    box-shadow 260ms var(--ease),
    background-color 260ms var(--ease),
    color 260ms var(--ease),
    border-color 260ms var(--ease);
}
.btn svg { width: 1em; height: 1em; flex: none; fill: currentColor; }
.btn:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 4px;
}
.btn:disabled { cursor: default; }

.btn--primary {
  border: 1px solid var(--burgundy-deep);
  background: linear-gradient(180deg, #82283a, var(--burgundy));
  color: #fbeeea;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .22) inset,
    0 10px 24px -10px rgba(110, 31, 46, .55);
}
.btn--primary .btn__heart { color: #f2c4c2; transition: transform 420ms var(--ease); }
.btn--primary:hover {
  background: linear-gradient(180deg, #8c2c40, #761f31);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .22) inset,
    0 16px 30px -12px rgba(110, 31, 46, .6);
}
.btn--primary:hover .btn__heart { transform: scale(1.15); }
.btn--primary:active {
  transform: translateY(0) scale(.98);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, 0 6px 14px -8px rgba(110, 31, 46, .5);
}

.btn--ghost {
  border: 1px solid var(--rose);
  background: rgba(255, 250, 248, .55);
  color: var(--burgundy);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font-weight: 400;
}
.btn--ghost .btn__play { width: .8em; height: .8em; color: var(--rose-deep); }
.btn--ghost:hover {
  border-color: var(--rose-deep);
  background: rgba(255, 250, 248, .9);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -14px rgba(110, 31, 46, .45);
}
.btn--ghost:active { transform: scale(.98); box-shadow: none; }

/* ---------- Stage 2 ---------- */
.confession {
  font-family: var(--script);
  font-weight: 700;
  font-size: clamp(5.5rem, 3rem + 16vw, 10rem);
  line-height: 1.25;
  color: var(--burgundy);
  text-shadow: 0 12px 40px rgba(201, 140, 140, .45);
  padding-inline: .1em;
}
.stage.is-active > .confession {
  animation: bloom 1600ms var(--ease) 100ms both;
}
@keyframes bloom {
  from { opacity: 0; transform: scale(.94); filter: blur(10px); }
  60%  { filter: blur(0); }
  to   { opacity: 1; transform: none; filter: none; }
}

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: clamp(4px, 1vh, 12px) 0 clamp(20px, 3.5vh, 30px);
  color: var(--rose);
}
.divider span {
  width: clamp(44px, 12vw, 72px);
  height: 1px;
  background: linear-gradient(to left, transparent, currentColor);
}
.divider span:last-child { background: linear-gradient(to right, transparent, currentColor); }
.divider svg { width: 12px; height: 12px; fill: currentColor; }

.stage.is-active > .divider { animation-delay: 800ms; }
.stage.is-active > .promise { animation-delay: 1050ms; }
.stage.is-active > .btn--ghost { animation-delay: 1450ms; }

.promise {
  max-width: var(--measure);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.5rem);
  line-height: 1.95;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ---------- Stage 3 ---------- */
.video-title {
  max-width: var(--measure);
  font-size: clamp(1.45rem, 1.1rem + 1.8vw, 2rem);
  line-height: 1.6;
  color: var(--burgundy);
  text-wrap: balance;
}

.frame {
  position: relative;
  margin-top: clamp(26px, 4.5vh, 40px);
  width: min(100%, 340px);
  /* keep the portrait clip fully visible on short screens */
  width: min(100%, 340px, calc((100svh - 330px) * 0.5626));
  min-width: min(100%, 220px);
  padding: 10px;
  border-radius: 26px;
  background: linear-gradient(180deg, #fffaf8, #f9e9e5);
  border: 1px solid var(--blush-deep);
  box-shadow:
    0 0 0 6px rgba(255, 255, 255, .45),
    0 30px 60px -30px rgba(110, 31, 46, .45),
    0 12px 24px -16px rgba(110, 31, 46, .25);
}
.frame::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 22px;
  border: 1px dashed rgba(201, 140, 140, .45);
  pointer-events: none;
}
.frame__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 512 / 910;
  border-radius: 17px;
  background: #2a1218;
  object-fit: contain;
}
.frame__seal {
  position: absolute;
  top: -15px;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #a5344a, #7d2236 60%, #5c1626);
  box-shadow: 0 4px 10px -2px rgba(92, 22, 38, .45);
  color: #f5d3d0;
}
.frame__seal svg { width: 15px; height: 15px; fill: currentColor; }

.after {
  margin-top: clamp(24px, 4vh, 34px);
  font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.7rem);
  color: var(--ink);
}
.signature {
  margin-top: .6em;
  font-family: var(--script);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.2rem);
  line-height: 1.7;
  color: var(--burgundy);
}
.signature__heart {
  display: inline-block;
  font-family: var(--serif);
  color: var(--rose-deep);
}

/* ---------- Small screens ---------- */
@media (max-width: 360px) {
  .message span { display: inline; }
  .frame { width: min(100%, 300px); }
}
@media (max-height: 640px) and (orientation: landscape) {
  .envelope { width: 170px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --t-stage: 1ms; }
  .hearts { display: none; }
  .envelope svg,
  .sparkles { animation: none; }
  .stage.is-active > *,
  .stage.is-active > .confession {
    animation: fade 400ms linear both;
    animation-delay: 0ms !important;
  }
  .stage.is-leaving { transform: none; filter: none; }
  .envelope__flap,
  .envelope__seal,
  .btn,
  .btn svg { transition: none; }
  .btn:hover,
  .btn:active { transform: none; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }