/* ═══════════════════════════════════════════════════════════
   Alexander & Josephine — Castle Wedding Invitation
   Watercolor château theme · cream / gold / powder blue / sage
   ═══════════════════════════════════════════════════════════ */

:root {
  --cream: #faf6ec;
  --cream-deep: #f3ecd9;
  --paper: #fdfaf2;
  --ink: #3d3831;
  --ink-soft: #6b6355;
  --gold: #a8853b;
  --gold-bright: #c9a961;
  --gold-pale: #e6d5ae;
  --blue: #8fa3c8;
  --blue-deep: #5f739b;
  --sage: #a8b598;
  --shadow-soft: 0 18px 50px -18px rgba(61, 56, 49, .28);
  --serif: "Cinzel", serif;
  --body: "Cormorant Garamond", serif;
  --script: "Great Vibes", cursive;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  background: var(--cream-deep);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.locked { overflow: hidden; height: 100dvh; }

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

/* ————— shared type ————— */
.script {
  font-family: var(--script);
  font-size: clamp(1.8rem, 6vw, 2.4rem);
  color: var(--gold);
  font-weight: 400;
}
.serif-caps {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: .14em;
  font-size: clamp(1.35rem, 5vw, 1.7rem);
  line-height: 1.55;
  color: var(--ink);
}
.serif-caps.small { font-size: clamp(.95rem, 3.6vw, 1.1rem); letter-spacing: .18em; }
.serif-caps.tiny  { font-size: .68rem; letter-spacing: .22em; color: var(--ink-soft); }
.body-text {
  font-size: clamp(1.05rem, 4vw, 1.2rem);
  line-height: 1.75;
  color: var(--ink-soft);
  font-weight: 400;
}
.lead { margin-bottom: 1.1rem; }
.hint-text {
  font-family: var(--body);
  font-style: italic;
  font-size: .95rem;
  color: var(--ink-soft);
  opacity: .75;
  margin-top: .9rem;
}
.amp-small { font-family: var(--script); font-size: 1.4em; color: var(--gold); font-weight: 400; }

/* ————— divider (line ◆ line) like the reference ————— */
.divider {
  display: flex; align-items: center; justify-content: center;
  gap: .7rem; margin: 1.4rem auto;
  width: min(230px, 60%);
}
.divider.tight { margin: .8rem auto; width: 130px; }
.divider .line { flex: 1; height: 1px; background: currentColor; opacity: .55; }
.divider .diamond { font-size: .55rem; color: var(--gold); }

/* ═══════════════════════════════════════════
   ENVELOPE INTRO — Higgsfield artwork + film
   ═══════════════════════════════════════════ */
#envelope-screen {
  position: fixed; inset: 0; z-index: 60;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(174, 195, 224, .38), transparent 60%),
    linear-gradient(180deg, #f6f2e6 0%, #fbf7ec 45%, #f4efdf 100%);
  transition: filter 2.2s ease-in;
  cursor: pointer;
}
#envelope-screen.brighten { filter: brightness(2.6) saturate(.35); }
#envelope-screen.gone { display: none; }

/* the 9:16 artwork column, phone-shaped even on desktop */
#env-image, #env-video {
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  height: 100dvh;
  width: min(100vw, calc(100dvh * 9 / 16 + 1px));
  object-fit: cover; object-position: center;
  box-shadow: 0 0 80px rgba(61, 56, 49, .18);
}
#env-video { opacity: 0; z-index: 1; transition: opacity .6s ease; }
#envelope-screen.opening #env-video { opacity: 1; }

.env-tap {
  position: absolute; inset: 0; z-index: 3;
  background: none; border: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.env-tap:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: -8px; }

/* drifting petals */
.petals { position: absolute; inset: 0; pointer-events: none; z-index: 2; transition: opacity .5s ease; }
.petal {
  position: absolute; top: -4vh;
  width: 14px; height: 11px; border-radius: 60% 40% 55% 45%;
  background: radial-gradient(circle at 35% 35%, rgba(232, 218, 188, .9), rgba(214, 196, 158, .55));
  animation: fall linear infinite;
  opacity: 0;
}
.petal:nth-child(1) { left: 8%;  animation-duration: 11s; animation-delay: 0s;   scale: .8; }
.petal:nth-child(2) { left: 22%; animation-duration: 14s; animation-delay: 3.2s; scale: 1.05; background: radial-gradient(circle at 35% 35%, rgba(190, 204, 228, .85), rgba(150, 168, 200, .5)); }
.petal:nth-child(3) { left: 37%; animation-duration: 12s; animation-delay: 6s;   scale: .7; }
.petal:nth-child(4) { left: 52%; animation-duration: 15s; animation-delay: 1.4s; scale: .95; }
.petal:nth-child(5) { left: 64%; animation-duration: 10s; animation-delay: 4.6s; scale: .85; background: radial-gradient(circle at 35% 35%, rgba(190, 204, 228, .85), rgba(150, 168, 200, .5)); }
.petal:nth-child(6) { left: 78%; animation-duration: 13s; animation-delay: 2.2s; scale: 1.1; }
.petal:nth-child(7) { left: 88%; animation-duration: 16s; animation-delay: 7s;   scale: .75; }
.petal:nth-child(8) { left: 45%; animation-duration: 12.5s; animation-delay: 9s; scale: .9;  background: radial-gradient(circle at 35% 35%, rgba(196, 210, 186, .85), rgba(160, 178, 148, .5)); }

@keyframes fall {
  0%   { transform: translateY(-6vh) rotate(0deg) translateX(0); opacity: 0; }
  8%   { opacity: .85; }
  50%  { transform: translateY(50vh) rotate(160deg) translateX(4vw); opacity: .8; }
  100% { transform: translateY(108vh) rotate(340deg) translateX(-3vw); opacity: 0; }
}

.env-hint {
  position: absolute; left: 0; right: 0; bottom: 6dvh; z-index: 2;
  text-align: center;
  font-family: var(--serif);
  font-size: .74rem; letter-spacing: .34em;
  color: var(--ink-soft);
  text-shadow: 0 1px 10px rgba(253, 250, 242, .95);
  animation: hint-fade 2.8s ease-in-out infinite;
  pointer-events: none;
  transition: opacity .5s ease;
}
@keyframes hint-fade { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

#envelope-screen.opening .env-hint,
#envelope-screen.opening .petals { opacity: 0; animation: none; }

/* white light transition */
#white-fade {
  position: fixed; inset: 0; z-index: 70;
  background: #fff;
  opacity: 0; pointer-events: none;
  transition: opacity 1.9s ease-in;
}
#white-fade.in { opacity: 1; }
#white-fade.out { transition: opacity 1.4s ease-out; opacity: 0; }

/* ═══════════════════════════════════════════
   PAGE SHELL — 9:16 column
   ═══════════════════════════════════════════ */
#page {
  max-width: 480px;
  margin: 0 auto;
  background: var(--cream);
  box-shadow: 0 0 80px rgba(61, 56, 49, .18);
  position: relative;
}

/* ————— HERO ————— */
.hero {
  position: relative;
  /* never crop the artwork: at least viewport height, at least the image's 9:16 shape */
  min-height: max(100dvh, calc(min(100vw, 480px) * 1.79));
  overflow: hidden;
  display: flex; flex-direction: column;
}
.hero-art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.hero::before {
  content: ""; position: absolute; z-index: 1;
  left: 0; right: 0; top: 0; height: 52%;
  background: linear-gradient(180deg,
    rgba(252, 249, 240, .92) 0%,
    rgba(252, 249, 240, .72) 40%,
    rgba(252, 249, 240, .35) 70%,
    transparent 100%);
  pointer-events: none;
}
.hero-text {
  position: relative; z-index: 2;
  text-align: center;
  padding-top: clamp(2.2rem, 6.5dvh, 4rem);
}
.names { display: flex; flex-direction: column; gap: .1em; }
.name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 8.5vw, 2.7rem);
  letter-spacing: .12em;
  background: linear-gradient(100deg, #3d3831 20%, #8a6b2b 40%, #c9a961 50%, #8a6b2b 60%, #3d3831 80%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer 7s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}
.amp {
  font-family: var(--script);
  font-size: clamp(1.5rem, 6vw, 2rem);
  color: var(--gold);
  line-height: 1;
}
.wedding-day {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 5.4vw, 1.65rem);
  letter-spacing: .2em;
  margin-top: clamp(1.2rem, 3.6dvh, 2.2rem);
  color: var(--ink);
}
.hero .divider { color: var(--ink); }
.date {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.05rem, 4.6vw, 1.4rem);
  letter-spacing: .18em;
  color: var(--ink);
}

/* staggered reveal after white fade */
.reveal-1, .reveal-2, .reveal-3, .reveal-4, .reveal-5, .reveal-6 {
  opacity: 0; transform: translateY(14px);
  transition: opacity 1s ease, transform 1s ease;
}
#page.shown .reveal-1 { transition-delay: .2s; }
#page.shown .reveal-2 { transition-delay: .45s; }
#page.shown .reveal-3 { transition-delay: .7s; }
#page.shown .reveal-4 { transition-delay: 1.05s; }
#page.shown .reveal-5 { transition-delay: 1.3s; }
#page.shown .reveal-6 { transition-delay: 1.5s; }
#page.shown .reveal-1, #page.shown .reveal-2, #page.shown .reveal-3,
#page.shown .reveal-4, #page.shown .reveal-5, #page.shown .reveal-6 {
  opacity: 1; transform: none;
}

.scroll-cue {
  position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .4rem;
  opacity: 0; transition: opacity 1s ease 2.4s;
}
#page.shown .scroll-cue { opacity: .85; }
.scroll-cue-text {
  font-family: var(--body); font-style: italic; font-size: .9rem; color: var(--ink-soft);
}
.scroll-cue-line {
  width: 1px; height: 34px;
  background: linear-gradient(var(--gold), transparent);
  animation: cue 2s ease-in-out infinite;
}
@keyframes cue { 0%, 100% { transform: scaleY(.4); transform-origin: top; } 50% { transform: scaleY(1); } }

/* ————— MOMENTS — hung watercolor paintings ————— */
.moments { background: var(--paper); }

.moment {
  position: relative;
  width: min(74%, 300px);
  margin: 3.2rem auto 0;
  padding-top: 44px; /* room for the hanging threads */
  /* --drift is written by JS from the scroll position; the slow
     transform transition makes each painting float lazily after it */
  transform: translateY(var(--drift, 0px)) rotate(var(--tilt, 0deg));
}
.moment.reveal-section { transform: translateY(calc(var(--drift, 0px) + 26px)) rotate(var(--tilt, 0deg)); }
.moment.reveal-section.in-view { transform: translateY(var(--drift, 0px)) rotate(var(--tilt, 0deg)); }
.moment, .moment.reveal-section, .moment.reveal-section.in-view {
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.22, .8, .3, 1);
}

.mo-1 { margin-left: 6%;   --tilt: -2.2deg; }
.mo-2 { margin-left: auto; margin-right: 6%; --tilt: 2deg; }
.mo-3 { margin-left: 14%;  --tilt: -1.5deg; }

/* hanging threads + gold nail */
.moment::before, .moment::after {
  content: ""; position: absolute; top: 10px; left: 50%;
  width: 1px; height: 44px;
  background: linear-gradient(rgba(168, 133, 59, .0), rgba(168, 133, 59, .55));
  transform-origin: top center;
}
.moment::before { transform: rotate(28deg); }
.moment::after  { transform: rotate(-28deg); }
.moment-frame::before {
  content: ""; position: absolute; top: -37px; left: 50%; margin-left: -3.5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d8bc72, #96762f);
  box-shadow: 0 1px 3px rgba(90, 70, 25, .4);
}

.moment-frame {
  position: relative;
  background: var(--paper);
  padding: 9px;
  border: 1px solid rgba(168, 133, 59, .55);
  outline: 1px solid rgba(168, 133, 59, .26);
  outline-offset: 4px;
  box-shadow: var(--shadow-soft);
}
.moment-frame img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border: 1px solid rgba(168, 133, 59, .3);
}
.mcap { margin-top: 1rem; font-size: clamp(1.5rem, 5vw, 1.9rem); text-align: center; }

/* ————— EDGE DECOR — little details riding the scroll ————— */
#edge-decor {
  position: fixed; top: 0; left: 50%; z-index: 40;
  transform: translateX(-50%);
  width: min(100vw, 480px); height: 100dvh;
  pointer-events: none;
  opacity: 0; transition: opacity .9s ease;
}
#edge-decor.visible { opacity: 1; }
#edge-decor[hidden] { display: none; }

.ed { position: absolute; will-change: transform; }

.ed-flower {
  width: 78px; aspect-ratio: 1;
  mix-blend-mode: multiply; opacity: .55;
  object-fit: cover;
}
.ed-l1 {
  left: -36px; top: 12%; object-position: 0 0;
  -webkit-mask-image: radial-gradient(120% 120% at 30% 30%, #000 45%, transparent 72%);
  mask-image: radial-gradient(120% 120% at 30% 30%, #000 45%, transparent 72%);
}
.ed-r1 {
  right: -36px; top: 44%; object-position: 100% 100%;
  -webkit-mask-image: radial-gradient(120% 120% at 70% 70%, #000 45%, transparent 72%);
  mask-image: radial-gradient(120% 120% at 70% 70%, #000 45%, transparent 72%);
}
.ed-l2 {
  left: -40px; top: 76%; object-position: 0 100%;
  -webkit-mask-image: radial-gradient(120% 120% at 30% 70%, #000 45%, transparent 72%);
  mask-image: radial-gradient(120% 120% at 30% 70%, #000 45%, transparent 72%);
}

.ed-bird { width: 26px; height: 13px; opacity: .8; }
.ed-b1 { left: 10%; top: 30%; }
.ed-b2 { right: 12%; top: 62%; width: 20px; }

.ed-petal {
  width: 13px; height: 10px; border-radius: 60% 40% 55% 45%;
  background: radial-gradient(circle at 35% 35%, rgba(232, 218, 188, .9), rgba(214, 196, 158, .55));
}
.ed-p1 { left: 7%;  top: 20%; }
.ed-p2 { right: 9%; top: 38%; background: radial-gradient(circle at 35% 35%, rgba(190, 204, 228, .85), rgba(150, 168, 200, .5)); }
.ed-p3 { left: 12%; top: 66%; background: radial-gradient(circle at 35% 35%, rgba(196, 210, 186, .85), rgba(160, 178, 148, .5)); }

/* ————— SECTIONS ————— */
.section {
  position: relative;
  padding: clamp(4rem, 12dvh, 6rem) 1.6rem;
  text-align: center;
  overflow: hidden;
}
.reveal-section { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s ease; }
.reveal-section.in-view { opacity: 1; transform: none; }

.corner {
  position: absolute; width: 150px; aspect-ratio: 1;
  mix-blend-mode: multiply; opacity: .85; pointer-events: none;
  object-fit: cover;
}
.corner--tl {
  top: -6px; left: -6px; object-position: 0 0;
  -webkit-mask-image: radial-gradient(135% 135% at 0% 0%, #000 46%, transparent 72%);
  mask-image: radial-gradient(135% 135% at 0% 0%, #000 46%, transparent 72%);
}
.corner--br {
  bottom: -6px; right: -6px; object-position: 100% 100%;
  -webkit-mask-image: radial-gradient(135% 135% at 100% 100%, #000 46%, transparent 72%);
  mask-image: radial-gradient(135% 135% at 100% 100%, #000 46%, transparent 72%);
}

.invite { background: var(--paper); }
.invite .serif-caps { margin: .6rem 0; }

/* countdown */
.countdown-section {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
}
.countdown {
  display: flex; align-items: baseline; justify-content: center; gap: .7rem;
}
.cd-cell { display: flex; flex-direction: column; gap: .25rem; min-width: 3.4rem; }
.cd-num {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.7rem, 7vw, 2.3rem);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cd-label {
  font-family: var(--serif); font-size: .58rem; letter-spacing: .24em; color: var(--ink-soft);
}
.cd-sep { color: var(--gold); font-size: 1.4rem; align-self: center; padding-bottom: 1rem; }

/* 3D castle */
.castle3d { background: var(--paper); }
.castle3d model-viewer {
  width: 100%; height: min(58dvh, 460px);
  margin-top: 1.4rem;
  --poster-color: transparent;
  background: radial-gradient(80% 65% at 50% 78%, rgba(168, 181, 152, .25), transparent 70%),
              radial-gradient(100% 80% at 50% 0%, rgba(174, 195, 224, .22), transparent 60%);
  border-radius: 14px;
}
.castle3d.model-missing model-viewer, .castle3d.model-missing .hint-text { display: none; }

/* details */
.details { background: var(--cream); }
.detail-card {
  background: var(--paper);
  border: 1px solid rgba(168, 133, 59, .3);
  border-radius: 12px;
  padding: 1.8rem 1.4rem;
  margin: 1.1rem auto 0;
  max-width: 360px;
  box-shadow: var(--shadow-soft);
}
.detail-card .divider.tight { color: var(--ink); }

.btn-gold {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-top: 1.2rem;
  padding: .85rem 1.6rem;
  min-height: 44px;
  font-family: var(--serif); font-size: .72rem; letter-spacing: .22em;
  color: #fffcf3; text-decoration: none;
  background: linear-gradient(160deg, #c9a961, #a8853b 60%, #96762f);
  border-radius: 999px;
  box-shadow: 0 8px 22px -8px rgba(138, 107, 43, .7), inset 0 1px 0 rgba(255, 248, 226, .5);
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: pointer;
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -8px rgba(138, 107, 43, .8), inset 0 1px 0 rgba(255, 248, 226, .5); }
.btn-gold:active { transform: translateY(0) scale(.98); }
.btn-gold:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 3px; }
.btn-lg { padding: 1rem 2rem; font-size: .78rem; }

/* timeline */
.timeline { background: var(--paper); }
.tl {
  list-style: none; max-width: 340px; margin: 1.6rem auto 0;
  position: relative; text-align: left;
}
.tl::before {
  content: ""; position: absolute; left: 84px; top: 8px; bottom: 8px;
  width: 1px; background: linear-gradient(rgba(168, 133, 59, .1), rgba(168, 133, 59, .55), rgba(168, 133, 59, .1));
}
.tl-item {
  display: flex; align-items: center; gap: 1rem;
  padding: .78rem 0;
}
.tl-time {
  font-family: var(--serif); font-size: .85rem; letter-spacing: .1em;
  color: var(--gold); width: 64px; text-align: right; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.tl-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--gold-bright);
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px rgba(168, 133, 59, .4);
  position: relative; z-index: 1;
}
.tl-what { font-size: 1.08rem; color: var(--ink); line-height: 1.4; }

/* rsvp */
.rsvp { background: linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%); }

/* footer */
.footer {
  padding: 3rem 1.6rem 3.6rem;
  text-align: center;
  background: var(--cream-deep);
}
.footer .divider { color: var(--ink); }
.footer-script { font-size: 2rem; margin: .4rem 0 .7rem; }

/* ————— reduced motion ————— */
/* ————— musikknapp ————— */
#music-btn {
  position: fixed;
  bottom: 20px;
  right: calc(50% - min(50vw, 240px) + 20px);
  z-index: 90;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(61, 56, 49, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(201, 169, 97, 0.4);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  gap: 2px;
}
#music-btn[hidden] { display: none; }
#music-btn .mb-bar {
  width: 2.5px; height: 12px;
  background: var(--gold-bright);
  border-radius: 2px;
  animation: mb-dance 0.6s ease-in-out infinite alternate;
}
#music-btn .mb-bar:nth-child(2) { animation-delay: .12s; height: 18px; }
#music-btn .mb-bar:nth-child(3) { animation-delay: .24s; }
#music-btn .mb-bar:nth-child(4) { animation-delay: .36s; height: 16px; }
#music-btn.off .mb-bar { animation: none; height: 2.5px; }
@keyframes mb-dance { 0% { height: 3px; } 100% { height: 18px; } }

@media (prefers-reduced-motion: reduce) {
  #music-btn .mb-bar { animation: none; }
  html { scroll-behavior: auto; }
  .petal, .name, .scroll-cue-line, .env-hint { animation: none !important; }
  .reveal-1, .reveal-2, .reveal-3, .reveal-4, .reveal-5, .reveal-6,
  .reveal-section { transition: none; opacity: 1; transform: none; }
  .moment, .moment.reveal-section, .moment.reveal-section.in-view { transition: none; transform: rotate(var(--tilt, 0deg)); }
  #edge-decor { display: none; }
  #envelope-screen, #white-fade { transition-duration: .01s; }
}