/* ===== Fonts ===== */
@font-face {
  font-family: 'Almeliya';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Almeliya.otf") format('opentype');
}

@font-face {
  font-family: 'Sublima';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("fonts/Sublima-ExtraLight.otf") format('opentype');
}

@font-face {
  font-family: 'Sublima';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/Sublima-ExtraBold.otf") format('opentype');
}

/* ===== Design tokens ===== */
:root {
  --navy-1: #0a1526;
  --navy-2: #142544;
  --navy-3: #14284c;
  --navy-4: #101f3d;
  --navy-bg: #0b1729;

  --gold: #d4af6a;
  --gold-soft: #dcb872;
  --gold-light: #e7cd94;
  --gold-lighter: #f2e3bd;

  --blue-soft: #a9b7d6;
  --blue-light: #b9c3dc;
  --blue-lighter: #cfd8ec;

  --line-strong: rgba(212, 175, 106, 0.75);
  --line-soft: rgba(212, 175, 106, 0.35);
  --line-mid: rgba(212, 175, 106, 0.55);
  --line-mid2: rgba(212, 175, 106, 0.5);
  --line-60: rgba(212, 175, 106, 0.6);

  /* liquid glass */
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-border-gold: rgba(231, 205, 148, 0.38);
  --glass-fill: linear-gradient(160deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 45%, rgba(255, 255, 255, 0.08) 100%);
  --glass-fill-gold: linear-gradient(160deg, rgba(212, 175, 106, 0.22) 0%, rgba(212, 175, 106, 0.06) 55%, rgba(255, 255, 255, 0.09) 100%);
  --glass-blur: blur(18px) saturate(170%);
  --glass-edge:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    inset 1px 0 0 rgba(255, 255, 255, 0.08),
    inset -1px 0 0 rgba(255, 255, 255, 0.05);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===== Base / scroll ===== */
html,
body {
  margin: 0;
  padding: 0;
  background: var(--navy-bg);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* body gets position:fixed because overflow:hidden alone
   does not stop touch scrolling on iOS Safari */
html.no-scroll,
body.no-scroll {
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
}

body.no-scroll {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Cormorant Garamond', serif;
}

a {
  color: inherit;
}

/* ===== Keyframes ===== */
@keyframes pulseHint {

  0%,
  100% {
    opacity: 0.55;
    transform: translateX(-50%) translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateX(-50%) translateY(4px);
  }
}

/* slow 3D sway for the cover initials */
@keyframes letterSway {

  0%,
  100% {
    transform: rotateY(-8deg) rotateX(2deg);
  }

  50% {
    transform: rotateY(8deg) rotateX(-2deg);
  }
}

/* gentle idle sway for the closed bow */
@keyframes bowIdle {

  0%,
  100% {
    transform: translate(-50%, -50%) rotate(-1.5deg) translateY(0);
  }

  50% {
    transform: translate(-50%, -50%) rotate(1.5deg) translateY(-8px);
  }
}

/* breathing golden halo behind the bow */
@keyframes haloPulse {

  0%,
  100% {
    opacity: 0.35;
    transform: translate(-50%, -50%) scale(0.92);
  }

  50% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

/* twinkling gold sparkles on the closed cover */
@keyframes twinkle {

  0%,
  100% {
    opacity: 0;
    transform: scale(0.4);
  }

  50% {
    opacity: 0.9;
    transform: scale(1);
  }
}

/* satin light sheen drifting across the closed panels */
@keyframes sheenDrift {
  0% {
    transform: translateX(-120%) skewX(-18deg);
  }

  100% {
    transform: translateX(320%) skewX(-18deg);
  }
}

/* liquid gold shimmer running through the teaser names */
@keyframes textShimmer {
  0% {
    background-position: 200% center;
  }

  100% {
    background-position: -200% center;
  }
}

/* bow pops up slightly, then swings away and falls */
@keyframes bowFly {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translateY(0) scale(1);
    opacity: 1;
  }

  22% {
    transform: translate(-50%, -50%) rotate(-6deg) translateY(-16px) scale(1.07);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) rotate(-34deg) translateY(70vh) scale(0.55);
    opacity: 0;
  }
}

/* soft golden light burst while the panels open */
@keyframes glowBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.45);
  }

  35% {
    opacity: 0.6;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.6);
  }
}

@keyframes petalFall {
  0% {
    transform: translateY(-10vh) translateX(0) rotate(0deg);
    opacity: 0;
  }

  8% {
    opacity: 0.9;
  }

  92% {
    opacity: 0.6;
  }

  100% {
    transform: translateY(115vh) translateX(var(--sway)) rotate(var(--rot));
    opacity: 0;
  }
}

/* ===== Page wrapper ===== */
.invite {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, var(--navy-1) 0%, var(--navy-2) 22%, var(--navy-3) 50%, var(--navy-4) 75%, var(--navy-1) 100%);
  font-family: 'Cormorant Garamond', serif;
  overflow-x: hidden;
  overflow-x: clip;
}

/* ===== Decorative gold frame ===== */
.frame-wrap {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.35s ease;
}

.is-open .frame-wrap {
  opacity: 0;
}

.is-open.is-settled .frame-wrap {
  position: absolute;
  opacity: 1;
}

.frame-line {
  position: absolute;
  pointer-events: none;
  z-index: 3;
}

.frame-outer-v-left {
  left: 26px;
  top: 26px;
  bottom: 26px;
  width: 1.5px;
  background: var(--line-strong);
}

.frame-outer-v-right {
  left: calc(100% - 26px);
  top: 26px;
  bottom: 26px;
  width: 1.5px;
  background: var(--line-strong);
}

.frame-outer-h-top-left {
  top: 26px;
  left: 26px;
  right: calc(50% + 130px);
  height: 1.5px;
  background: var(--line-strong);
}

.frame-outer-h-top-right {
  top: 26px;
  left: calc(50% + 130px);
  right: 26px;
  height: 1.5px;
  background: var(--line-strong);
}

.frame-outer-h-bottom-left {
  bottom: 26px;
  left: 26px;
  right: calc(50% + 130px);
  height: 1.5px;
  background: var(--line-strong);
}

.frame-outer-h-bottom-right {
  bottom: 26px;
  left: calc(50% + 130px);
  right: 26px;
  height: 1.5px;
  background: var(--line-strong);
}

.frame-inner-v-left {
  left: 34px;
  top: 52px;
  bottom: 52px;
  width: 1px;
  background: var(--line-soft);
}

.frame-inner-v-right {
  left: calc(100% - 34px);
  top: 52px;
  bottom: 52px;
  width: 1px;
  background: var(--line-soft);
}

.frame-inner-h-top-left {
  top: 34px;
  left: 52px;
  right: calc(50% + 130px);
  height: 1px;
  background: var(--line-soft);
}

.frame-inner-h-top-right {
  top: 34px;
  left: calc(50% + 130px);
  right: 52px;
  height: 1px;
  background: var(--line-soft);
}

.frame-inner-h-bottom-left {
  bottom: 34px;
  left: 52px;
  right: calc(50% + 130px);
  height: 1px;
  background: var(--line-soft);
}

.frame-inner-h-bottom-right {
  bottom: 34px;
  left: calc(50% + 130px);
  right: 52px;
  height: 1px;
  background: var(--line-soft);
}

.frame-chamfer-tl {
  left: 34px;
  top: 52px;
  width: 25.5px;
  height: 1px;
  background: var(--line-soft);
  transform-origin: 0% 50%;
  transform: rotate(-45deg);
}

.frame-chamfer-tr {
  left: calc(100% - 34px);
  top: 52px;
  width: 25.5px;
  height: 1px;
  background: var(--line-soft);
  transform-origin: 0% 50%;
  transform: rotate(-135deg);
}

.frame-chamfer-bl {
  left: 34px;
  top: calc(100% - 52px);
  width: 25.5px;
  height: 1px;
  background: var(--line-soft);
  transform-origin: 0% 50%;
  transform: rotate(45deg);
}

.frame-chamfer-br {
  left: calc(100% - 34px);
  top: calc(100% - 52px);
  width: 25.5px;
  height: 1px;
  background: var(--line-soft);
  transform-origin: 0% 50%;
  transform: rotate(135deg);
}

.frame-ornament-top {
  position: absolute;
  top: -70px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  opacity: 0.9;
  pointer-events: none;
  z-index: 5;
}

.frame-ornament-bottom {
  position: absolute;
  bottom: -70px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  width: 220px;
  opacity: 0.9;
  pointer-events: none;
  z-index: 5;
}

.frame-corner {
  position: absolute;
  width: 240px;
  opacity: 0.95;
  pointer-events: none;
  z-index: 4;
}

.frame-corner-tl {
  top: 14px;
  left: 14px;
}

.frame-corner-tr {
  top: 14px;
  right: 14px;
  transform: scaleX(0);
  transform: rotate(0deg);
}

.frame-corner-bl {
  bottom: -10px;
  left: -10px;
  transform: scaleY(1);
  transform: rotate(0deg);
}

.frame-corner-br {
  bottom: 0px;
  right: 10px;
  transform: scale(-1, -1) rotate(180deg);
}

/* ===== Petal / falling images rain ===== */
.petal-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  overflow: hidden;
  transform: translateZ(0);
  will-change: transform;
}

.petal {
  position: absolute;
  top: -5%;
  opacity: 0.85;
  pointer-events: none;
  animation-name: petalFall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  z-index: 2;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.petal-leaf {
  background: linear-gradient(135deg, #f1dba8, #c9a24b);
  border-radius: 0% 60% 0% 60%;
}

.petal-img {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ===== Cover section ===== */
.cover-section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  /* clip, not hidden: hidden boxes can still be scrolled
     programmatically (scrollIntoView), shifting the whole cover */
  overflow: hidden;
  overflow: clip;
  perspective: 2000px;
  cursor: pointer;
}

.is-open .cover-section {
  cursor: default;
}

.cover-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  transition: transform 1.6s var(--ease) 0.3s, opacity 0.9s ease 0.35s;
  z-index: 2;
}

.is-open .cover-content {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* staggered reveal: initials -> divider -> date -> location */
.initials-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  perspective: 900px;
  opacity: 0;
  transform: translateY(24px) scale(1.05);
  filter: blur(8px);
  transition: opacity 0.9s ease 0.55s, transform 1.3s var(--ease) 0.55s, filter 1.1s ease 0.55s;
}

.is-open .initials-row {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* 3D initials: the element itself is the dark extruded back
   (stepped text-shadows, em-based so they scale with the font),
   the ::after pseudo lays the metallic gold face on top */
.initial-letter {
  font-family: 'Almeliya', cursive;
  font-size: clamp(110px, 22vmin, 230px);
  line-height: 0.85;
  position: relative;
  color: #55401d;
  text-shadow:
    0 0.008em 0 #4e3a1a,
    0 0.016em 0 #473517,
    0 0.024em 0 #403014,
    0 0.032em 0 #392a11,
    0 0.04em 0 #32250f,
    0 0.052em 0.02em rgba(0, 0, 0, 0.4),
    0 0.09em 0.18em rgba(0, 0, 0, 0.45),
    0 0.16em 0.3em rgba(0, 0, 0, 0.35);
  animation: letterSway 8s ease-in-out infinite;
  /* own compositor layer: rasterize the shadow-heavy glyph once and
     rotate it on the GPU instead of repainting every frame */
  will-change: transform;
  backface-visibility: hidden;
}

.initial-letter::after {
  content: attr(data-letter);
  /* alt-text syntax: keeps the duplicate glyph out of screen readers */
  content: attr(data-letter) / "";
  position: absolute;
  /* Almeliya swashes overflow the glyph box; grow the pseudo (negative
     inset) and pad it back so the gradient covers the whole letter while
     the text stays aligned with the base glyph underneath */
  inset: -0.5em;
  padding: 0.5em;
  background: linear-gradient(178deg, #f8ecc8 5%, #ecd7a2 28%, #d4af6a 52%, #b3894a 78%, #96703a 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
}

.initial-letter.r {
  animation-delay: -4s;
}

.initial-letter.v {
  align-self: flex-end;
  margin-right: 6vw;
}

.initial-letter.r {
  align-self: flex-start;
  margin-left: 6vw;
}

.initial-amp {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(30px, 5vmin, 48px);
  align-self: center;
  position: relative;
  color: #55401d;
  text-shadow:
    0 0.02em 0 #473517,
    0 0.04em 0 #392a11,
    0 0.09em 0.14em rgba(0, 0, 0, 0.4);
}

.initial-amp::after {
  content: attr(data-letter);
  content: attr(data-letter) / "";
  position: absolute;
  inset: -0.5em;
  padding: 0.5em;
  background: linear-gradient(178deg, #f8ecc8 10%, #d4af6a 55%, #a8813f 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
}

.cover-divider {
  width: 80px;
  height: 1px;
  background: var(--line-60);
  margin: 24px 0 22px;
  transform: scaleX(0);
  transition: transform 1s var(--ease) 1.05s;
}

.is-open .cover-divider {
  transform: scaleX(1);
}

.date-row {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  color: var(--gold-soft);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s ease 1.15s, transform 1.1s var(--ease) 1.15s;
}

.is-open .date-row {
  opacity: 1;
  transform: none;
}

.date-month,
.date-year {
  font-family: 'Sublima', serif;
  font-weight: 800;
  letter-spacing: 4px;
  font-size: clamp(20px, 4vmin, 30px);
  padding-bottom: 10px;
}

.date-center {
  text-align: center;
}

.date-weekday {
  font-family: 'Almeliya', cursive;
  font-size: clamp(28px, 6vmin, 44px);
  line-height: 1;
  color: var(--gold-light);
  margin: 0;
}

.date-day {
  font-family: 'Sublima', serif;
  font-weight: 800;
  font-size: clamp(60px, 13vmin, 100px);
  line-height: 1;
  border-left: 1px solid var(--line-60);
  border-right: 1px solid var(--line-60);
  padding: 2px 22px;
  margin-top: -6px;
}

.cover-location {
  margin-top: 12px;
  color: var(--blue-light);
  font-size: 18px;
  letter-spacing: 2px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s ease 1.35s, transform 1s var(--ease) 1.35s;
}

.is-open .cover-location {
  opacity: 1;
  transform: none;
}

.book-panel {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(180deg, var(--navy-2) 0%, var(--navy-bg) 70%);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
  z-index: 3;
  transition: transform 1.5s var(--ease) 0.25s, opacity 0.7s ease 1.15s;
}

/* golden light catching the pages as they turn */
.book-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease 0.3s;
  pointer-events: none;
}

.book-panel-left::after {
  background: linear-gradient(90deg, transparent 40%, rgba(242, 227, 189, 0.18) 100%);
}

.book-panel-right::after {
  background: linear-gradient(270deg, transparent 40%, rgba(242, 227, 189, 0.18) 100%);
}

.is-open .book-panel::after {
  opacity: 1;
}

/* satin sheen drifting across the closed cover */
.cover-sheen {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.cover-sheen::before {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 75%;
  background: linear-gradient(100deg,
      transparent 0%,
      transparent 22%,
      rgba(231, 205, 148, 0.015) 36%,
      rgba(255, 246, 221, 0.035) 47%,
      rgba(255, 255, 255, 0.045) 50%,
      rgba(255, 246, 221, 0.035) 53%,
      rgba(231, 205, 148, 0.015) 64%,
      transparent 78%,
      transparent 100%);
  filter: blur(26px);
  animation: sheenDrift 9s ease-in-out infinite;
}

/* second, wider and slower wash for depth */
.cover-sheen::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 95%;
  background: linear-gradient(100deg,
      transparent 0%,
      transparent 28%,
      rgba(231, 205, 148, 0.02) 50%,
      transparent 72%,
      transparent 100%);
  filter: blur(32px);
  animation: sheenDrift 14s ease-in-out infinite;
  animation-delay: -7s;
}

.is-open .cover-sheen {
  opacity: 0;
}

/* twinkling sparkles over the closed cover (populated by script.js) */
.sparkle-field {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

.is-open .sparkle-field {
  opacity: 0;
}

.sparkle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #fff3cf 0%, var(--gold-light) 45%, transparent 70%);
  box-shadow: 0 0 6px rgba(231, 205, 148, 0.8);
  opacity: 0;
  animation: twinkle ease-in-out infinite;
}

/* breathing golden halo behind the bow */
.bow-halo {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(70vw, 520px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(231, 205, 148, 0.28) 0%, rgba(231, 205, 148, 0.1) 40%, transparent 70%);
  z-index: 5;
  pointer-events: none;
  animation: haloPulse 4.5s ease-in-out infinite;
  transition: opacity 0.6s ease;
}

.is-open .bow-halo {
  animation: none;
  opacity: 0;
}

/* names + date teaser on the closed cover */
.cover-teaser {
  position: absolute;
  top: 5%;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 5;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.is-open .cover-teaser {
  opacity: 0;
  transform: translateY(-16px);
}

.teaser-script {
  font-family: 'Almeliya', cursive;
  font-size: clamp(38px, 7.5vmin, 62px);
  line-height: 1.1;
  background: linear-gradient(100deg, var(--gold) 20%, var(--gold-lighter) 40%, #fff6dd 50%, var(--gold-lighter) 60%, var(--gold) 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: textShimmer 6s linear infinite;
}

.teaser-sub {
  margin-top: 12px;
  color: var(--blue-light);
  letter-spacing: 5px;
  font-size: 15px;
  text-transform: uppercase;
}

/* soft golden burst behind the opening panels */
.cover-glow {
  position: absolute;
  left: 50%;
  top: 45%;
  width: min(90vw, 700px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.45);
  background: radial-gradient(circle, rgba(231, 205, 148, 0.32) 0%, rgba(231, 205, 148, 0.1) 38%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}

.is-open .cover-glow {
  animation: glowBurst 1.8s ease-out 0.3s forwards;
}

.book-panel-left {
  left: 0;
  transform-origin: left center;
  transform: rotateY(0deg);
  opacity: 1;
}

.book-panel-right {
  right: 0;
  transform-origin: right center;
  transform: rotateY(0deg);
  opacity: 1;
}

.is-open .book-panel-left {
  transform: rotateY(-108deg);
  opacity: 0;
}

.is-open .book-panel-right {
  transform: rotateY(108deg);
  opacity: 0;
}

.bow-wrap {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(400px, 55vh, 90vw);
  height: auto;
  transform: translate(-50%, -50%) rotate(0deg) translateY(0px) scale(1);
  opacity: 1;
  cursor: pointer;
  z-index: 6;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.4));
  transition: filter 0.4s ease;
  transform-origin: top center;
  animation: bowIdle 5s ease-in-out infinite;
}

/* brightness instead of scale: transform is owned by the idle animation */
.bow-wrap:hover {
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.4)) brightness(1.12);
}

.is-open .bow-wrap,
.is-open .bow-wrap:hover {
  animation: bowFly 1.3s cubic-bezier(0.45, 0, 0.7, 0.5) forwards;
  cursor: default;
}

.open-hint {
  position: absolute;
  left: 50%;
  top: 66%;
  transform: translateX(-50%);
  color: var(--gold-light);
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  letter-spacing: 2px;
  text-align: center;
  width: 100%;
  opacity: 1;
  animation: pulseHint 2s ease-in-out infinite;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: 4;
}

.is-open .open-hint {
  opacity: 0;
  animation: none;
}

/* ===== Countdown section ===== */
.countdown-section {
  position: relative;
  width: 100%;
  padding: 16px 24px 50px;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
  opacity: 0;
  transform: translateY(28px);
  /* while hidden it must not swallow taps meant for the cover */
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.is-open .countdown-section {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.9s ease 1.15s, transform 1s var(--ease) 1.15s;
}

.countdown-row {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  position: relative;
}

.countdown-box {
  position: relative;
  min-width: 104px;
  padding: 22px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 26px;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), 0 14px 34px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

/* specular top gloss */
.countdown-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 70% at 50% -20%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
}

.countdown-value {
  font-family: 'Sublima', serif;
  font-weight: 800;
  color: var(--gold-light);
  font-size: 52px;
  line-height: 1;
}

.countdown-label {
  color: var(--blue-light);
  font-size: 15px;
  letter-spacing: 2px;
  margin-top: 8px;
  text-transform: uppercase;
}

.past-message {
  color: var(--gold-light);
  font-family: 'Mrs Saint Delafield', cursive;
  font-size: 40px;
  margin-top: 20px;
  display: none;
}

.past-message.show {
  display: block;
}

.calendar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 38px;
  padding: 14px 30px;
  border: 1px solid var(--glass-border-gold);
  border-radius: 999px;
  background: var(--glass-fill-gold);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), 0 10px 26px rgba(0, 0, 0, 0.3);
  color: var(--gold-light);
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  letter-spacing: 1.5px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.35s ease, border-color 0.35s ease, transform 0.25s ease;
}

/* liquid shine that sweeps across on hover */
.calendar-btn::after,
.map-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(105deg,
      transparent 0%,
      rgba(255, 255, 255, 0.08) 28%,
      rgba(255, 246, 221, 0.18) 44%,
      rgba(255, 255, 255, 0.24) 50%,
      rgba(255, 246, 221, 0.18) 56%,
      rgba(255, 255, 255, 0.08) 72%,
      transparent 100%);
  transform: skewX(-20deg);
  transition: left 0.7s var(--ease);
  pointer-events: none;
}

.calendar-btn:hover::after,
.map-btn:hover::after {
  left: 130%;
}

.calendar-btn:hover {
  border-color: rgba(231, 205, 148, 0.65);
  box-shadow: var(--glass-edge), 0 16px 36px rgba(0, 0, 0, 0.4), 0 0 24px rgba(212, 175, 106, 0.25);
  transform: translateY(-2px);
}

.calendar-btn:active {
  transform: translateY(0) scale(0.97);
}

/* ===== Intro + details section ===== */
.details-section {
  position: relative;
  width: 100%;
  padding: 40px 24px 24px;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
}

.blessing-line {
  color: var(--gold-soft);
  letter-spacing: 3px;
  font-size: 20px;
  text-transform: uppercase;
  margin-bottom: 16px;
  position: relative;
  font-style: italic;
}

.couple-names {
  font-family: 'Almeliya', cursive;
  font-size: clamp(60px, 8.5vw, 84px);
  color: var(--gold-light);
  margin-bottom: 14px;
  position: relative;
}

.divider-img {
  width: min(320px, 60%);
  opacity: 0.9;
  margin: 0 auto 26px;
  display: block;
  position: relative;
}

.divider-img.small {
  width: min(360px, 55%);
  margin: 0 auto 34px;
}

.divider-img.bottom {
  width: min(360px, 60%);
  margin: 50px auto 0;
}

.intro-text {
  max-width: 600px;
  margin: 0 auto;
  color: var(--blue-lighter);
  font-size: 23px;
  line-height: 1.75;
  font-style: italic;
  position: relative;
}

.section-label {
  color: var(--gold-soft);
  font-weight: 700;
  letter-spacing: 3px;
  font-size: 20px;
  text-transform: uppercase;
  margin: 36px 0 20px;
  position: relative;
}

.section-label.godparents {
  margin: 30px 0 20px;
}

.parents-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
  font-family: 'Almeliya', cursive;
  font-size: clamp(67px, 4.4vw, 44px);
  color: var(--gold-light);
  position: relative;
}

.parents-row img {
  width: 140px;
  height: auto;
  opacity: 0.85;
  transform: rotate(90deg);
}

.godparents-names {
  font-family: 'Almeliya', cursive;
  font-size: clamp(67px, 4.4vw, 44px);
  color: var(--gold-light);
  margin-bottom: 36px;
  position: relative;
}

.invite-break {
  display: none;
}

.invite-line {
  color: var(--blue-lighter);
  font-size: 22px;
  font-style: italic;
  margin-bottom: 56px;
  position: relative;
}

.venues-row {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 48px;
  flex-wrap: wrap;
  position: relative;
  margin-bottom: 70px;
}

.venue-col {
  flex: 1 1 280px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.venue-label {
  color: var(--gold-soft);
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 18px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.venue-name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  color: var(--gold-lighter);
  font-size: 28px;
  margin-bottom: 6px;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.venue-name.venue-name-wide {
  font-size: 24px;
  white-space: nowrap;
}

.venue-time {
  color: var(--gold-light);
  font-family: 'Sublima', serif;
  font-weight: 800;
  font-size: 44px;
  margin: 8px 0;
}

.venue-city {
  color: var(--blue-light);
  font-size: 19px;
  font-style: italic;
  margin-bottom: 22px;
}

.venue-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}

.venue-divider-img {
  width: 140px;
  height: auto;
  opacity: 0.9;
}

.map-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 220px;
  padding: 12px 22px;
  border: 1px solid var(--glass-border-gold);
  border-radius: 999px;
  color: var(--gold-light);
  background: var(--glass-fill-gold);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), 0 10px 26px rgba(0, 0, 0, 0.3);
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  letter-spacing: 1px;
  text-decoration: none;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.35s ease, border-color 0.35s ease, transform 0.25s ease;
}

.map-btn:hover {
  border-color: rgba(231, 205, 148, 0.65);
  box-shadow: var(--glass-edge), 0 16px 36px rgba(0, 0, 0, 0.4), 0 0 24px rgba(212, 175, 106, 0.25);
  transform: translateY(-2px);
}

.map-btn:active {
  transform: translateY(0) scale(0.97);
}

.rsvp-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 36px;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 30px 26px;
  border: 1px solid var(--glass-border);
  border-radius: 30px;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), 0 14px 34px rgba(0, 0, 0, 0.35);
  position: relative;
  flex-wrap: wrap;
  overflow: hidden;
}

/* specular top gloss */
.rsvp-row::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 70% at 50% -20%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
}

.rsvp-col {
  flex: 1 1 0;
  max-width: 260px;
  padding: 0 8px;
}

.rsvp-title {
  color: var(--gold-soft);
  font-size: 19px;
  line-height: 1.4;
}

.rsvp-date {
  color: var(--blue-lighter);
  font-size: 20px;
  margin-top: 10px;
}

.rsvp-divider {
  width: 1px;
  align-self: stretch;
  background: var(--line-mid2);
}

.rsvp-contact-title {
  color: var(--gold-soft);
  font-style: italic;
  font-size: 19px;
  line-height: 1.4;
}

.rsvp-contact {
  color: var(--blue-lighter);
  font-style: italic;
  font-size: 20px;
  margin-top: 10px;
  line-height: 1.6;
}

/* ===== Mobile ===== */
@media (max-width: 600px) {

  /* -- decorative frame --
     the top/bottom line segments leave a gap for the ornament image;
     130px matches the desktop ornament's half-width, but the ornament
     shrinks to 120px on phones, so pull the segments in to match. */
  .frame-outer-h-top-left,
  .frame-outer-h-bottom-left,
  .frame-inner-h-top-left,
  .frame-inner-h-bottom-left {
    right: calc(50% + 62px);
  }

  .frame-outer-h-top-right,
  .frame-outer-h-bottom-right,
  .frame-inner-h-top-right,
  .frame-inner-h-bottom-right {
    left: calc(50% + 62px);
  }

  .frame-ornament-top,
  .frame-ornament-bottom {
    width: 120px;
  }

  .frame-ornament-top {
    top: -36px;
  }

  .frame-ornament-bottom {
    bottom: -36px;
  }

  .frame-corner {
    width: 100px;
  }

  /* -- cover / initials --
     Almeliya's cursive swashes bleed well past the glyph's own box; the
     flex-end/flex-start offset that looks nice on wide screens can push
     those swashes past the viewport edge on narrow ones, so center them
     and shrink everything to fit a single small screen. */
  .cover-content {
    top: 113px;
    transform: translateX(-50%) scale(0.86);
  }

  .is-open .cover-content {
    transform: translateX(-50%) scale(1);
  }

  .initial-letter.v {
    align-self: flex-end;
    margin-right: 10vw;
  }

  .initial-letter.r {
    align-self: flex-start;
    margin-left: 10vw;
  }

  .initial-letter {
    font-size: clamp(70px, 30vw, 150px);
  }

  .initial-amp {
    font-size: clamp(22px, 8vw, 32px);
  }

  .cover-divider {
    margin: 16px 0 14px;
  }

  .date-row {
    gap: 12px;
  }

  .date-month,
  .date-year {
    font-size: clamp(14px, 4.2vw, 20px);
    letter-spacing: 2px;
    padding-bottom: 6px;
  }

  .date-weekday {
    font-size: clamp(20px, 6.5vw, 28px);
  }

  .date-day {
    font-size: clamp(42px, 17vw, 64px);
    padding: 2px 14px;
  }

  .cover-location {
    font-size: 13px;
    margin-top: 8px;
  }

  /* -- closed cover: smaller bow, teaser clear of it -- */
  .bow-wrap {
    width: 76vw;
  }

  .bow-halo {
    width: 88vw;
  }

  .cover-teaser {
    top: 6%;
  }

  .teaser-sub {
    font-size: 12px;
    letter-spacing: 3px;
  }

  /* -- countdown --
     pulled up to sit right under the cover content; margin-top (not
     transform) so the layout space moves too and no blank gap is left
     at the bottom of the page. Safe to overlap the (much taller) cover
     section because .countdown-section stays opacity:0 + pointer-events
     none until .is-open, so nothing shows or intercepts taps before
     the invite opens. */
  .countdown-section {
    margin-top: -300px;
  }

  /* -- details --
     flows right after the pulled-up countdown, so at this offset it can
     poke into the viewport before opening — keep it hidden and inert
     until the invite opens. */
  .details-section {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
  }

  .is-open .details-section {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.8s ease 1.4s;
  }

  .countdown-row {
    gap: 8px;
  }

  .countdown-box {
    min-width: 70px;
    padding: 14px 8px;
    border-radius: 18px;
  }

  .countdown-value {
    font-size: 30px;
  }

  .countdown-label {
    font-size: 11px;
    letter-spacing: 1px;
    margin-top: 5px;
  }

  .past-message {
    font-size: 28px;
  }

  .calendar-btn {
    font-size: 14px;
    padding: 11px 20px;
    margin-top: 26px;
    gap: 8px;
  }

  /* -- intro + details -- */
  .details-section {
    padding: 28px 16px 16px;
  }

  .blessing-line {
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 12px;
  }

  .couple-names {
    font-size: clamp(38px, 13vw, 56px);
    margin-bottom: 10px;
  }

  .divider-img {
    width: min(200px, 65%);
    margin-bottom: 18px;
  }

  .divider-img.small {
    width: min(220px, 60%);
    margin-bottom: 22px;
  }

  .divider-img.bottom {
    width: min(220px, 65%);
    margin-top: 32px;
  }

  .intro-text {
    font-size: 16px;
    line-height: 1.6;
    padding: 0 12px;
    max-width: 370px;

  }




  .section-label {
    font-size: 14px;
    letter-spacing: 2px;
    margin: 26px 0 14px;
  }

  .section-label.godparents {
    margin: 22px 0 14px;
  }

  .parents-row {
    font-size: clamp(37px, 6.5vw, 26px);
    gap: 14px;
  }

  .parents-row img {
    width: 64px;
  }

  .parent-surname {
    display: block;
    margin-top: -8px;
    line-height: 1;
  }

  .godparents-names {
    font-size: clamp(37px, 6.5vw, 26px);
    margin-bottom: 26px;
  }

  .invite-line {
    font-size: 16px;
    margin-bottom: 36px;
  }

  .invite-break {
    display: inline;
  }

  .venues-row {
    gap: 22px;
    margin-bottom: 44px;
  }

  .venue-label {
    font-size: 13px;
    margin-bottom: 10px;
  }

  .venue-name {
    font-size: 19px;
    min-height: auto;
    margin-bottom: 4px;
  }

  .venue-name.venue-name-wide {
    font-size: 16px;
    white-space: normal;
  }

  .venue-time {
    font-size: 30px;
    margin: 6px 0;
  }

  .venue-city {
    font-size: 14px;
    margin-bottom: 16px;
  }

  .venue-divider {
    flex-basis: 100%;
    width: 100%;
    padding: 4px 0;
  }

  .venue-divider-img {
    width: 70px;
    margin: 0 auto;
    transform: rotate(90deg);
  }

  .map-btn {
    width: 170px;
    font-size: 13px;
    padding: 10px 16px;
    gap: 6px;
  }

  /* stack RSVP date above contact instead of side-by-side */
  .rsvp-row {
    flex-direction: column;
    align-items: center;
    gap: 18px;
    max-width: 340px;
    padding: 22px 18px;
    border-radius: 22px;
  }

  .rsvp-divider {
    width: 60px;
    height: 1px;
    align-self: center;
  }

  .rsvp-title,
  .rsvp-contact-title {
    font-size: 14px;
  }

  .rsvp-date,
  .rsvp-contact {
    font-size: 15px;
  }
}