/* Palette taken from the Canva pages: one colour per ceremony. */
:root {
  --cream: #f6e3c9;
  --cream-2: #f6e9bd;
  --gold: #c9a35a;
  --gold-soft: rgba(201, 163, 90, 0.55);
  --ink: #3a1a0c;
  --bg: #3d0c09;
  --maroon: #5a1712;
  --paper: #f7eedc;
  --paper-ink: #4a1410;
  --paper-muted: #8a5a3c;
  --script: "Great Vibes", "Snell Roundhand", cursive;
  --display: "Cinzel", "Trajan Pro", serif;
  --serif: "Ibarra Real Nova", Georgia, serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --card-w: min(100vw - 24px, 560px);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 64px;
}

body {
  margin: 0;
  min-height: 100svh;
  color: var(--cream);
  font-family: var(--serif);
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 120% 60% at 50% 0%, rgba(150, 40, 25, 0.55), transparent 70%),
    radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.45), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='72'%3E%3Cg fill='%23d8a85a' fill-opacity='0.07'%3E%3Cpath d='M21 10l3 8 8 3-8 3-3 8-3-8-8-3 8-3z'/%3E%3Cpath d='M63 46l2.4 6 6 2.4-6 2.4-2.4 6-2.4-6-6-2.4 6-2.4z'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.locked {
  overflow: hidden;
}

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

button {
  font: inherit;
  color: inherit;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ---------- Canva card renderer ---------- */

.card {
  position: relative;
  width: var(--card-w);
  aspect-ratio: var(--w) / var(--h);
  container-type: inline-size;
  overflow: hidden;
  border-radius: 6px;
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  user-select: none;
  -webkit-user-select: none;
}

.card > .bg,
.card > .layer {
  position: absolute;
  pointer-events: none;
}

.card > .bg {
  inset: 0;
  width: 100%;
  height: 100%;
}

.card .layer.tappable {
  pointer-events: auto;
  cursor: pointer;
}

.card .txt {
  position: absolute;
  margin: 0;
  text-align: center;
  text-shadow: 0 1px 2px rgba(40, 10, 0, 0.35);
}

.card .txt.line {
  white-space: nowrap;
}

.card .txt b {
  font-weight: 700;
}

.card .ornament svg {
  display: block;
  width: 100%;
  height: auto;
}

.card .layer.fit-bottom {
  object-fit: cover;
  object-position: 50% 100%;
}

.card .layer.flip-x {
  scale: -1 1;
}

.f-sans {
  font-family: "Open Sans", system-ui, sans-serif;
  font-weight: 600;
}

.hero-lead,
.closing h2,
.closing p {
  text-wrap: balance;
}

.card .txt sup {
  font-size: 0.6em;
  vertical-align: 0.45em;
  line-height: 0;
}

.f-script {
  /* The printed cards set the names in a copperplate script (Snell Roundhand style). */
  font-family: "Pinyon Script", "Snell Roundhand", var(--script);
}
.f-display {
  font-family: var(--display);
  font-weight: 500;
}
.f-serif {
  font-family: var(--serif);
}

/* ---------- Intro: envelope, card slides out, gatefold opens ---------- */

.intro {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  padding: 16px;
  overflow: hidden;
  transition:
    opacity 1.1s ease,
    visibility 1.1s;
}

/* The backdrop is a separate layer so it can dissolve into the page underneath. */
.intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at 50% 40%, rgba(170, 60, 30, 0.45), transparent 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='72'%3E%3Cg fill='%23d8a85a' fill-opacity='0.07'%3E%3Cpath d='M21 10l3 8 8 3-8 3-3 8-3-8-8-3 8-3z'/%3E%3Cpath d='M63 46l2.4 6 6 2.4-6 2.4-2.4 6-2.4-6-6-2.4 6-2.4z'/%3E%3C/g%3E%3C/svg%3E");
}

.intro.enter::before {
  opacity: 0;
}

.intro.instant {
  transition: none;
}

.intro.gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* The stage is the envelope's footprint; everything inside is sized from it. */
.stage {
  --env-w: min(100vw - 40px, (100svh - 120px) * 1148 / 1536, 600px);
  position: relative;
  width: var(--env-w);
  aspect-ratio: 1148 / 1536;
  perspective: 1600px;
  transition:
    transform 1.2s cubic-bezier(0.6, 0, 0.3, 1),
    opacity 1.2s ease;
}

.stage .card {
  --card-w: 100%;
}

.env-front,
.env-back {
  position: absolute !important;
  inset: 0;
  transition:
    transform 1.1s cubic-bezier(0.5, 0, 0.3, 1),
    opacity 1.1s ease;
}

.env-front {
  z-index: 3;
  border-radius: 4px;
}

.env-back {
  z-index: 1;
  border-radius: 4px;
  background: #4a1510;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}

.flap {
  position: absolute;
  top: 0;
  left: -0.5%;
  z-index: 4;
  width: 101%;
  aspect-ratio: 1148 / 420;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.35));
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.flap-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flap-face svg {
  display: block;
  width: 100%;
  height: 100%;
}

.flap-inside {
  transform: rotateY(180deg);
}

.envelope-hit {
  position: absolute;
  inset: 0;
  z-index: 6;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* The printed card waits inside the envelope. */
.letter {
  position: absolute;
  top: 3%;
  left: 3%;
  z-index: 2;
  width: 94%;
  aspect-ratio: 1080 / 1446;
  perspective: 1400px;
  cursor: pointer;
  transform-origin: 0 0;
  transition: transform 1.1s cubic-bezier(0.5, 0, 0.25, 1);
  outline: none;
}

.letter:focus-visible {
  box-shadow: 0 0 0 3px #ffd27a;
}

.gate-inside {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.gate-inside::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 190, 110, 0.28), transparent 42%),
    radial-gradient(ellipse at 50% 45%, #7e2318 0%, #4c110c 55%, #250604 100%);
  box-shadow:
    inset 0 0 0 10px rgba(0, 0, 0, 0),
    inset 0 0 0 11px rgba(231, 185, 110, 0.55),
    inset 0 0 60px rgba(0, 0, 0, 0.55);
  transition: opacity 0.9s ease;
}


.gate-inside .mandala {
  width: 200%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  transition:
    opacity 1.4s ease 0.5s,
    transform 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
}

.stage.gates-open .gate-inside .mandala {
  opacity: 0.4;
  transform: translate(-50%, -50%);
}

/* The mandala rides with the flying disc and lands as the hero's own: same size, same spin. */
.intro.enter .gate-inside .mandala {
  color: #b8862f;
  transition: color 1.4s ease;
}

.gate-inside .medallion {
  width: 64%;
  filter: drop-shadow(0 0 28px rgba(255, 196, 120, 0.4)) drop-shadow(0 14px 24px rgba(0, 0, 0, 0.45));
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity 1s ease 0.5s,
    transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
}

/* The gates part at the centre of the painted door, not the centre of the card. */
.letter {
  --split: 0.51296;
}

.gate {
  position: absolute;
  top: 0;
  width: calc(var(--split) * 100%);
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 1.8s cubic-bezier(0.55, 0.05, 0.25, 1);
}

.gate-left {
  left: 0;
  transform-origin: 0 50%;
}

.gate-right {
  left: calc(var(--split) * 100%);
  width: calc((1 - var(--split)) * 100%);
  transform-origin: 100% 50%;
}

.gate-face,
.gate-back {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.gate-face .card {
  position: absolute;
  top: 0;
  width: calc(100% / var(--split));
  border-radius: 0;
  box-shadow: none;
}

.gate-left .gate-face .card {
  left: 0;
}

.gate-right .gate-face .card {
  left: calc(-100% * var(--split) / (1 - var(--split)));
  width: calc(100% / (1 - var(--split)));
}

/* The fold line down the middle of the closed card */
.gate-left .gate-face::after,
.gate-right .gate-face::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0));
}

.gate-left .gate-face::after {
  right: 0;
  scale: -1 1;
}

.gate-right .gate-face::after {
  left: 0;
}

.gate-back {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 50% 50%, rgba(184, 138, 82, 0.35) 1.5px, transparent 2px) 0 0 / 22px 22px,
    #f2e6cf;
}

/* Steps, added one by one to the stage */
.stage.flap-open .flap {
  transform: rotateX(180deg);
}

.stage.flap-behind .flap {
  z-index: 1;
}

.stage.letter-out .letter {
  transform: translateY(-58%);
}

.stage.letter-front .letter {
  z-index: 5;
  transform: translate(-3.19%, -3.19%) scale(1.0638);
}

.stage.letter-front .env-front,
.stage.letter-front .env-back,
.stage.letter-front .flap {
  transform: translateY(115%);
  opacity: 0;
  transition:
    transform 1.1s cubic-bezier(0.5, 0, 0.3, 1),
    opacity 0.6s ease;
}

.stage.letter-front .flap {
  transform: translateY(115%) rotateX(180deg);
}

.stage.letter-front .envelope-hit {
  display: none;
}

.stage.gates-open .gate-left {
  transform: rotateY(-112deg);
}

.stage.gates-open .gate-right {
  transform: rotateY(112deg);
}

.stage.gates-open .gate-inside .medallion {
  opacity: 1;
  transform: none;
}

/* Leaving: everything dissolves except the logo, which flies to its place on the page. */
.intro.enter .gate,
.intro.enter .gate-inside::before,
.intro.enter .hint,
.intro.enter .skip {
  opacity: 0;
}

body.landed .hero > .hero-arch {
  opacity: 1;
  transform: none;
  transition: none;
}

.hint {
  position: relative;
  min-height: 1.4em;
  margin: 0;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.85;
  animation: breathe 2.4s ease-in-out infinite;
}

.skip {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 14px;
  z-index: 2;
  padding: 6px 12px;
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
  font-size: 12px;
  letter-spacing: 0.08em;
  cursor: pointer;
}

/* Guest name, handwritten on the first ruled line of the envelope */
.guest {
  position: absolute;
  margin: 0;
  color: #7f2016;
  font-family: var(--script);
  /* Half-leading of 0.18em keeps the tall script capitals inside the box. */
  line-height: 1.36;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

/* ---------- Top bar ---------- */

.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: max(8px, env(safe-area-inset-top)) 12px 8px;
  background: linear-gradient(to bottom, rgba(40, 8, 6, 0.85), rgba(40, 8, 6, 0.55));
  border-bottom: 1px solid rgba(216, 168, 90, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transform: translateY(-110%);
}

.topbar.show {
  transform: none;
}

.topbar-mark {
  flex: none;
  color: var(--cream);
  text-decoration: none;
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.08em;
}

.topbar-mark span {
  font-family: var(--script);
  font-size: 1.2em;
}

.chips {
  display: flex;
  gap: 6px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  justify-content: safe center;
}

@media (max-width: 520px) {
  .topbar-mark {
    display: none;
  }

  .chips .chip {
    padding: 6px 8px;
    font-size: min(11px, 2.85vw);
    letter-spacing: 0.03em;
  }
}

@media (max-width: 380px) {
  .topbar {
    padding-inline: 8px;
  }

  .chips {
    gap: 4px;
  }

  .chips .chip {
    padding: 5px 6px;
    letter-spacing: 0.02em;
  }
}

.chips::-webkit-scrollbar {
  display: none;
}

.chip {
  flex: none;
  padding: 6px 12px;
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  color: var(--cream);
  text-decoration: none;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.15);
}

.chip[aria-current="true"] {
  background: var(--cream);
  color: var(--ink);
}

/* Petal and music switches sit at the end of the top bar, clear of every section. */
.topbar-tools {
  display: flex;
  flex: none;
  gap: 6px;
}

.tool {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--gold-soft);
  border-radius: 50%;
  background: rgba(30, 8, 2, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.tool svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tool[aria-pressed="true"] {
  background: var(--cream);
  color: var(--ink);
}

/* ---------- Hero ---------- */

main {
  position: relative;
  z-index: 1;
}

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 90px 20px 50px;
  text-align: center;
  overflow-x: clip;
}

.mantra {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.08em;
}

.hero-lead {
  max-width: 30ch;
  margin: 8px 0 0;
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
}

.hero-names {
  margin: 0;
  font-weight: 400;
  line-height: 1;
  outline: none;
}

.hero-names em {
  font-style: normal;
}

.hero-dates {
  margin: 0;
  font-family: var(--display);
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.countdown {
  margin-top: 10px;
}

.countdown-label {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #ffd38a;
}

.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.countdown-grid div {
  min-width: 66px;
  padding: 10px 6px 8px;
  border: 1px solid var(--gold-soft);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}

.countdown-grid b {
  display: block;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.countdown-grid span {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
}

.scroll-cue {
  margin-top: 18px;
  color: var(--cream);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-decoration: none;
  opacity: 0.8;
}

.scroll-cue::after {
  content: "";
  display: block;
  width: 1px;
  height: 36px;
  margin: 10px auto 0;
  background: linear-gradient(var(--cream), transparent);
  animation: drip 2s ease-in-out infinite;
}

/* ---------- Ceremony details ---------- */

/* Details printed on cream card stock, like the physical invitation */
.details {
  position: relative;
  width: var(--card-w);
  padding: 26px 20px 22px;
  border-radius: 6px;
  color: var(--paper-ink);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.6), transparent 60%),
    var(--paper);
  box-shadow:
    0 30px 60px -24px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(150, 100, 50, 0.25);
  text-align: center;
}

.details::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(184, 138, 82, 0.55);
  border-radius: 3px;
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px rgba(184, 138, 82, 0.35);
  pointer-events: none;
}

.details h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--maroon);
}

.details .sub {
  margin: 0;
  font-family: var(--script);
  font-size: 28px;
  color: #a06a2c;
}

.details .date {
  margin: 10px 0 12px;
  font-size: 18px;
  font-weight: 700;
}

.details dl {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  gap: 4px 14px;
  margin: 0 0 14px;
  font-size: 16px;
}

.details dt {
  text-align: right;
  color: var(--paper-muted);
}

.details dd {
  margin: 0;
  text-align: left;
  font-weight: 600;
}

.details address {
  font-style: normal;
  font-size: 16px;
  line-height: 1.45;
}

.details address strong {
  display: block;
  font-weight: 700;
}

.details .btn {
  background: var(--maroon);
  color: #fbeed6;
}

.details .btn-ghost {
  background: transparent;
  color: var(--maroon);
  border-color: rgba(90, 23, 18, 0.45);
}

.details .cal-menu[open] summary {
  background: rgba(90, 23, 18, 0.08);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--cream);
  border-color: var(--gold-soft);
}

.btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cal-menu {
  position: relative;
}

.cal-menu summary {
  list-style: none;
}

.cal-menu summary::-webkit-details-marker {
  display: none;
}

.cal-options {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: 5;
  min-width: 200px;
  transform: translateX(-50%);
  padding: 6px;
  border-radius: 12px;
  background: #fff8ec;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

.cal-options a,
.cal-options button {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  font-size: 15px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.cal-options a:hover,
.cal-options button:hover {
  background: #f3e2c6;
}

/* ---------- Closing ---------- */

.closing {
  padding: 60px 20px calc(80px + env(safe-area-inset-bottom));
  text-align: center;
}

.closing-icon {
  width: 64px;
  margin: 0 auto 12px;
  filter: drop-shadow(0 0 10px rgba(255, 210, 120, 0.4));
}

.closing h2 {
  margin: 0;
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(38px, 10vw, 56px);
}

.closing p {
  margin: 6px 0 0;
  font-size: 17px;
  font-style: italic;
}


/* ---------- Page colour follows the card on top ---------- */

body[data-theme="mehendi"] {
  --bg: #22341e;
}

body[data-theme="haldi"] {
  --bg: #5e3c08;
}

body[data-theme="wedding"] {
  --bg: #450e0a;
}

body[data-theme="reception"] {
  --bg: #0d1834;
}

/* ---------- Ceremonies deck ---------- */

.deck-section {
  padding: 64px 12px 56px;
}

.deck-head {
  margin-bottom: 26px;
  text-align: center;
}

.deck-head .kicker {
  margin: 0;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #e7b96e;
}

.deck-head h2 {
  margin: 4px 0 0;
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(44px, 12vw, 64px);
  line-height: 1.05;
}

.deck-sub {
  min-height: 1.4em;
  margin: 6px 0 0;
  font-size: 16px;
  font-style: italic;
  opacity: 0.9;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.deck-sub.swap {
  opacity: 0;
  transform: translateY(4px);
}

.deck-hint {
  margin: 4px 0 0;
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.55;
}

.deck-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.deck-wrap {
  --card-w: min(100vw - 24px, (100svh - 120px) * 0.72, 580px);
  width: var(--card-w);
}

.deck {
  position: relative;
  width: 100%;
  touch-action: pan-y;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}

.deck:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 210, 122, 0.7);
  border-radius: 8px;
}

.deck-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform-origin: 50% 85%;
  will-change: transform;
  cursor: grab;
}

.deck.dragging .deck-card {
  transition: none;
  cursor: grabbing;
}

.deck-card .card {
  --card-w: 100%;
  box-shadow:
    0 28px 50px -20px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.05);
}

.deck-card:not(.is-top) .card {
  filter: brightness(0.78) saturate(0.9);
}

.deck-card .card {
  transition: filter 0.6s ease;
}

.deck-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.deck-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(231, 185, 110, 0.55);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

.deck-arrow:hover:not(:disabled) {
  background: rgba(231, 185, 110, 0.18);
}

.deck-arrow:active:not(:disabled) {
  transform: scale(0.94);
}

.deck-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.deck-arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.deck-dots {
  display: flex;
  gap: 8px;
}

.dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(246, 227, 201, 0.35);
  cursor: pointer;
}

.dot[aria-current="true"] {
  width: 24px;
  background: #e7b96e;
}

.deck-count {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* One panel per ceremony in the same spot; the active one fades in. */
.deck-details {
  --card-w: min(100vw - 24px, (100svh - 120px) * 0.72, 580px);
  display: grid;
  width: var(--card-w);
}

.deck-details .details {
  grid-area: 1 / 1;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
}

.deck-details .details.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ---------- Mandala behind the logo ---------- */

.mandala {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  color: #e7b96e;
  opacity: 0.32;
  pointer-events: none;
}

.mandala svg {
  display: block;
  width: 100%;
  height: 100%;
  animation: spin 120s linear infinite;
}

.hero-arch {
  position: relative;
}



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

/* ---------- Reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1s ease,
    transform 1.2s var(--ease-out);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

.hero > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 1.1s ease,
    transform 1.3s var(--ease-out);
}

body.entered .hero > * {
  opacity: 1;
  transform: none;
}

body.entered .hero > :nth-child(2) {
  transition-delay: 0.15s;
}
body.entered .hero > :nth-child(3) {
  transition-delay: 0.35s;
}
body.entered .hero > :nth-child(4) {
  transition-delay: 0.5s;
}
body.entered .hero > :nth-child(5) {
  transition-delay: 0.65s;
}
body.entered .hero > :nth-child(6) {
  transition-delay: 0.8s;
}
body.entered .hero > :nth-child(n + 7) {
  transition-delay: 0.95s;
}

/* ---------- Toast and petals ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 60;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font-size: 15px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 20px);
  transition:
    transform 0.4s var(--ease-out),
    opacity 0.4s,
    visibility 0.4s;
}

.toast.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

#petals {
  position: fixed;
  inset: 0;
  z-index: 55;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- Layer animations (start when a card scrolls into view) ---------- */

.card .layer,
.card .txt {
  --d: calc(var(--i, 0) * 70ms);
}

.card.anim .layer.garland,
.card.anim .layer.swag {
  transform-origin: 50% 0;
  opacity: 0;
  transform: translateY(-18%);
}

.card.anim.in .layer.garland,
.card.anim.in .layer.swag {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.8s ease var(--d),
    transform 1.6s cubic-bezier(0.22, 1, 0.36, 1) var(--d);
  animation: sway 5s ease-in-out calc(1.4s + var(--d)) infinite;
}

.card.anim.in .layer.swag {
  animation-name: sway-soft;
}

.card .layer.garland.ring {
  animation: ring 1.2s ease-out !important;
}

.card.anim .layer.plant,
.card.anim .layer.peacock {
  transform-origin: 50% 100%;
  opacity: 0;
  transform: scale(0.88);
}

.card.anim.in .layer.plant,
.card.anim.in .layer.peacock {
  opacity: 1;
  transform: none;
  transition:
    opacity 1s ease var(--d),
    transform 1.6s var(--ease-out) var(--d);
  animation: breeze 7s ease-in-out calc(1.6s + var(--d)) infinite;
}

.card.anim.in .layer.peacock {
  animation-name: breathe-scale;
}

.card.anim .layer.pot,
.card.anim .layer.base,
.card.anim .layer.static,
.card.anim .layer.lamp,
.card.anim .layer.bird-sit {
  opacity: 0;
  transform: translateY(6%);
}

.card.anim.in .layer.pot,
.card.anim.in .layer.base,
.card.anim.in .layer.static,
.card.anim.in .layer.lamp,
.card.anim.in .layer.bird-sit {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.9s ease var(--d),
    transform 1.2s var(--ease-out) var(--d);
}

.card.anim.in .layer.lamp {
  animation: glow 2.6s ease-in-out calc(1.2s + var(--d)) infinite;
}

.card.anim .layer.bird {
  opacity: 0;
  transform: translate(-60%, 40%) rotate(-12deg);
}

.card.anim.in .layer.bird {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.8s ease 0.4s,
    transform 2.2s var(--ease-out) 0.4s;
  animation: hover 3.2s ease-in-out 2.6s infinite;
}

.card.anim .layer.icon,
.card.anim .layer.monogram {
  opacity: 0;
  transform: scale(0.7);
}

.card.anim.in .layer.icon,
.card.anim.in .layer.monogram {
  opacity: 1;
  transform: none;
  transition:
    opacity 1s ease 0.2s,
    transform 1.2s var(--ease-out) 0.2s;
}

.card.anim .layer.divider {
  clip-path: inset(0 50% 0 50%);
}

.card.anim.in .layer.divider {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.2s var(--ease-out) calc(0.3s + var(--d));
}

.card.anim .txt {
  opacity: 0;
  transform: translateY(0.8cqw);
}

.card.anim.in .txt {
  opacity: 1;
  transform: none;
}

@keyframes sway-soft {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(1.5%);
  }
}

@keyframes ring {
  0% {
    transform: rotate(0);
  }
  15% {
    transform: rotate(9deg);
  }
  35% {
    transform: rotate(-7deg);
  }
  55% {
    transform: rotate(4deg);
  }
  75% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(0);
  }
}

@keyframes breathe {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

@keyframes drip {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
  }
  51% {
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}


@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* ---------- Hero on the cover's paper stock ---------- */

/* The cream of the logo becomes the page itself, framed like the printed cover. */
.hero {
  --ink-hero: #6b1c11;
  --terra: #a9442b;
  position: relative;
  color: var(--ink-hero);
  background-color: #f5e5c6;
  background-image:
    radial-gradient(ellipse 70% 45% at 50% 36%, #fde5b9 0%, rgba(253, 229, 185, 0.85) 40%, rgba(253, 229, 185, 0) 75%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='60'%3E%3Cg fill='%23c49a48' opacity='0.3'%3E%3Cg transform='translate(19 15)'%3E%3Cellipse cy='-6' rx='2.6' ry='5'/%3E%3Cellipse cy='6' rx='2.6' ry='5'/%3E%3Cellipse cx='-6' rx='5' ry='2.6'/%3E%3Cellipse cx='6' rx='5' ry='2.6'/%3E%3C/g%3E%3Cg transform='translate(57 45)'%3E%3Cellipse cy='-6' rx='2.6' ry='5'/%3E%3Cellipse cy='6' rx='2.6' ry='5'/%3E%3Cellipse cx='-6' rx='5' ry='2.6'/%3E%3Cellipse cx='6' rx='5' ry='2.6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  box-shadow: inset 0 -40px 60px -40px rgba(120, 50, 20, 0.25);
}

/* Terracotta band and gold rule, as on the cover's edge */
.hero::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 8px solid var(--terra);
  outline: 1.5px solid #c49a48;
  outline-offset: -14px;
  border-radius: 2px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease 0.3s;
}

body.entered .hero::before {
  opacity: 1;
}

.hero .mantra {
  color: var(--terra);
}

.hero-names {
  color: var(--ink-hero);
  text-shadow: none;
}

.hero-names em {
  color: #b8862f;
}

.hero-dates {
  color: var(--terra);
}

.hero .countdown-label {
  color: #9a6a22;
}

.hero .countdown-grid div {
  border-color: rgba(169, 68, 43, 0.35);
  background: rgba(255, 252, 244, 0.6);
  box-shadow: 0 6px 14px -10px rgba(110, 45, 20, 0.5);
}

.hero .scroll-cue {
  color: var(--ink-hero);
}

.hero .scroll-cue::after {
  background: linear-gradient(var(--terra), transparent);
}

/* Over the cream hero the top bar turns to the same paper, in glass. */
.topbar {
  transition:
    transform 0.6s var(--ease-out),
    background 0.8s ease,
    border-color 0.8s ease;
}

body[data-theme="home"] .topbar {
  background: linear-gradient(to bottom, rgba(247, 234, 208, 0.92), rgba(247, 234, 208, 0.72));
  border-bottom-color: rgba(169, 68, 43, 0.22);
}

body[data-theme="home"] .topbar-mark,
body[data-theme="home"] .chip {
  color: #6b1c11;
}

body[data-theme="home"] .chip {
  border-color: rgba(169, 68, 43, 0.4);
  background: rgba(255, 252, 244, 0.5);
}

.chip,
.topbar-mark {
  transition:
    background 0.6s ease,
    color 0.6s ease,
    border-color 0.6s ease;
}

/* Scalloped terracotta edge closing the hero, the same edge as the envelope flap */
.hero {
  z-index: 1;
  overflow: visible;
  overflow-x: clip;
  overflow-clip-margin: 0;
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -22px;
  height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='26'%3E%3Cpath d='M0 0H56V4C56 18 44 24 28 24S0 18 0 4Z' fill='%23a9442b'/%3E%3Cpath d='M0 9C2 19 14 22 28 22S54 19 56 9' fill='none' stroke='%23e6bf6e' stroke-width='1.4' stroke-dasharray='0 5' stroke-linecap='round'/%3E%3C/svg%3E")
    center top / 56px 26px repeat-x;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.3));
  pointer-events: none;
}

/* ---------- Card art follows the swipe ---------- */

@property --drag {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* Depth per layer: foreground moves most, text least, so the card reads as layered paper. */
.deck-card .card .layer,
.deck-card .card .txt {
  translate: calc(var(--drag) * var(--px, 0) * 1cqw) 0;
}

.deck-card .layer.plant,
.deck-card .layer.peacock,
.deck-card .layer.pot,
.deck-card .layer.lamp {
  --px: 3;
}

.deck-card .layer.base,
.deck-card .layer.static {
  --px: 1.6;
}

.deck-card .layer.garland,
.deck-card .layer.swag {
  --px: 1.2;
}

.deck-card .layer.bird {
  --px: 5;
}

.deck-card .layer.icon,
.deck-card .layer.divider,
.deck-card .txt {
  --px: -0.9;
}

/* Hanging garlands and bells swing from the card's real motion (see the pendulum in main.js).
   Neighbouring strings differ slightly in length, so they do not move in lockstep. */
.deck-card .layer.garland {
  rotate: calc(var(--swing, 0) * (0.85 + (var(--i, 0) - 6) * 0.025) * 1deg);
}

@media (prefers-reduced-motion: reduce) {
  .deck-card .card .layer,
  .deck-card .card .txt {
    translate: none;
  }

  .deck-card .layer.garland {
    rotate: none;
  }
}

/* A card arriving on top rebuilds quickly; the slow first-view build is for the first card only. */
.deck-card.arrive .card .layer,
.deck-card.arrive .card .txt {
  --d: calc(var(--i, 0) * 28ms);
}

/* ---------- Round medallion: the logo on a disc of its own cream, the mandala fitted to its rim ---------- */

.medallion {
  position: relative;
  aspect-ratio: 1;
}

.hero-arch.medallion {
  width: min(64vw, 290px);
  margin: 26px 0 18px;
}

.medallion .disc {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: radial-gradient(circle, #fde5b9 0 60%, #f7d9a6 100%);
  box-shadow:
    0 0 0 2px #c49a48,
    0 0 0 5px #fbe7c2,
    0 0 0 6.5px rgba(196, 154, 72, 0.75),
    0 22px 44px -18px rgba(80, 25, 10, 0.55);
}

/* Sized so the whole logo, lanterns and names included, sits inside the circle. */
.medallion .disc img {
  position: relative;
  width: 71%;
  translate: 0 2%;
  filter: none;
}

.medallion .mandala {
  width: 200%;
}

.hero-arch .mandala {
  color: #b8862f;
  opacity: 0.4;
}

/* ---------- Ceremony ribbon: one pill slides to the current ceremony ---------- */
.chips {
  position: relative;
}

.chip-pill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--cream);
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.75s cubic-bezier(0.65, 0, 0.35, 1),
    width 0.75s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.5s ease;
}

.chip-pill.show {
  opacity: 1;
}

.chips .chip {
  position: relative;
  transition:
    color 0.6s ease 0.1s,
    border-color 0.6s ease,
    background 0.6s ease;
}

.chips .chip[aria-current="true"] {
  background: transparent;
  border-color: transparent;
  color: var(--ink);
}

/* ---------- Gentler timing everywhere ---------- */
body {
  transition: background-color 1.6s cubic-bezier(0.45, 0, 0.55, 1);
}

.deck-sub {
  transition:
    opacity 0.45s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.deck-details .details {
  transition:
    opacity 0.6s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.6s;
}

.deck-details .details.is-active {
  transition:
    opacity 0.9s ease 0.25s,
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s,
    visibility 0s;
}

.dot {
  transition:
    width 0.7s cubic-bezier(0.65, 0, 0.35, 1),
    background 0.7s ease;
}

.deck-arrow {
  transition:
    background 0.4s ease,
    opacity 0.5s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.cal-options {
  animation: drop-in 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes drop-in {
  from {
    opacity: 0;
    transform: translate(-50%, 6px) scale(0.98);
  }
}

.btn {
  transition:
    background 0.35s ease,
    color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn:active {
  transform: scale(0.97);
}

/* ---------- Livelier card art ---------- */

@keyframes sway {
  0%,
  100% {
    transform: rotate(-1.2deg);
  }
  50% {
    transform: rotate(2.4deg);
  }
}

@keyframes breeze {
  0%,
  100% {
    transform: skewX(0deg) scaleY(1);
  }
  50% {
    transform: skewX(-2.6deg) scaleY(1.012);
  }
}

@keyframes hover {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-7%) rotate(-2deg);
  }
}

@keyframes breathe-scale {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.035);
  }
}

/* Lamps: a warm glow with a small irregular flicker, like a diya flame */
@keyframes glow {
  0%,
  100% {
    filter: drop-shadow(0 0 0.4cqw rgba(255, 190, 80, 0.35)) brightness(1);
  }
  30% {
    filter: drop-shadow(0 0 1.8cqw rgba(255, 196, 90, 0.9)) brightness(1.08);
  }
  38% {
    filter: drop-shadow(0 0 1.2cqw rgba(255, 180, 70, 0.6)) brightness(1.02);
  }
  60% {
    filter: drop-shadow(0 0 2.2cqw rgba(255, 200, 100, 0.95)) brightness(1.1);
  }
}

.card.anim .layer.garland,
.card.anim .layer.swag {
  transform: translateY(-34%);
}

.card.anim .layer.plant,
.card.anim .layer.peacock {
  transform: translateY(5%) scale(0.8);
}

.card.anim .layer.pot,
.card.anim .layer.base,
.card.anim .layer.static,
.card.anim .layer.lamp,
.card.anim .layer.bird-sit {
  transform: translateY(12%);
}

.card.anim .txt {
  transform: translateY(2.4cqw);
  filter: blur(3px);
}

.card.anim.in .txt {
  filter: none;
  transition:
    opacity 1s ease calc(0.25s + var(--d)),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) calc(0.25s + var(--d)),
    filter 1s ease calc(0.25s + var(--d));
}

.deck-card.arrive .card.anim.in .txt {
  transition-delay: calc(0.12s + var(--d));
}

/* A gold sheen sweeps across a card as it comes to the top. */
.deck-card .card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 236, 190, 0.32) 48%, rgba(255, 255, 255, 0.12) 52%, transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
}

.deck-card.arrive .card::after {
  animation: sheen 1.8s cubic-bezier(0.45, 0, 0.25, 1) 0.35s;
}

@keyframes sheen {
  to {
    transform: translateX(120%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .deck-card.arrive .card::after {
    animation: none;
  }

  .card.anim .txt {
    filter: none;
  }
}

/* ---------- Tap the print: venue for directions, date to save it ---------- */
.card img {
  -webkit-user-drag: none;
}

.card .hot {
  position: absolute;
  z-index: 4;
  display: block;
  border-radius: 1.6cqw;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.5s ease,
    box-shadow 0.5s ease;
}

.card .hot > summary {
  display: block;
  height: 100%;
  list-style: none;
  cursor: pointer;
}

.card .hot > summary::-webkit-details-marker {
  display: none;
}

.card .hot:hover .hot-tag,
.card .hot[open] .hot-tag,
.card .hot:focus-within .hot-tag {
  background: rgba(232, 196, 120, 0.3);
}

.card .hot:focus-visible,
.card .hot > summary:focus-visible {
  outline: 2px solid #ffd27a;
  outline-offset: 2px;
}

/* A small gold emblem just past the end of the printed block, so the tap is discoverable */
.card .hot-tag {
  position: absolute;
  left: calc(50% + var(--half, 22cqw) + 2.2cqw);
  top: 50%;
  display: grid;
  place-items: center;
  width: 6.4cqw;
  height: 6.4cqw;
  border: 1px solid rgba(232, 196, 120, 0.85);
  border-radius: 50%;
  background: rgba(30, 10, 5, 0.16);
  color: #f6e3c9;
  box-shadow: 0 0 0 0.5cqw rgba(232, 196, 120, 0.12);
  transform: translateY(-50%);
}

.card .hot-tag svg {
  width: 3.4cqw;
  height: 3.4cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

/* Icons enter exactly like the printed lines they belong to (same delay, rise and blur). */
.card .hot {
  --d: calc(var(--i, 0) * 70ms);
}

.deck-card.arrive .card .hot {
  --d: calc(var(--i, 0) * 28ms);
}

.card.anim .hot-tag {
  opacity: 0;
  translate: 0 2.4cqw;
  filter: blur(3px);
}

.card.anim.in .hot-tag {
  opacity: 1;
  translate: 0 0;
  filter: none;
  transition:
    opacity 1s ease calc(0.25s + var(--d)),
    translate 1.1s cubic-bezier(0.22, 1, 0.36, 1) calc(0.25s + var(--d)),
    filter 1s ease calc(0.25s + var(--d)),
    background 0.4s ease;
}

.deck-card.arrive .card.anim.in .hot-tag {
  transition-delay: calc(0.12s + var(--d)), calc(0.12s + var(--d)), calc(0.12s + var(--d)), 0s;
}

/* And they move with the text while a card is dragged. */
.deck-card .card .hot {
  translate: calc(var(--drag) * -0.9 * 1cqw) 0;
}

/* When a card comes to the top, its two icons pulse once so the taps are noticed */
.deck-card.arrive .card.in .hot-tag {
  animation: tag-pulse 1.6s ease-in-out 2s 2;
}

@keyframes tag-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0.5cqw rgba(232, 196, 120, 0.12);
  }
  50% {
    box-shadow: 0 0 0 1.6cqw rgba(232, 196, 120, 0);
    background: rgba(232, 196, 120, 0.28);
  }
}

.card .hot .cal-options {
  top: calc(100% + 6px);
  bottom: auto;
}

.deck-card:not(.is-top) .hot {
  pointer-events: none;
}

/* Stacked layout (the default): the details panel is replaced by the line under the heading. */
.deck-details {
  display: none;
}

@media (max-width: 360px) {
  .deck-nav {
    gap: 10px;
  }

  .deck-arrow {
    width: 38px;
    height: 38px;
  }
}

/* Leaving and returning cards fade over the same arc as their slide, so neither end pops. */
.deck-card {
  transition:
    transform 1.2s cubic-bezier(0.45, 0.05, 0.2, 1),
    opacity 1.1s cubic-bezier(0.45, 0.05, 0.2, 1),
    --drag 1.3s cubic-bezier(0.33, 1, 0.68, 1);
}

.deck-section {
  overflow-x: clip;
}

.deck {
  margin-bottom: 10px;
}

/* ---------- Ceremonies section fills one screen: heading on top, card centred, controls below ---------- */
.toran {
  width: min(100%, 520px);
  height: 34px;
  margin: 0 auto 14px;
  color: #e7b96e;
  opacity: 0.85;
}

.toran svg {
  display: block;
  width: 100%;
  height: 100%;
}

.toran .leaf {
  fill: #7d9a4a;
  opacity: 0.9;
}

.toran .bell {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: sway 3.6s ease-in-out infinite;
}

/* The section fills the screen under the top bar: heading, card centred, controls below. */
.deck-section {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--topbar-h));
  padding: 26px 12px 16px;
  box-sizing: border-box;
}

.deck-head {
  margin-bottom: 10px;
}

.deck-layout {
  flex: 1;
  justify-content: center;
  gap: 4px;
}

.toran {
  height: 26px;
  margin-bottom: 6px;
}

.deck-head h2 {
  font-size: clamp(38px, 10.5vw, 52px);
}

.deck-hint {
  margin-top: 2px;
}

/* Card size from the height left after heading and controls, never smaller than most of the width. */
@media (max-width: 539px) {
  .deck-wrap {
    --card-w: min(100vw - 24px, max((100svh - 380px) * 0.74, 86vw));
  }
}

@media (min-width: 540px) {
  .deck-wrap {
    --card-w: min(100vw - 48px, max((100svh - 396px) * 0.74, 54vw), 600px);
  }
}

/* ---------- Unhurried hand-off from the gatefold to the page ---------- */
/* The backdrop and the card's dark panel dissolve together and finish as the logo lands. */
.intro::before,
.intro.enter .gate-inside::before {
  transition: opacity 1.7s cubic-bezier(0.45, 0, 0.55, 1);
}

.intro.enter .gate,
.intro.enter .hint,
.intro.enter .skip {
  transition: opacity 1.4s cubic-bezier(0.45, 0, 0.55, 1);
}

/* The print uses the bold cut of the script: thicken the strokes and keep the tall capitals in check. */
.card .txt.f-script {
  -webkit-text-stroke: 0.028em currentColor;
  paint-order: stroke fill;
  scale: 0.9;
}

/* The couple's names use the printed script everywhere. */
.hero-names {
  font-family: "Pinyon Script", "Snell Roundhand", var(--script);
  -webkit-text-stroke: 0.022em currentColor;
  font-size: clamp(48px, 13vw, 84px);
}

.hero-names em {
  font-family: var(--script);
  -webkit-text-stroke: 0;
  font-size: 0.78em;
}

.deck-sub {
  font-size: clamp(13.5px, 4.1vw, 16px);
  text-wrap: balance;
}

/* Date and time on one line, venue on the next when the screen is narrow. */
.deck-sub span {
  display: inline-block;
}

.deck-arrow {
  width: 40px;
  height: 40px;
}

/* ======================================================================
   Polish pass: screen-height sizing, top bar, intro hand-off, wide layout
   ====================================================================== */

:root {
  /* Height of the fixed top bar: safe-area top padding + 32px tools + 8px bottom. */
  --topbar-h: calc(max(8px, env(safe-area-inset-top)) + 40px);
}

@media (max-width: 360px) {
  .deck-arrow {
    width: 38px;
    height: 38px;
  }
}

/* ---------- Top bar: chips scroll if they must, tools at the end, clear of notches ---------- */
.topbar {
  padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px
    max(12px, env(safe-area-inset-left));
}

.chips {
  min-width: 0;
}

/* Soft fade at the edges only when the chips overflow and scroll. */
.chips.overflowing {
  mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
}

/* Phones: all four chips fit beside the two tools down to about 375px; narrower, they scroll. */
@media (max-width: 520px) {
  .chips {
    gap: 4px;
  }

  .chips .chip {
    padding: 6px 7px;
    font-size: clamp(9.5px, 2.6vw, 10.5px);
    letter-spacing: 0.02em;
  }

  .topbar-tools {
    gap: 4px;
  }
}

@media (max-width: 380px) {
  .chips .chip {
    padding: 6px 5px;
  }
}

/* The heading takes focus after the intro only so keyboard users carry on from there. */
.hero-names:focus,
.hero-names:focus-visible {
  outline: none;
}

/* ---------- Hero sized from the screen height, so it fits laptops and short phones ---------- */
.hero {
  gap: clamp(8px, 1.6svh, 14px);
  padding: calc(var(--topbar-h) + clamp(14px, 4svh, 40px)) 20px clamp(34px, 6svh, 50px);
}

.hero-arch.medallion {
  width: min(64vw, 290px, 30svh);
  margin: clamp(8px, 2.2svh, 26px) 0 clamp(6px, 1.6svh, 18px);
}

/* The terracotta frame starts below the top bar, so its top edge is never hidden. */
.hero::before {
  inset: calc(var(--topbar-h) + 8px) 10px 10px;
}

@media (max-height: 800px) and (min-aspect-ratio: 1/1) {
  .scroll-cue::after {
    height: 22px;
    margin-top: 6px;
  }
}

.countdown-label,
.hero .countdown-label {
  color: #7a5418;
}

/* ---------- Closing fills the last screen, so the page ends on it ---------- */
.closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100svh - var(--topbar-h));
  padding: 40px 20px calc(40px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.deck-hint {
  font-size: 11px;
  opacity: 0.75;
}

/* ---------- Intro: the card rises out of the envelope without leaving the screen ---------- */
/* While the card is drawn out, the envelope eases back and down so the card stays in view. */
.stage.letter-out:not(.letter-front) {
  transform: translateY(26%) scale(0.8);
}

.stage.letter-out:not(.letter-front) .letter {
  transform: translateY(-40%);
}

/* The card comes in front only once the envelope front has faded, so it never pops over it. */
.stage.letter-front .letter {
  transition:
    transform 1.1s cubic-bezier(0.5, 0, 0.25, 1),
    z-index 0s linear 0.6s;
}

/* Replay puts the envelope back together instantly instead of running it backwards. */
.stage.reset,
.stage.reset * {
  transition: none !important;
}

/* The glow belongs to the dark card: it fades out as the logo flies to the cream page. */
.intro.enter .gate-inside .medallion {
  filter: drop-shadow(0 0 28px rgba(255, 196, 120, 0)) drop-shadow(0 14px 24px rgba(0, 0, 0, 0));
}

/* ---------- Envelope: Ganesha in place of the address ---------- */
#envelope-card .layer.icon {
  filter: brightness(1.25) drop-shadow(0 0 1.6cqw rgba(255, 210, 120, 0.55));
}

.guest {
  font-family: var(--script), "Tiro Devanagari Marathi", serif;
  text-overflow: ellipsis;
}

/* ---------- In-card tap areas ---------- */
.card .hot-tag {
  top: var(--tag-top, 50%);
}

/* ---------- Keyboard focus: one gold ring everywhere ---------- */
:focus-visible {
  outline: 2px solid #ffd27a;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ---------- Side by side: wide screens, and short landscape phones ---------- */
/* Keep this query identical to `wide` in js/main.js. */
@media (min-width: 900px) and (min-aspect-ratio: 4/5), (orientation: landscape) and (max-height: 600px) {
  .deck-section {
    --side: min(400px, 36vw);
    --gap: clamp(28px, 5vw, 80px);
    --card-w: min(
      (100svh - var(--topbar-h) - 60px) * 0.685,
      600px,
      100vw - 64px - var(--side) - var(--gap)
    );
    display: grid;
    grid-template-columns: var(--card-w) var(--side);
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas:
      "deck ."
      "deck head"
      "deck details"
      "deck nav"
      "deck .";
    justify-content: center;
    column-gap: var(--gap);
    padding: 30px 32px;
  }

  .deck-section .deck-wrap {
    --card-w: inherit;
  }

  .deck-layout,
  .deck-wrap {
    display: contents;
  }

  .deck-head {
    grid-area: head;
    margin: 0 0 22px;
  }

  .deck {
    grid-area: deck;
    align-self: center;
    width: var(--card-w);
    margin: 0;
  }

  .deck-details {
    --card-w: var(--side);
    display: grid;
    grid-area: details;
    width: var(--side);
  }

  .deck-nav {
    grid-area: nav;
    margin-top: 30px;
  }

  .toran {
    height: 34px;
    margin-bottom: 14px;
  }

  .deck-head h2 {
    font-size: clamp(44px, 4.4vw, 64px);
  }

  .deck-sub {
    margin-top: 6px;
    font-size: 16px;
  }

  .deck-arrow {
    width: 44px;
    height: 44px;
  }
}

/* Short landscape phones: the card takes the height; the heading and controls sit beside it. */
@media (orientation: landscape) and (max-height: 600px) {
  .deck-section {
    --card-w: min((100svh - var(--topbar-h) - 24px) * 0.685, 600px, 100vw - 64px - var(--side) - var(--gap));
    padding: 12px 24px;
  }

  .toran,
  .deck-hint,
  .deck-details {
    display: none;
  }

  .deck-head {
    margin-bottom: 8px;
  }

  .deck-head h2 {
    font-size: clamp(30px, 9svh, 44px);
  }

  .deck-nav {
    margin-top: 10px;
  }
}