:root {
  --bg-cream: #fff9f5;
  --rose-soft: #ffc3da;
  --rose: #ff5da8;
  --rose-deep: #b11f65;
  --ink: #3f2231;
  --shadow: 0 20px 45px rgba(128, 24, 76, 0.14);
  --radius-lg: 24px;
  --radius-md: 18px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Manrope", "Segoe UI", sans-serif;
  line-height: 1.6;
  background:
    radial-gradient(circle at 10% 7%, rgba(255, 93, 168, 0.16), transparent 42%),
    radial-gradient(circle at 96% 18%, rgba(255, 186, 221, 0.42), transparent 35%),
    linear-gradient(165deg, var(--bg-cream), #fff0f7 42%, #fff7f4);
  overflow-x: hidden;
}

#petals {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.petal {
  position: absolute;
  top: -12vh;
  font-size: clamp(0.75rem, 1.3vw, 1rem);
  opacity: 0.32;
  color: var(--rose-deep);
  filter: drop-shadow(0 2px 3px rgba(130, 54, 76, 0.25));
  animation: petal-fall linear infinite;
}

@keyframes petal-fall {
  0% {
    transform: translate3d(0, -12vh, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(var(--drift), 110vh, 0) rotate(430deg);
  }
}

.page-shell {
  position: relative;
  z-index: 1;
  width: min(860px, 94vw);
  margin: 0 auto;
  padding: clamp(1.2rem, 4.4vw, 2.3rem) 0 clamp(3rem, 8vw, 4.8rem);
}

.hero {
  text-align: center;
  padding: clamp(1.25rem, 5vw, 2.8rem) clamp(0.4rem, 2.2vw, 1.4rem);
}

.eyebrow {
  margin: 0;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: #a43b65;
}

h1,
h2 {
  margin: 0;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  line-height: 1.1;
  color: #8b2f57;
}

h1 {
  margin-top: 0.42rem;
  font-size: clamp(2rem, 11.5vw, 4rem);
  font-weight: 600;
}

.subtitle {
  margin: 0.58rem 0 0;
  font-size: clamp(0.96rem, 4vw, 1.2rem);
  color: #9b3f68;
}

.letter-card,
.slideshow-section {
  margin-top: clamp(0.9rem, 3.6vw, 1.8rem);
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.letter-card {
  padding: clamp(0.3rem, 1.2vw, 0.8rem) clamp(0.2rem, 1vw, 0.5rem);
  text-align: center;
}

.letter-card h2 {
  font-size: clamp(1.55rem, 8vw, 2.7rem);
}

.letter-card p {
  margin: 0.75rem 0;
  font-size: clamp(0.97rem, 3.8vw, 1.12rem);
}

.signature {
  font-weight: 600;
  color: var(--rose-deep);
}

.slideshow-section {
  padding: clamp(0.7rem, 2.4vw, 1.2rem) 0 0;
}

.slideshow {
  position: relative;
}

.slides-data {
  display: none;
}

.cinema-stage {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #ffddeb;
  box-shadow: 0 14px 30px rgba(155, 43, 98, 0.2);
  aspect-ratio: 3 / 4;
}

.frame {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  z-index: 1;
}

.frame.is-current {
  opacity: 1;
  z-index: 2;
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.95) contrast(1.05);
}

.frame.incoming {
  z-index: 3;
  opacity: 1;
}

.frame.outgoing {
  z-index: 2;
}

.frame.incoming img {
  animation-duration: var(--transition-ms, 1500ms);
  animation-fill-mode: both;
  animation-timing-function: ease;
}

.frame.outgoing img {
  animation-duration: var(--transition-ms, 1500ms);
  animation-fill-mode: both;
  animation-timing-function: ease;
}

.frame img.pan-a {
  animation: kenburns-a var(--pan-ms, 6200ms) ease-in-out forwards;
}

.frame img.pan-b {
  animation: kenburns-b var(--pan-ms, 6200ms) ease-in-out forwards;
}

.frame img.pan-c {
  animation: kenburns-c var(--pan-ms, 6200ms) ease-in-out forwards;
}

@keyframes kenburns-a {
  from {
    transform: scale(1.06) translateX(-2.2%) translateY(0.6%);
  }
  to {
    transform: scale(1.16) translateX(2.3%) translateY(-0.8%);
  }
}

@keyframes kenburns-b {
  from {
    transform: scale(1.05) translateX(1.9%) translateY(-1.3%);
  }
  to {
    transform: scale(1.15) translateX(-2.1%) translateY(1%);
  }
}

@keyframes kenburns-c {
  from {
    transform: scale(1.04) translateY(-2%);
  }
  to {
    transform: scale(1.14) translateY(1.6%);
  }
}

.transition-fade .frame.incoming {
  animation: frame-fade-in var(--transition-ms, 1500ms) ease forwards;
}

.transition-fade .frame.outgoing {
  animation: frame-fade-out var(--transition-ms, 1500ms) ease forwards;
}

@keyframes frame-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes frame-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.12;
  }
}

.transition-slide .frame.incoming img {
  animation-name: slide-in;
}

.transition-slide .frame.outgoing img {
  animation-name: slide-out;
}

@keyframes slide-in {
  from {
    transform: scale(1.11) translateX(8%);
  }
  to {
    transform: scale(1.13) translateX(0);
  }
}

@keyframes slide-out {
  from {
    transform: scale(1.1) translateX(0);
  }
  to {
    transform: scale(1.05) translateX(-8%);
  }
}

.transition-zoom .frame.incoming img {
  animation-name: zoom-in;
}

.transition-zoom .frame.outgoing img {
  animation-name: zoom-out;
}

@keyframes zoom-in {
  from {
    transform: scale(1.28);
    filter: saturate(1.2) blur(0.8px);
  }
  to {
    transform: scale(1.12);
    filter: saturate(1.03) blur(0);
  }
}

@keyframes zoom-out {
  from {
    transform: scale(1.1);
    opacity: 1;
  }
  to {
    transform: scale(0.98);
    opacity: 0.2;
  }
}

.transition-heart .frame.incoming {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Cpath fill='white' d='M50 84 C49 83 17 61 8 40 C0 22 12 7 29 7 C40 7 47 13 50 20 C53 13 60 7 71 7 C88 7 100 22 92 40 C83 61 51 83 50 84 Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Cpath fill='white' d='M50 84 C49 83 17 61 8 40 C0 22 12 7 29 7 C40 7 47 13 50 20 C53 13 60 7 71 7 C88 7 100 22 92 40 C83 61 51 83 50 84 Z'/%3E%3C/svg%3E");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: heart-reveal var(--transition-ms, 1700ms) cubic-bezier(0.2, 0.78, 0.25, 1)
    forwards;
}

.transition-heart .frame.outgoing {
  animation: frame-heart-fade var(--transition-ms, 1700ms) ease forwards;
}

@keyframes heart-reveal {
  0% {
    opacity: 0;
    -webkit-mask-size: 1% 1%;
    mask-size: 1% 1%;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    -webkit-mask-size: 280% 280%;
    mask-size: 280% 280%;
  }
}

@keyframes frame-heart-fade {
  from {
    opacity: 1;
    filter: brightness(1);
  }
  to {
    opacity: 0.1;
    filter: brightness(0.8);
  }
}

.dots {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: #f2a3c8;
  transition: transform 180ms ease, background 180ms ease;
}

.dot.is-active {
  background: var(--rose);
  transform: scale(1.2);
}

[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 520ms ease, transform 520ms ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 760px) {
  .page-shell {
    width: min(960px, 92vw);
  }

  .cinema-stage {
    max-height: min(78vh, 900px);
  }
}