:root {
  --bg-top: #edf7ff;
  --bg-bottom: #d8ebff;
  --text-primary: #15395f;
  --text-muted: #4a6888;

  --theme-primary: #4e8fcf;
  --theme-secondary: #7fb4e3;
  --theme-accent: #2d6ca7;
  --card-bg: #ffffff;

  --envelope-body: #8ec1ea;
  --envelope-shadow: #6fa8d8;
  --envelope-flap: #7bb4e3;
  --envelope-grain-light: rgba(255, 255, 255, 0.2);
  --envelope-grain-dark: rgba(40, 78, 114, 0.08);
  --envelope-warmth: rgba(255, 244, 224, 0.16);
  --envelope-grain-size: 4px;

  --scene-progress: 0;
  --open-progress: 0;
  --reveal-progress: 0;

  /* --font-display: "Georgia", "Times New Roman", serif; */
  /* --font-display: 'Corinthia', cursive; */
  --font-display: "Sacramento", cursive;
  /* --font-body: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; */
  --font-body: "Amatic SC", sans-serif;
  --font-body: "Vibes", system-ui;
  --font-body: "Patrick Hand SC", cursive;
  --font-body: "Atma", system-ui;
  --font-body: "Just Another Hand", cursive;
  --font-body: "Loved by the King", cursive;
  --font-body: "Sue Ellen Francisco", cursive;
  --font-body: "Pompiere", sans-serif;

  --radius-lg: 1.25rem;
  --radius-md: 0.8rem;
  --photo-size: 8rem;
}

.card-detail, p {
  text-transform: uppercase;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
  overflow-x: hidden;
}

.hero {
  min-height: 95vh;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 1.5rem;
}

.section-centered {
  display: block;
  text-align: center;
  padding: 1.5rem;
}

iframe {
  margin: 0 auto;
  max-width: 100%;
  max-height: calc(100vw);
}

.hot-air-balloon {
  /* position: fixed;
  top: 5%;
  left: 44%; */
  width: auto;
  height: 25vh;
  margin: 0 auto;
  /* transform: translate(calc(var(--balloon-progress, 0) * 100vw), calc(var(--balloon-progress, 0) * -50vh)); */
  transform: translate(calc((-2 * abs(var(--balloon-progress, 0) - 0.5) + 1) * 10vw), calc(var(--balloon-progress, 0) * 40vh));
  transition: transform 0.1s linear;
  will-change: transform;
  z-index: -1;
}

.handwritten {
  font-family: "Cedarville Cursive", cursive;
  font-family: "Ms Madi", cursive;
  font-family: "Oooh Baby", cursive;
  font-family: "Meddon", cursive;
  font-family: "Great Vibes", cursive;
  font-family: "Hurricane", cursive;
  font-weight: 400;
  font-style: normal;
}

.eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: clamp(0.8rem, 1.8vw, 1.0rem);
  color: var(--theme-accent);
}

h1 {
  margin: 0.65rem 0 0.55rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 4.25rem);
  line-height: 1.15;
}

h2 {
  margin: 0.8rem 0;
  font-family: var(--font-display);
  font-weight: 400;
  /* font-size: clamp(1.35rem, 2.5vw, 2.1rem); */
  font-size: 2.5rem;
  line-height: 1.2;
}

h3 {
  margin: 0.8rem 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.8rem;
}

a.no-style {
  color: inherit;
  text-decoration: none;
}

.subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
}

.scroll-track {
  height: 260vh;
  position: relative;
}

.sticky-scene {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.card-container {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 100%, 100% 100%, 100% -5000px, 0 -5000px);
  z-index: 2;
}

/* The card lives inside .envelope, between the back (z=1) and pocket (z=3) */
.invitation-card {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(86%, 28rem);
  z-index: 2;
  background: var(--card-bg);
  border-radius: 0.3rem;
  /* border: 2px solid color-mix(in srgb, var(--theme-secondary) 65%, white); */
  padding: clamp(1.1rem, 2.2vw, 1.9rem);
  text-align: center;
  /*
   * At reveal=0 : translateY(62%)  → card sits deep inside the envelope,
   *               fully hidden behind the pocket and closed flap.
   * At reveal=1 : translateY(-78%) → card has emerged above the envelope;
   *               only the bottom strip remains inside (covered by the pocket).
   */
  transform: translateX(-50%) translateY(calc(20% - 105% * var(--reveal-progress)));
  will-change: transform;
  box-shadow: 0px 4px 15px rgb(32 68 106 / 28%);
}

.invitation-card > .full-width {
  margin: 0 calc(-1 * clamp(1.1rem, 2.2vw, 1.9rem));
}

.invitation-card > .reset-padding-top {
  margin-top: calc(-1 * clamp(1.1rem, 2.2vw, 1.9rem));
}

.card-top-image,
svg {
  width: 100%;
  height: auto;
}

svg g#flags path:nth-child(3n + 1) {
  /* fill: black !important; */
  animation: flag-sway 1.3s ease-in-out infinite alternate;
}

svg g#flags path:nth-child(3n + 2) {
  /* fill: black !important; */
  /* animation: flag-sway 1.5s ease-in-out infinite alternate; */
}

svg g#flags path:nth-child(3n) {
  /* fill: black !important; */
  /* transform-box: fill-box; */
  animation: flag-sway 1.1s ease-in-out infinite alternate;
}

@keyframes flag-sway {
  from {
    transform: rotate(-6deg);
  }

  to {
    transform: rotate(6deg);
  }
}

.card-eyebrow {
  margin: 1.5rem 0;
  color: var(--theme-accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* font-size: 0.68rem; */
}

.card-photo {
  margin: 0.9rem auto 0.6rem;
  margin-top: -15%;
  position: relative;
  z-index: -1;
  width: var(--photo-size);
  height: var(--photo-size);
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--theme-secondary);
  box-shadow: 0 4px 14px rgba(21, 57, 95, 0.18);
}

.card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.name {
  color: var(--theme-primary);
}

.card-detail,
.card-note,
.card-rsvp {
  margin: 0.45rem 0;
  line-height: 1.35;
}

.card-note {
  margin-top: 0.85rem;
  color: var(--text-muted);
}

.card-rsvp {
  margin-top: 0.85rem;
  font-weight: 600;
  color: var(--theme-accent);
}

.envelope {
  position: relative;
  width: min(92vw, 36rem);
  aspect-ratio: 16 / 10;
  max-height: 44vh;
  /* perspective enables the 3-D flap rotation without flattening (no filter here) */
  perspective: 900px;
  margin-bottom: max(2.25rem, env(safe-area-inset-bottom));
}

.envelope-back,
.envelope-pocket,
.envelope-flap {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
}

/* ── Layer 1: back of envelope ───────────────────────────────────────────── */
.envelope-back {
  z-index: 1;
  /* background:
    radial-gradient(130% 90% at 50% 8%, var(--envelope-warmth), transparent 62%),
    repeating-linear-gradient(
      35deg,
      transparent 0 calc(var(--envelope-grain-size) * 1.15),
      var(--envelope-grain-light) calc(var(--envelope-grain-size) * 1.15) calc(var(--envelope-grain-size) * 1.4)
    ),
    repeating-linear-gradient(
      -28deg,
      transparent 0 calc(var(--envelope-grain-size) * 1.45),
      var(--envelope-grain-dark) calc(var(--envelope-grain-size) * 1.45) calc(var(--envelope-grain-size) * 1.7)
    ),
    linear-gradient(180deg, var(--envelope-body), var(--envelope-shadow)); */
  box-shadow: 0 16px 18px rgba(32, 68, 106, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* ── Layer 3: front pocket (V-shape) — always above the letter ───────────── */
.envelope-pocket {
  z-index: 3;
  /* clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%); */
  /* clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); */
  /* background:
    radial-gradient(120% 80% at 50% -5%, rgba(255, 255, 255, 0.25), transparent 65%),
    repeating-linear-gradient(
      33deg,
      transparent 0 var(--envelope-grain-size),
      var(--envelope-grain-light) var(--envelope-grain-size) calc(var(--envelope-grain-size) * 1.25)
    ),
    repeating-linear-gradient(
      -25deg,
      transparent 0 calc(var(--envelope-grain-size) * 1.3),
      var(--envelope-grain-dark) calc(var(--envelope-grain-size) * 1.3) calc(var(--envelope-grain-size) * 1.55)
    ),
    linear-gradient(180deg, color-mix(in srgb, var(--envelope-body) 88%, white), var(--envelope-shadow)); */
  /* border-top: 1px solid rgba(255, 255, 255, 0.5); */
  /* box-shadow:
    0 8px 14px rgba(31, 66, 102, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -10px 16px rgba(31, 66, 102, 0.13); */
  overflow: hidden;
}

.envelope-overlay {
  border-radius: var(--radius-md);
  width: 100%;
  height: 100%;
  z-index: 5;
  background: radial-gradient(200% 200% at 50% -50%, transparent 60%, rgb(0 0 0 / 15%) 95%);
}

.envelope-pocket > .left-fold,
.envelope-pocket > .right-fold,
.envelope-pocket > .middle-fold,
.envelope-pocket > .middle-fold-shaddow,
.envelope-overlay {
  position: absolute;
}

.envelope-back,
.envelope-pocket > .left-fold,
.envelope-pocket > .right-fold,
.envelope-pocket > .middle-fold,
.envelope-flap-inner {
  /* background: url(assets/Paper-bg-texture.png), repeat; */
  background: url(assets/Paper-bg-texture-ChatGPT-small.png), repeat;
  background-size: 200px 300px;
  /* background-color: rgb(201, 201, 201); */
  /* box-shadow:
    0 8px 14px rgba(31, 66, 102, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -10px 16px rgba(31, 66, 102, 0.13); */
}

.envelope-pocket > .middle-fold {
  /* background: url(assets/Paper-bg-texture.png), repeat; */
  /* background-color: rgb(201, 201, 201); */
  box-shadow:
    0px 0px 6px 0px rgb(0 0 0 / 8%),
    inset 1px 0px 2px 0px rgba(255, 255, 255, 0.45);
}

/* Shaddow inside envelope */
.envelope-pocket > .left-fold,
.envelope-pocket > .right-fold,
.envelope-pocket > .middle-fold-shaddow {
  box-shadow: 2px -6px 14px rgb(0 0 0 / 18%);
}

.envelope-pocket > .left-fold {
  top: 0;
  left: 0;
  width: 62%;
  height: 100%;
  transform-origin: top left;
  transform: rotateZ(35deg) translateX(-3%) translateY(-3%);
}

.envelope-pocket > .right-fold {
  top: 0;
  right: 0;
  width: 62%;
  height: 100%;
  transform-origin: top right;
  transform: rotateZ(-35deg) translateX(3%) translateY(-3%);
}

  .envelope-pocket > .middle-fold,
  .envelope-pocket > .middle-fold-shaddow {
  top: 42%;
  left: 50%;
  width: 100%;
  aspect-ratio: 1 / 1;
  transform-origin: top left;
  transform: rotateZ(58deg) translateX(0%) translateY(0%) skewY(-26deg);
  border-radius: 8%;
}

/* ── Layer 4 → 1: flap — starts on top, slips behind once open ───────────── */
.envelope-flap {
  z-index: 4;
  clip-path: polygon(1% 0, 99% 0, 60% 100%, 40% 100%);
  /* background:
    radial-gradient(110% 90% at 50% 0%, rgba(255, 255, 255, 0.26), transparent 58%),
    repeating-linear-gradient(
      31deg,
      transparent 0 var(--envelope-grain-size),
      var(--envelope-grain-light) var(--envelope-grain-size) calc(var(--envelope-grain-size) * 1.25)
    ),
    repeating-linear-gradient(
      -29deg,
      transparent 0 calc(var(--envelope-grain-size) * 1.3),
      var(--envelope-grain-dark) calc(var(--envelope-grain-size) * 1.3) calc(var(--envelope-grain-size) * 1.55)
    ),
    linear-gradient(160deg, color-mix(in srgb, var(--envelope-flap) 80%, white), var(--envelope-body)); */
  transform-origin: top center;
  transform: rotateX(calc(-180deg * var(--open-progress)));
  will-change: transform;
}

.envelope-flap > .sticker {
  position: relative;
  z-index: 5;
  height: 22%;
  left: 32%;
  top: 15%;
}

.envelope.flap-behind .envelope-flap > .sticker {
  display: none;
}

.envelope-flap-inner {
  position: absolute;
  top: 61%;
  left: 50%;
  width: 100%;
  aspect-ratio: 1 / 1;
  transform-origin: top left;
  transform: rotateZ(232deg) translateX(0%) translateY(0%) skewY(-14deg);
  border-radius: 4%;
  box-shadow: 0px 0px 9px rgb(0 0 0 / 18%);
}

/*
 * At the 90° midpoint the flap is edge-on (invisible).
 * We swap it to z-index 1 so it finishes rotating BEHIND the card.
 */
.envelope.flap-behind .envelope-flap {
  z-index: 1;
}

@media (max-width: 700px) {
  .hero {
    min-height: 88vh;
  }

  .scroll-track {
    height: 280vh;
  }

  .invitation-card {
    width: min(90%, 26rem);
    padding: 1rem;
    transform: translateX(-50%) translateY(calc(15% - 105% * var(--reveal-progress)));
  }

  .envelope {
    width: min(96vw, 27rem);
    aspect-ratio: 8 / 5;
  }
}

.onskeskyen-logo {
  vertical-align: bottom;
  height: 30px;
}

.onskesyen-qr {
  margin: auto;
}

.separator {
  margin: 0.25rem auto;
  height: 0.55rem;
}

.separator path {
  stroke: var(--text-primary) !important;
  stroke-width: 1.8 !important;
}

.section-centered .separator {
  margin: 1.5rem auto;
}