/* Supplementary CSS — Tailwind CDN handles all layout/color utility
   classes exactly as the original React components used them. This file
   only adds the handful of keyframe animations that Framer Motion
   produced in the original app (fade/slide/scale-ins, bobbing, spin). */

html {
  scroll-behavior: smooth;
}

/* ---------- Defensive fix for a stray blinking text caret ---------------
   Nothing on this page besides the RSVP form fields should ever show a
   blinking text caret. If any other element unexpectedly grabs focus
   (e.g. from a browser extension, or an accidental tab-focus), this
   keeps its caret invisible everywahere except the actual form inputs,
   which get their normal caret back explicitly below. */
body {
  caret-color: transparent;
}

input,
textarea,
select {
  caret-color: auto;
}

@font-face {
  font-family: 'Poppins-fallback';
  src: local('Poppins');
}

:root {
  --font-poppins: 'Poppins', Arial, Helvetica, sans-serif;
}

/* ---------- Generic reveal-on-scroll (mirrors whileInView motion.div) --- */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.reveal[data-reveal="fade-left"] {
  transform: translateX(-50px);
}
.reveal[data-reveal="fade-left"].in-view {
  transform: translateX(0);
}

.reveal[data-reveal="fade-right"] {
  transform: translateX(50px);
}
.reveal[data-reveal="fade-right"].in-view {
  transform: translateX(0);
}

.reveal[data-reveal="scale"] {
  transform: scale(0.9);
}
.reveal[data-reveal="scale"].in-view {
  transform: scale(1);
}

/* ---------- Hero entrance (mirrors isLoaded-driven motion.div) ---------- */

.hero-reveal {
  opacity: 0;
  transform: translateY(50px);
  animation: heroIn 1s ease forwards;
}

@keyframes heroIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Hero background: gold, pink and purple ---------------------- */

.hero-bg {
  background:
    radial-gradient(ellipse at 12% 88%, rgba(245, 196, 81, 0.65), transparent 55%),
    radial-gradient(ellipse at 88% 12%, rgba(244, 114, 182, 0.55), transparent 55%),
    radial-gradient(ellipse at 50% 45%, rgba(253, 230, 138, 0.18), transparent 60%),
    linear-gradient(135deg, #3d1458 0%, #6d2277 38%, #a8457f 68%, #c99a48 100%);
}

/* Soft fade at the bottom of the hero into the first section's top colour */
.hero-bg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 35%;
  background: linear-gradient(to bottom, rgba(42, 16, 51, 0) 0%, rgba(42, 16, 51, 0.55) 55%, #2a1033 100%);
  pointer-events: none;
}

/* ---------- Section backgrounds: seamless vertical fades ---------------- */
/* Each section's bottom colour is exactly the next section's top colour, so
   there are no hard lines between sections. The background sits on a
   z-index:-2 layer so the page-wide falling diamonds (z-index:-1) can pass
   in front of it but stay behind all the content. */

/* Own stacking context so the negative z-index layers below stay inside the
   main site (otherwise the page root paints over the falling diamonds) */
#main-site {
  position: relative;
  z-index: 0;
}

.section-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--section-bg);
}

.bg-couple  { --section-bg: linear-gradient(to bottom, #2a1033 0%, #1b1220 45%, #1e0f1d 100%); }
.bg-details { --section-bg: linear-gradient(to bottom, #1e0f1d 0%, #2a0e17 50%, #24101b 100%); }
.bg-venue   { --section-bg: linear-gradient(to bottom, #24101b 0%, #171418 50%, #1c1119 100%); }
.bg-gallery { --section-bg: linear-gradient(to bottom, #1c1119 0%, #2b0c14 50%, #350d22 100%); }
.bg-rsvp    { --section-bg: linear-gradient(to bottom, #350d22 0%, #3d0c26 45%, #4d1240 100%); }
.bg-closing { --section-bg: linear-gradient(to bottom, #4d1240 0%, #6d1a3e 45%, #4b1d6b 100%); }

/* Fixed layer so diamonds keep falling as guests scroll to the very end */
.page-gems {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  /* Softer than the hero's diamonds so they don't compete with the content */
  opacity: 0.3;
}

/* ---------- Hero photo: cut-out couple in front of a morphing shape ----- */
/* Only the shape moves — the photo itself stays still. */

.hero-stage {
  position: relative;
}

.hero-blob,
.hero-blob-core {
  position: absolute;
  overflow: hidden;
  animation: frameMorph 9s ease-in-out infinite;
}

/* Starts below the top so the couple's heads pop out above the shape */
.hero-blob {
  inset: 22% 0 0 0;
  box-shadow: 0 0 40px rgba(244, 114, 182, 0.5), 0 0 80px rgba(245, 196, 81, 0.35);
}

/* Shimmering gold/pink/purple ring */
.hero-blob::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: conic-gradient(#f5c451, #f472b6, #c084fc, #fde68a, #f472b6, #a855f7, #f5c451);
  animation: spin 6s linear infinite;
}

.hero-blob-core {
  inset: 6px;
  background: radial-gradient(circle at 50% 35%, #fde9b0 0%, #f0a6c8 45%, #9d4fb0 100%);
}

.hero-cutout {
  position: absolute;
  bottom: 0;
  left: 50%;
  height: 100%;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
  /* No drop-shadow here: combined with the mask it paints a visible box around the image */
  /* The cut-out ends at the knees; fade it out so the edge isn't hard */
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}

@keyframes frameMorph {
  0%, 100% { border-radius: 42% 58% 62% 38% / 40% 42% 58% 60%; }
  33%      { border-radius: 60% 40% 45% 55% / 35% 55% 45% 65%; }
  66%      { border-radius: 38% 62% 55% 45% / 55% 38% 62% 45%; }
}

/* ---------- Falling diamonds in the hero (built by gems.js) ------------- */

.falling-gem {
  position: absolute;
  top: -10%;
  animation: gemFall linear infinite;
  perspective: 200px;
  pointer-events: none;
  user-select: none;
}

/* Spins around its vertical axis so each gem catches the light like a real 3D stone */
.falling-gem .gem-body {
  width: 100%;
  height: 100%;
  animation: gemTwirl linear infinite;
}

.falling-gem .gem-shape {
  display: block;
  width: 100%;
  height: 100%;
  animation: gemShine ease-in-out infinite alternate;
}

/* Depth: far gems are small and soft, near gems are big and glow more */
.falling-gem.gem-far  { filter: blur(1px); }
.falling-gem.gem-near { filter: drop-shadow(0 6px 10px rgba(60, 10, 70, 0.45)); }

@keyframes gemTwirl {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

.falling-gem .gem-glint {
  position: absolute;
  top: -35%;
  right: -35%;
  width: 70%;
  height: 70%;
  animation: gemGlint ease-in-out infinite;
}

@keyframes gemFall {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: var(--gem-opacity, 0.85); }
  90%  { opacity: var(--gem-opacity, 0.85); }
  100% { transform: translate(var(--drift, 0), 120vh) rotate(var(--spin, 180deg)); opacity: 0; }
}

@keyframes gemShine {
  0%   { filter: brightness(0.95) drop-shadow(0 0 2px rgba(255, 255, 255, 0.4)); }
  100% { filter: brightness(1.35) drop-shadow(0 0 7px rgba(255, 236, 179, 0.95)); }
}

@keyframes gemGlint {
  0%, 60%, 100% { transform: scale(0) rotate(0deg); opacity: 0; }
  75%           { transform: scale(1) rotate(45deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  #envelope,
  .hero-blob,
  .hero-blob-core,
  .hero-blob::before,
  .falling-gem,
  .falling-gem .gem-body,
  .falling-gem .gem-shape,
  .falling-gem .gem-glint {
    animation: none;
  }
  .falling-gem { display: none; }
}

/* ---------- Invitation screen text: gold foil + calligraphy ------------- */

.invite-eyebrow {
  display: block;
  margin-bottom: 0.6rem;
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 500;
  font-size: clamp(0.85rem, 3.2vw, 1.05rem);
  letter-spacing: 0.45em;
  /* letter-spacing adds space after the last letter too; pull it back so it centres */
  margin-right: -0.45em;
  text-transform: uppercase;
  color: #e9cf8f;
}

.invite-title {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(3.4rem, 13vw, 5.75rem);
  line-height: 1;
  padding: 0 0.1em 0.08em; /* room for the italic swash so it isn't clipped */
  background: linear-gradient(100deg, #a87a24 0%, #f3d68a 18%, #d9a944 34%, #fff3c9 50%, #c9963a 64%, #f7e3a3 80%, #a87a24 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
  animation: foilShine 7s linear infinite;
}

/* Light slowly travelling across the gold foil */
@keyframes foilShine {
  to { background-position: -200% center; }
}

/* Short screens (landscape tablets, small laptops): tighten so the heading,
   envelope and hint all fit without being cut off */
@media (max-height: 820px) and (min-width: 640px) {
  .invite-title { font-size: min(clamp(3.4rem, 13vw, 5.75rem), 8.5vh); }
  .invite-eyebrow { margin-bottom: 0.3rem; }
  .invite-divider { margin: 0.6rem auto 0.7rem; }
  .invite-line { font-size: min(clamp(1.25rem, 4.6vw, 1.65rem), 3vh); line-height: 1.4; }
  .invite-line-main { font-size: min(1.65rem, calc((100vw - 56px) / 21.5), 3vh); }
  .invite-names { margin-top: 0.1rem; }
  #letter-screen .fade-in-up { margin-bottom: 1.75rem; }
  #click-instruction { margin-top: 1.5rem; }
}

.invite-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 1rem auto 1.1rem;
  color: #e9cf8f;
}

.invite-divider span {
  width: 64px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(233, 207, 143, 0.8), transparent);
}

.invite-divider i {
  font-style: normal;
  font-size: 0.55rem;
}

.invite-line {
  max-width: 40rem;
  margin: 0 auto;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.25rem, 4.6vw, 1.65rem);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #f3e6d8;
}

/* Kept on one line: the sentence is ~21.4× its font size wide, so this sizes
   it to the screen width (minus side padding), capped at the desktop size */
.invite-line-main {
  display: block;
  white-space: nowrap;
  font-size: min(1.65rem, calc((100vw - 56px) / 21.5));
}

.invite-line strong {
  font-weight: 500;
  font-style: italic;
  color: #fff3dc;
}

.invite-names {
  display: block;
  margin-top: 0.3rem;
  font-family: 'Great Vibes', 'Brush Script MT', cursive;
  font-size: 2em;
  line-height: 1.15;
  color: #f0cf7a;
  text-shadow: 0 0 18px rgba(240, 207, 122, 0.35), 0 2px 4px rgba(0, 0, 0, 0.4);
}

.invite-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.35rem;
  border: 1px solid rgba(240, 207, 122, 0.35);
  border-radius: 999px;
  background: rgba(20, 8, 20, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: clamp(0.72rem, 2.8vw, 0.82rem);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #f3e6d8;
  box-shadow: 0 0 24px rgba(240, 207, 122, 0.08);
}

.invite-hint-dot {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f0cf7a;
}

/* Soft pulsing ring around the dot */
.invite-hint-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(240, 207, 122, 0.7);
  animation: hintPulse 2s ease-out infinite;
}

@keyframes hintPulse {
  0%   { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

.invite-hint-arrow {
  width: 26px;
  height: 26px;
  color: #f0cf7a;
  filter: drop-shadow(0 0 6px rgba(240, 207, 122, 0.45));
}

@media (prefers-reduced-motion: reduce) {
  .invite-title,
  .invite-hint-dot::after {
    animation: none;
  }
}

/* ---------- Hero heading: couple's names in gold foil ------------------- */

.hero-eyebrow {
  color: #fdf1d4;
  text-shadow: 0 1px 3px rgba(40, 10, 50, 0.8), 0 0 12px rgba(40, 10, 50, 0.6);
}

.hero-names {
  display: inline-block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.5rem, 10vw, 4.75rem);
  line-height: 1.05;
  white-space: nowrap;
  padding: 0 0.12em 0.08em;
  background: linear-gradient(100deg, #a87a24 0%, #f3d68a 18%, #d9a944 34%, #fff3c9 50%, #c9963a 64%, #f7e3a3 80%, #a87a24 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* darker shadow than the invite: the hero background is lighter */
  filter: drop-shadow(0 2px 6px rgba(45, 10, 55, 0.65)) drop-shadow(0 0 18px rgba(45, 10, 55, 0.35));
  animation: foilShine 7s linear infinite;
}

/* The ampersand in calligraphy; inherits the gold-foil fill */
.hero-amp {
  font-family: 'Great Vibes', 'Brush Script MT', cursive;
  font-style: normal;
  font-size: 1.05em;
  padding: 0 0.05em;
}

.hero-divider {
  margin: 0.75rem auto 0.6rem;
}

.hero-date {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 500;
  font-size: clamp(0.8rem, 3vw, 1rem);
  letter-spacing: 0.3em;
  margin-right: -0.3em; /* balance the trailing letter-spacing so it centres */
  text-transform: uppercase;
  color: #fbeccb;
  text-shadow: 0 1px 6px rgba(40, 10, 50, 0.6);
}

/* Short screens (small phones, short laptops): scale the photo and names to
   the screen height so the whole hero, scroll cue included, fits.
   !important because Tailwind's CDN styles load after this file. */
@media (max-height: 820px) {
  .hero-stage {
    height: 26vh !important;
    width: calc(26vh * 0.86) !important;
  }
  .hero-names {
    font-size: min(clamp(2.5rem, 10vw, 4.75rem), 7vh);
  }
}

/* Wider short screens (laptops) have room for a slightly bigger photo,
   since the buttons sit side by side instead of stacked */
@media (max-height: 820px) and (min-width: 640px) {
  .hero-stage {
    height: 31vh !important;
    width: calc(31vh * 0.86) !important;
  }
}

/* ---------- Hero scroll cue: black glass mouse with gold accents -------- */

.scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem;
  background: none;
  border: 0;
  cursor: pointer;
  color: #f0cf7a;
  transition: transform 0.3s ease;
}

.scroll-cue:hover,
.scroll-cue:focus-visible {
  transform: translateY(3px);
}

.scroll-cue:focus-visible {
  outline: 1px solid rgba(240, 207, 122, 0.6);
  outline-offset: 4px;
  border-radius: 12px;
}

.scroll-cue-label {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  margin-right: -0.4em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(20, 5, 25, 0.7);
}

.scroll-cue-mouse {
  position: relative;
  width: 26px;
  height: 42px;
  border-radius: 14px;
  border: 1.5px solid rgba(240, 207, 122, 0.85);
  background: rgba(10, 6, 12, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 14px rgba(240, 207, 122, 0.25), inset 0 0 8px rgba(240, 207, 122, 0.12);
  transition: box-shadow 0.3s ease;
}

.scroll-cue:hover .scroll-cue-mouse {
  box-shadow: 0 0 22px rgba(240, 207, 122, 0.55), inset 0 0 10px rgba(240, 207, 122, 0.2);
}

/* The wheel rolls down and fades, like a finger scrolling */
.scroll-cue-wheel {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 3px;
  height: 8px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: linear-gradient(#fff3c9, #d9a944);
  animation: scrollWheel 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes scrollWheel {
  0%   { transform: translateY(0); opacity: 0; }
  20%  { opacity: 1; }
  70%  { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(14px); opacity: 0; }
}

.scroll-cue-chevrons {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -0.15rem;
}

/* Two gold chevrons that light up one after the other */
.scroll-cue-chevrons i {
  display: block;
  width: 9px;
  height: 9px;
  margin-top: -3px;
  border-right: 1.5px solid #f0cf7a;
  border-bottom: 1.5px solid #f0cf7a;
  transform: rotate(45deg);
  opacity: 0.2;
  animation: chevronGlow 1.8s ease-in-out infinite;
}

.scroll-cue-chevrons i:nth-child(2) {
  animation-delay: 0.25s;
}

@keyframes chevronGlow {
  0%, 100% { opacity: 0.2; }
  40%      { opacity: 1; filter: drop-shadow(0 0 4px rgba(240, 207, 122, 0.9)); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-names,
  .scroll-cue-wheel,
  .scroll-cue-chevrons i {
    animation: none;
  }
  .scroll-cue-wheel { opacity: 1; }
  .scroll-cue-chevrons i { opacity: 0.8; }
}

/* ---------- Main-site headings & story text (same look as the invite) --- */

/* Gold-foil italic heading, matching "Our Wedding" on the invitation */
.foil-title {
  display: inline-block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.6rem, 9vw, 4.25rem);
  line-height: 1.05;
  padding: 0 0.1em 0.08em;
  background: linear-gradient(100deg, #a87a24 0%, #f3d68a 18%, #d9a944 34%, #fff3c9 50%, #c9963a 64%, #f7e3a3 80%, #a87a24 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
  animation: foilShine 7s linear infinite;
}

/* Subtitle under a gold-foil section heading */
.section-subtitle {
  max-width: 40rem;
  margin: 0 auto;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.2rem, 4.4vw, 1.55rem);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: #f3e6d8;
}

.story-text {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.2rem, 4.4vw, 1.45rem);
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: #f3e6d8;
  /* left-aligned in a centred column, like a printed storybook page */
  text-align: left;
}

/* Storybook-style gold drop cap on the very first letter */
.story-first::first-letter {
  float: left;
  margin: 0.08em 0.12em 0 0;
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  font-size: 3.4em;
  line-height: 0.8;
  color: #f0cf7a;
  text-shadow: 0 0 14px rgba(240, 207, 122, 0.35);
}

.story-script {
  font-family: 'Great Vibes', 'Brush Script MT', cursive;
  font-size: 1.45em;
  line-height: 1;
  color: #f0cf7a;
  padding: 0 0.05em;
}

.story-signoff {
  margin-top: 1.25rem;
  font-family: 'Great Vibes', 'Brush Script MT', cursive;
  font-size: clamp(2rem, 7vw, 2.6rem);
  line-height: 1.2;
  color: #f0cf7a;
  text-shadow: 0 0 18px rgba(240, 207, 122, 0.3), 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* ---------- Photo slider ("Little Moments, Big Love") ------------------- */

.gallery-slider {
  position: relative;
  padding: 0 2.75rem; /* room for the arrows */
}

.gallery-track {
  --per-view: 5;
  --gap: 1.25rem;
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 0.75rem 0.25rem; /* room for the hover glow */
}

.gallery-track::-webkit-scrollbar {
  display: none;
}

@media (max-width: 1023px) {
  .gallery-track { --per-view: 3; --gap: 1rem; }
}

@media (max-width: 639px) {
  .gallery-slider { padding: 0 2.25rem; }
  .gallery-track { --per-view: 2; --gap: 0.75rem; }
}

.gallery-card {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
  aspect-ratio: 1 / 1;
  scroll-snap-align: start;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(240, 207, 122, 0.25);
  box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.7);
  transition: box-shadow 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
}

.gallery-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  transition: transform 0.6s ease;
}

/* Hover: no caption, just a slow zoom and a gold glow */
.gallery-card:hover {
  border-color: rgba(240, 207, 122, 0.8);
  box-shadow: 0 0 0 1px rgba(240, 207, 122, 0.35), 0 0 24px rgba(240, 207, 122, 0.35), 0 14px 30px -10px rgba(0, 0, 0, 0.8);
  transform: translateY(-3px);
}

.gallery-card:hover img {
  transform: scale(1.06);
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-top: -1.25rem;
  border-radius: 50%;
  border: 1px solid rgba(240, 207, 122, 0.6);
  background: rgba(15, 6, 14, 0.7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #f0cf7a;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(240, 207, 122, 0.2);
  transition: box-shadow 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

.gallery-arrow:hover,
.gallery-arrow:focus-visible {
  background: rgba(40, 18, 30, 0.85);
  box-shadow: 0 0 22px rgba(240, 207, 122, 0.5);
  transform: scale(1.06);
}

.gallery-arrow svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gallery-arrow--prev { left: 0; }
.gallery-arrow--next { right: 0; }

@media (max-width: 639px) {
  .gallery-arrow { width: 2rem; height: 2rem; margin-top: -1rem; }
}

/* ---------- RSVP: plus-ones stepper ------------------------------------- */

.guest-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem;
  border: 1px solid #262626;
  border-radius: 0.75rem;
}

.stepper-btn {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgba(240, 207, 122, 0.6);
  background: rgba(15, 6, 14, 0.7);
  color: #f0cf7a;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(240, 207, 122, 0.15);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}

.stepper-btn:hover:not(:disabled) {
  background: rgba(40, 18, 30, 0.9);
  box-shadow: 0 0 18px rgba(240, 207, 122, 0.4);
}

.stepper-btn:active:not(:disabled) {
  transform: scale(0.92);
}

.stepper-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.stepper-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}

.stepper-count {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem;
  font-weight: 500;
  color: #f3d68a;
}

.stepper-label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d1c4c9;
}

.stepper-total {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: #a8a2a6;
  text-align: center;
}

/* ---------- RSVP: thank-you state --------------------------------------- */

#rsvp-form,
#rsvp-card-title,
.rsvp-thanks {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.rsvp-fading {
  opacity: 0;
  transform: translateY(8px);
}

#rsvp-card.rsvp-resizing {
  overflow: hidden;
  transition: height 0.6s cubic-bezier(0.45, 0, 0.25, 1);
}

.rsvp-thanks {
  padding: 1.5rem 0 0.5rem;
  text-align: center;
}

.rsvp-thanks-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  border: 1.5px solid rgba(240, 207, 122, 0.8);
  background: radial-gradient(circle at 35% 30%, rgba(243, 214, 138, 0.25), rgba(15, 6, 14, 0.8) 70%);
  box-shadow: 0 0 28px rgba(240, 207, 122, 0.35);
}

.rsvp-thanks-icon svg {
  width: 2rem;
  height: 2rem;
  fill: none;
  stroke: #f3d68a;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rsvp-thanks-title {
  font-size: clamp(2rem, 7vw, 2.75rem);
}

.rsvp-again {
  margin-top: 1.75rem;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  border: 1px solid rgba(240, 207, 122, 0.45);
  background: transparent;
  color: #f0cf7a;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.rsvp-again:hover {
  background: rgba(240, 207, 122, 0.08);
  box-shadow: 0 0 16px rgba(240, 207, 122, 0.25);
}

/* Bride & groom portraits: photo inside a shimmering gold ring */
.portrait-ring {
  position: relative;
  padding: 6px;
  background: conic-gradient(from 210deg, #a87a24, #f7e3a3, #c9963a, #fff3c9, #a87a24, #f3d68a, #a87a24);
  box-shadow:
    0 0 0 1px rgba(255, 243, 201, 0.25),
    0 0 30px rgba(240, 207, 122, 0.3),
    0 18px 40px -12px rgba(0, 0, 0, 0.7);
}

/* thin dark gap between the gold ring and the photo, like a mount */
.portrait-ring img {
  display: block;
  border: 3px solid #1a0b17;
}

.portrait-badge {
  background: radial-gradient(circle at 35% 30%, #fff3c9, #e2b555 55%, #a87a24);
  border: 2px solid #1a0b17;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5), 0 0 12px rgba(240, 207, 122, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .foil-title { animation: none; }
}

/* ---------- Invitation envelope: red paper + gold wax seal --------------- */

.envelope-paper {
  border-radius: 4px;
  /* gives the flap's swing open real perspective */
  perspective: 900px;
  background:
    /* soft bulge where the card sits inside, lit from the top left */
    radial-gradient(ellipse 70% 60% at 42% 45%, rgba(255, 170, 150, 0.14), transparent 70%),
    linear-gradient(160deg, #94151d 0%, #7f1118 45%, #620c12 100%);
  box-shadow:
    /* paper thickness: a few hard layers along the bottom and right edges */
    1px 1px 0 #560a10,
    2px 2px 0 #4b080e,
    3px 3px 0 #40070c,
    /* contact shadow and the soft shadow cast on the "table" */
    4px 6px 6px rgba(0, 0, 0, 0.45),
    10px 28px 40px -8px rgba(0, 0, 0, 0.7),
    /* edges catch the light / curl slightly away */
    inset 0 1px 0 rgba(255, 215, 205, 0.25),
    inset 1px 0 0 rgba(255, 215, 205, 0.12),
    inset 0 -3px 6px rgba(40, 0, 6, 0.35),
    inset -3px 0 6px rgba(40, 0, 6, 0.25);
}

/* Slow, gentle float so it feels like a real object in space. Runs on the
   whole #envelope (envelope + card together) using the individual rotate /
   translate properties, so it combines with the mouse tilt in `transform`. */
@keyframes envelopeFloat {
  0%, 100% { rotate: 1 -0.5 0 8deg; translate: 0 0; }
  50%      { rotate: 1 0.75 0 5deg; translate: 0 -6px; }
}

/* ---------- Opening sequence: card slides out of the envelope ----------- */
/* The slot sits just above the envelope's top edge. While its overflow is
   hidden, any part of the card below that edge is "inside" the envelope.
   It comes after the envelope in the page, so the card always sits in front
   of the open flap (plain stacking, no fragile 3D depth sorting). */
#letter-slot {
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: 100%;
  height: 460px;
  overflow: hidden;
  pointer-events: none;
}

#envelope.is-out #letter-slot {
  overflow: visible;
}

#letter-inside {
  position: absolute;
  left: 50%;
  bottom: 0;
  pointer-events: auto;
  /* resting inside the envelope (fully below the edge) */
  transform: translateX(-50%) translateY(105%);
  transition: transform 1.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 1) pulled up out of the envelope */
#envelope.is-rising #letter-inside {
  transform: translateX(-50%) translateY(-10%);
}

/* 2) brought forward and laid down in front of the envelope */
#envelope.is-out #letter-inside {
  transform: translateX(-50%) translateY(calc(100% + 1.5rem)) scale(1.04);
  transition-duration: 1.2s;
  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}

#envelope-flap {
  transition-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
}

#click-instruction {
  transition: opacity 0.5s ease;
}

/* On opening, envelope + card glide down (and shrink a touch on short
   screens) so the open flap and card sit below the couple's names.
   Uses the individual translate/scale properties so it doesn't clash with
   the scale-in entrance animation, which uses transform. */
.envelope-stage {
  transition:
    translate 1.6s cubic-bezier(0.45, 0, 0.25, 1),
    scale 1.6s cubic-bezier(0.45, 0, 0.25, 1);
}

#letter-loading {
  transition: opacity 1.2s ease;
}

/* Mouse tilt is applied to the wrapper (see script.js) */
#envelope {
  animation: envelopeFloat 6s ease-in-out infinite;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 0.25s ease-out;
}

.envelope-folds {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

/* Real paper surface: a fine linen weave embossed by light from the top left
   (feDiffuseLighting), plus low-frequency mottling like dyed cotton card. */
.envelope-grain,
.flap-face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='f' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.025 0.95' numOctaves='2' seed='3' stitchTiles='stitch' result='a'/><feTurbulence type='fractalNoise' baseFrequency='0.95 0.025' numOctaves='2' seed='8' stitchTiles='stitch' result='b'/><feComposite in='a' in2='b' operator='arithmetic' k2='0.5' k3='0.5' result='w'/><feTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' seed='11' stitchTiles='stitch' result='g'/><feComposite in='w' in2='g' operator='arithmetic' k2='0.8' k3='0.35' result='h'/><feColorMatrix in='h' type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.33 0.33 0.33 0 0' result='hm'/><feDiffuseLighting in='hm' surfaceScale='2.4' diffuseConstant='0.66' lighting-color='white'><feDistantLight azimuth='225' elevation='50'/></feDiffuseLighting></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='300'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>");
  background-size: 240px 240px, 400px 300px;
  mix-blend-mode: soft-light;
  opacity: 0.85;
}

/* Top flap: triangle with a softly rounded tip */
#envelope-flap {
  height: 56%;
  z-index: 2;
}

.flap-shape {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 54% 94%, 52.5% 97.5%, 50% 99%, 47.5% 97.5%, 46% 94%);
}

.flap-face {
  background:
    radial-gradient(ellipse at 35% 0%, rgba(255, 175, 155, 0.18), transparent 70%),
    linear-gradient(to bottom, #9e1820 0%, #8a141b 70%, #7a1118 100%);
}

/* Thin gold foil line along the flap's edges */
.flap-foil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* Soft shadow the flap casts on the envelope below it */
.flap-shadow {
  position: absolute;
  inset: 0;
  transform: translateY(4px);
  filter: blur(3px);
  opacity: 0.55;
}

.flap-shadow .flap-shape {
  background: #2a0006;
}

.wax-seal {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 56%;
  width: 86px;
  height: 86px;
  /* Margins (not translate) centre it, because script.js sets transform on open */
  margin-left: -43px;
  margin-top: -43px;
  filter: drop-shadow(0 3px 3px rgba(40, 0, 6, 0.55)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}

.wax-seal svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

@media (min-width: 640px) {
  .wax-seal {
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
  }
}

/* ---------- Invitation letter entrance animations ----------------------- */

.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease forwards;
}

@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}

.scale-in {
  opacity: 0;
  transform: scale(0.8);
  animation: scaleIn 1s ease forwards;
}

@keyframes scaleIn {
  to { opacity: 1; transform: scale(1); }
}

/* ---------- Bobbing hint (click instruction / scroll cue) --------------- */

.bob {
  animation: bob 2s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); opacity: 0.8; }
  50% { transform: translateY(-8px); opacity: 1; }
}

/* ---------- Loading spinner ---------------------------------------------- */

.spin {
  animation: spin 1.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------- Invitation screen background (ported from the
   "date with you" reference template, in place of the plain red bg) ----- */

.bg-gradient-animated {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse at 20% 50%, #3a1030 0%, #200a2e 60%, #0f0518 100%);
  animation: bgPulse 8s ease-in-out infinite alternate;
}

@keyframes bgPulse {
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}

/* Black & gold phase: sits above the plum background and orbs, fades in,
   holds, then fades back out so the screen drifts plum → gold/black → plum */
.bg-gold-phase {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 50% 62%, rgba(212, 164, 72, 0.42) 0%, rgba(140, 98, 28, 0.18) 45%, transparent 75%),
    radial-gradient(ellipse 40% 35% at 85% 10%, rgba(240, 207, 122, 0.12), transparent 70%),
    radial-gradient(ellipse at 50% 50%, #1c1405 0%, #0d0903 55%, #030202 100%);
  opacity: 0;
  animation: goldPhase 16s ease-in-out infinite;
}

@keyframes goldPhase {
  0%, 13.75%      { opacity: 0; }
  26.25%, 51.25%  { opacity: 1; }
  63.75%, 100%    { opacity: 0; }
}

.bg-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.3;
  animation: orbFloat 12s ease-in-out infinite alternate;
  z-index: 0;
}

.bg-orb--pink {
  width: 500px;
  height: 500px;
  background: #d94f6b;
  top: -100px;
  right: -100px;
}

.bg-orb--purple {
  width: 400px;
  height: 400px;
  background: #8b5cf6;
  bottom: -80px;
  left: -80px;
  animation-delay: 4s;
}

.bg-orb--gold {
  width: 300px;
  height: 300px;
  background: #d4a437;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: 8s;
  opacity: 0.1;
}

@keyframes orbFloat {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(40px, 30px) scale(1.2); }
}

/* ---------- Floating hearts on the invitation screen --------------------- */


.floating-heart {
  position: absolute;
  bottom: -10%;
  animation: floatUp linear infinite;
  opacity: 0.15;
  user-select: none;
  pointer-events: none;
}

@keyframes floatUp {
  0% { transform: translateY(0) scale(0.6) rotate(0deg); opacity: 0; }
  10% { opacity: 0.15; }
  90% { opacity: 0.15; }
  100% { transform: translateY(-110vh) scale(1.2) rotate(720deg); opacity: 0; }
}

/* ---------- Music button pulse (autoplay armed / playing) --------------- */

#music-toggle.playing {
  animation: musicPulse 1.6s ease-in-out infinite;
}

@keyframes musicPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.35); }
  50% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
}

/* ---------- Nav button active gradient sits under label ------------------ */

.nav-btn-active {
  color: #fff;
}

.nav-btn-active .nav-btn-bg {
  opacity: 1;
  transform: scale(1);
}

.nav-btn-bg {
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
/* Main site dark theme: form fields + background glow */
#main-site input, #main-site select, #main-site textarea { background:#171717; color:#fff; }
#main-site input::placeholder, #main-site textarea::placeholder { color:#737373; }
#main-site { background: radial-gradient(ellipse at 20% 0%, #3a1030 0%, #200a2e 45%, #0f0518 100%); }