/* ============================================================
   Daniel & Nikhita — envelope opening sequence
   Plum sampled from the envelope PNGs: #573d43
   ============================================================ */

/* --- Suite fonts (designer-supplied, same as the printed cards) --- */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('assets/fonts/Cormorant%20Garamond/CormorantGaramond-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('assets/fonts/Cormorant%20Garamond/CormorantGaramond-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('assets/fonts/Cormorant%20Garamond/CormorantGaramond-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('assets/fonts/Cormorant%20Garamond/CormorantGaramond-MediumItalic.ttf') format('truetype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Beautifully Delicious';
  src: url('assets/fonts/Beautifully%20Delicious%20Script%20Regular/FontsFree-Net-BeautifullyDelicious.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Great Vibes';
  src: url('assets/fonts/Great%20Vibes/GreatVibes-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hero';
  src: url('assets/fonts/Hero/HeroLight-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hero';
  src: url('assets/fonts/Hero/HeroLight-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hero';
  src: url('assets/fonts/Hero/HeroLight-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}

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

html,
body {
  height: 100%;
  background: #573d43;
  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: #573d43;
  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 {
  position: absolute;
  display: block;
  max-width: none;                  /* JS sets exact pixel sizes — never let CSS shrink them */
}

/* --- Watercolour 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 painting — 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(31, 15, 19, 0.34),
    rgba(31, 15, 19, 0.12) 40%,
    rgba(31, 15, 19, 0) 100%
  );
  pointer-events: none;
}

/* --- Invitation cards over the watercolour --- */
#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(24, 12, 15, 0.35), rgba(24, 12, 15, 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: 'Hero', "Avenir Next", "Century Gothic", sans-serif;
  font-weight: 400;
  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 */
}

.event-page {
  position: absolute;
  inset: 0;
  display: none;
  background: var(--bg);
  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. Madhuramveppu & the evening page use the double line;
   the wedding card's frame is a single, slightly bolder line. */
.ep-content {
  position: relative;
  width: 100%;
  text-align: center;
  border: 1px solid var(--line);
  padding: clamp(64px, 10vh, 100px) clamp(20px, 4vw, 56px) clamp(48px, 8vh, 84px);
}
.ep-content::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid var(--line);
  pointer-events: none;
}
.theme-wedding .ep-content { border-width: 2px; }
.theme-wedding .ep-content::after { display: none; }

/* 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: 'Hero', sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  opacity: 0.85;
  line-height: 2.1;
}

.ep-lede {
  font-family: 'Hero', sans-serif;
  font-weight: 300;
  font-size: 13.5px;
  letter-spacing: 0.08em;
  line-height: 2;
  opacity: 0.92;
  margin-top: 18px;
}

.ep-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: clamp(22px, 5.8vw, 52px);   /* sized so MADHURAMVEPPU fits the frame on every screen */
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  text-transform: uppercase;
  line-height: 1.2;
  margin-top: 26px;
}

.ep-script {
  font-family: 'Great Vibes', 'Snell Roundhand', 'Edwardian Script ITC', cursive;
  font-weight: 400;
  font-size: clamp(32px, 5.2vw, 46px);
  letter-spacing: normal;
  line-height: 1.1;
  margin: 12px auto 6px;   /* auto sides — keep the box centred inside the frame */
}

.ep-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: clamp(30px, 6vw, 52px);
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
}

.ep-date {
  font-family: 'Hero', sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  margin-top: 34px;
  color: var(--accent, inherit);
}
.ep-time {
  font-family: 'Hero', sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  margin-top: 10px;
  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: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  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: 'Hero', sans-serif;
  font-weight: 400;
  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: 'Hero', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
}

.ep-block-body {
  font-family: 'Hero', sans-serif;
  font-weight: 300;
  font-size: 13.5px;
  letter-spacing: 0.1em;
  line-height: 2;
  margin-top: 12px;
  opacity: 0.95;
}

.ep-quote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(19px, 3vw, 23px);
  line-height: 1.6;
  margin-top: 6px;
}
.ep-quote-ref {
  font-family: 'Cormorant Garamond', 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: 'Hero', sans-serif;
  font-weight: 400;
  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; }

/* 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: 'Hero', sans-serif;
  font-weight: 400;
  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-madhuramveppu {
  --bg: #7e4e3b;
  --ink: #f3e6cd;
  --line: rgba(243, 230, 205, 0.5);
  --accent: #f9edd2;
}
.theme-wedding {
  --bg: #f4d2ba;
  --ink: #3a2a33;
  --line: rgba(58, 42, 51, 0.4);
  --accent: #3a2a33;
}
.theme-cocktail {
  --bg: #0b4245;
  --ink: #f2e7cd;
  --line: rgba(242, 231, 205, 0.42);
  --accent: #e5c994;
}

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

/* --- Credits — blends with each surface, links to the studios --- */
.credits {
  font-family: 'Hero', sans-serif;
  font-weight: 400;
  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: a whisper of frost behind the credits — no border,
   two stacked lines. In the mobile column it flows after the last card and
   comes to rest just above the bottom edge; on desktop it pins there. */
.credits-cards {
  width: max-content;
  max-width: 88vw;
  color: #53392b;
  text-shadow: 0 1px 8px rgba(255, 250, 240, 0.8);
  background: rgba(248, 241, 229, 0.32);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 4px;
  padding: 8px 18px 7px;
  opacity: 0;
  margin-top: -1vh;
}
.credits-cards a { border-bottom-color: rgba(107, 74, 52, 0.45); }

@media (min-width: 768px) {
  .credits-cards {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    margin-top: 0;
  }
  .credits-cards br { display: none; }   /* one line on desktop, two on mobile */
}

/* 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 #f0dcb4;
  border-bottom: 1.5px solid #f0dcb4;
  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: 'Hero', "Avenir Next", "Century Gothic", sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.32em;
  text-indent: 0.32em;              /* re-centre letterspaced text */
  text-transform: uppercase;
  white-space: nowrap;
  color: #d3b078;                   /* soft gold, low opacity via GSAP fade to 0.55 */
  opacity: 0;
  pointer-events: none;
}