/* =========================================================
   Adele & Oliver — Wedding Invitation
   Mobile-first, max 480px column, centered on desktop.
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  --col: 480px;

  --paper: #F6F0E6;
  --paper-deep: #ECE2D3;
  --ink: #4A3B31;          /* dark warm brown */
  --ink-soft: #7A6250;     /* names, headings */
  --taupe: #8A7565;
  --taupe-soft: #B5A291;
  --gold: #B8975A;
  --gold-light: #D9C08A;
  --line: rgba(138, 117, 101, .38);

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --script: "Allura", "Great Vibes", cursive; /* modern flowing calligraphy; includes Vietnamese glyphs */
  --script-scale: 1.1; /* Allura sits a little smaller than other scripts; one knob for every script size */

  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Paper grain drawn in SVG; real texture (assets/paper-texture.png) layers on top if present */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .35  0 0 0 0 .28  0 0 0 .08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --divider: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 8'><path d='M0 4h31M41 4h31' stroke='%23B5A291' stroke-width='.8'/><path d='M36 1l3 3-3 3-3-3z' fill='none' stroke='%23B8975A' stroke-width='.8'/></svg>");
}

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

html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  -webkit-text-size-adjust: 100%;
}
html.is-locked { overflow: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  background: #E9E1D5;
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ol, address { margin: 0; padding: 0; font-weight: inherit; font-style: normal; }
a { color: inherit; }
button { font: inherit; color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Blurred desktop backdrop */
.backdrop {
  position: fixed;
  inset: -60px;
  z-index: -1;
  background:
    url("../assets/couple.jpg") center / cover no-repeat,
    radial-gradient(circle at 30% 20%, #F7F1E8, #E2D6C5 70%);
  filter: blur(34px) saturate(.75);
  opacity: .6;
}

/* ---------- Image + fallback pattern ----------
   Every <img> sits in a .media wrapper with a .fallback sibling.
   JS adds .is-missing when the file 404s, swapping in the fallback. */
.media .fallback { display: none; }
.media.is-missing img { display: none; }
.media.is-missing .fallback { display: block; }

/* ---------- Column ---------- */
.invite {
  position: relative;
  z-index: 0; /* stacking context so the fixed texture sits behind the scenes */
  max-width: var(--col);
  margin: 0 auto;
  background:
    var(--grain),
    linear-gradient(180deg, #F8F3EB 0%, var(--paper) 100%);
  box-shadow: 0 0 80px rgba(74, 59, 49, .18);
  overflow: hidden;
}
/* Paper texture pinned to the viewport: shown once, never tiled, so no seams */
.invite::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  background: url("../assets/paper-texture.png") center / cover no-repeat;
  pointer-events: none;
}

/* ---------- Scene shell ---------- */
.scene {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  padding: 72px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  scroll-snap-align: start;
  overflow: hidden;
}

/* Soft watercolor wash at the foot of each scene */
.scene::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -10%;
  right: -10%;
  bottom: -8%;
  height: 42%;
  pointer-events: none;
  background:
    radial-gradient(55% 45% at 22% 78%, rgba(214, 196, 170, .45), transparent 72%),
    radial-gradient(50% 40% at 78% 92%, rgba(201, 180, 152, .38), transparent 70%),
    radial-gradient(40% 30% at 55% 70%, rgba(230, 218, 200, .5), transparent 70%),
    linear-gradient(180deg, transparent, rgba(226, 212, 190, .3));
  filter: blur(10px);
}

/* Hairline between scenes */
.scene + .scene::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 72px;
  height: 8px;
  transform: translate(-50%, -50%);
  background: var(--divider) center / contain no-repeat;
  opacity: .8;
}

/* ---------- Typography ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .32em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--taupe);
}
.eyebrow--muted { color: var(--taupe-soft); }
.eyebrow--lead { margin-bottom: 26px; }

.serif-small {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .3em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--taupe);
}

.display {
  font-family: var(--serif);
  font-size: clamp(34px, 10.5vw, 46px);
  font-weight: 300;
  letter-spacing: .16em;
  line-height: 1.3; /* room for stacked Vietnamese diacritics */
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 4px 0 6px;
  padding-left: .16em; /* optically re-center tracked caps */
}

.script {
  font-family: var(--script);
  font-weight: 400;
  color: var(--ink-soft);
  line-height: 1;
}
.script--sm { font-size: calc(30px * var(--script-scale)); margin: 2px 0 26px; color: var(--taupe); }
.script--title { font-size: calc(clamp(54px, 16vw, 68px) * var(--script-scale)); margin: 4px 0 30px; color: var(--taupe); }

.label {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.small {
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1.8;
  text-transform: uppercase;
  color: var(--taupe);
}

.rule {
  display: block;
  width: 72px;
  height: 8px;
  margin: 8px auto 16px;
  background: var(--divider) center / contain no-repeat;
}

/* =========================================================
   SCENE 1 — ENVELOPE
   ========================================================= */
.envelope {
  position: fixed;
  inset: 0;
  z-index: 50;
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  overflow: hidden;
  perspective: 1400px;
  /* Inside of the envelope, seen once the flaps open */
  background:
    var(--grain),
    radial-gradient(circle at 50% 45%, #F3EADD, #DED0BC 85%);
  transition: opacity .9s ease, transform 1.2s var(--ease), visibility 0s linear .9s;
}

.envelope__flap {
  position: absolute;
  inset: 0;
  /* No edge shadow while closed: envelope-floral.png already draws its own fold
     lines, and a CSS shadow along the flap cut would double them. */
  transition:
    transform 1.25s cubic-bezier(.55, .05, .3, 1),
    opacity .55s ease;
  will-change: transform;
}

.envelope__face {
  position: absolute;
  inset: 0;
  background:
    var(--shade, none),
    url("../assets/envelope-floral.png") center / cover no-repeat,
    var(--grain),
    linear-gradient(160deg, #FAF6EF, #EFE6D9);
}

.envelope__flap--left   { z-index: 1; transform-origin: 0 50%; }
.envelope__flap--right  { z-index: 1; transform-origin: 100% 50%; }
.envelope__flap--bottom { z-index: 2; transform-origin: 50% 100%; }
.envelope__flap--top    { z-index: 3; transform-origin: 50% 0; }

.envelope__flap--left .envelope__face   { clip-path: polygon(0 0, 52% 50%, 0 100%);
  --shade: linear-gradient(90deg, transparent 60%, rgba(120, 98, 80, .06)); }
.envelope__flap--right .envelope__face  { clip-path: polygon(100% 0, 48% 50%, 100% 100%);
  --shade: linear-gradient(270deg, transparent 60%, rgba(120, 98, 80, .06)); }
.envelope__flap--bottom .envelope__face { clip-path: polygon(0 100%, 50% 47%, 100% 100%);
  --shade: linear-gradient(0deg, transparent 50%, rgba(120, 98, 80, .05)); }
.envelope__flap--top .envelope__face    { clip-path: polygon(0 0, 100% 0, 50% 53%);
  --shade: linear-gradient(180deg, rgba(255, 255, 255, .25), transparent 70%); }

/* Wax seal */
.seal {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  width: 116px;
  height: 116px;
  margin: -58px 0 0 -58px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 4px 6px rgba(74, 59, 49, .28));
  animation: seal-breathe 3.2s ease-in-out infinite;
}
.seal::after { /* glow ring inviting a tap */
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(184, 151, 90, .55);
  animation: seal-ring 3.2s ease-out infinite;
  pointer-events: none;
}
.seal:focus-visible { outline: 1px dashed var(--gold); outline-offset: 10px; }

.seal__art { position: absolute; inset: 0; }
.seal__art img { width: 100%; height: 100%; object-fit: contain; }

/* Fallback wax seal drawn in CSS */
.seal-fallback {
  position: absolute;
  inset: 0;
  border-radius: 48% 52% 50% 50% / 52% 47% 53% 48%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 248, 225, .9), transparent 32%),
    radial-gradient(circle at 50% 50%, #E3CB93 0%, #CDAE6E 45%, #A8854A 80%, #8C6D3A 100%);
  box-shadow:
    inset 0 2px 4px rgba(255, 245, 215, .7),
    inset 0 -4px 8px rgba(90, 64, 28, .35);
}
.seal-fallback::before {
  content: "";
  position: absolute;
  inset: 15px;
  border-radius: 50%;
  border: 1.5px solid rgba(110, 80, 36, .3);
  box-shadow: inset 0 2px 5px rgba(90, 64, 28, .3), 0 1px 0 rgba(255, 245, 215, .6);
}
.seal-fallback svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 54%;
  transform: translate(-50%, -50%);
  --bf-wing: rgba(120, 88, 40, .16);
  --bf-line: rgba(92, 66, 30, .6);
  filter: drop-shadow(0 1px 0 rgba(255, 245, 215, .55));
}

.envelope__hint {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  top: calc(50% + 88px);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--taupe);
  text-align: center;
  animation: hint 2.6s ease-in-out infinite;
  transition: opacity .4s ease;
  pointer-events: none;
}

/* --- Opening sequence (JS adds .is-opening, then .is-open) --- */
/* The seal stays whole: it swells slightly and fades away as the flaps start to lift.
   A keyframe animation (not a transition) so it takes over cleanly from seal-breathe. */
.envelope.is-opening .seal {
  animation: seal-fade-out .7s ease forwards;
  cursor: default;
}
.envelope.is-opening .seal::after,
.envelope.is-opening .envelope__hint { opacity: 0; animation: none; }

/* Flaps only cast a shadow once they lift off the envelope */
.envelope.is-opening .envelope__flap {
  filter: drop-shadow(0 1px 2px rgba(74, 59, 49, .2)) drop-shadow(0 6px 10px rgba(74, 59, 49, .08));
}
.envelope.is-opening .envelope__flap--top    { transform: rotateX(170deg);  opacity: 0; transition-delay: .45s, 1s; }
.envelope.is-opening .envelope__flap--left   { transform: rotateY(-170deg); opacity: 0; transition-delay: .75s, 1.3s; }
.envelope.is-opening .envelope__flap--right  { transform: rotateY(170deg);  opacity: 0; transition-delay: .75s, 1.3s; }
.envelope.is-opening .envelope__flap--bottom { transform: rotateX(-170deg); opacity: 0; transition-delay: 1s, 1.55s; }

.envelope.is-open {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.08);
  pointer-events: none;
}

@keyframes seal-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
@keyframes seal-fade-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(1.2); }
}
@keyframes seal-ring {
  0% { transform: scale(.92); opacity: .9; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes hint {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}

/* =========================================================
   SCENE 2 — FULL-BLEED COUPLE PHOTO
   ========================================================= */
.scene--couple {
  justify-content: flex-end;
  /* text sits at the foot of the screen, clear of the iOS/Android home indicator */
  padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
}
.scene--couple::after { content: none; } /* no watercolor wash over the photo */

/* Photo + dark legibility gradient, both faded out at top and bottom
   so the paper background of neighbouring scenes shows through */
.couple-photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 calc(100% - 44px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 calc(100% - 44px), transparent 100%);
}
.couple-photo__img {
  position: absolute;
  inset: 0;
  /* couple.jpg is the fallback until couple-bg.jpg is added */
  background-image: url("../assets/couple-bg.jpg"), url("../assets/couple.jpg");
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  transition: transform 7s cubic-bezier(.2, .6, .3, 1);
}
.couple-photo.is-visible .couple-photo__img { transform: scale(1); }
.couple-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  /* darkest behind the text (bottom ~30%), kept dark until the short bottom fade */
  background: linear-gradient(to bottom,
    transparent 34%,
    rgba(38, 26, 18, .35) 52%,
    rgba(30, 20, 14, .72) 68%,
    rgba(30, 20, 14, .78) calc(100% - 44px),
    rgba(30, 20, 14, .35) 100%);
}

.couple-text {
  display: grid;
  justify-items: center;
  gap: 6px;
  color: #fff;
  text-shadow: 0 2px 14px rgba(20, 12, 8, .35);
}
.couple-text__names {
  font-family: var(--script);
  font-weight: 400;
  font-size: calc(clamp(56px, 16vw, 76px) * var(--script-scale));
  line-height: 1.15;
  margin-bottom: 8px;
}
.couple-text__names span[aria-hidden] { font-size: .75em; opacity: .85; }
.couple-text__sub,
.couple-text__date {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .38em;
  padding-left: .38em; /* optically re-center tracked caps */
  text-transform: uppercase;
}
.couple-text__date { letter-spacing: .3em; padding-left: .3em; opacity: .9; }

/* =========================================================
   SCENE 3 — ARCH PHOTO & DATE
   ========================================================= */
.arch {
  position: relative;
  width: min(68%, 270px);
  margin-bottom: 34px;
}
.arch::before { /* thin outer outline */
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid var(--line);
  border-radius: 9999px 9999px 4px 4px;
  pointer-events: none;
}
.arch__frame {
  aspect-ratio: 5 / 7;
  border-radius: 9999px 9999px 2px 2px;
  overflow: hidden;
  box-shadow: 0 18px 34px rgba(74, 59, 49, .16);
  background: var(--paper-deep);
}
.arch__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.arch__fallback {
  width: 100%;
  height: 100%;
  place-items: center;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--taupe);
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 236, 205, .9), transparent 60%),
    linear-gradient(180deg, #E8D6BD, #CDB59A);
}
.media.is-missing .arch__fallback { display: grid; }

.arch__star {
  position: absolute;
  top: 46%;
  width: 14px;
  height: 14px;
  fill: var(--gold);
  opacity: .8;
}
.arch__star--l { left: -32px; }
.arch__star--r { right: -32px; }

.date {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-bottom: 26px;
  color: var(--ink-soft);
}
.date__month,
.date__year {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .32em;
  padding-left: .32em;
  text-transform: uppercase;
}
.date__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(100%, 360px);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.6;
  text-transform: uppercase;
}
.date__row > :first-child { justify-self: end; text-align: right; }
.date__row > :last-child { justify-self: start; text-align: left; }
.date__day {
  margin: 0 16px;
  padding: 0 18px;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  font-size: 50px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}

/* =========================================================
   SCENE 5 — TIMELINE (editorial: photo background, text top-left)
   ========================================================= */
.scene--timeline {
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  padding: 12vh 6vw;
  padding: 12svh 6vw;
}
.scene--timeline::after { content: none; } /* no watercolor wash over the photo */

/* Photo + diagonal dark wash, faded out at top and bottom into the paper */
.timeline-photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 44px, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 44px, #000 86%, transparent 100%);
}
.timeline-photo__img {
  position: absolute;
  inset: 0;
  /* warm dark gradient keeps the white text legible until timeline-bg.jpg is added */
  background-image: url("../assets/timeline-bg.jpg"), linear-gradient(160deg, #3E3129, #7A6250 60%, #B9A58F);
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  transition: transform 7s cubic-bezier(.2, .6, .3, 1);
}
.timeline-photo.is-visible .timeline-photo__img { transform: scale(1); }
.timeline-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  /* darkest behind the text in the top-left, opening up toward the bottom-right */
  background:
    linear-gradient(135deg, rgba(26, 18, 13, .82) 0%, rgba(30, 20, 14, .6) 38%, rgba(30, 20, 14, .18) 72%, transparent 100%),
    linear-gradient(to bottom, rgba(26, 18, 13, .25), transparent 45%);
}

.timeline-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 320px;
  color: #fff;
  text-shadow: 0 2px 14px rgba(20, 12, 8, .35);
}
.timeline-content__kicker {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .34em;
  line-height: 1.8;
  text-transform: uppercase;
  opacity: .8;
}
.timeline-content__title {
  font-family: var(--script);
  font-weight: 400;
  font-size: calc(clamp(52px, 15vw, 66px) * var(--script-scale));
  line-height: 1.1;
  margin: 2px 0 0 -4px; /* optical: script capitals overhang to the left */
}
.timeline-content__rule {
  display: block;
  width: 56px;
  height: 1px;
  margin: 14px 0 26px;
  background: var(--gold-light);
}

/* Milestones: time in a fixed column, event name beside it, hairline down the left */
.timeline {
  list-style: none;
  display: grid;
  gap: 22px;
  padding-left: 18px;
  border-left: 1px solid rgba(255, 255, 255, .35);
}
.timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 4.2em 1fr;
  align-items: baseline;
  column-gap: 14px;
}
.timeline li::before { /* gold dot on the hairline */
  content: "";
  position: absolute;
  left: -22.5px;
  top: .55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 0 3px rgba(217, 192, 138, .25);
}
.timeline__time {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1;
}
.timeline__event {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .26em;
  line-height: 1.6;
  text-transform: uppercase;
  opacity: .9;
}

/* =========================================================
   SCENE 6 — WEDDING GALLERY (single-column feed)
   Full-bleed landscape photos stacked with a hairline gap.
   ========================================================= */
.scene--gallery {
  --gap: 2px;
  display: block; /* plain stack, not the centred flex column other scenes use */
  min-height: 0;  /* height comes from the photos */
  padding: 0;     /* edge to edge */
}
.scene--gallery::after { content: none; }

.gallery {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  width: 100%;
}

.gallery__item {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--paper-deep);
}
.gallery__item img {
  display: block;
  width: 100%;
  height: auto;
}
.gallery__fallback {
  width: 100%;
  aspect-ratio: 3 / 2; /* holds the space if a photo is missing */
  place-items: center;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 300;
  letter-spacing: .1em;
  color: var(--taupe-soft);
  background: linear-gradient(160deg, #EFE6D8, #E2D5C3);
}
.media.is-missing .gallery__fallback { display: grid; }

/* =========================================================
   SCENE 4 — VENUE (full-bleed photo, text at the bottom)
   ========================================================= */
.scene--venue {
  justify-content: flex-end;
  /* text sits at the foot of the screen, clear of the iOS/Android home indicator */
  padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
}
.scene--venue::after { content: none; } /* no watercolor wash over the photo */

/* Photo + dark bottom gradient, both faded out at top and bottom
   so the paper background of neighbouring scenes shows through */
.venue-photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 calc(100% - 44px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 calc(100% - 44px), transparent 100%);
}
.venue-photo__img {
  position: absolute;
  inset: 0;
  /* warm dark gradient keeps the white text legible until venue-bg.jpg is added */
  background-image: url("../assets/venue-bg.jpg"), linear-gradient(0deg, #4A3B31, #8A7565 70%, #CDBBA6);
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  transition: transform 7s cubic-bezier(.2, .6, .3, 1);
}
.venue-photo.is-visible .venue-photo__img { transform: scale(1); }
.venue-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  /* darkest behind the text (bottom ~30%), kept dark until the short bottom fade */
  background: linear-gradient(to bottom,
    transparent 34%,
    rgba(38, 26, 18, .35) 52%,
    rgba(30, 20, 14, .72) 68%,
    rgba(30, 20, 14, .78) calc(100% - 44px),
    rgba(30, 20, 14, .35) 100%);
}

.venue-text {
  display: grid;
  justify-items: center;
  max-width: 340px;
  color: #fff;
  text-shadow: 0 2px 14px rgba(20, 12, 8, .35);
}
.venue-text__label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .38em;
  padding-left: .38em; /* optically re-center tracked caps */
  line-height: 1.8;
  text-transform: uppercase;
}
.venue-text__rule {
  display: block;
  width: 72px;
  height: 8px;
  margin: 10px auto 14px;
  background: var(--divider) center / contain no-repeat;
  filter: brightness(0) invert(1);
  opacity: .75;
}
.venue-text__name {
  font-family: var(--script);
  font-size: calc(clamp(30px, 8.5vw, 38px) * var(--script-scale));
  line-height: 1.25;
  margin-bottom: 10px;
}
.venue-text__address {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.8;
  text-transform: uppercase;
  opacity: .9;
}

/* Google Maps link — minimal outline pill that fills on hover */
.map-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 11px 24px 11px 26px;
  border: 1px solid var(--taupe-soft);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .28em;
  line-height: 1.6;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, .35);
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.map-link__arrow {
  width: 16px;
  height: 8px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  transition: transform .35s var(--ease);
}
.map-link:hover,
.map-link:focus-visible {
  background-color: var(--ink-soft);
  border-color: var(--ink-soft);
  color: var(--paper);
}
.map-link:hover .map-link__arrow,
.map-link:focus-visible .map-link__arrow { transform: translateX(4px); }
.map-link:focus-visible { outline: 1px dashed var(--gold); outline-offset: 4px; }

/* Light variant for use over dark photo overlays */
.map-link--light {
  border-color: rgba(255, 255, 255, .7);
  color: #fff;
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(4px);
  text-shadow: none;
}
.map-link--light:hover,
.map-link--light:focus-visible {
  background-color: #fff;
  border-color: #fff;
  color: var(--ink);
}
.map-link--light:focus-visible { outline-color: #fff; }

/* =========================================================
   SCENE 7 — CLOSING FRAME
   ========================================================= */
.frame {
  position: relative;
  width: min(88%, 350px);
  aspect-ratio: 630 / 906; /* matches trimmed ornate-frame.png */
  margin-bottom: 30px;
}
.frame > img,
.frame > .frame__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.frame__art {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.4;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .7));
}
.frame__art .thin { stroke-width: .7; opacity: .7; }
.frame__art circle { fill: var(--gold); stroke: none; }
.frame__art [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.frame.is-visible .frame__art [pathLength] { animation: draw 2.6s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.frame__names {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  font-size: calc(clamp(36px, 10.5vw, 46px) * var(--script-scale));
  line-height: 1.05;
  color: var(--ink-soft);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1.4s var(--ease) 1s, transform 1.4s var(--ease) 1s;
}
.frame__amp { font-size: .8em; color: var(--gold); margin: 2px 0; }
.frame.is-visible .frame__names { opacity: 1; transform: none; }

.closing__note { margin-top: 10px; text-transform: none; font-style: italic; font-size: 15px; letter-spacing: .04em; }

/* =========================================================
   MUSIC TOGGLE
   ========================================================= */
.music {
  position: fixed;
  z-index: 40;
  bottom: 18px;
  right: max(16px, calc(50% - var(--col) / 2 + 16px));
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(246, 240, 230, .85);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.music[hidden] { display: none; }
.music span {
  width: 2px;
  height: 12px;
  background: var(--taupe);
  border-radius: 1px;
  transform: scaleY(.35);
}
.music.is-playing span { animation: eq 1s ease-in-out infinite; }
.music.is-playing span:nth-child(2) { animation-delay: .2s; }
.music.is-playing span:nth-child(3) { animation-delay: .4s; }
.music.is-playing span:nth-child(4) { animation-delay: .1s; }
@keyframes eq {
  0%, 100% { transform: scaleY(.35); }
  50% { transform: scaleY(1); }
}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 1.1s var(--ease),
    transform 1.1s var(--ease);
  transition-delay: calc(var(--i, 0) * 130ms);
}
[data-reveal="zoom"] { transform: scale(.94); }
[data-reveal="fade"] { transform: none; }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* =========================================================
   DESKTOP + MOTION PREFERENCES
   ========================================================= */
@media (min-width: 520px) {
  .scene { padding: 80px 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .2s !important;
    transition-delay: 0s !important;
  }
  [data-reveal] { transform: none !important; }
  .frame__art [pathLength] { stroke-dashoffset: 0; }
}

/* =========================================================
   SEAMLESS FLOW — scenes butt edge to edge, no fades or seams
   (overrides the edge treatments defined per scene above)
   ========================================================= */
.invite {
  display: block;
  gap: 0;
}
.scene {
  margin: 0;
  border: 0;
  box-shadow: none;
}
/* Watercolor wash at the foot of each scene, and the diamond divider between scenes */
.scene::after,
.scene + .scene::before {
  content: none !important;
  display: none !important;
}
/* Photo scenes: no top/bottom fade into the paper; photos run to the scene edges */
.couple-photo,
.venue-photo,
.timeline-photo {
  -webkit-mask-image: none !important;
          mask-image: none !important;
}
/* Bottom-text photo scenes: keep the legibility gradient dark right to the edge
   (it used to ease off into the removed fade, leaving a light band at the seam) */
.couple-photo::after,
.venue-photo::after {
  background: linear-gradient(to bottom,
    transparent 34%,
    rgba(38, 26, 18, .35) 52%,
    rgba(30, 20, 14, .72) 68%,
    rgba(30, 20, 14, .8) 100%);
}

/* =========================================================
   GALLERY — strict full-bleed
   (beats the later ".scene { padding: 80px 40px }" at ≥520px)
   ========================================================= */
.scene--gallery {
  padding: 0 !important;
  margin: 0;
}
.gallery {
  width: 100%;
  padding: 0;
  margin: 0;
}
.gallery__item,
.gallery img {
  display: block;
  width: 100%;
  margin: 0;
  border: none;
  border-radius: 0;
}