:root {
  color-scheme: dark;
  --bg: #080816;
  --bg-alt: #0d0c20;
  --bg-lighter: #111127;
  --text: #f9f2f0;
  --muted: #aaa2b5;
  --gold: #e8c7a6;
  --gold-bright: #fbe6cd;
  --pink: #f3a7b6;
  --purple: #9e82d4;
  --border: rgba(240, 206, 195, .17);
  --serif: 'Italiana', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1)
}

* {
  box-sizing: border-box
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden
}

body.has-intro {
  overflow: hidden
}

body.modal-open {
  overflow: hidden
}

a {
  color: inherit;
  text-decoration: none
}

button {
  font: inherit
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 5px
}

button {
  cursor: pointer
}

::selection {
  color: #170e21;
  background: #edb3c1
}

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

[hidden] {
  display: none !important
}

.container {
  width: min(1320px, calc(100% - 116px));
  margin-inline: auto
}

.site {
  position: relative;
  z-index: 2;
  transition: filter .9s ease
}

body.has-intro .site {
  filter: blur(8px);
  pointer-events: none
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 24;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.35' filter='url(%23n)'/%3E%3C/svg%3E")
}

.sky-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0
}

.celebration-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 70;
  pointer-events: none
}

.ambient {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(70px);
  opacity: .35
}

.ambient-one {
  width: 50vw;
  height: 50vw;
  top: -18vw;
  right: -18vw;
  background: #30245c
}

.ambient-two {
  width: 45vw;
  height: 45vw;
  bottom: 0;
  left: -20vw;
  background: #412343;
  opacity: .2
}

.cursor-glow {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 430px;
  height: 430px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(223, 153, 183, .07), transparent 68%);
  opacity: 0;
  transition: opacity .4s
}

/* ENTRY SCENE */
.intro {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: radial-gradient(ellipse 47% 43% at 50% 42%, rgba(86, 49, 111, .37), transparent 95%), radial-gradient(circle at 12% 0%, #1a1637, #090918 49%, #070712 100%);
  padding: 22px;
  overflow: auto;
  transition: opacity 1s var(--ease), visibility 1s
}

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

.intro-stars {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(1px 1px at 15% 25%, #fff9, transparent), radial-gradient(2px 2px at 76% 15%, #fffe, transparent), radial-gradient(2px 2px at 82% 75%, #fff8, transparent), radial-gradient(1px 1px at 30% 78%, #fff9, transparent), radial-gradient(2px 2px at 60% 40%, #fff7, transparent);
  background-size: 530px 530px;
  opacity: .65;
  animation: starglow 7s ease-in-out infinite alternate;
  pointer-events: none
}

.intro-content {
  position: relative;
  width: min(720px, 100%);
  margin: 48px auto 30px;
  z-index: 1
}

.intro-topline,
.intro-date,
.intro-hint,
.section-label,
.eyebrow,
.header-date,
.count-label,
.scroll-indicator,
.gallery-topline,
.letter-decoration,
.cake-caption,
.footer,
.wish-prompt,
.hero-art-bottom,
.orbit-word {
  letter-spacing: .2em;
  font-size: 10px;
  font-weight: 700
}

.intro-topline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  color: var(--gold);
  opacity: .92
}

.tiny-star {
  font-size: 14px
}

.gift-stage {
  height: 247px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 850px;
  margin: 2px auto -5px
}

.gift-halo {
  position: absolute;
  bottom: 28px;
  width: 275px;
  height: 78px;
  background: radial-gradient(ellipse, #d38bac78, transparent 70%);
  filter: blur(21px)
}

.gift-wrap {
  position: relative;
  width: 164px;
  height: 164px;
  transform-style: preserve-3d;
  transform: rotateX(-8deg) rotateY(-25deg);
  animation: giftfloat 6s ease-in-out infinite;
  filter: drop-shadow(0 35px 38px rgba(0, 0, 0, .35))
}

.gift-body {
  position: absolute;
  bottom: 8px;
  left: 18px;
  width: 138px;
  height: 118px;
  transform-style: preserve-3d
}

.body-front,
.body-right,
.lid-front,
.lid-top {
  position: absolute;
  display: block
}

.body-front {
  inset: 0;
  background: linear-gradient(135deg, #f5b2c0, #c979a0 55%, #9f628d);
  border: 1px solid #fff2;
  box-shadow: inset -17px -10px 22px #80436b5c
}

.body-right {
  right: -18px;
  top: 12px;
  width: 18px;
  height: 118px;
  transform: skewY(-50deg);
  transform-origin: left top;
  background: #8c507d
}

.body-ribbon {
  position: absolute;
  inset: 0 54px;
  background: linear-gradient(90deg, #d7aa73, #fff0ca 43%, #c68a63);
  box-shadow: 0 0 10px #fff6
}

.gift-lid {
  position: absolute;
  left: 9px;
  top: 22px;
  width: 158px;
  height: 48px;
  z-index: 2;
  transform-style: preserve-3d;
  transform: translateY(0);
  transition: transform 1s var(--ease), opacity 1s
}

.lid-front {
  inset: 10px 0 0;
  background: linear-gradient(100deg, #f7bfd0, #d790b0 65%, #ae719b);
  border: 1px solid #fff4;
  box-shadow: 0 8px 12px #3b223f72
}

.lid-top {
  left: 0;
  top: -11px;
  width: 158px;
  height: 28px;
  background: #ffc8d5;
  transform: skewX(-48deg);
  transform-origin: left bottom
}

.lid-ribbon {
  position: absolute;
  left: 61px;
  right: 61px;
  top: -10px;
  bottom: 0;
  background: linear-gradient(90deg, #f4d5a7, #fff5db, #caa074);
  transform: skewY(-8deg)
}

.gift-glow {
  position: absolute;
  left: 26px;
  top: -50px;
  width: 90px;
  height: 90px;
  background: #ffd1bb;
  border-radius: 50%;
  filter: blur(32px);
  opacity: .38
}

.intro.unwrapped .gift-lid {
  transform: translate(32px, -125px) rotate(28deg);
  opacity: 0
}

.intro.unwrapped .gift-wrap {
  animation: none;
  transform: rotateX(-8deg) rotateY(35deg) scale(.86)
}

.gift-spark {
  position: absolute;
  color: #fbe6cf;
  font-size: 28px;
  animation: sparkle 4s ease-in-out infinite
}

.gs1 {
  transform: translate(-150px, -67px);
  animation-delay: .3s
}

.gs2 {
  transform: translate(150px, -22px);
  animation-delay: 1.2s
}

.gs3 {
  transform: translate(96px, 83px);
  animation-delay: 2s
}

.gs4 {
  transform: translate(-106px, 70px);
  animation-delay: 1.6s
}

.intro-date {
  color: var(--gold);
  font-size: 10px;
  margin: 12px 0 14px
}

.intro-date span {
  font-size: 15px;
  letter-spacing: 0
}

.intro-heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(43px, 5.7vw, 73px);
  line-height: 1.06;
  letter-spacing: -.026em;
  margin: 0 auto 16px
}

.intro-heading em,
.hero-heading em,
.section h2 em,
.finale h2 em {
  font-family: var(--serif);
  font-style: normal;
  background: linear-gradient(100deg, #f8e7d7 6%, #dfa1b6 48%, #c7a4f2 94%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.intro-copy {
  color: #c4b9c6;
  font-size: 14px;
  line-height: 1.8;
  margin: 0 auto 27px
}

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 37px;
  border: 1px solid transparent;
  padding: 17px 22px 17px 27px;
  min-height: 54px;
  letter-spacing: .025em;
  font-size: 12px;
  font-weight: 700;
  border-radius: 3px;
  transition: transform .25s, box-shadow .3s, background .3s;
  overflow: hidden;
  white-space: nowrap
}

.button:after {
  content: '';
  position: absolute;
  inset: -80% -70%;
  background: linear-gradient(100deg, transparent 30%, #ffffff77 50%, transparent 70%);
  transform: translateX(-100%) rotate(12deg);
  transition: transform .6s
}

.button:hover:after {
  transform: translateX(100%) rotate(12deg)
}

.button:hover {
  transform: translateY(-3px)
}

.button-primary {
  background: linear-gradient(110deg, #f4d3cb, #e9aebb 58%, #c7a1d9);
  color: #251327;
  box-shadow: 0 8px 32px #e7a2ac2b
}

.button-primary:hover {
  box-shadow: 0 10px 40px #e7a2ac55
}

.button-arrow {
  font-size: 17px
}

.intro-button {
  min-width: 250px
}

.intro-hint {
  display: block;
  color: #867d9a;
  font-size: 9px;
  letter-spacing: .17em;
  margin-top: 23px
}

/* HEADER AND HERO */
.site-header {
  height: 86px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 max(58px, calc((100vw - 1320px)/2));
  border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.brand,
.footer-brand {
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: .025em
}

.brand em,
.footer-brand em {
  font-style: italic;
  color: var(--pink)
}

.brand-icon {
  color: var(--gold);
  font-family: var(--sans);
  font-size: 27px;
  margin-right: 14px
}

.header-right {
  display: flex;
  align-items: center;
  gap: 13px
}

.header-date {
  color: #dfbbab;
  font-size: 10px;
  white-space: nowrap
}

.header-separator {
  height: 19px;
  width: 1px;
  background: #ffffff36;
  margin: 0 9px
}

.icon-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #ffffff24;
  background: #ffffff05;
  border-radius: 50%;
  color: #ead9db;
  transition: border-color .3s, background .3s
}

.icon-button:hover {
  background: #e4bcb51b;
  border-color: #e4bcb588
}

.popper-glyph {
  font-size: 17px;
  line-height: 1;
  transform: rotate(-12deg)
}

.sound-wave {
  opacity: 0;
  transition: opacity .25s
}

.is-playing .sound-wave {
  opacity: 1
}

.is-playing .sound-slash {
  opacity: 0
}

.hero {
  min-height: 800px;
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 96px;
  background: radial-gradient(ellipse 38% 56% at 80% 37%, #3d245b70, transparent 90%), radial-gradient(ellipse 28% 45% at 13% 83%, #3c1d3950, transparent 80%), linear-gradient(150deg, #0a0b21, #080817 64%, #0c081c)
}

.hero:before {
  content: '';
  position: absolute;
  width: 700px;
  height: 700px;
  border: 1px solid rgba(220, 175, 217, .035);
  border-radius: 50%;
  left: -430px;
  bottom: -350px
}

.hero-background-orbit {
  position: absolute;
  pointer-events: none;
  border: 1px solid rgba(215, 172, 199, .1);
  border-radius: 50%;
  transform: rotate(-22deg)
}

.orbit-a {
  width: 890px;
  height: 400px;
  right: -130px;
  top: 12%
}

.orbit-b {
  width: 1040px;
  height: 525px;
  right: -215px;
  top: 7%;
  border-color: #fbdabb0b
}

.hero-content {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  align-items: center;
  gap: 15px;
  padding-top: 35px;
  padding-bottom: 95px;
  position: relative;
  z-index: 1
}

.hero-text {
  max-width: 680px
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--gold);
  font-size: 10px;
  letter-spacing: .23em
}

.eyebrow-line {
  height: 1px;
  width: 36px;
  background: var(--gold)
}

.hero-small-heading {
  font-family: var(--serif);
  color: #c9b2c4;
  font-size: 20px;
  margin: 36px 0 8px
}

.hero-heading {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.045em;
  font-size: clamp(55px, 5.5vw, 91px);
  line-height: 1.03;
  margin: 0 0 28px
}

.hero-heading>span,
.hero-heading>em {
  display: block
}

.hero-heading em {
  white-space: nowrap
}

.hero-description {
  font-size: 14px;
  color: #b5acbc;
  line-height: 2;
  max-width: 460px;
  margin: 0 0 33px
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 24px
}

.hero-action-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: #bda9c0
}

.hero-bottom {
  width: min(1320px, calc(100% - 116px));
  display: flex;
  align-items: end;
  justify-content: space-between;
  position: absolute;
  bottom: 31px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3
}

.count-label {
  color: #a394a8;
  letter-spacing: .2em
}

.count-units {
  display: flex;
  align-items: start;
  gap: 12px;
  margin-top: 8px
}

.count-units>span {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 30px
}

.count-units strong {
  font-size: 20px;
  font-weight: 400;
  font-family: var(--serif);
  color: #efe5e6;
  letter-spacing: .02em
}

.count-units small {
  font-size: 7px;
  letter-spacing: .16em;
  color: #857d90
}

.count-units>b {
  font-size: 18px;
  color: #aa8eaa;
  font-weight: 400
}

.countdown.is-over .count-units {
  display: none
}

.countdown.is-over .count-label {
  color: #e7c0bf
}

.scroll-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #b7a6b2;
  font-size: 9px;
  letter-spacing: .16em
}

.mouse-outer {
  width: 20px;
  height: 30px;
  border: 1px solid #9b839b;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 6px
}

.mouse-inner {
  height: 6px;
  width: 2px;
  background: #f5c7be;
  border-radius: 2px;
  animation: mousewheel 2s infinite
}

.scroll-arrow {
  margin-left: 3px;
  font-size: 16px
}

/* 3D HEART UNIVERSE */
.hero-art {
  height: min(610px, 45vw);
  min-height: 440px;
  display: grid;
  place-items: center;
  perspective: 1100px;
  position: relative;
  isolation: isolate;
  transform-style: preserve-3d;
  --mx: 0;
  --my: 0
}

.universe-orbit {
  width: 80%;
  height: 46%;
  border: 1px solid #dfb5cb5e;
  border-radius: 50%;
  position: absolute;
  transform-style: preserve-3d;
  box-shadow: 0 0 12px #ddaab017, inset 0 0 10px #cbabd111
}

.orbit-outer {
  transform: rotate(-31deg) rotateX(71deg);
  animation: orbitspin 17s linear infinite
}

.orbit-inner {
  width: 64%;
  height: 69%;
  transform: rotate(24deg) rotateY(74deg);
  animation: orbitspin2 22s linear infinite;
  border-color: #bfa7ed65
}

.orbit-dot {
  position: absolute;
  top: 13%;
  left: 7%;
  width: 9px;
  height: 9px;
  background: #ffe4dc;
  box-shadow: 0 0 17px 5px #f7afc299;
  border-radius: 50%
}

.orbit-inner .orbit-dot {
  background: #a8a8ff;
  box-shadow: 0 0 17px 5px #a7a7ef99
}

.planet-halo {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffbdb263 0%, #c76ca72d 30%, #8b65b213 55%, transparent 70%);
  filter: blur(23px);
  animation: pulse 5s ease-in-out infinite
}

.planet-shadow {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, #e77ca11c, transparent 75%);
  transform: translateY(65px) rotateX(55deg);
  filter: blur(17px)
}

.heart-container {
  position: relative;
  z-index: 2;
  width: 255px;
  height: 255px;
  transform-style: preserve-3d;
  filter: drop-shadow(0 0 36px #e999bc77) drop-shadow(0 45px 25px #12061b9b);
  animation: heartFloat 7s ease-in-out infinite;
  transform: rotate(-15deg)
}

.heart-depth {
  width: 165px;
  height: 165px;
  position: absolute;
  left: 48px;
  top: 63px;
  transform: rotate(-45deg);
  border-radius: 19px 14px 12px 13px
}

.heart-depth:before,
.heart-depth:after {
  content: '';
  position: absolute;
  width: 165px;
  height: 165px;
  border-radius: 50%;
  background: inherit
}

.heart-depth:before {
  top: -83px;
  left: 0
}

.heart-depth:after {
  top: 0;
  right: -83px
}

.heart-back {
  background: linear-gradient(120deg, #6e316c, #b45783);
  transform: translate(-7px, 13px) rotate(-45deg);
  filter: blur(2px)
}

.heart-mid {
  background: linear-gradient(145deg, #a4558e, #c479a6 53%, #f0a0b3);
  transform: translate(-4px, 7px) rotate(-45deg)
}

.heart-front {
  background: linear-gradient(135deg, #ffe1cf 0%, #eeb3c0 35%, #d083af 72%, #994b9c 100%);
  box-shadow: inset -21px -21px 45px #57205d62, inset 18px 20px 40px #ffffff55;
  transform: rotate(-45deg)
}

.heart-shine {
  position: absolute;
  z-index: 5;
  width: 80px;
  height: 155px;
  border-radius: 50%;
  left: 64px;
  top: 4px;
  transform: rotate(-33deg);
  background: radial-gradient(ellipse at 30% 23%, #fffdfdaa, transparent 65%);
  filter: blur(11px);
  opacity: .73;
  pointer-events: none
}

.hero-spark {
  position: absolute;
  color: #ffe5d6;
  text-shadow: 0 0 25px #ffd8cd99;
  font-size: 30px;
  animation: sparkle 4s ease-in-out infinite
}

.star-pos-1 {
  left: 14%;
  top: 17%;
  font-size: 25px
}

.star-pos-2 {
  right: 11%;
  top: 21%;
  font-size: 17px;
  animation-delay: 1.1s
}

.star-pos-3 {
  right: 20%;
  bottom: 13%;
  font-size: 32px;
  animation-delay: 2.1s
}

.star-pos-4 {
  left: 24%;
  bottom: 20%;
  font-size: 13px;
  animation-delay: .5s
}

.orbit-word {
  position: absolute;
  color: #d4bbc8a4;
  font-size: 9px;
  letter-spacing: .2em
}

.orbit-word-one {
  top: 17%;
  right: 13%;
  transform: rotate(21deg)
}

.orbit-word-two {
  bottom: 22%;
  left: 10%;
  transform: rotate(-22deg)
}

.hero-art-bottom {
  position: absolute;
  bottom: 2%;
  left: 0;
  right: 0;
  text-align: center;
  color: #b79ea9;
  font-size: 9px;
  letter-spacing: .22em
}

.small-star {
  color: #f5c5ba;
  padding: 0 9px
}

.hero-photoframe {
  position: absolute;
  width: 250px;
  height: 330px;
  z-index: 4;
  padding: 8px;
  background: linear-gradient(125deg, #ffe4ca, #be8b9f);
  border-radius: 45% 45% 7% 7%;
  box-shadow: 0 20px 90px #f7a3b149;
  animation: heartFloat 7s ease-in-out infinite;
  overflow: hidden
}

.hero-photoframe img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 45% 45% 6% 6%
}

.marquee {
  height: 61px;
  background: linear-gradient(90deg, #d4a5ac, #f0cdac, #cba9d1);
  color: #3a243d;
  overflow: hidden;
  display: flex;
  align-items: center;
  border-top: 1px solid #eed5cf
}

.marquee-track {
  display: flex;
  gap: 58px;
  white-space: nowrap;
  align-items: center;
  width: max-content;
  animation: marqueemove 28s linear infinite
}

.marquee-track span {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: .16em
}

.marquee-track b {
  font-size: 16px;
  font-weight: 400
}

/* SHARED SECTIONS */
.section {
  position: relative;
  overflow: hidden;
  padding: 130px 0
}

.section-heading {
  margin-bottom: 53px
}

.section-label {
  color: var(--gold);
  font-size: 10px;
  letter-spacing: .21em;
  margin: 0 0 23px
}

.section-label span {
  color: #f2d4db;
  margin-right: 10px
}

.section h2,
.finale h2 {
  font-family: var(--serif);
  font-size: clamp(44px, 5vw, 76px);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.12;
  margin: 0
}

.section-heading-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px
}

.section-heading-row>p {
  color: #b6abb9;
  max-width: 215px;
  font-size: 13px;
  line-height: 1.8;
  margin: 0 0 7px
}

.section-heading.center {
  text-align: center
}

.section-heading.center>p:last-child {
  font-size: 14px;
  color: #b8acc0;
  line-height: 1.9;
  margin: 22px auto 0;
  max-width: 475px
}

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

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

/* MEMORIES / 3D GALLERY */
.memories-section {
  background: linear-gradient(180deg, #0b0b1b, #0e0c20 68%, #0b0a1b)
}

.gallery-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #80798d;
  font-size: 9px;
  padding: 0 4px 20px;
  letter-spacing: .16em
}

.gallery {
  position: relative;
  min-height: 515px;
  width: 100%;
  perspective: 1200px;
  touch-action: pan-y;
  overflow: hidden
}

.gallery:before,
.gallery:after {
  content: '';
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  width: 9%;
  pointer-events: none
}

.gallery:before {
  left: 0;
  background: linear-gradient(90deg, #0d0c1e, transparent)
}

.gallery:after {
  right: 0;
  background: linear-gradient(-90deg, #0d0c1e, transparent)
}

.gallery-track {
  height: 515px;
  position: relative;
  transform-style: preserve-3d
}

.memory-card {
  position: absolute;
  left: 50%;
  top: 29px;
  width: min(340px, 31%);
  height: 465px;
  margin-left: calc(min(340px, 31%)/-2);
  border-radius: 168px 168px 9px 9px;
  padding: 9px;
  background: #f7e7dd17;
  border: 1px solid #eac9ca55;
  overflow: hidden;
  transform-origin: center;
  backface-visibility: hidden;
  transition: transform 1s var(--ease), opacity .7s ease, filter .7s ease;
  cursor: pointer;
  isolation: isolate;
  box-shadow: 0 25px 45px #0005
}

.memory-card img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.88)
}

.memory-card:after {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 160px 160px 5px 5px;
  background: linear-gradient(180deg, #06051116 25%, transparent 35%, #110c2c15 43%, #0b091ddc 100%)
}

.memory-card:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1px solid #e8ccba47;
  border-radius: inherit;
  pointer-events: none
}

.memory-card-content {
  position: absolute;
  left: 32px;
  bottom: 29px;
  right: 25px;
  z-index: 3;
  text-shadow: 0 1px 10px #0009
}

.memory-card-label {
  display: block;
  font-size: 8px;
  letter-spacing: .2em;
  font-weight: 700;
  color: #f7ddc5;
  margin-bottom: 10px
}

.memory-card-title {
  font-family: var(--serif);
  font-size: 31px;
  line-height: 1.12;
  display: block;
  margin: 0 0 9px
}

.memory-card-caption {
  font-size: 11px;
  line-height: 1.7;
  color: #ffebebeb;
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .5s, opacity .4s
}

.memory-card.is-active .memory-card-caption,
.memory-card:focus-visible .memory-card-caption {
  max-height: 75px;
  opacity: 1
}

.memory-card[data-side='0'] {
  z-index: 4;
  transform: translateX(0) translateZ(105px) rotateY(0deg);
  opacity: 1
}

.memory-card[data-side='-1'] {
  z-index: 3;
  transform: translateX(-94%) translateZ(-65px) rotateY(18deg);
  opacity: .8;
  filter: brightness(.7)
}

.memory-card[data-side='1'] {
  z-index: 3;
  transform: translateX(94%) translateZ(-65px) rotateY(-18deg);
  opacity: .8;
  filter: brightness(.7)
}

.memory-card[data-side='-2'] {
  z-index: 2;
  transform: translateX(-170%) translateZ(-300px) rotateY(32deg);
  opacity: .12;
  filter: brightness(.4);
  pointer-events: none
}

.memory-card[data-side='2'] {
  z-index: 2;
  transform: translateX(170%) translateZ(-300px) rotateY(-32deg);
  opacity: .12;
  filter: brightness(.4);
  pointer-events: none
}

.memory-card[data-side='hidden'] {
  opacity: 0;
  z-index: 0;
  transform: translateX(0) translateZ(-400px);
  pointer-events: none
}

.gallery-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 5px 0
}

.gallery-dots {
  display: flex;
  gap: 12px
}

.gallery-dot {
  border: 0;
  width: 30px;
  height: 2px;
  background: #6f667b;
  border-radius: 2px;
  padding: 0;
  transition: width .3s, background .3s
}

.gallery-dot[aria-current='true'] {
  width: 66px;
  background: linear-gradient(90deg, #edc7a9, #e1a3c2)
}

.gallery-arrows {
  display: flex;
  gap: 12px
}

.round-button {
  width: 47px;
  height: 47px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid #b89baf67;
  color: #ebd6df;
  font-size: 18px;
  transition: background .3s, transform .3s
}

.round-button:hover {
  background: #e8c1c022;
  transform: scale(1.07)
}

/* REASONS */
.reasons-section {
  background: #0c0a1b
}

.section-glow {
  position: absolute;
  pointer-events: none
}

.reasons-glow {
  height: 650px;
  width: 750px;
  left: 50%;
  top: 22%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, #46305927, transparent 70%)
}

.reasons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 23px;
  margin-top: 75px;
  perspective: 1200px
}

.reason-card {
  position: relative;
  height: 305px;
  padding: 32px 32px 34px;
  border: 1px solid #d5afc12c;
  background: linear-gradient(137deg, #291c3a77, #17132577 55%, #22162e77);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s, transform .2s;
  transform-style: preserve-3d
}

.reason-card:before {
  content: '';
  position: absolute;
  width: 180px;
  height: 180px;
  right: -50px;
  top: -80px;
  background: radial-gradient(circle, #e6a2b11b, transparent 66%);
  border-radius: 50%;
  transition: transform .5s
}

.reason-card:hover {
  border-color: #f0bdc78a;
  box-shadow: 0 28px 64px #0004
}

.reason-card:hover:before {
  transform: scale(1.65)
}

.reason-top {
  display: flex;
  justify-content: space-between;
  align-items: start;
  color: #aa8fae;
  position: relative;
  transform: translateZ(20px)
}

.reason-icon {
  font-size: 51px;
  line-height: 1;
  color: #e5b9c8;
  text-shadow: 0 0 27px #f2a4c855
}

.reason-number {
  font-size: 11px;
  letter-spacing: .22em
}

.reason-bottom {
  position: absolute;
  bottom: 32px;
  left: 32px;
  right: 32px;
  transform: translateZ(30px)
}

.reason-bottom h3 {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  margin: 0 0 12px
}

.reason-bottom p {
  font-size: 12px;
  color: #bcb1c3;
  line-height: 1.8;
  max-width: 260px;
  margin: 0
}

/* CAKE */
.wish-section {
  background: radial-gradient(ellipse 44% 65% at 78% 55%, #42234461, transparent), linear-gradient(180deg, #0a0918, #100b21 65%, #0b091b)
}

.wish-layout {
  min-height: 530px;
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 10px;
  align-items: center
}

.wish-copy {
  position: relative;
  z-index: 2
}

.wish-copy h2 {
  font-size: clamp(52px, 5.2vw, 83px)
}

.wish-copy>p:not(.section-label):not(.wish-feedback) {
  color: #b6aabd;
  font-size: 14px;
  line-height: 2;
  max-width: 420px;
  margin: 23px 0 0
}

.wish-prompt {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #a68a9d;
  font-size: 9px;
  margin: 38px 0 18px;
  letter-spacing: .18em
}

.wish-line {
  height: 1px;
  width: 32px;
  background: #d9b7bc
}

.wish-feedback {
  color: #e9b9c7;
  font-family: var(--serif);
  font-size: 18px;
  margin: 17px 0 0;
  min-height: 25px;
  transition: opacity .4s
}

.cake-stage {
  position: relative;
  height: 570px;
  display: grid;
  place-items: center;
  perspective: 1100px
}

.cake-back-glow {
  position: absolute;
  top: 21%;
  width: 450px;
  height: 440px;
  background: radial-gradient(circle, #9e5a8a3a, transparent 68%);
  filter: blur(22px)
}

.cake-shadow {
  position: absolute;
  bottom: 78px;
  width: 390px;
  height: 57px;
  background: #000b;
  border-radius: 50%;
  filter: blur(12px)
}

.cake-3d {
  width: 360px;
  height: 355px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(8deg) rotateY(-8deg);
  animation: cakehover 6s ease-in-out infinite;
  z-index: 3
}

.cake-tier {
  position: absolute;
  left: 50%;
  border-radius: 50% / 15%;
  box-shadow: inset -26px -3px 29px #5a30557d, inset 18px 0 32px #fff2, 0 12px 12px #1c0a2044
}

.cake-tier.tier-bottom {
  bottom: 16px;
  width: 305px;
  height: 140px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #c979a0, #eaa3b3 21%, #edb9b6 62%, #a55f8c)
}

.cake-tier.tier-top {
  bottom: 134px;
  width: 224px;
  height: 112px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #b969a4, #e8a3c4 28%, #f2c4ca 62%, #ad6d9e);
  z-index: 3
}

.tier-top-face {
  position: absolute;
  left: 0;
  right: 0;
  top: -20px;
  height: 46px;
  background: radial-gradient(ellipse at 37% 30%, #fff1e5, #f8c7d1 65%, #e4a6c5);
  border-radius: 50%;
  border: 2px solid #ffe5d1;
  box-shadow: 0 6px 7px #854c7d5c
}

.tier-top .tier-top-face {
  height: 40px;
  top: -16px
}

.icing-drips {
  position: absolute;
  z-index: 2;
  top: 5px;
  left: 3%;
  right: 3%;
  height: 43px;
  background: radial-gradient(ellipse at 8% 0, #ffe0da 0 13px, transparent 14px), radial-gradient(ellipse at 26% 0, #ffe0da 0 21px, transparent 22px), radial-gradient(ellipse at 47% 0, #ffe0da 0 14px, transparent 15px), radial-gradient(ellipse at 70% 0, #ffe0da 0 22px, transparent 23px), radial-gradient(ellipse at 90% 0, #ffe0da 0 13px, transparent 14px);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: .95
}

.tier-decoration {
  position: absolute;
  z-index: 3;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  color: #ffe1d2;
  text-shadow: 0 1px 8px #ae4a9b;
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: 12px
}

.decorations-top {
  bottom: 16px;
  font-size: 19px;
  letter-spacing: 7px
}

.cake-platform {
  width: 384px;
  height: 60px;
  position: absolute;
  bottom: 70px;
  z-index: 2
}

.cake-platform-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 55px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #fff6e9, #d8b5bd 75%, #95718d);
  box-shadow: 0 12px 14px #0005
}

.cake-platform-side {
  position: absolute;
  left: 0;
  right: 0;
  top: 23px;
  height: 29px;
  border-radius: 50% / 35%;
  background: linear-gradient(#dec6c1, #a78a9c);
  z-index: -1
}

.cake-candles {
  position: absolute;
  z-index: 6;
  top: 61px;
  left: 50%;
  transform: translateX(-50%);
  width: 205px;
  height: 110px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 15px
}

.candle {
  position: relative;
  display: block;
  width: 16px;
  height: 65px;
  border-radius: 4px 4px 2px 2px;
  background: repeating-linear-gradient(150deg, #ffedf0 0px, #ffedf0 9px, #df91ad 10px, #df91ad 15px);
  box-shadow: inset -5px 0 7px #673f7a66, 2px 1px 3px #0004
}

.candle:nth-child(2),
.candle:nth-child(4) {
  height: 72px
}

.candle:nth-child(3) {
  height: 80px
}

.flame {
  position: absolute;
  left: 50%;
  top: -36px;
  transform: translateX(-50%);
  width: 18px;
  height: 31px;
  display: block;
  background: radial-gradient(ellipse at 49% 72%, #fffef2 0 14%, #ffe9aa 29%, #ff9b72 61%, transparent 75%);
  border-radius: 80% 40% 75% 40%;
  filter: drop-shadow(0 0 9px #ffc57e) drop-shadow(0 0 15px #ef8b53);
  animation: flameflicker .8s ease-in-out infinite alternate;
  transform-origin: bottom
}

.candle:nth-child(even) .flame {
  animation-delay: .3s
}

.smoke {
  position: absolute;
  width: 20px;
  height: 26px;
  left: -3px;
  top: -42px;
  border-radius: 50%;
  border: 3px solid #efe6e6aa;
  opacity: 0;
  filter: blur(3px);
  transform: translateY(0) scale(.4)
}

.cake-stage.blown .flame {
  animation: flameout .4s forwards
}

.cake-stage.blown .smoke {
  animation: smokefloat 1.9s ease-out .2s forwards
}

.cake-caption {
  position: absolute;
  bottom: 18px;
  color: #bba0b0;
  letter-spacing: .23em;
  font-size: 9px
}

.cake-float {
  position: absolute;
  color: #f2ccd1;
  text-shadow: 0 0 20px #edb3d2;
  font-size: 24px;
  animation: sparkle 4s infinite
}

.cake-float-one {
  top: 19%;
  left: 14%
}

.cake-float-two {
  top: 26%;
  right: 12%;
  animation-delay: 1s
}

.cake-float-three {
  bottom: 24%;
  left: 9%;
  animation-delay: 2s
}

.cake-float-four {
  bottom: 26%;
  right: 18%;
  animation-delay: 2.8s
}

/* ENVELOPE */
.letter-section {
  background: linear-gradient(135deg, #160f29 0%, #120c22 58%, #1c1126 100%)
}

.letter-layout {
  min-height: 450px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 45px;
  align-items: center
}

.letter-left>p:not(.section-label) {
  font-size: 14px;
  color: #b9abbf;
  line-height: 2;
  max-width: 390px;
  margin: 25px 0 34px
}

.letter-decoration {
  font-size: 9px;
  color: #927d9d
}

.letter-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  perspective: 1100px
}

.envelope-view {
  position: relative;
  width: 340px;
  height: 237px;
  transform: rotate(-5deg);
  transition: transform .6s var(--ease);
  filter: drop-shadow(0 20px 24px #0007)
}

.envelope-view:hover {
  transform: rotate(0deg) translateY(-6px)
}

.envelope-back {
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, #d7a8b1, #e7c7c5);
  border-radius: 5px
}

.letter-inside {
  position: absolute;
  z-index: 2;
  left: 30px;
  right: 30px;
  top: 19px;
  height: 175px;
  background: linear-gradient(#fff5ea, #f8e8e0);
  border-radius: 3px;
  box-shadow: 0 1px 10px #9c748e44;
  text-align: center;
  color: #b47d8b;
  font-family: var(--serif);
  font-size: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: transform .8s var(--ease)
}

.letter-inside-heart {
  font-size: 34px
}

.envelope-flap {
  position: absolute;
  z-index: 4;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 55%);
  background: linear-gradient(155deg, #f2d2ce, #e8b9c5 59%, #c794ac);
  transform-origin: top center;
  transition: transform 1s var(--ease);
  backface-visibility: hidden
}

.envelope-front {
  position: absolute;
  z-index: 3;
  inset: 0;
  clip-path: polygon(0 0, 50% 53%, 100% 0, 100% 100%, 0 100%);
  background: linear-gradient(155deg, #d5a2af, #f4d5d0 42%, #dfb7c1);
  border-radius: 0 0 5px 5px
}

.envelope-seal {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 103px;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #cc879f, #9b648f);
  width: 51px;
  height: 51px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 31px;
  color: #fbe3d0;
  box-shadow: 0 2px 7px #995f8055;
  transition: opacity .4s
}

.envelope-view.is-open .envelope-flap {
  transform: rotateX(180deg);
  z-index: 1
}

.envelope-view.is-open .letter-inside {
  transform: translateY(-65px)
}

.envelope-view.is-open .envelope-seal {
  opacity: 0
}

.letter-open-button {
  margin-top: 33px;
  background: none;
  border: 0;
  border-bottom: 1px solid #d9a6b9;
  padding: 0 0 9px;
  color: #f1c7c6;
  letter-spacing: .1em;
  font-size: 12px
}

.letter-open-button span {
  font-size: 19px;
  padding-left: 23px
}

.letter-open-button:hover {
  color: #fff
}

/* MODAL */
.letter-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 25px;
  overflow-y: auto
}

.letter-modal-backdrop {
  position: fixed;
  inset: 0;
  background: #080614dc;
  backdrop-filter: blur(14px)
}

.letter-paper {
  position: relative;
  z-index: 2;
  background: linear-gradient(140deg, #fffaf1, #f8e8e6);
  box-shadow: 0 35px 100px #000c;
  color: #4a3549;
  width: min(690px, 100%);
  max-height: min(89vh, 900px);
  overflow: auto;
  border-radius: 5px;
  padding: 55px clamp(28px, 6.5vw, 78px) 48px;
  animation: paperappear .65s var(--ease) both;
  outline: none
}

.letter-paper:before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid #b989a553;
  pointer-events: none
}

.letter-close {
  position: absolute;
  right: 22px;
  top: 20px;
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid #ad789477;
  border-radius: 50%;
  color: #6e5364
}

.paper-date {
  font-size: 10px;
  letter-spacing: .24em;
  text-align: center;
  color: #aa748d;
  margin: 0
}

.paper-divider {
  text-align: center;
  color: #b688aa;
  font-size: 24px;
  margin: 14px auto
}

.letter-paper h2 {
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 400;
  text-align: center;
  margin: 0 0 35px
}

.paper-greeting {
  font-family: var(--serif);
  font-size: 26px;
  margin: 0 0 21px
}

.paper-paragraphs p {
  font-size: 13px;
  line-height: 2.2;
  color: #5f5061;
  margin: 0 0 18px
}

.paper-signoff {
  font-family: var(--serif);
  font-size: 24px;
  margin: 27px 0 6px
}

.paper-signature {
  font-family: var(--serif);
  font-style: italic;
  font-size: 30px;
  color: #a56e8b;
  margin: 0
}

.paper-bottom {
  text-align: center;
  color: #bb7c96;
  font-size: 24px;
  margin-top: 21px
}

/* FINALE */
.finale {
  min-height: 740px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse 35% 45% at 50% 52%, #51305a7a, transparent 100%), linear-gradient(160deg, #0f0c22, #1b1026 55%, #0b091e)
}

.finale-ring {
  position: absolute;
  pointer-events: none;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1px solid #f8c8db20;
  transform: translate(-50%, -50%) rotateX(65deg)
}

.ring-one {
  width: 800px;
  height: 740px;
  animation: finalespin 25s linear infinite
}

.ring-two {
  width: 1120px;
  height: 960px;
  border-color: #e3c4e210;
  animation: finalespin 40s linear infinite reverse
}

.finale-stars {
  position: absolute;
  top: 12%;
  left: 23%;
  color: #f9d9da;
  font-size: 24px;
  animation: sparkle 4s infinite
}

.finale-inner {
  position: relative;
  z-index: 2;
  padding: 80px 0
}

.finale-center-star {
  color: #f7d7cc;
  font-size: 52px;
  text-shadow: 0 0 35px #e2aac0;
  margin: 0 0 15px;
  animation: sparkle 6s infinite
}

.finale h2 {
  font-size: clamp(55px, 7.4vw, 107px);
  line-height: 1.05
}

.finale-inner>p:not(.section-label) {
  font-family: var(--serif);
  font-size: 24px;
  color: #d1bdc9;
  margin: 24px auto 36px
}

.finale-signoff {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 38px
}

.finale-signoff span:first-child {
  font-size: 10px;
  color: #edc9bd;
  letter-spacing: .2em
}

.signoff-heart {
  font-size: 23px;
  color: #e9b4bf
}

.finale-signoff strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: .04em
}

.button-outline {
  border-color: #ecc1ca85;
  background: #ffffff09;
  color: #f2d3d1;
  min-width: 270px
}

.button-outline:hover {
  background: #e3abc619
}

.footer {
  height: 106px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px
}

.footer-brand {
  font-size: 23px
}

.footer-brand span {
  color: var(--pink);
  margin-left: 4px
}

.footer>span,
.footer>a {
  font-size: 9px;
  color: #887d93;
  letter-spacing: .18em
}

.footer>a:hover {
  color: var(--gold)
}

.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translate(-50%, 25px);
  z-index: 100;
  background: #2e2239;
  color: #f4deea;
  border: 1px solid #efd2d15e;
  padding: 12px 23px;
  border-radius: 50px;
  opacity: 0;
  pointer-events: none;
  font-size: 12px;
  box-shadow: 0 12px 35px #0006;
  transition: opacity .4s, transform .4s
}

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

/* MOTION */
@keyframes giftfloat {

  0%,
  100% {
    transform: translateY(0) rotateX(-8deg) rotateY(-25deg)
  }

  50% {
    transform: translateY(-11px) rotateX(-3deg) rotateY(-11deg)
  }
}

@keyframes sparkle {

  0%,
  100% {
    opacity: .28;
    filter: blur(0);
    transform: scale(.7)
  }

  50% {
    opacity: 1;
    filter: blur(.2px);
    transform: scale(1.2)
  }
}

@keyframes starglow {
  from {
    opacity: .28
  }

  to {
    opacity: .82
  }
}

@keyframes heartFloat {

  0%,
  100% {
    transform: translateY(7px) rotate(-15deg) rotateY(-10deg)
  }

  50% {
    transform: translateY(-14px) rotate(-13deg) rotateY(9deg)
  }
}

@keyframes orbitspin {
  0% {
    transform: rotate(-31deg) rotateX(71deg) rotateZ(0deg)
  }

  100% {
    transform: rotate(-31deg) rotateX(71deg) rotateZ(360deg)
  }
}

@keyframes orbitspin2 {
  0% {
    transform: rotate(24deg) rotateY(74deg) rotateZ(0deg)
  }

  100% {
    transform: rotate(24deg) rotateY(74deg) rotateZ(-360deg)
  }
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(.93);
    opacity: .6
  }

  50% {
    transform: scale(1.08);
    opacity: 1
  }
}

@keyframes mousewheel {
  0% {
    transform: translateY(0);
    opacity: 1
  }

  70%,
  100% {
    transform: translateY(10px);
    opacity: 0
  }
}

@keyframes marqueemove {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-50%)
  }
}

@keyframes flameflicker {
  from {
    transform: translateX(-50%) rotate(-8deg) scale(.9, 1)
  }

  to {
    transform: translateX(-50%) rotate(9deg) scale(1.05, 1.1)
  }
}

@keyframes flameout {
  to {
    opacity: 0;
    transform: translateX(-50%) scale(.1)
  }
}

@keyframes smokefloat {
  0% {
    opacity: .55;
    transform: translateY(0) scale(.4)
  }

  100% {
    opacity: 0;
    transform: translateY(-80px) scale(1.9)
  }
}

@keyframes cakehover {

  0%,
  100% {
    transform: translateY(4px) rotateX(8deg) rotateY(-8deg)
  }

  50% {
    transform: translateY(-9px) rotateX(8deg) rotateY(5deg)
  }
}

@keyframes paperappear {
  from {
    transform: translateY(46px) rotateX(-9deg) scale(.92);
    opacity: 0
  }

  to {
    transform: none;
    opacity: 1
  }
}

@keyframes finalespin {
  from {
    transform: translate(-50%, -50%) rotateX(65deg) rotateZ(0deg)
  }

  to {
    transform: translate(-50%, -50%) rotateX(65deg) rotateZ(360deg)
  }
}

/* RESPONSIVE */
@media(min-width:1600px) {
  .hero-content {
    gap: 70px
  }

  .hero-heading {
    font-size: 91px
  }
}

@media(max-width:1150px) {

  .container,
  .hero-bottom {
    width: calc(100% - 74px)
  }

  .site-header {
    padding: 0 37px
  }

  .hero-heading {
    font-size: clamp(50px, 5.7vw, 75px)
  }

  .hero-art {
    min-height: 380px
  }

  .heart-container {
    transform: scale(.9)
  }

  .hero-description {
    max-width: 420px
  }

  .gallery {
    min-height: 475px
  }

  .gallery-track {
    height: 475px
  }

  .memory-card {
    height: 420px
  }

  .cake-stage {
    transform: scale(.9)
  }

  .reason-card {
    padding: 27px;
    height: 300px
  }

  .reason-bottom {
    left: 27px;
    right: 27px
  }
}

@media(max-width:800px) {

  .container,
  .hero-bottom {
    width: calc(100% - 48px)
  }

  .site-header {
    height: 74px;
    padding: 0 24px
  }

  .brand {
    font-size: 22px
  }

  .hero {
    min-height: initial;
    padding-top: 108px;
    padding-bottom: 95px
  }

  .hero-content {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 0 0 60px
  }

  .hero-text {
    text-align: center;
    margin: 0 auto
  }

  .hero-heading {
    font-size: clamp(56px, 8vw, 78px);
    margin-bottom: 19px
  }

  .hero-small-heading {
    margin: 27px 0 8px
  }

  .eyebrow {
    justify-content: center
  }

  .hero-description {
    margin: 0 auto 24px;
    max-width: 560px
  }

  .hero-actions {
    justify-content: center
  }

  .hero-art {
    height: 480px;
    min-height: 0;
    width: min(570px, 100%);
    margin: auto
  }

  .hero-bottom {
    bottom: 22px;
    align-items: end
  }

  .scroll-indicator {
    font-size: 8px
  }

  .section {
    padding: 95px 0
  }

  .section-heading-row {
    align-items: start
  }

  .section h2 {
    font-size: clamp(43px, 6vw, 65px)
  }

  .gallery {
    min-height: 470px
  }

  .gallery-track {
    height: 470px
  }

  .memory-card {
    width: min(340px, 46%);
    margin-left: calc(min(340px, 46%)/-2);
    height: 415px
  }

  .memory-card[data-side='-1'] {
    transform: translateX(-77%) translateZ(-110px) rotateY(19deg)
  }

  .memory-card[data-side='1'] {
    transform: translateX(77%) translateZ(-110px) rotateY(-19deg)
  }

  .gallery-topline {
    font-size: 8px
  }

  .reasons-grid {
    gap: 12px
  }

  .reason-card {
    padding: 19px;
    height: 300px
  }

  .reason-bottom {
    left: 19px;
    right: 19px;
    bottom: 22px
  }

  .reason-bottom h3 {
    font-size: 28px
  }

  .reason-bottom p {
    font-size: 11px
  }

  .wish-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    text-align: center
  }

  .wish-copy>p:not(.section-label):not(.wish-feedback) {
    margin-inline: auto
  }

  .wish-prompt {
    justify-content: center
  }

  .cake-stage {
    height: 470px;
    transform: scale(.82);
    margin-top: -12px
  }

  .cake-stage.reveal.visible {
    transform: scale(.82)
  }

  .letter-layout {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 25px
  }

  .letter-left>p:not(.section-label) {
    margin: 21px auto
  }

  .letter-right {
    min-height: 350px
  }

  .finale {
    min-height: 650px
  }
}

@media(max-width:540px) {

  .container,
  .hero-bottom {
    width: calc(100% - 38px)
  }

  .site-header {
    height: 68px;
    padding: 0 19px
  }

  .brand {
    font-size: 19px
  }

  .brand-icon {
    font-size: 20px;
    margin-right: 7px
  }

  .header-right {
    gap: 6px
  }

  .header-date {
    font-size: 8px;
    letter-spacing: .1em
  }

  .header-separator {
    margin: 0 4px
  }

  .icon-button {
    width: 31px;
    height: 31px
  }

  .intro {
    padding: 14px
  }

  .intro-content {
    margin: 14px auto 22px
  }

  .intro-topline {
    font-size: 8px;
    gap: 7px;
    letter-spacing: .13em
  }

  .gift-stage {
    height: 214px;
    transform: scale(.81);
    margin: 0 auto -4px
  }

  .intro-date {
    font-size: 8px;
    margin: 3px 0 15px
  }

  .intro-heading {
    font-size: clamp(41px, 11vw, 58px)
  }

  .intro-copy {
    max-width: 280px;
    font-size: 12px;
    margin-bottom: 22px
  }

  .intro-button {
    min-width: 235px
  }

  .intro-hint {
    font-size: 7px
  }

  .hero {
    padding-top: 115px;
    padding-bottom: 100px
  }

  .hero-content {
    padding-bottom: 0
  }

  .eyebrow {
    font-size: 8px;
    letter-spacing: .1em
  }

  .eyebrow-line {
    width: 20px
  }

  .hero-small-heading {
    font-size: 18px;
    margin: 25px 0 8px
  }

  .hero-heading {
    font-size: clamp(48px, 12.5vw, 69px);
    letter-spacing: -.05em;
    line-height: 1.06
  }

  .hero-heading em {
    white-space: normal
  }

  .hero-description {
    font-size: 12px;
    line-height: 1.9
  }

  .hero-actions {
    flex-direction: column;
    gap: 12px
  }

  .hero-action-note {
    font-size: 15px
  }

  .hero-art {
    width: 100%;
    height: 345px;
    transform: scale(.83);
    margin: -8px auto -10px
  }

  .hero-background-orbit {
    display: none
  }

  .heart-container {
    transform: scale(.77)
  }

  .hero-art-bottom {
    bottom: -2%
  }

  .hero-bottom {
    bottom: 22px
  }

  .count-label {
    font-size: 8px;
    letter-spacing: .11em
  }

  .count-units {
    gap: 5px
  }

  .count-units>span {
    min-width: 22px
  }

  .count-units strong {
    font-size: 18px
  }

  .count-units small {
    font-size: 6px
  }

  .scroll-indicator {
    font-size: 0;
    gap: 5px
  }

  .scroll-arrow {
    font-size: 16px
  }

  .marquee {
    height: 50px
  }

  .marquee-track {
    gap: 27px
  }

  .marquee-track span {
    font-size: 15px
  }

  .section {
    padding: 76px 0
  }

  .section-heading {
    margin-bottom: 31px
  }

  .section-label {
    font-size: 9px;
    letter-spacing: .16em;
    margin-bottom: 17px
  }

  .section h2 {
    font-size: clamp(42px, 11vw, 57px)
  }

  .section-heading-row {
    display: block
  }

  .section-heading-row>p {
    max-width: none;
    font-size: 12px;
    margin-top: 13px
  }

  .gallery-topline {
    font-size: 7px;
    padding-bottom: 14px
  }

  .gallery-topline span:nth-child(2) {
    display: none
  }

  .gallery,
  .gallery-track {
    height: 405px;
    min-height: 0
  }

  .memory-card {
    width: 71%;
    height: 362px;
    top: 16px;
    margin-left: -35.5%;
    padding: 5px
  }

  .memory-card:after {
    inset: 5px
  }

  .memory-card[data-side='0'] {
    transform: translateX(0) translateZ(50px) rotateY(0deg)
  }

  .memory-card[data-side='-1'] {
    transform: translateX(-82%) translateZ(-180px) rotateY(25deg)
  }

  .memory-card[data-side='1'] {
    transform: translateX(82%) translateZ(-180px) rotateY(-25deg)
  }

  .memory-card-content {
    left: 21px;
    bottom: 19px;
    right: 17px
  }

  .memory-card-title {
    font-size: 27px
  }

  .memory-card-label {
    font-size: 7px
  }

  .memory-card-caption {
    font-size: 10px
  }

  .gallery-controls {
    padding: 0
  }

  .gallery-dot {
    width: 18px
  }

  .gallery-dot[aria-current='true'] {
    width: 38px
  }

  .round-button {
    width: 42px;
    height: 42px
  }

  .reasons-grid {
    grid-template-columns: 1fr;
    gap: 13px;
    margin-top: 35px
  }

  .reason-card {
    height: 225px;
    padding: 25px
  }

  .reason-bottom {
    left: 25px;
    bottom: 21px;
    right: 25px
  }

  .reason-bottom h3 {
    font-size: 29px;
    margin-bottom: 7px
  }

  .reason-bottom p {
    font-size: 11px;
    max-width: 320px
  }

  .reason-icon {
    font-size: 43px
  }

  .wish-copy h2 {
    font-size: clamp(49px, 12vw, 68px)
  }

  .wish-copy>p:not(.section-label):not(.wish-feedback) {
    font-size: 12px;
    line-height: 1.9
  }

  .wish-prompt {
    margin-top: 25px;
    font-size: 8px
  }

  .wish-feedback {
    font-size: 16px
  }

  .cake-stage {
    height: 360px;
    transform: scale(.72);
    margin: -35px auto -35px;
    width: 100%;
    min-width: 0;
    left: auto;
    position: relative;
    translate: none
  }

  .cake-stage.reveal.visible {
    transform: scale(.72)
  }

  .cake-stage .cake-caption {
    bottom: 0
  }

  .letter-left>p:not(.section-label) {
    font-size: 12px
  }

  .letter-right {
    min-height: 310px
  }

  .envelope-view {
    transform: rotate(-5deg) scale(.83)
  }

  .envelope-view:hover {
    transform: rotate(0) scale(.83)
  }

  .letter-open-button {
    margin-top: 6px
  }

  .finale {
    min-height: 600px
  }

  .finale h2 {
    font-size: clamp(48px, 12vw, 70px)
  }

  .finale-inner>p:not(.section-label) {
    font-size: 21px
  }

  .finale-signoff {
    gap: 10px
  }

  .finale-signoff span:first-child {
    font-size: 8px
  }

  .finale-signoff strong {
    font-size: 18px
  }

  .footer {
    height: auto;
    min-height: 145px;
    flex-direction: column;
    justify-content: center;
    gap: 14px
  }

  .footer>span,
  .footer>a {
    font-size: 8px
  }

  .letter-paper {
    padding: 49px 27px 33px;
    max-height: 87vh
  }

  .letter-paper h2 {
    font-size: 43px
  }

  .paper-greeting {
    font-size: 24px
  }

  .paper-paragraphs p {
    font-size: 12px;
    line-height: 2
  }
}

@media(max-height:700px) and (min-width:800px) {
  .intro-content {
    margin: 5px auto
  }

  .gift-stage {
    height: 170px;
    transform: scale(.78);
    margin: -15px auto
  }

  .intro-heading {
    font-size: clamp(43px, 5vw, 60px)
  }

  .intro-copy {
    margin-bottom: 17px
  }

  .intro-hint {
    margin-top: 13px
  }

  .hero {
    min-height: 740px
  }
}

@media(hover:none) {
  .cursor-glow {
    display: none
  }
}

@media(prefers-reduced-motion:reduce) {

  *,
  *:before,
  *:after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important
  }

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


/* ============================================================
   THE NAME WRITTEN IN FIREWORKS — NEW SECTION ONLY
   Original website styling is retained, unchanged, above.
   ============================================================ */
.name-reveal-section {
  isolation: isolate;
  text-align: center;
  background: radial-gradient(ellipse 55% 43% at 50% 58%, rgba(106, 55, 119, .25), transparent 78%), linear-gradient(180deg, #170e26 0%, #100b20 47%, #120b21 100%);
  border-top: 1px solid rgba(234, 194, 204, .09);
  border-bottom: 1px solid rgba(234, 194, 204, .12)
}

.name-surprise-aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .65;
  background: radial-gradient(circle at 17% 31%, #ce8cb328, transparent 28%), radial-gradient(circle at 83% 64%, #9167d529, transparent 25%)
}

.name-surprise-inner {
  position: relative;
  z-index: 1
}

.name-surprise-heading h2 {
  font-size: clamp(49px, 5.2vw, 82px);
  font-family: var(--serif);
  line-height: 1.13
}

.name-surprise-heading h2 em {
  font-style: italic;
  color: #f3b3c6
}

.name-surprise-heading>p:last-child {
  font-size: 14px;
  line-height: 1.95;
  color: #bfb0c7;
  max-width: 440px;
  margin: 22px auto 0
}

.name-showcase {
  position: relative;
  min-height: 325px;
  margin: 18px auto 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  perspective: 1300px;
  overflow: visible
}

.name-showcase-glow {
  position: absolute;
  left: 50%;
  top: 40%;
  width: min(710px, 96vw);
  height: 255px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(35px);
  background: radial-gradient(ellipse, #be7faa32 0%, #7951b424 36%, transparent 74%);
  pointer-events: none;
  transition: opacity .8s, filter .8s;
  opacity: .65
}

.name-showcase.is-awake .name-showcase-glow {
  opacity: 1;
  filter: blur(25px)
}

.name-showcase-orbit {
  position: absolute;
  width: min(690px, 95%);
  height: 185px;
  left: 50%;
  top: 43%;
  border: 1px solid #e6afce45;
  border-radius: 50%;
  box-shadow: 0 0 25px #efb2c51d, inset 0 0 16px #ca8ca926;
  transform: translate(-50%, -50%) rotate(-12deg) rotateX(71deg);
  animation: nameOrbit 22s ease-in-out infinite alternate;
  pointer-events: none
}

.name-showcase-spark {
  position: absolute;
  font-size: 24px;
  color: #f5cddb;
  text-shadow: 0 0 17px #f3b5c9;
  animation: nameTwinkle 4s ease-in-out infinite alternate;
  pointer-events: none
}

.name-spark-one {
  left: 9%;
  top: 25%
}

.name-spark-two {
  right: 13%;
  top: 17%;
  font-size: 17px;
  animation-delay: 1s
}

.name-spark-three {
  right: 9%;
  bottom: 28%;
  font-size: 28px;
  animation-delay: 2s
}

.name-spark-four {
  left: 16%;
  bottom: 26%;
  font-size: 13px;
  animation-delay: .5s
}

.name-letter-track {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, .75vw, 17px);
  max-width: 100%;
  min-height: 215px;
  padding: 10px 8px 22px;
  transform-style: preserve-3d
}

.name-letter-slot {
  display: grid;
  place-items: center;
  position: relative;
  min-width: clamp(45px, 8.4vw, 131px);
  height: clamp(95px, 11vw, 171px);
  font: 400 clamp(73px, 10vw, 146px)/1 var(--serif);
  perspective: 1000px;
  transform-style: preserve-3d
}

.name-letter-slot:after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 23%;
  width: 54%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #edc1cd66, transparent);
  transition: background .6s, box-shadow .6s
}

.name-letter-slot.is-revealed:after {
  background: #ffd6db;
  box-shadow: 0 0 15px #f6a8b6
}

.name-letter-glyph {
  display: block;
  opacity: 0;
  visibility: hidden;
  transform-origin: 50% 75%;
  transform: perspective(850px) translateY(58px) rotateX(-88deg) scale(.55);
  filter: blur(12px);
  background: linear-gradient(160deg, #fffaf4 15%, #f6cbd2 52%, #cfa5e5 90%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 0 transparent);
  will-change: transform, opacity
}

.name-letter-slot.is-revealed .name-letter-glyph {
  visibility: visible;
  animation: nameLetterBloom .86s cubic-bezier(.17, 1.3, .35, 1) both
}

.name-showcase-baseline {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  font-size: 9px;
  letter-spacing: .26em;
  color: #bb9ab5;
  white-space: nowrap
}

.name-showcase-baseline span {
  font-size: 12px;
  color: #ebc1c9;
  margin: 0 17px
}

.name-reveal-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-top: 4px
}

.name-reveal-button {
  min-width: 215px;
  justify-content: center
}

.name-reveal-button:disabled {
  opacity: .7;
  cursor: wait;
  pointer-events: none
}

.name-reveal-feedback {
  font: italic 19px/1.5 var(--serif);
  color: #d5aac0;
  min-height: 28px;
  margin: 13px 0 0
}

.name-showcase.is-complete .name-letter-slot.is-revealed .name-letter-glyph {
  animation: nameCompleteFloat 3.7s ease-in-out infinite alternate
}

.name-showcase.is-complete .name-letter-slot:nth-child(even) .name-letter-glyph {
  animation-delay: -1.1s
}

@keyframes nameLetterBloom {
  0% {
    opacity: 0;
    transform: perspective(850px) translateY(58px) rotateX(-88deg) scale(.55);
    filter: blur(12px) drop-shadow(0 0 0 transparent)
  }

  55% {
    opacity: 1;
    transform: perspective(850px) translateY(-8px) rotateX(16deg) scale(1.12);
    filter: blur(0) drop-shadow(0 0 36px #f6a8cdb8)
  }

  100% {
    opacity: 1;
    transform: perspective(850px) translateY(0) rotateX(0deg) scale(1);
    filter: blur(0) drop-shadow(0 0 22px #f6abc190)
  }
}

@keyframes nameCompleteFloat {
  from {
    opacity: 1;
    transform: translateY(0) rotateY(-3deg);
    filter: drop-shadow(0 0 16px #f6abc175)
  }

  to {
    opacity: 1;
    transform: translateY(-6px) rotateY(3deg);
    filter: drop-shadow(0 0 33px #f6abc1b0)
  }
}

@keyframes nameTwinkle {
  from {
    opacity: .3;
    transform: scale(.7) rotate(-18deg)
  }

  to {
    opacity: 1;
    transform: scale(1.18) rotate(25deg)
  }
}

@keyframes nameOrbit {
  from {
    transform: translate(-50%, -50%) rotate(-16deg) rotateX(71deg)
  }

  to {
    transform: translate(-50%, -50%) rotate(18deg) rotateX(71deg)
  }
}

@media(max-width:900px) {
  .name-showcase {
    min-height: 310px
  }

  .name-letter-slot {
    min-width: clamp(43px, 9vw, 80px);
    height: 122px;
    font-size: clamp(64px, 10vw, 102px)
  }

  .name-letter-track {
    min-height: 175px
  }

  .name-showcase-orbit {
    height: 158px
  }
}

@media(max-width:540px) {
  .name-reveal-section {
    padding: 80px 0 87px
  }

  .name-surprise-heading h2 {
    font-size: clamp(43px, 10.5vw, 59px)
  }

  .name-surprise-heading>p:last-child {
    font-size: 12px;
    margin-top: 18px;
    line-height: 1.9
  }

  .name-showcase {
    min-height: 260px;
    margin-top: 17px
  }

  .name-letter-track {
    gap: 0;
    min-height: 145px;
    padding: 10px 0 18px
  }

  .name-letter-slot {
    min-width: clamp(40px, 13vw, 56px);
    height: 97px;
    font-size: clamp(54px, 13vw, 68px)
  }

  .name-showcase-orbit {
    height: 120px;
    width: 100%
  }

  .name-showcase-glow {
    height: 200px
  }

  .name-showcase-baseline {
    bottom: 24px;
    font-size: 7px;
    letter-spacing: .12em
  }

  .name-showcase-baseline span {
    margin: 0 6px
  }

  .name-showcase-spark {
    font-size: 16px
  }

  .name-spark-one {
    left: 1%;
    top: 17%
  }

  .name-spark-two {
    right: 3%;
    top: 9%
  }

  .name-spark-three {
    right: 2%;
    bottom: 20%
  }

  .name-spark-four {
    left: 6%;
    bottom: 20%
  }

  .name-reveal-button {
    min-width: 200px
  }

  .name-reveal-feedback {
    font-size: 16px;
    text-align: center
  }
}

@media(max-width:355px) {
  .name-letter-slot {
    min-width: clamp(30px, 12.9vw, 45px);
    font-size: clamp(40px, 12.5vw, 57px)
  }

  .name-showcase-baseline {
    font-size: 6px;
    letter-spacing: .08em
  }
}

@media(prefers-reduced-motion:reduce) {
  .name-letter-slot.is-revealed .name-letter-glyph {
    opacity: 1;
    visibility: visible;
    transform: none;
    filter: drop-shadow(0 0 15px #f6abc175)
  }

  .name-showcase.is-complete .name-letter-slot.is-revealed .name-letter-glyph {
    animation: none
  }
}

/* ============================================================
   v3 additions: independent name fireworks + TWO CINEMATIC VIDEO SECTIONS.
   Existing design tokens, color palette, layouts and imagery above untouched.
   ============================================================ */
.name-reveal-section {
  isolation: isolate;
}

.name-local-fireworks {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  display: block;
}

.name-surprise-inner {
  position: relative;
  z-index: 5;
  pointer-events: none;
}

.name-surprise-inner button {
  pointer-events: auto;
}

.name-letter-track {
  width: 100%;
}

.name-letter-glyph {
  color: #f7d5db;
}

/* fallback for browsers without gradient text */
.name-letter-track.name-long {
  gap: 0;
}

.name-long .name-letter-slot {
  min-width: 0;
  width: calc(100% / var(--letter-count));
  font-size: clamp(26px, 6vw, 80px);
}

.name-very-long .name-letter-slot {
  font-size: clamp(16px, 4vw, 60px);
}

@media (max-width:540px) {
  .name-letter-slot {
    min-width: 0;
    flex: 1 1 0;
    width: auto;
  }

  .name-letter-track {
    max-width: 100%;
  }

  .name-letter-track.name-long .name-letter-slot {
    font-size: clamp(21px, 6.5vw, 41px);
  }

  .name-letter-track.name-very-long .name-letter-slot {
    font-size: clamp(15px, 4.8vw, 34px);
  }
}

/* Film chapter one: cinematic landscape. */
.birthday-film-section {
  isolation: isolate;
  background: radial-gradient(ellipse 48% 42% at 9% 52%, rgba(99, 59, 105, .28), transparent 86%),
    linear-gradient(180deg, #0b0a1b 0%, #151026 53%, #0b0a1b 100%);
  border-top: 1px solid rgba(238, 194, 216, .07);
  padding-top: 125px;
  padding-bottom: 122px;
}

.film-ambient {
  position: absolute;
  border-radius: 50%;
  filter: blur(68px);
  pointer-events: none;
  z-index: 0;
}

.film-ambient-left {
  height: 420px;
  width: 520px;
  left: -270px;
  top: 25%;
  background: rgba(126, 70, 142, .18);
}

.film-container {
  position: relative;
  z-index: 1;
}

.film-heading {
  margin-bottom: 43px;
}

.film-heading .section-heading-row {
  align-items: end;
}

.film-heading .section-heading-row>p {
  max-width: 277px;
  font-size: 14px;
}

.film-cinema-card {
  position: relative;
  width: min(1120px, 100%);
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 17px;
  background: #221b35;
  border: 1px solid rgba(246, 205, 210, .27);
  box-shadow: 0 29px 100px rgba(0, 0, 0, .46), 0 0 0 7px rgba(236, 171, 197, .045), 0 0 95px rgba(182, 94, 157, .12);
  isolation: isolate;
}

.film-video {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: contain;
  background: #1c152b;
}

.film-cinema-card>.film-video,
.film-portrait-card>.film-video {
  position: absolute;
  inset: 0;
}

.film-corner {
  position: absolute;
  z-index: 5;
  top: 23px;
  left: 26px;
  pointer-events: none;
  font-size: 9px;
  letter-spacing: .22em;
  color: #ffeddd;
  text-shadow: 0 2px 15px #0008;
}

.film-frame-highlight {
  position: absolute;
  z-index: 5;
  inset: 12px;
  border: 1px solid rgba(255, 232, 220, .16);
  pointer-events: none;
  border-radius: 9px;
}

.film-poster-cover {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: linear-gradient(180deg, rgba(10, 8, 27, .19) 4%, rgba(24, 15, 36, .23) 43%, rgba(10, 7, 25, .78) 100%);
  transition: opacity .4s ease, visibility .4s ease;
}

.film-cinema-card.film-is-playing>.film-poster-cover,
.film-portrait-card.film-is-playing>.film-poster-cover {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.film-play-halo {
  position: absolute;
  height: 220px;
  width: 220px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 211, 222, .16), transparent 73%);
  filter: blur(18px);
  pointer-events: none;
}

.film-play-button {
  width: 91px;
  height: 91px;
  border-radius: 50%;
  border: 1px solid rgba(255, 230, 221, .72);
  background: linear-gradient(135deg, rgba(255, 233, 226, .36), rgba(244, 172, 202, .12));
  box-shadow: 0 13px 48px rgba(0, 0, 0, .27), inset 0 0 0 8px rgba(255, 231, 228, .08);
  display: grid;
  place-items: center;
  backdrop-filter: blur(12px);
  transition: transform .25s ease, background .25s ease;
}

.film-play-button:hover,
.film-play-button:focus-visible {
  transform: scale(1.075);
  background: linear-gradient(130deg, rgba(255, 239, 226, .52), rgba(244, 172, 202, .24));
}

.film-play-triangle {
  margin-left: 6px;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 23px solid #fff1e6;
  filter: drop-shadow(0 0 8px #ffe2e677);
}

.film-cover-caption {
  position: absolute;
  bottom: 9%;
  left: 8%;
  right: 8%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #fff0ef;
  text-align: left;
  gap: 8px;
}

.film-mini-kicker {
  font-size: 9px;
  font-weight: 600;
  color: #ffd9c8;
  letter-spacing: .25em;
}

.film-cover-caption strong {
  font: 400 clamp(35px, 4.5vw, 68px)/1.12 var(--serif);
  letter-spacing: -.03em;
  text-shadow: 0 2px 20px #0008;
}

.film-cover-action {
  font-size: 9px;
  letter-spacing: .19em;
  color: #dcb8c8;
  margin-top: 9px;
  line-height: 1.6;
}

.film-bottom-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin: 27px auto 0;
  width: min(1120px, 100%);
  color: #ae96b5;
  font-size: 9px;
  letter-spacing: .2em;
}

.film-bottom-line span:first-child {
  color: #e8c7a6;
}

.film-bottom-line span:last-child {
  font-size: 21px;
  color: #ebbfce;
}

.film-error .film-cover-action {
  color: #fff2db;
}

/* Film chapter two: intimate portrait video, like a moving love letter. */
.birthday-message-film {
  background: radial-gradient(ellipse 47% 57% at 83% 54%, rgba(105, 55, 101, .21), transparent 86%),
    linear-gradient(130deg, #0e0b1d, #1c112b 62%, #100a20);
  padding: 110px 0 130px;
  isolation: isolate;
}

.film-ambient-right {
  width: 390px;
  height: 380px;
  right: -150px;
  bottom: 7%;
  background: rgba(166, 89, 135, .19);
}

.message-film-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(40px, 7vw, 115px);
  align-items: center;
}

.message-film-copy {
  position: relative;
}

.message-film-copy h2 {
  font-size: clamp(54px, 5.4vw, 84px);
  line-height: 1.12;
}

.message-film-copy>p:not(.section-label) {
  color: #b9adc0;
  max-width: 420px;
  line-height: 2.05;
  font-size: 14px;
  margin: 26px 0 30px;
}

.message-film-small-star {
  display: block;
  margin: 35px 0 4px;
  font: 44px/1 var(--serif);
  color: #f4d9cd;
  text-shadow: 0 0 35px #d6a2c6;
}

.message-film-accent {
  color: #e2b5c7;
  font-size: 9px;
  letter-spacing: .19em;
  display: flex;
  align-items: center;
  gap: 13px;
}

.message-film-accent-line {
  display: inline-block;
  width: 35px;
  height: 1px;
  background: #e2b5c7;
}

.message-film-decor {
  display: block;
  font: italic 26px/1.4 var(--serif);
  color: rgba(216, 164, 195, .55);
  margin-top: 62px;
}

.message-film-media {
  position: relative;
  width: 100%;
  max-width: 510px;
  margin-inline: auto;
  padding: 23px 18px 40px;
}

.message-film-halo {
  position: absolute;
  inset: 5% -8% 3%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(205, 128, 169, .22), transparent 72%);
  filter: blur(35px);
  pointer-events: none;
}

.film-portrait-card {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 220px 220px 14px 14px;
  background: #291f36;
  border: 1px solid rgba(249, 214, 210, .36);
  box-shadow: 0 32px 85px rgba(0, 0, 0, .49), 0 0 0 8px rgba(227, 175, 204, .045), 0 0 70px rgba(204, 133, 168, .13);
  isolation: isolate;
}

.film-portrait-card .film-poster-cover {
  background: linear-gradient(180deg, rgba(17, 12, 32, .05), rgba(20, 11, 32, .26) 40%, rgba(14, 8, 28, .85));
}

.film-portrait-card .film-play-button {
  width: 76px;
  height: 76px;
}

.film-portrait-card .film-play-triangle {
  border-top-width: 12px;
  border-bottom-width: 12px;
  border-left-width: 20px;
}

.film-portrait-card .film-cover-caption {
  left: 9%;
  right: 9%;
  bottom: 11%;
}

.film-portrait-card .film-cover-caption strong {
  font-size: clamp(30px, 3.7vw, 48px);
}

.message-film-badge {
  position: absolute;
  z-index: 2;
  left: -18px;
  bottom: 0;
  right: 40px;
  display: flex;
  gap: 12px;
  align-items: center;
  color: #e9bfc7;
  font-size: 9px;
  letter-spacing: .13em;
  line-height: 1.5;
}

.message-film-badge span:first-child {
  font: 38px/1 var(--serif);
}

/* Consistent interaction sizes, safe-area padding and responsive details. */
.film-play-button {
  touch-action: manipulation;
}

@media (max-width:1100px) {
  .message-film-grid {
    gap: 42px;
  }

  .message-film-copy h2 {
    font-size: clamp(52px, 5.7vw, 72px);
  }

  .message-film-decor {
    margin-top: 38px;
  }
}

@media (max-width:800px) {
  .birthday-film-section {
    padding: 90px 0 98px;
  }

  .birthday-message-film {
    padding: 90px 0 95px;
  }

  .film-heading {
    margin-bottom: 31px;
  }

  .message-film-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .message-film-copy h2 {
    font-size: clamp(50px, 7vw, 73px);
  }

  .message-film-copy>p:not(.section-label) {
    margin: 23px auto;
  }

  .message-film-accent {
    justify-content: center;
  }

  .message-film-small-star {
    margin: 15px auto 11px;
  }

  .message-film-decor {
    margin-top: 25px;
  }

  .message-film-media {
    max-width: 480px;
  }

  .message-film-badge {
    left: 0;
    justify-content: center;
  }
}

@media (max-width:540px) {
  .birthday-film-section {
    padding: 78px 0 77px;
  }

  .birthday-message-film {
    padding: 79px 0 78px;
  }

  .film-heading .section-heading-row {
    display: block;
    text-align: center;
  }

  .film-heading .section-heading-row>p {
    max-width: 310px;
    font-size: 12px;
    margin: 19px auto 0;
    line-height: 1.8;
  }

  .film-heading h2 {
    font-size: clamp(39px, 10.3vw, 60px);
  }

  .film-cinema-card {
    border-radius: 12px;
    aspect-ratio: 4 / 3;
  }

  .film-frame-highlight {
    inset: 7px;
    border-radius: 7px;
  }

  .film-corner {
    top: 15px;
    left: 14px;
    font-size: 7px;
  }

  .film-play-button {
    width: 66px;
    height: 66px;
  }

  .film-play-triangle {
    border-top-width: 11px;
    border-bottom-width: 11px;
    border-left-width: 17px;
    margin-left: 4px;
  }

  .film-cover-caption {
    left: 7%;
    right: 7%;
    bottom: 9%;
    gap: 5px;
  }

  .film-cover-caption strong {
    font-size: clamp(25px, 7.8vw, 45px);
  }

  .film-cover-action,
  .film-mini-kicker {
    font-size: 7px;
    letter-spacing: .16em;
  }

  .film-bottom-line {
    margin-top: 21px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 8px 15px;
    font-size: 7px;
  }

  .film-bottom-line span:last-child {
    display: none;
  }

  .message-film-copy h2 {
    font-size: clamp(44px, 11vw, 63px);
  }

  .message-film-copy>p:not(.section-label) {
    font-size: 12px;
  }

  .message-film-decor {
    font-size: 23px;
  }

  .message-film-media {
    padding: 8px 8px 31px;
    max-width: 410px;
  }

  .film-portrait-card {
    border-radius: 43% 43% 12px 12px;
  }

  .film-portrait-card .film-play-button {
    width: 69px;
    height: 69px;
  }

  .message-film-badge {
    bottom: 0;
    right: 0;
    font-size: 7px;
  }

  .message-film-badge span:first-child {
    font-size: 28px;
  }

  .name-surprise-inner button {
    min-height: 50px;
  }

  .intro {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .intro-content {
    flex-shrink: 0;
  }
}

@media(max-width:360px) {
  .film-cover-caption strong {
    font-size: 25px;
  }

  .film-mini-kicker {
    font-size: 6px;
  }

  .message-film-accent {
    font-size: 8px;
  }

  .film-bottom-line {
    letter-spacing: .1em;
  }
}

@media(max-height:550px) and (orientation:landscape) {
  .intro {
    overflow-y: auto;
    align-items: flex-start;
  }

  .intro-content {
    margin-top: 14px;
    margin-bottom: 14px;
  }

  .hero {
    padding-top: 85px;
  }
}