/* =========================================================
   Mom Mai & Magic — Chiang Mai Invitation
   Static HTML/CSS/JS. Measurements taken from the 1920px
   reference screenshot.
   ========================================================= */

@font-face { font-family: "Jost"; src: url("assets/fonts/jost-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url("assets/fonts/jost-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Jost"; src: url("assets/fonts/jost-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("assets/fonts/playfair-display-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("assets/fonts/playfair-display-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("assets/fonts/playfair-display-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Great Vibes"; src: url("assets/fonts/great-vibes-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --crimson: #b0122d;
  --crimson-dark: #8e0c22;
  --gold: #e2c27c;
  --champagne: #c9b393;
  --slate: #7d858c;
  --slate-top: #b0b6ba;
  --mist: #d9dde0;
  --card: rgba(237, 240, 242, .98);
  --ink: #15171a;
  --ink-soft: #3a3f45;
  --teal: #004642;

  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --script: "Great Vibes", "Brush Script MT", cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--slate);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg, video, canvas { display: block; max-width: 100%; }
p, h1, h2 { margin: 0; }
button { font: inherit; }

.script { font-family: var(--script); font-weight: 400; color: var(--crimson); line-height: 1.1; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 2px solid var(--crimson);
  background: rgba(214, 218, 222, .78);
  color: var(--crimson);
  font-family: var(--sans); font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(40, 20, 30, .18);
}

/* ---------- 1. Passport ---------- */
.s-passport {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px;
  padding: 48px 16px;
  background: linear-gradient(180deg, #b0b6ba 0%, #959ca2 45%, #7d858b 100%);
  overflow: hidden;
}
.passport-glow {
  position: absolute; right: -16%; bottom: -34%;
  width: 52vw; max-width: 820px; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(160, 50, 78, .42), rgba(160, 50, 78, .14) 60%, transparent);
  pointer-events: none;
}
.passport-glow img { position: absolute; right: 22%; bottom: 34%; width: 30%; opacity: .5; }

.dot { position: absolute; border-radius: 50%; pointer-events: none; animation: drift 9s ease-in-out infinite alternate; }
.d1 { width: 8px; height: 8px; background: #b8243a; left: 14%; top: 10.5%; }
.d2 { width: 6px; height: 6px; background: #b8243a; right: 16%; top: 25%; animation-delay: -3s; }
.d3 { width: 6px; height: 6px; background: #e8ecee; left: 22%; top: 81%; animation-delay: -5s; }
.d4 { width: 4px; height: 4px; background: rgba(232, 236, 238, .6); right: 24%; top: 74%; animation-delay: -2s; }
.d5 { width: 5px; height: 5px; background: rgba(184, 36, 58, .6); left: 64%; top: 6%; animation-delay: -7s; }
@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(12px, -18px); } }

.tap-pill {
  padding: 9px 22px 10px;
  font-size: 17px; letter-spacing: .3px;
  animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

.passport {
  position: relative;
  width: min(327px, 76vw);
  aspect-ratio: 327 / 457;
  perspective: 1600px;
  cursor: pointer;
  outline: none;
  transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}
.passport:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--crimson); border-radius: 12px; }

.pp-cover, .pp-inner {
  position: absolute; inset: 0;
  border-radius: 5px 16px 16px 5px;
}
.pp-inner {
  background: #f6f1e8;
  box-shadow: 0 26px 50px rgba(40, 10, 20, .35);
  display: grid; place-items: center;
}
.pp-page { text-align: center; padding: 20px; }
.pp-page-mono { width: 60%; aspect-ratio: 1; margin: 0 auto 6px; }
.pp-page-script { font-family: var(--script); color: var(--crimson); font-size: clamp(22px, 6vw, 30px); }

.pp-cover {
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 1.1s cubic-bezier(.6, .05, .25, 1);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .04) 0 2px, transparent 2px 7px),
    radial-gradient(120% 90% at 40% 30%, #b8182f 0%, #a01229 55%, #7a0a1d 100%);
  box-shadow:
    inset 6px 0 10px rgba(0, 0, 0, .25),
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    0 28px 50px rgba(50, 10, 20, .38),
    0 6px 14px rgba(50, 10, 20, .25);
  z-index: 2;
}
.passport.is-open .pp-cover { transform: rotateY(-165deg); }

.pp-frame {
  position: absolute; inset: 10px 10px 10px 12px;
  border: 1px solid rgba(226, 194, 124, .75);
  border-radius: 3px 10px 10px 3px;
  box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 4px rgba(226, 194, 124, .35);
  display: flex; flex-direction: column; align-items: center;
  color: var(--gold);
  text-align: center;
}
.pp-kingdom { margin-top: 6.5%; font-size: clamp(7px, 2vw, 9.5px); font-weight: 600; letter-spacing: 3px; }
.pp-orn-top { width: 26%; margin-top: 3%; }
.pp-medal { position: relative; width: 55%; aspect-ratio: 1; margin-top: 4%; display: grid; place-items: center; }
.pp-medal-orn { position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; max-width: none; }
.pp-medal-face {
  width: 74%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #fbf8f3 0 60%, #f1ebe2 100%);
  border: 6px solid #d9ad55;
  box-shadow: 0 0 0 2px #a8772a, 0 0 0 4px rgba(226, 194, 124, .45), 0 6px 14px rgba(0, 0, 0, .35), inset 0 2px 6px rgba(0, 0, 0, .15);
  display: grid; place-items: center;
}
.pp-medal-face svg { width: 92%; height: 92%; }
.pp-title { margin-top: 7%; font-family: var(--serif); font-weight: 600; font-size: clamp(16px, 4.6vw, 21px); letter-spacing: .32em; text-indent: .32em; }
.pp-title span { font-size: .5em; vertical-align: middle; letter-spacing: 0; }
.pp-sub { margin-top: 2%; font-size: clamp(6px, 1.7vw, 7.5px); font-weight: 500; letter-spacing: 1.6px; opacity: .9; }
.pp-side { position: absolute; top: 12%; height: 76%; width: 10px; }
.pp-side-l { left: 4.5%; }
.pp-side-r { right: 4.5%; }
.pp-chip { position: absolute; bottom: 4%; width: 22%; left: 50%; transform: translateX(-50%); }

/* ---------- 2. Hero ---------- */
.s-hero {
  position: relative;
  min-height: 817px;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 90px 16px 60px;
  overflow: hidden;
  background: #6b5d60;
}
.hero-bg {
  position: absolute; inset: -2%;
  background: url("assets/images/hero-bg.webp") center 42% / cover no-repeat;
  /* muted mauve grade, matching the reference screenshot */
  filter: saturate(.2) sepia(.22) hue-rotate(-18deg) brightness(.84) contrast(1.04);
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(205, 160, 172, .22), rgba(120, 80, 92, .2));
  mix-blend-mode: multiply;
}
.hero-content { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }

.hero-card {
  position: relative;
  width: min(571px, 100%);
  padding: 32px 28px 30px;
  background: var(--card);
  border-radius: 22px;
  text-align: center;
  box-shadow: 0 22px 48px rgba(30, 15, 20, .28), 0 4px 12px rgba(30, 15, 20, .12);
  overflow: hidden;
}
.hero-card::before, .where-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: linear-gradient(90deg, #9a1a2e 0%, var(--champagne) 50%, #9a1a2e 100%);
}
.mono-badge {
  width: 148px; aspect-ratio: 1; margin: 0 auto;
  border-radius: 50%;
  background: #f6f2ec;
  border: 4px solid #fff;
  box-shadow: 0 8px 22px rgba(40, 30, 35, .22);
  display: grid; place-items: center;
}
.mono-badge svg { width: 94%; height: 94%; }
.hero-script { margin-top: 10px; font-size: clamp(34px, 8.6vw, 44px); }
.hero-title {
  margin-top: 4px;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(25px, 6.6vw, 38px);
  letter-spacing: .06em; line-height: 1.15;
  color: var(--ink);
}
.date-pill {
  display: inline-block; margin-top: 10px;
  padding: 7px 18px 6px;
  background: rgba(176, 18, 45, .1);
  color: var(--crimson);
  border-radius: 999px;
  font-weight: 600; font-size: clamp(11px, 3.1vw, 15px); letter-spacing: .24em;
}
.hero-place { margin-top: 14px; font-size: 15px; color: var(--ink-soft); }

/* Scratch card */
.scratch {
  position: relative;
  margin-top: 44px;
  width: min(328px, 86vw);
  height: 111px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(30, 15, 20, .3);
  background: var(--card);
  touch-action: none;
}
.scratch-reveal {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  text-align: center; padding: 10px;
}
.scratch-reveal::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #9a1a2e, var(--champagne), #9a1a2e); }
.scratch-reveal-top { font-family: var(--script); color: var(--crimson); font-size: 28px; line-height: 1; }
.scratch-reveal-main { font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--ink); }
.scratch-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; transition: opacity .6s ease; outline: none; }
.scratch-canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--crimson); }
.scratch.is-revealed .scratch-canvas { opacity: 0; pointer-events: none; }

.scroll-btn {
  margin-top: 24px;
  display: inline-flex; flex-direction: column; align-items: center;
  width: 81px; height: 63px; justify-content: center; gap: 2px;
  border: 2px solid var(--crimson);
  border-radius: 14px;
  background: rgba(214, 218, 222, .82);
  color: var(--crimson);
  font-weight: 600; font-size: 16px; text-decoration: none;
  box-shadow: 0 6px 16px rgba(30, 15, 20, .25);
}
.scroll-btn svg { width: 15px; animation: bob 1.8s ease-in-out infinite; }

/* ---------- 3. Where & When ---------- */
.s-where { padding: 67px 16px 67px; display: flex; justify-content: center; background: var(--slate); }
.where-card {
  position: relative;
  width: min(817px, 100%);
  padding: 44px 24px 36px;
  border-radius: 0 0 22px 22px;
  background: rgba(214, 218, 222, .92);
  text-align: center;
  box-shadow: 0 18px 40px rgba(20, 25, 30, .22);
  overflow: hidden;
}
.where-card::before { height: 6px; }
.flower { width: 34px; height: 34px; margin: 0 auto; }
.where-script { margin-top: 6px; font-size: clamp(30px, 7.5vw, 38px); }
.where-title {
  display: inline-block; margin-top: 8px;
  padding: 4px 22px 8px;
  background: rgba(240, 242, 244, .75);
  border-radius: 999px;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(24px, 6.4vw, 32px); color: var(--ink);
}
.where-pills { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.info-pill {
  padding: 8px 16px;
  border: 1px solid rgba(140, 146, 152, .55);
  background: rgba(225, 228, 231, .6);
  border-radius: 999px;
  font-size: 14.5px; color: var(--ink-soft);
}
.info-pill b { color: var(--crimson); font-weight: 600; margin-right: 6px; }

/* ---------- 4. Video ---------- */
.s-video {
  padding: 58px 16px 60px;
  text-align: center;
  background:
    radial-gradient(60% 45% at 50% 45%, rgba(255, 255, 255, .0), rgba(190, 196, 201, .25)),
    linear-gradient(180deg, #d9dde0 0%, #d0d5d8 50%, #d6dadd 100%);
}
.eyebrow { color: var(--crimson); font-weight: 600; font-size: 11.5px; letter-spacing: .32em; }
.video-title { margin-top: 10px; font-family: var(--serif); font-weight: 700; font-size: clamp(28px, 7vw, 44px); line-height: 1.15; color: var(--ink); }
.s-video .flower { margin-top: 10px; }
.phone {
  position: relative;
  width: min(440px, 88vw);
  margin: 60px auto 0;
  padding: 10px;
  border-radius: 28px;
  background: linear-gradient(120deg, #9b0f29 0%, #b23a52 40%, #c99aa5 75%, #a8273f 100%);
  box-shadow: 0 26px 50px rgba(40, 20, 30, .28), 0 6px 16px rgba(40, 20, 30, .14);
}
.phone-video {
  width: 100%; height: auto;
  aspect-ratio: 480 / 854;
  border-radius: 20px;
  background: #0d0f0c;
  object-fit: contain;
}
.video-fallback {
  position: absolute; inset: 10px; border-radius: 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: rgba(20, 22, 24, .55) url("assets/images/poster.jpg") center / cover; background-blend-mode: multiply; color: #fff; font-size: 15px;
}
.video-fallback a { color: #fff; border: 1px solid #fff; padding: 8px 16px; border-radius: 999px; text-decoration: none; }
.video-fallback[hidden] { display: none; }

/* ---------- 5. Lantern night ---------- */
.s-night {
  position: relative;
  height: 421px;
  overflow: hidden;
  background: var(--teal);
  display: grid; place-items: center;
  text-align: center;
}
.night-sky { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.night-skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 200px; object-fit: cover; object-position: center bottom; max-width: none; }
.night-palm { position: absolute; bottom: 0; height: auto; pointer-events: none; }
.night-palm-l { left: 0; width: min(380px, 34vw); }
.night-palm-r { right: 0; width: min(420px, 36vw); }
.night-content { position: relative; z-index: 2; padding: 0 16px 30px; }
.mono-badge-sm { width: 132px; }
.night-script {
  margin-top: 18px;
  color: #fff;
  font-size: clamp(32px, 7.4vw, 50px);
  text-shadow: 0 2px 14px rgba(0, 30, 28, .55);
}
.night-meta { margin-top: 22px; color: #fff; font-weight: 500; font-size: clamp(11px, 2.8vw, 16px); letter-spacing: .24em; text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }

/* ---------- Footer & music ---------- */
.site-footer { padding: 40px 16px 44px; text-align: center; background: var(--slate); }
.site-footer p { font-size: 13px; color: #2f343a; }

.music-btn {
  position: fixed; left: 22px; bottom: 20px; z-index: 50;
  left: max(22px, env(safe-area-inset-left)); bottom: max(20px, env(safe-area-inset-bottom));
  width: 54px; height: 54px; border-radius: 50%;
  border: 0; cursor: pointer; padding: 0;
  background: radial-gradient(circle at 35% 30%, #d8333c, #b3141f);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 8px 18px rgba(100, 10, 20, .4);
  -webkit-tap-highlight-color: transparent;
}
.music-btn svg { width: 24px; height: 24px; grid-area: 1 / 1; }
.music-btn[hidden] { display: none; }
.music-btn .ico-sound { display: none; }
.music-btn.is-playing .ico-sound { display: block; }
.music-btn.is-playing .ico-muted { display: none; }
.music-btn.is-playing { animation: pulse 2.2s ease-in-out infinite; }
.music-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@keyframes pulse { 0%, 100% { box-shadow: 0 8px 18px rgba(100, 10, 20, .4), 0 0 0 0 rgba(216, 51, 60, .45); } 50% { box-shadow: 0 8px 18px rgba(100, 10, 20, .4), 0 0 0 10px rgba(216, 51, 60, 0); } }

/* ---------- Reveal-on-scroll ---------- */
.js .reveal-up { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.js .reveal-up.is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .s-hero { min-height: auto; padding: 56px 16px 48px; }
  .hero-card { padding: 26px 18px 24px; border-radius: 20px; }
  .mono-badge { width: 120px; }
  .mono-badge-sm { width: 104px; }
  .scratch { margin-top: 30px; height: 100px; }
  .s-where { padding: 52px 16px; }
  .where-card { padding: 36px 16px 30px; }
  .info-pill { font-size: 13px; padding: 7px 13px; }
  .s-video { padding: 52px 16px 56px; }
  .phone { margin-top: 36px; padding: 8px; border-radius: 24px; }
  .phone-video { border-radius: 17px; }
  .s-night { height: 380px; }
  .night-skyline { height: 150px; }
  .night-palm-l { width: 44vw; }
  .night-palm-r { width: 46vw; }
  .music-btn { left: 14px; bottom: 14px; width: 48px; height: 48px; }
  .passport-glow { width: 80vw; right: -25%; bottom: -12%; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .s-passport { min-height: 560px; }
  .passport { width: 260px; }
  .s-hero { min-height: auto; padding: 32px 16px 40px; }
  .mono-badge { width: 104px; }
  .phone { width: min(300px, 60vw); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}