/* ==========================================================================
   Fonts
   ========================================================================== */
@font-face {
  font-family: 'Gistesy';
  src: url('../assets/fonts/gistesy.regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Glacial Indifference';
  src: url('../assets/fonts/glacial-indifference.regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  --emerald-deep: #07281E;
  --emerald-mid: #0F4834;
  --emerald-glow: #1C6B4C;
  --gold: #C9A227;
  --gold-light: #E7CE84;
  --ivory: #F4ECDD;
  --henna: #9A4E30;
  --black: #000;

  --tint-glow: var(--gold);

  --font-serif: 'Glacial Indifference', sans-serif;
  --font-eyebrow: 'Glacial Indifference', sans-serif;
  --font-script: 'Gistesy', cursive;
  --font-body: 'Glacial Indifference', sans-serif;
  --font-signature: 'Gistesy', cursive;
  --font-title: 'Gistesy', cursive;

  --ease: cubic-bezier(.22, .68, .32, 1);
  --ease-slow: cubic-bezier(.45, 0, .15, 1);

  --gold-soft: rgba(201, 162, 39, .28);

  --side-color: #000;
}

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

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  color: var(--ivory);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background-color: var(--side-color);
  transition: background-color 1.4s ease;
}

/* ==========================================================================
   Phone frame — fills the screen edge-to-edge on a real phone (below the
   500px breakpoint), and locks to a fixed phone-like width on anything
   wider, centered in the window with the ambient --side-color showing on
   either side instead of continuing to stretch with the viewport.
   ========================================================================== */
#app-frame {
  position: relative;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: var(--emerald-deep);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .6);
  /* all the vw-based type scales below are meant to track this frame's own
     width, not the browser window's — on desktop the frame is letterboxed
     narrower than the viewport, so container query units (cqw) are used
     instead of vw to size correctly there too. */
  container-type: inline-size;
  container-name: frame;
}

@media (min-width: 500px) {
  #app-frame {
    /* true 9:16 box instead of a fixed width — picks whichever cap is
       smaller: 480px, or the width a 9:16 box would need to still fit
       the viewport's full height. That second term is what keeps
       tablets (tall width, comparatively short height) from stretching
       into an over-tall rectangle the way a flat 480px width did; the
       same formula naturally covers desktop too. */
    width: min(480px, calc(100dvh * 9 / 16));
    height: auto;
    aspect-ratio: 9 / 16;
  }
}

/* ==========================================================================
   Device guards — full-screen blockers for viewports the invite wasn't
   designed for. Hidden by default; each one's own media query is the only
   thing that switches it on, and they sit above everything (#app-frame's
   splash overlay included) so nothing underneath is reachable.
   ========================================================================== */
.device-guard {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: var(--emerald-deep);
  color: var(--ivory);
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
}

.device-guard p {
  max-width: 320px;
  margin: 0;
  font-family: var(--font-eyebrow);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: .02em;
}

/* under 300px wide, nothing in the layout can render sensibly */
@media (max-width: 299px) {
  .screen-too-small-guard {
    display: flex;
  }
}

/* small/mobile screens in landscape — gated on max-height too, so a wide
   desktop browser window (which the 9:16 frame already handles fine)
   never triggers this. */
@media (orientation: landscape) and (max-height: 500px) {
  .rotate-guard {
    display: flex;
  }
}

/* small persistent branding tag, pinned to the frame (not the scroller)
   so it stays put across every fold as the page scrolls. The wrapper uses
   the same centered width formula as .card/.thankyou-card, so the badge
   lines up with the card edges above it instead of the raw frame edge. */
.site-hashtag-wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(88%, 460px);
  /* same bottom offset as .scroll-cue, so the two badges align. */
  bottom: max(clamp(20px, 4vh, 40px), env(safe-area-inset-bottom));
  /* above .intro-fold (z-index: 9999), same as .scroll-cue, so it's
     visible on the intro screen too instead of only after it fades. */
  z-index: 10000;
  text-align: right;
  pointer-events: none;
}

.site-hashtag {
  display: inline-block;
  margin: 0;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(231, 206, 132, .3);
  /* matches .scroll-cue-badge's background exactly, so both badges look
     the same. */
  background: rgba(255, 252, 244, .7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-family: var(--font-eyebrow);
  font-weight: 600;
  font-style: normal;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--black);
  opacity: .85;
}

#scroller {
  height: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  /* slim scrollbar instead of the browser default — mostly matters on
     desktop, since mobile browsers already auto-hide theirs. */
  scrollbar-width: thin;
  scrollbar-color: rgba(231, 206, 132, .5) transparent;
}

#scroller::-webkit-scrollbar {
  width: 5px;
}

#scroller::-webkit-scrollbar-track {
  background: transparent;
}

#scroller::-webkit-scrollbar-thumb {
  background: rgba(231, 206, 132, .5);
  border-radius: 10px;
}

#scroller::-webkit-scrollbar-thumb:hover {
  background: rgba(231, 206, 132, .75);
}

.fold {
  position: relative;
  height: 100%;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

/* subtle film grain — keeps the emerald/gold surfaces from feeling flat,
   scoped to the frame so it doesn't wash out the side letterboxing */
#app-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5000;
  pointer-events: none;
  opacity: .045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ==========================================================================
   Fold 1 — Intro / Tap to start
   ========================================================================== */
.intro-fold {
  background: #000;
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.intro-fold.is-hidden {
  display: none;
}

.fold-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intro-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .55) 100%);
  transition: opacity 2.6s var(--ease-slow);
}

.tap-start {
  position: relative;
  z-index: 2;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 40px;
  -webkit-tap-highlight-color: transparent;
  /* hidden until the page has fully loaded — see .intro-fold.is-loaded */
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}

.intro-fold.is-loaded .tap-start {
  opacity: 1;
  pointer-events: auto;
}

.tap-icon {
  width: 72px;
  height: 72px;
  /* brightness(0) invert(1) recolors the source PNG (dark line art) to
     solid white regardless of its original color, then the drop-shadow
     adds a soft gold glow so it still reads clearly against any video
     frame behind it, not just the darker ones. */
  filter: brightness(0) invert(1) drop-shadow(0 0 14px rgba(231, 206, 132, .5));
  animation: tap-bob 1.6s ease-in-out infinite;
}

@keyframes tap-bob {

  0%,
  100% {
    transform: translateY(0);
  }

  35% {
    transform: translateY(6px);
  }

  50% {
    transform: translateY(0);
  }
}

.tap-label em {
  font-style: normal;
  font-family: var(--font-eyebrow);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--ivory);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}


.intro-fold.is-playing .tap-start {
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}

.intro-fold.is-playing .intro-scrim {
  opacity: 0;
}

.fold-video {
  transition: transform 3.6s var(--ease-slow), filter 3.6s var(--ease-slow);
}

.intro-fold {
  transition: opacity 3.2s var(--ease-slow) .15s;
}

.intro-fold.is-zooming .fold-video {
  transform: scale(1.035);
  filter: brightness(.88) saturate(1.05);
}

.intro-fold.is-zooming {
  opacity: 0;
}

/* ==========================================================================
   Fold 2 — Bismillah video
   ========================================================================== */
.video-fold .video-scrim {
  position: absolute;
  inset: 0;
}

.bismillah-content {
  position: relative;
  z-index: 2;
  max-width: min(86%, 560px);
  text-align: center;
  padding: 0 24px;
  margin-top: clamp(60px, 20vh, 220px);
}

.bismillah-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(26px, 6cqw, 44px);
  line-height: 1.5;
  color: var(--ivory);
  text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
  letter-spacing: .01em;
  margin: 0;
}

/* down-arrow cue below the bismillah text — hints "scroll on" and
   advances to the next fold when clicked. Gently bobs to draw the eye. */
.bismillah-scroll {
  display: inline-flex;
  margin-top: clamp(28px, 6vh, 56px);
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ivory);
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .45));
  animation: bismillah-arrow-bob 1.8s ease-in-out infinite;
}

.bismillah-scroll svg {
  width: 22px;
  height: 38px;
}

@keyframes bismillah-arrow-bob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(8px);
  }
}

/* ==========================================================================
   Scroll cue
   ========================================================================== */
/* persistent, sticky across every fold — a sibling of #scroller (not
   inside it, like .site-hashtag-wrap), positioned and styled the same
   way so the two bottom badges match and align with each other. */
.scroll-cue {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(88%, 460px);
  bottom: max(clamp(20px, 4vh, 40px), env(safe-area-inset-bottom));
  /* above .intro-fold (z-index: 9999) so this stays visible — and
     usable, via .scroll-cue-badge's own pointer-events — on the very
     first screen too, not just once the intro fades. */
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.scroll-cue-badge {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0;
  /* matches .site-hashtag's padding exactly, so both badges are the same
     height — the arrow is capped below to not push this one taller. */
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(231, 206, 132, .3);
  background: rgba(255, 252, 244, .7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: .85;
  /* it's a <button> now (click advances to the next fold), so reset the
     default button chrome and re-enable clicks the wrapper turned off. */
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: background .3s ease, opacity .3s ease;
}

.scroll-cue-badge:hover,
.scroll-cue-badge:active {
  background: rgba(255, 252, 244, .3);
  opacity: 1;
}

/* small round refresh button sitting next to the scroll badge — same
   glass treatment, just circular and icon-only instead of a text pill. */
.refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(231, 206, 132, .3);
  background: rgba(255, 252, 244, .7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: .85;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: background .3s ease, opacity .3s ease, transform .4s ease;
}

.refresh-btn:hover,
.refresh-btn:active {
  background: rgba(255, 252, 244, .3);
  opacity: 1;
}

.refresh-btn:active {
  transform: rotate(180deg);
}

.refresh-icon {
  width: 12px;
  height: 12px;
  color: var(--black);
}

/* #muteBtn reuses .refresh-btn/.refresh-icon for the same look, and just
   swaps which of its two icons is visible based on mute state. */
.mute-icon-off {
  display: none;
}

#muteBtn.is-muted .mute-icon-on {
  display: none;
}

#muteBtn.is-muted .mute-icon-off {
  display: block;
}

.scroll-arrow {
  width: 7px;
  height: 13px;
  color: var(--black);
  transition: transform .3s ease;
}

/* #addCalBtn reuses .refresh-btn/.refresh-icon for the same round glass
   look as refresh/mute. It's hidden by default (via the [hidden] attr)
   and only revealed by JS while an event fold (one carrying calendar
   data) is the one currently in view. */
.add-cal-btn {
  transition: background .3s ease, opacity .3s ease, transform .2s ease;
}

.add-cal-btn[aria-expanded="true"] {
  background: rgba(255, 252, 244, .95);
  transform: rotate(45deg);
}

/* Small glass menu that pops up above the + button with the calendar
   link choices for whichever event is currently in view. */
.cal-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 190px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(231, 206, 132, .35);
  background: rgba(255, 252, 244, .96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  pointer-events: auto;
}

.cal-popover[hidden] {
  display: none;
}

.cal-popover-title {
  margin: 2px 6px 6px;
  font-family: var(--font-eyebrow);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--emerald-deep);
  opacity: .65;
}

.cal-popover-option {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 9px;
  background: transparent;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  text-align: left;
  color: var(--emerald-deep);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease;
}

.cal-popover-option:hover,
.cal-popover-option:active {
  background: rgba(201, 162, 39, .16);
}

/* on the intro screen the button reads "Skip" instead of "Scroll" —
   point the arrow forward (right) instead of down to match. */
.scroll-cue-badge.is-skip .scroll-arrow {
  transform: rotate(-90deg);
}

/* font-size/weight/style/letter-spacing kept identical to .site-hashtag
   so the two bottom badges match; title case instead of the old
   all-caps treatment. */
.scroll-label {
  font-family: var(--font-eyebrow);
  font-weight: 600;
  font-style: normal;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--black);
}

/* ==========================================================================
   Textured emerald background
   ========================================================================== */
.content-fold {
  background: var(--emerald-deep);
}

.texture-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, var(--emerald-glow) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 100%, color-mix(in srgb, var(--tint-glow) 14%, var(--emerald-mid)) 0%, transparent 65%),
    repeating-linear-gradient(135deg, rgba(201, 162, 39, .05) 0 2px, transparent 2px 34px),
    repeating-linear-gradient(45deg, rgba(201, 162, 39, .035) 0 1px, transparent 1px 26px),
    linear-gradient(180deg, var(--emerald-deep), var(--emerald-mid) 55%, var(--emerald-deep));
}

.texture-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 120% 90% at 50% 50%, transparent 40%, rgba(0, 0, 0, .4) 100%);
}

/* ==========================================================================
   Arch folds — Haldi / Nikaah / Baraat / Walima, each with its own
   full-bleed illustrated backdrop and a frosted-glass panel seated inside
   the blank arch of the artwork.
   ========================================================================== */
.arch-fold {
  background: var(--emerald-deep);
  /* same top-aligned layout as .thankyou-fold, per user request — event
     folds (Haldi/Nikaah/Baraat/Walima) start from the top instead of the
     vertically-centered layout the bismillah fold keeps. */
  align-items: flex-start;
}

.fold-bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.fold-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.fold-bg-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
      rgba(20, 10, 5, .05) 0%,
      transparent 18%,
      transparent 72%,
      rgba(20, 10, 5, var(--scrim-strength, .58)) 100%);
  transition: background 1.2s var(--ease);
}

.arch-panel {
  position: relative;
  z-index: 2;
  /* matches the .card width formula (married/thank-you folds) so every
     section sits at the same width, container-style, instead of this
     panel running noticeably narrower than the rest of the site. */
  width: min(95%, 460px);
  /* same outer spacing as .card (married/thank-you folds), so the gap
     from the top of the fold to the first line of content matches now
     that this panel also starts from the top. Side padding matches
     Bootstrap's default .container gutter (0.75rem) instead of the
     old wider, viewport-scaled value. */
  padding: clamp(40px, 7.5vh, 60px) 0.75rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.arch-panel>*:not(.thread-divider):not(.event-divider) {
  /* background: linear-gradient(180deg,
      rgba(255, 252, 244, var(--panel-alpha, .62)),
      rgba(255, 252, 244, calc(var(--panel-alpha, .62) - .22))); */
  backdrop-filter: blur(7px) saturate(100%);
  -webkit-backdrop-filter: blur(7px) saturate(100%);
  /* NOTE: this used to also set `transition: background 1.2s var(--ease)`
     — transitioning a background that's commented out above, so it did
     nothing useful. Worse, `transition` is a shorthand: this selector's
     higher specificity than .reveal's own transition rule meant it fully
     replaced .reveal's opacity/transform/filter transition list with just
     this one, silently killing the fade-in-up animation on every event
     panel (Haldi/Nikaah/Baraat/Walima) while leaving married/thank-you
     (which have no competing rule here) working fine. */
}

/* thin gold divider below each event's title */
/* gold line with a small ornamental diamond at its center, instead of
   a plain bar — a more traditional wedding-stationery flourish. */
.event-divider {
  position: relative;
  width: 90px;
  height: 1px;
  margin: 18px 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  /* animation comes from the shared .reveal / .fold.in-view .reveal
     rules — the earlier !important overrides here were working around
     the .arch-panel transition-shorthand bug fixed above, not anything
     specific to this element, so they're no longer needed. */
}

.event-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid var(--gold);
  background: var(--emerald-deep);
}

.event-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--gold-light);
  box-shadow: 0 0 6px rgba(201, 162, 39, .6);
}

.arch-panel .eyebrow {
  padding: 6px 14px;
  border-radius: 20px;
}

.arch-panel .event-title {
  padding: 10px 25px;
}

.arch-panel .event-time {
  padding: 4px 12px;
  border-radius: 20px;
}

.arch-panel .event-host {
  padding: 6px 16px;
  border-radius: 20px;
}

.arch-panel .event-venue {
  padding: 8px 16px;
  border-radius: 8px;
}

.arch-panel .ayah {
  padding: 10px 18px;
  border-radius: 8px;
}

.arch-fold[data-tint="haldi"] {
  --ivory: #4A2E10;
  --gold: #8A5A12;
  --gold-light: #7A4A0E;
}

.arch-fold[data-tint="nikaah"] {
  --ivory: #173425;
  --gold: #83702E;
  --gold-light: #6E5C24;
}

.arch-fold[data-tint="baraat"] {
  --ivory: #5A2412;
  --gold: #8C5A16;
  --gold-light: #7A4A10;
}

.arch-fold[data-tint="walima"] {
  --ivory: #4A2A1E;
  --gold: #8F6C42;
  --gold-light: #7A5836;
}

.arch-panel .event-venue {
  margin-bottom: 16px;
}

/* note: arch-panel width no longer needs a separate desktop override —
   the 9:16 frame itself already constrains available width consistently
   at every screen size, so the base min(88%, 460px) rule just works. */

/* ==========================================================================
   Card + corner ornament
   ========================================================================== */
.card {
  position: relative;
  z-index: 2;
  width: min(88%, 460px);
  /* side padding matches Bootstrap's default .container gutter
     (0.75rem), same as .arch-panel, so every section lines up. */
  padding: clamp(40px, 7.5vh, 60px) 0.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(231, 206, 132, .06) 0%, rgba(244, 236, 221, .015) 30%, transparent 55%);
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(201, 162, 39, .22),
    0 0 0 7px rgba(201, 162, 39, .045),
    0 30px 70px -20px rgba(0, 0, 0, .65),
    0 8px 24px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(231, 206, 132, .12),
    inset 0 0 60px rgba(201, 162, 39, .05);
}

/* the married-fold card keeps the corner motifs and per-line text chips,
   but drops the enclosing tinted glass panel + border glow the base
   .card has — only the individual text chips should read as "glass" here. */
.married-card {
  background: none;
  box-shadow: none;
  /* Bootstrap ships its own .card component with a default border; since
     this project reuses the "card" class name for an unrelated layout
     block, that border was only ever hidden by the gold box-shadow above
     — drop it explicitly now that the glass panel is gone. */
  border: none;
  /* this fold's content should start from the top instead of the
     vertically-centered layout every other fold uses. */
  margin-top: clamp(10px, 2vh, 20px);
}

.married-fold {
  align-items: flex-start;
}

.married-card .eyebrow,
.married-card .name-line,
.married-card .parent-line,
.married-card .amp,
.married-card .event-date {
  /* pure black read cold against the site's warm gold/emerald palette —
     the deep emerald ink ties this fold back to the rest of the invite. */
  color: var(--emerald-deep);
}

/* same treatment as .married-card above — drop the enclosing glass panel,
   border glow, and the Bootstrap .card border it was masking. Width stays
   on the shared .card rule (min(88%, 460px)), so this card lines up with
   every other section. */
.thankyou-card {
  background: none;
  box-shadow: none;
  border: none;
  padding-right: 0;
  padding-left: 0;
  /* same top-start offset as .married-card/.arch-panel. */
  margin-top: clamp(32px, 8vh, 72px);
}

.thankyou-fold {
  align-items: flex-start;
}

.thankyou-card .eyebrow,
.thankyou-card .event-title,
.thankyou-card .thankyou-msg,
.thankyou-card .ayah p,
.thankyou-card .ayah cite {
  color: var(--ivory);
}

/* ==========================================================================
   Typography blocks
   ========================================================================== */
.eyebrow {
  font-family: var(--font-eyebrow);
  font-weight: 600;
  font-size: clamp(12px, 1.8cqw, 14px);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin: 0 0 14px;
}

.event-title {
  position: relative;
  display: inline-block;
  font-family: var(--font-signature);
  font-weight: 400;
  letter-spacing: .02em;
  /* a little smaller than before, so it doesn't dominate as much now
     that the couple's name has grown more prominent below it. */
  font-size: clamp(50px, 12.5cqw, 82px);
  line-height: 1.15;
  margin: 0;
  color: var(--ivory);
  text-shadow: 0 2px 30px rgba(0, 0, 0, .4), 0 0 60px rgba(201, 162, 39, .12);
}

/* multi-word titles (e.g. "The Ansari Family") need word-only wrapping
   so this script font's wrapped lines don't collide or split mid-word.
   Font styling here is kept identical to .name-line (same family, weight,
   letter-spacing, size, and glow) so the two Gistesy headings match. */
.event-title--long {
  font-family: var(--font-title);
  font-weight: 400;
  letter-spacing: .015em;
  font-size: clamp(40px, 12.5cqw, 54px);
  line-height: 1.85;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 0 34px rgba(201, 162, 39, .4);
  overflow-wrap: normal;
  word-break: normal;
}

.event-time {
  font-family: var(--font-eyebrow);
  font-weight: 600;
  font-size: clamp(15.5px, 2.6cqw, 17.5px);
  letter-spacing: .18em;
  color: var(--gold-light);
  /* was compensating for the removed thread-divider above it — now the
     only gap between the title and this line, so it needs to carry a
     bit more than the divider's leftover 2px. */
  margin: 5px 0 10px;
}

.event-venue {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(16px, 2.9cqw, 18px);
  line-height: 1.65;
  color: var(--ivory);
  opacity: .92;
  margin: 0 0 26px;
}

/* Venue text becomes a tap-through to the pinned Google Maps location for
   that event, opened in a new tab. Underline signals it's a link without
   otherwise breaking the venue's existing look. */
.venue-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(231, 206, 132, .55);
  text-underline-offset: 3px;
  transition: opacity .2s ease;
}

.venue-link:hover,
.venue-link:active {
  opacity: .8;
}

/* .event-time is a <button> now (opens the add-to-calendar popover for
   this event) — reset button chrome so it keeps looking like plain text,
   plus a small hint that it's tappable. */
.event-time-btn {
  display: inline-block;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-decoration: underline;
  text-decoration-color: rgba(231, 206, 132, .45);
  text-underline-offset: 4px;
  transition: opacity .2s ease;
}

.event-time-btn:hover,
.event-time-btn:active {
  opacity: .8;
}

.ayah {
  /* smaller bottom gap pulls the event-host name(s) up, closer under
     the ayah instead of sitting further down the panel. */
  margin: 6px 0 8px;
  padding: 0;
  border: none;
}

.ayah p {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(17px, 3.3cqw, 20px);
  line-height: 1.6;
  color: var(--ivory);
  margin: 0 0 8px;
  position: relative;
}

.ayah p::before {
  content: "“";
  color: var(--gold);
}

.ayah p::after {
  content: "”";
  color: var(--gold);
}

.ayah cite {
  font-family: var(--font-eyebrow);
  font-weight: 600;
  font-style: normal;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--black);
}

.event-host {
  /* Gistesy script instead of the tracked sans-serif eyebrow style —
     weight stays 400 since that's the only weight the font ships (700
     would just trigger a synthetic-bold fallback that distorts the
     script glyphs), and the heavy uppercase/tracking that suited the
     old sans-serif treatment is dropped since it fights a script font's
     flowing, case-sensitive letterforms. */
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(35px, 4.8cqw, 45px);
  letter-spacing: .01em;
  color: var(--gold-light);
  margin: 4px 0 14px;
  /* now sits between .event-time and .event-venue instead of after the
     ayah quote — small margins on both sides for breathing room. */
  /* needed so the glow bloom below (::before) positions against this
     element instead of the nearest other positioned ancestor. */
  position: relative;
}

/* no special styling — the "&" just inherits .event-host's normal
   script look instead of standing out on its own. */
.amp-inline {
  margin: 0 4px;
}

/* Married fold specifics */
.names-block {
  /* was compensating for the removed thread-divider above it — now the
     only gap between the eyebrow and the names. */
  /* margin: 14px 0 0; */
  /* an explicit width gives this flex item a definite containing-block
     size, so its fit-content children (below) resolve their wrap width
     against it directly instead of the two-pass fit-content-in-fit-content
     guess browsers fall back to when both are auto-sized — that fallback
     under-measures the available space and wraps text far earlier than
     it needs to. */
  width: 100%;
}

.name-line {
  position: relative;
  font-family: var(--font-title);
  font-weight: 400;
  letter-spacing: .015em;
  /* ~50px on a typical phone-width frame — kept in sync with
     .event-title--long so both Gistesy headings match. */
  font-size: clamp(40px, 12.5cqw, 54px);
  line-height: 1.6;
  color: var(--emerald-deep);
  text-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 0 34px rgba(201, 162, 39, .4);
  /* now the first line inside .name-group's own padding, so it no longer
     needs top margin of its own. */
  margin: 0;
}

/* a single soft gold glow that blooms once the name settles into view,
   giving the signature script a touch more presence without looping —
   same treatment on .event-host (the event folds' names) as .name-line
   (the married fold's), so every section's name gets the same moment. */
.name-line::before,
.event-host::before {
  content: "";
  position: absolute;
  inset: -8% -4%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(231, 206, 132, .25), transparent 70%);
  opacity: 0;
  transform: scale(.85);
}

.fold.in-view .name-line::before,
.fold.in-view .event-host::before {
  animation: name-glow 1.6s var(--ease-slow) .3s 1;
}

@keyframes name-glow {
  0% {
    opacity: 0;
    transform: scale(.85);
  }

  40% {
    opacity: 1;
    transform: scale(1.05);
  }

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

.parent-line {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(15px, 2.2cqw, 17px);
  letter-spacing: .06em;
  color: var(--gold-light);
  opacity: .85;
  margin: 0 0;
}

.amp {
  font-family: var(--font-script);
  font-weight: 400;
  /* match the names' size (.name-line) instead of the old oversized
     display scale, so the "&" doesn't dominate the block it sits between. */
  font-size: clamp(24px, 7cqw, 34px);
  color: var(--gold-light);
  margin: 12px 0;
  line-height: 1;
  text-shadow: 0 2px 18px rgba(201, 162, 39, .35);
}

.event-date {
  font-family: var(--font-eyebrow);
  font-weight: 600;
  font-size: clamp(14px, 2.4cqw, 16.5px);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-light);
  /* was compensating for the removed thread-divider--small above it. */
  margin: 12px 0 0;
}

/* Thank-you fold */
.thankyou-msg {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(19px, 3.3cqw, 22px);
  line-height: 1.6;
  color: var(--ivory);
  /* was compensating for the removed thread-divider above it. */
  margin: 14px 0 22px;
}

.thankyou-fold .ayah {
  margin-bottom: 0;
}

/* ==========================================================================
   Individual glass chips behind each line of text
   (married + thank-you cards) — glassmorphism sits behind each piece of
   text on its own, rather than one frosted panel behind the whole card.
   width:fit-content (not inline-block) keeps every line its own block so
   short lines never sit side-by-side with the next one.
   ========================================================================== */
.card>*:not(.thread-divider):not(svg):not(.names-block),
.card .names-block>* {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* thank-you card text sits directly on the photo — no glass chip behind
   it, unlike the married card which keeps one per line (including the
   "We Are Getting Married" eyebrow and the "&"). */
.card:not(.thankyou-card)> :not(.thread-divider):not(svg):not(.names-block),
.card:not(.thankyou-card) .names-block> * {
  /* background: linear-gradient(180deg, rgba(255, 252, 244, .10), rgba(255, 252, 244, .02)); */
  backdrop-filter: blur(5px) saturate(100%);
  -webkit-backdrop-filter: blur(10px) saturate(100%);
  /* border: 1px solid rgba(231, 206, 132, .16); */
}

.card .eyebrow {
  padding: 7px 20px;
  border-radius: 20px;
}

.card .event-date {
  padding: 7px 22px;
  border-radius: 20px;
}

.card .event-title {
  padding: 10px 30px;
  line-height: 1.5;
  border-radius: 14px;
}

/* name + parent-line now share one chip (see .name-group) instead of
   each getting its own separate glass block. */
.card .name-group {
  padding: 0px 30px;
  border-radius: 18px;
}

.card .amp {
  padding: 2px 18px;
  border-radius: 20px;
}

.card .thankyou-msg {
  padding: 10px 20px;
  border-radius: 14px;
}

.card .ayah {
  padding: 16px 22px;
  border-radius: 14px;
}

/* ==========================================================================
   Reveal-on-scroll motion
   ========================================================================== */
.reveal {
  opacity: 0;
  /* fades in and rises into place at the same time the background photo
     starts its slow zoom (both keyed off .fold.in-view), so the text and
     backdrop read as one entrance instead of two separate motions. */
  transform: translateY(34px) scale(.965);
  filter: blur(7px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease);
  will-change: opacity, transform, filter;
}

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


/* ==========================================================================
   Desktop / widescreen refinement
   ========================================================================== */
@media (min-width:1024px) {
  .bismillah-content {
    max-width: 640px;
  }

  .scroll-cue,
  .site-hashtag-wrap {
    bottom: 3vh;
  }
}

/* note: the card no longer needs separate 1024px/1440px width overrides —
   the 9:16 frame already constrains available width consistently at every
   screen size, so the base min(88%, 460px) rule just works everywhere. */

/* short / landscape phones */
@media (max-height:480px) {
  .card {
    padding: 18px 24px;
  }

  .scroll-cue,
  .site-hashtag-wrap {
    display: none;
  }

  .event-venue {
    margin-bottom: 12px;
  }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion:reduce) {
  .tap-icon,
  .bismillah-scroll {
    animation: none;
  }

  .fold-video {
    transition: opacity .4s ease;
  }

  .intro-fold.is-zooming .fold-video {
    transform: none;
    filter: none;
  }

  .intro-fold {
    transition: opacity .4s ease;
  }

  .reveal {
    transition: opacity .3s ease;
    transform: none;
    filter: none;
  }

  #scroller {
    scroll-behavior: auto;
  }

  .name-line::before,
  .event-host::before {
    animation: none;
  }
}