/* ============================================================
   Mihika & Ohm — envelope opening sequence
   Cream sampled from the envelope paper: #faf3d7
   ============================================================ */

/* --- Suite fonts (open-licence faces matched to the printed cards,
       self-hosted — never a font CDN) --- */
@font-face {
  font-family: 'Playfair Display';
  src: url('assets/fonts/Playfair%20Display/PlayfairDisplay-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('assets/fonts/Playfair%20Display/PlayfairDisplay-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('assets/fonts/Playfair%20Display/PlayfairDisplay-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('assets/fonts/Playfair%20Display/PlayfairDisplay-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Pacifico';
  src: url('assets/fonts/Pacifico/Pacifico-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('assets/fonts/Fraunces/Fraunces-144pt-Black.ttf') format('truetype');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Berkshire Swash';
  src: url('assets/fonts/Berkshire%20Swash/BerkshireSwash-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
/* The wedding card's actual script face — the couple's names are set in this
   on the printed card. */
@font-face {
  font-family: 'Magnolia Script';
  src: url('assets/fonts/Magnolia%20Script.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}

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

html,
body {
  height: 100%;
  background: #faf3d7;
  overflow: hidden;                 /* no scrollbars during the intro */
  overscroll-behavior: none;
}

body {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;       /* kill iOS double-tap zoom on the seal */
}

/* Full-viewport stage. dvh tracks the mobile URL-bar dance; vh is the fallback. */
#stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: #faf3d7;
  overflow: hidden;                 /* horizontal crop only — the seal lives mid-screen, never near an edge */
  opacity: 0;                       /* faded in by JS once all images are decoded */
  outline: none;
}

/* Envelope + painting layers are absolutely positioned; JS owns their
   geometry. (Scoped by id — card images live in normal flow.) */
#art, #paper-top, #paper-bottom, #seal, #cover-name {
  position: absolute;
  display: block;
  max-width: none;                  /* JS sets exact pixel sizes — never let CSS shrink them */
}

/* --- Artwork reveal (bottom of the stack) --- */
#art {
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Warm light veil over the artwork — fades out as the envelope opens ("light flooding in") */
#veil {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: #fff8ec;
  opacity: 0.25;
  pointer-events: none;
}

/* --- Envelope halves --- */
.half {
  position: absolute;
  inset: 0;
  pointer-events: none;             /* the stage handles the tap */
}

#half-bottom { z-index: 2; }
#half-top    { z-index: 3; }

#seal {
  cursor: pointer;
  pointer-events: auto;             /* pointer cursor over the wax */
}

/* Shadow the top flap casts onto the sheet below — sells the overlap.
   Lives inside #half-top so it rides up with the flap when the envelope
   opens. Geometry (top/height) is set by JS at the fold line. */
#fold-shadow {
  position: absolute;
  left: 0;
  width: 100%;
  background: linear-gradient(
    to bottom,
    rgba(88, 62, 30, 0.28),
    rgba(88, 62, 30, 0.10) 40%,
    rgba(88, 62, 30, 0) 100%
  );
  pointer-events: none;
}

/* --- Invitation cards over the artwork --- */
#cards-scroll {
  position: absolute;
  z-index: 2;                       /* above painting + veil; envelope halves are gone by now */
  inset: 0;
  display: none;                    /* shown by JS after the envelope opens */
  overflow-y: hidden;               /* scrolling unlocks once the entrance settles */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#cards-scroll::-webkit-scrollbar { display: none; }

#cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7vh;
  gap: 7svh;
}

.card {
  position: relative;
  flex: 0 0 auto;
  cursor: pointer;
  outline: none;
  -webkit-user-drag: none;
}

.card img {
  display: block;
  max-width: 78vw;
  max-height: 74vh;
  max-height: 74svh;
  width: auto;
  height: auto;
  -webkit-user-drag: none;
  transition: transform 0.45s ease;
}

/* Soft floor shadow beneath each levitating card (bobbed inversely by JS) */
.card-shadow {
  position: absolute;
  left: 50%;
  bottom: -26px;
  width: 68%;
  height: 26px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(61, 39, 23, 0.34), rgba(61, 39, 23, 0) 68%);
  filter: blur(5px);
  pointer-events: none;
}

/* "Tap for details" intimation under each card */
.card-hint {
  width: max-content;
  margin: 26px auto 0;
  text-align: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: #53392b;
  text-shadow: 0 1px 8px rgba(255, 250, 240, 0.8);
  opacity: 0.75;
  transition: opacity 0.35s ease;
}

/* Desktop: the suite laid out three across, no scrolling */
@media (min-width: 768px) {
  #cards {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    gap: 4vw;
    padding: 0 4vw;
  }
  .card img {
    max-width: 26vw;
    max-height: 72vh;
  }
  .card:hover .card-float img,
  .card:focus-visible .card-float img {
    transform: translateY(-6px) scale(1.015);
  }
  .card:hover .card-hint,
  .card:focus-visible .card-hint {
    opacity: 1;
  }
}

/* ============================================================
   Event pages — one per card, themed to match it exactly
   ============================================================ */

#event-layer {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: none;                    /* shown by the router */
}

/* Each page's ground is its card's own textured paper; the flat --bg (the
   texture's exact mean colour) paints instantly while the JPG arrives. */
.event-page {
  position: absolute;
  inset: 0;
  display: none;
  background: var(--bg) center / cover no-repeat;
  color: var(--ink);
}
.event-page.active { display: block; }

.ep-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: 16px clamp(14px, 2.2vw, 26px) clamp(18px, 3vh, 32px);
}
.ep-scroll::-webkit-scrollbar { display: none; }

/* The frame sits near the screen edges like the printed card's border, but
   it belongs to the content: it wraps everything and scrolls along, so text
   can never cross it. All three printed cards carry the same single dark
   hairline, drawn in each card's frame colour (darker than its ground). */
.ep-content {
  position: relative;
  width: 100%;
  text-align: center;
  border: clamp(4px, 0.45vw, 7px) solid var(--line);   /* bold rule, like the printed card's frame */
  padding: clamp(64px, 10vh, 100px) clamp(20px, 4vw, 56px) clamp(48px, 8vh, 84px);
}

/* Keep the reading column comfortable inside the wide frame. */
.ep-content > * {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* --- typography, mirroring the cards --- */
.ep-eyebrow {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(16px, 2.4vw, 19px);
  letter-spacing: 0.04em;
  line-height: 1.8;
}

.ep-lede {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(14px, 2vw, 16px);
  letter-spacing: 0.03em;
  line-height: 2;
  opacity: 0.96;
  margin-top: 10px;
}

/* Display titles — each page overrides with its card's own face below. */
.ep-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: clamp(34px, 7vw, 64px);
  line-height: 1.2;
  margin-top: 22px;
  color: var(--title, var(--ink));
}
.theme-sangeet .ep-title {
  font-family: 'Fraunces', 'Playfair Display', Georgia, serif;
  font-weight: 900;
  letter-spacing: 0.01em;
}
.theme-reception .ep-title {
  font-family: 'Berkshire Swash', 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 5.4vw, 54px);   /* sized so WEDDING RECEPTION fits the frame on every screen */
  letter-spacing: 0.04em;
  text-indent: 0.04em;
  text-transform: uppercase;
}

.ep-script {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 2.6vw, 20px);
  letter-spacing: 0.04em;
  line-height: 1.4;
  margin: 14px auto 8px;   /* auto sides — keep the box centred inside the frame */
}

/* The couple's names — Magnolia Script, the wedding card's own face, sized
   to the card's proportion (the names run ~1.9× the eyebrow text there).
   No letter-spacing: it's a connecting script; tracking would break joins. */
.ep-name {
  font-family: 'Magnolia Script', 'Pacifico', 'Brush Script MT', cursive;
  font-weight: 400;
  font-size: clamp(33px, 5vw, 40px);
  line-height: 1.5;
}

.ep-date {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-variant-numeric: lining-nums;
  font-size: clamp(16px, 2.4vw, 19px);
  letter-spacing: 0.05em;
  margin-top: 34px;
  color: var(--accent, inherit);
}
.ep-time {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-variant-numeric: lining-nums;
  font-size: clamp(15px, 2.2vw, 17px);
  letter-spacing: 0.08em;
  margin-top: 8px;
  color: var(--accent, inherit);
}

/* --- Countdowns — quiet numerals between hairlines, one per event page --- */
.ep-countdown {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: clamp(10px, 3.4vw, 30px);
  margin-top: 36px;
}
.cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cd-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-variant-numeric: lining-nums;
  font-size: clamp(26px, 5.4vw, 40px);
  line-height: 1;
  min-width: 2.3ch;                 /* steady width so the tick never jitters */
  text-align: center;
}
.cd-label {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(8px, 2.2vw, 10px);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  margin-top: 9px;
  opacity: 0.75;
}
.cd-sep {
  width: 1px;
  background: var(--line);
  margin: 3px 0 12px;
}

.ep-divider {
  width: 72px;
  height: 1px;
  margin: 46px auto;
  background: var(--line);
}

.ep-block { margin-top: 40px; }
.ep-block:first-of-type { margin-top: 0; }

.ep-block-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
}

.ep-block-body {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-variant-numeric: lining-nums;
  font-size: clamp(14px, 2vw, 15.5px);
  letter-spacing: 0.03em;
  line-height: 2;
  margin-top: 12px;
  opacity: 0.97;
}

.ep-quote {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(19px, 3vw, 23px);
  line-height: 1.6;
  margin-top: 6px;
}
.ep-quote-ref {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  margin-top: 8px;
  opacity: 0.85;
}

/* map / calendar links */
.ep-links { margin-top: 16px; }
.ep-links a {
  display: inline-block;
  margin: 6px 12px 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}
.ep-links a:hover { opacity: 1; }

/* The RSVP call — firmly a button: the page's frame colour as its ground,
   the accent as its ink, sized like a printed plate. */
.ep-links a.ep-rsvp {
  display: inline-block;
  margin-top: 12px;
  padding: 14px 32px 13px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.26em;
  background: var(--line);
  color: var(--accent, var(--ink));
  border: 1px solid var(--line);
  border-radius: 3px;
  opacity: 1;
  transition: filter 0.3s ease;
}
.ep-links a.ep-rsvp:hover, .ep-links a.ep-rsvp:focus-visible {
  filter: brightness(1.35);
  opacity: 1;
}

/* back control — first row of the scroll content, above the frame; it
   scrolls away with the page like everything else */
.ep-back {
  display: block;
  margin: 6px 0 18px 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.75;
  transition: opacity 0.3s ease;
  padding: 6px 2px;
}
.ep-back:hover, .ep-back:focus-visible { opacity: 1; }

/* --- the three themes, colours sampled from the printed cards --- */
.theme-sangeet {
  --bg: #3f1c54;
  --ink: #d494f2;
  --line: #241040;
  --accent: #d99af7;
  --title: #eabeff;
  background-image: url('assets/page-sangeet-mobile.jpg');
}
.theme-wedding {
  --bg: #6c3110;
  --ink: #f9dfae;
  --line: #46220e;
  --accent: #ffd699;
  --title: #ffd699;
  background-image: url('assets/page-wedding-mobile.jpg');
}
.theme-reception {
  --bg: #0b3d2d;
  --ink: #cacf8e;
  --line: #062011;
  --accent: #d6da9c;
  --title: #90a68b;
  background-image: url('assets/page-reception-mobile.jpg');
}

@media (min-width: 768px) {
  .theme-sangeet   { background-image: url('assets/page-sangeet-desktop.jpg'); }
  .theme-wedding   { background-image: url('assets/page-wedding-desktop.jpg'); }
  .theme-reception { background-image: url('assets/page-reception-desktop.jpg'); }
}

@media (max-width: 480px) {
  .ep-scroll { padding-left: 26px; padding-right: 26px; }
}

/* --- Credits — blends with each surface, links to the studios --- */
.credits {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  text-align: center;
  line-height: 2.2;
  color: inherit;
  opacity: 0.8;
}
.credits a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line, currentColor);
  padding-bottom: 2px;
  transition: opacity 0.3s ease;
}
.credits a:hover { opacity: 0.7; }

/* On the event pages the credit is a whisper at the very end. */
.event-page .credits {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  opacity: 0.45;
  margin-top: 48px;
}

/* On the cards view: the RSVP call sits where guests come to rest — a
   frosted pill over the artwork. In the mobile column it flows after the
   last card and comes to rest just above the bottom edge; on desktop it
   pins there. Faded in by JS once the cards settle. */
.rsvp-cards {
  display: block;
  width: max-content;
  max-width: 88vw;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: #f9dfae;                          /* the wedding card's cream ink */
  background: #6a2e0e;                     /* on its terracotta ground */
  border: 1px solid #46220e;               /* framed like the printed card */
  box-shadow: 0 0 0 3px #6a2e0e, 0 6px 18px rgba(61, 39, 23, 0.35);
  padding: 18px 38px 16px;
  opacity: 0;
  margin-top: -1vh;
  transition: background 0.3s ease, color 0.3s ease;
}
.rsvp-cards:hover, .rsvp-cards:focus-visible {
  background: #7b3812;
  color: #ffd699;
}

/* The password rides under the call as a quiet subline (never uppercased —
   it's case-sensitive). */
.rsvp-pass {
  display: block;
  margin-top: 7px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  text-transform: none;
  opacity: 0.85;
}

@media (min-width: 768px) {
  .rsvp-cards {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    margin-top: 0;
    padding: 12px 26px 11px;      /* trimmer than mobile — it shares the row with the card hints */
    font-size: 12px;
  }
  .rsvp-cards .rsvp-pass {
    margin-top: 5px;
    font-size: 10px;
  }
}

/* Gentle chevron nudging phones to scroll for the remaining cards */
#scroll-hint {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  opacity: 0;                       /* faded in by JS only when there is overflow */
  pointer-events: none;
}
#scroll-hint span {
  display: block;
  width: 13px;
  height: 13px;
  border-right: 1.5px solid #f6ead0;   /* light cream — the hint always rides over the dark peeking card */
  border-bottom: 1.5px solid #f6ead0;
  transform: rotate(45deg);
  filter: drop-shadow(0 1px 3px rgba(46, 26, 14, 0.55));
}

/* --- Idle caption --- */
#caption {
  position: absolute;
  z-index: 4;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.32em;
  text-indent: 0.32em;              /* re-centre letterspaced text */
  text-transform: uppercase;
  white-space: nowrap;
  color: #8a6540;                   /* warm brown, low opacity via GSAP fade to 0.55 */
  opacity: 0;
  pointer-events: none;
}