:root {
  --bg-main: #fff8f2;
  --bg-soft: #ffe4e5;
  --bg-accent: #fff0bf;
  --card: rgba(255, 255, 255, 0.34);
  --card-strong: rgba(255, 255, 255, 0.6);
  --text-main: #512c37;
  --text-soft: rgba(81, 44, 55, 0.76);
  --accent: #f29aa1;
  --accent-strong: #d66479;
  --accent-gold: #f2d78d;
  --shadow: 0 24px 90px rgba(156, 86, 98, 0.2);
  --border: rgba(255, 255, 255, 0.52);
  --overlay-dark: rgba(25, 13, 19, 0.4);
}

* {
  box-sizing: border-box;
}

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

body {
  overflow-x: hidden;
  font-family: "Manrope", sans-serif;
  color: var(--text-main);
  background:
    radial-gradient(circle at top left, rgba(255, 248, 208, 0.9), transparent 30%),
    radial-gradient(circle at 78% 16%, rgba(255, 209, 224, 0.82), transparent 26%),
    linear-gradient(140deg, #fffaf6 0%, #ffe9ea 42%, #fff3d2 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.42)' stroke-width='1'%3E%3Cpath d='M120 40c11 23 37 49 60 60-23 11-49 37-60 60-11-23-37-49-60-60 23-11 49-37 60-60Z'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.35;
  mix-blend-mode: soft-light;
}

body.experience-started {
  overflow: hidden;
}

.page-shell {
  position: relative;
  width: min(1260px, calc(100% - 28px));
  margin: 0 auto;
  min-height: 100vh;
  padding: 22px 0;
}

.ambient {
  position: fixed;
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  filter: blur(74px);
  opacity: 0.34;
  pointer-events: none;
}

.ambient-left {
  top: -6rem;
  left: -9rem;
  background: rgba(255, 185, 205, 0.72);
}

.ambient-right {
  right: -8rem;
  bottom: -7rem;
  background: rgba(255, 220, 156, 0.78);
}

.gypsophila {
  position: fixed;
  width: clamp(180px, 20vw, 320px);
  height: clamp(300px, 42vw, 520px);
  pointer-events: none;
  opacity: 0.95;
  filter: drop-shadow(0 12px 22px rgba(214, 100, 121, 0.12));
  z-index: 2;
}

.gypsophila-left {
  left: max(6px, calc((100vw - 1260px) / 2) + 6px);
  bottom: 20px;
  transform: rotate(-6deg) scale(1.06);
}

.gypsophila-right {
  right: max(6px, calc((100vw - 1260px) / 2) + 6px);
  top: 28px;
  transform: scaleX(-1) rotate(-10deg) scale(1.06);
}

.stem,
.bloom {
  position: absolute;
}

.stem {
  width: 2px;
  background: linear-gradient(180deg, rgba(109, 148, 103, 0.15), rgba(109, 148, 103, 0.8));
  border-radius: 999px;
  transform-origin: bottom center;
  animation: sway 7s ease-in-out infinite alternate;
}

.gypsophila .stem-a {
  left: 50%;
  bottom: 10%;
  height: 76%;
}

.gypsophila .stem-b {
  left: 62%;
  bottom: 14%;
  height: 58%;
  animation-duration: 8.6s;
}

.bloom {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.98) 0 34%, rgba(255, 244, 248, 0.96) 35% 58%, rgba(255, 255, 255, 0) 59%),
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 66%);
  box-shadow:
    0 0 0 10px rgba(255, 255, 255, 0.1),
    0 6px 18px rgba(255, 220, 228, 0.55);
  animation: floatBloom 8s ease-in-out infinite;
}

.gypsophila-left .bloom-1 { left: 44%; bottom: 72%; }
.gypsophila-left .bloom-2 { left: 52%; bottom: 60%; width: 18px; height: 18px; }
.gypsophila-left .bloom-3 { left: 61%; bottom: 51%; width: 20px; height: 20px; }
.gypsophila-left .bloom-4 { left: 38%; bottom: 56%; width: 17px; height: 17px; }
.gypsophila-left .bloom-5 { left: 56%; bottom: 36%; width: 16px; height: 16px; }
.gypsophila-left .bloom-6 { left: 31%; bottom: 46%; width: 15px; height: 15px; }

.gypsophila-right .bloom-1 { left: 44%; top: 18%; }
.gypsophila-right .bloom-2 { left: 53%; top: 28%; width: 18px; height: 18px; }
.gypsophila-right .bloom-3 { left: 61%; top: 38%; width: 20px; height: 20px; }
.gypsophila-right .bloom-4 { left: 38%; top: 32%; width: 17px; height: 17px; }
.gypsophila-right .bloom-5 { left: 56%; top: 48%; width: 16px; height: 16px; }
.gypsophila-right .bloom-6 { left: 31%; top: 42%; width: 15px; height: 15px; }

.experience {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 44px);
}

.intro-card,
.slideshow-card,
.message-card {
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
}

.intro-card {
  position: relative;
  display: grid;
  gap: 24px;
  justify-items: center;
  min-height: calc(100vh - 44px);
  padding: clamp(28px, 4vw, 48px);
  text-align: center;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.22));
  border-radius: 34px;
  overflow: hidden;
  transition:
    opacity 800ms ease,
    transform 800ms ease,
    visibility 800ms ease;
  z-index: 1;
}

.intro-card::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 26px;
  pointer-events: none;
}

.eyebrow,
.message-label,
.slide-kicker {
  margin: 0;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--text-soft);
}

.intro-card h1 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(4rem, 10vw, 7rem);
  line-height: 0.95;
  font-weight: 600;
}

.intro-copy {
  width: min(760px, 100%);
  margin: -6px 0 0;
  font-size: clamp(1rem, 2.4vw, 1.18rem);
  line-height: 1.8;
  color: var(--text-soft);
}

.message-card {
  width: min(760px, 100%);
  padding: clamp(22px, 3vw, 34px);
  border-radius: 28px;
  background: var(--card-strong);
  transition:
    opacity 500ms ease,
    transform 500ms ease;
}

.message-text {
  margin: 18px 0 24px;
  font-size: 1rem;
  line-height: 1.95;
  color: var(--text-soft);
}

.message-signature {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2rem, 5vw, 2.5rem);
  color: var(--accent-strong);
}

button {
  border: 0;
  cursor: pointer;
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    opacity 180ms ease,
    border-color 180ms ease;
}

button:hover {
  transform: translateY(-2px);
}

.primary-btn,
.control-btn {
  border-radius: 999px;
  font-family: inherit;
}

.primary-btn {
  padding: 16px 28px;
  color: #fffaf7;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: 0 18px 34px rgba(214, 100, 121, 0.28);
  font-size: 1rem;
}

.primary-btn:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

.start-btn {
  min-width: 180px;
}

.slideshow-card {
  position: fixed;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.03);
  border: 0;
  box-shadow: none;
  background: rgba(16, 8, 14, 0.06);
  transition:
    opacity 900ms ease,
    transform 900ms ease,
    visibility 900ms ease;
}

.slideshow {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, rgba(18, 10, 16, 0.1), rgba(18, 10, 16, 0.38));
}

.slide-backdrop {
  position: absolute;
  inset: -4%;
  background-size: cover;
  background-position: center;
  filter: blur(28px) saturate(1.05) brightness(0.72);
  transform: scale(1.12);
  opacity: 0.95;
  transition:
    opacity 850ms ease,
    background-image 850ms ease,
    transform 1200ms ease;
  animation: drift 12s ease-in-out infinite alternate;
}

.slide-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(13, 7, 12, 0.22) 0%, rgba(13, 7, 12, 0.68) 100%);
}

.slide-photo-shell {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(44px, 6vw, 82px) clamp(22px, 4vw, 54px) clamp(220px, 22vw, 270px);
  z-index: 1;
}

.slide-photo-shell::before {
  content: "";
  position: absolute;
  width: min(72vw, 1040px);
  height: min(68vh, 820px);
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 30px 90px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(10px);
}

.slide-image {
  position: relative;
  z-index: 1;
  max-width: min(72vw, 1040px);
  max-height: min(68vh, 820px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 28px;
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.18);
  opacity: 0;
  transform: scale(0.96) translateY(16px);
  transition:
    opacity 900ms ease,
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 900ms ease;
  filter: saturate(0.96) brightness(0.98);
}

.slide-image.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: saturate(1) brightness(1);
}

.slide-overlay {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(980px, calc(100% - 36px));
  bottom: clamp(20px, 3vw, 28px);
  padding: 18px 24px 16px;
  border-radius: 28px;
  color: #fff7f3;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05)),
    linear-gradient(180deg, rgba(30, 18, 24, 0.62), rgba(30, 18, 24, 0.42));
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(20px);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.18);
  z-index: 3;
}

.slide-overlay h2 {
  margin: 10px 0 0;
  font-family: "Forum", serif;
  font-size: clamp(2.35rem, 2.4vw, 4.25rem);
  line-height: 0.94;
  font-weight: 400;
  letter-spacing: -0.015em;
  text-wrap: balance;
  text-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}

.slide-kicker {
  color: rgba(255, 239, 228, 0.9);
  letter-spacing: 0.22em;
  font-size: 0.78rem;
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.slide-controls {
  position: absolute;
  top: clamp(18px, 3vw, 28px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 4;
}

.control-btn {
  min-width: 58px;
  padding: 12px 18px;
  color: #fff7f3;
  font-size: 0.94rem;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(14px);
}

.slide-counter {
  position: absolute;
  left: clamp(18px, 3vw, 28px);
  top: clamp(18px, 3vw, 28px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  color: #fff7f3;
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(14px);
}

.counter-separator {
  opacity: 0.7;
}

.finale-screen {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1200ms ease,
    visibility 1200ms ease;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 233, 161, 0.24), transparent 18%),
    radial-gradient(circle at 72% 26%, rgba(255, 194, 220, 0.22), transparent 18%),
    radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(26, 11, 18, 0.8), rgba(20, 9, 16, 0.96));
  z-index: 5;
}

.finale-screen.is-visible {
  opacity: 1;
  visibility: visible;
}

.finale-copy {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff8f5;
  padding: 28px;
}

.finale-copy h2 {
  margin: 12px 0 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 0.95;
  font-weight: 600;
  text-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.finale-dynamic-wrap {
  display: inline-flex;
  align-items: baseline;
  min-width: 6.8ch;
}

.finale-dynamic-word {
  display: inline-block;
  color: #ffeab9;
  border-right: 0.06em solid rgba(255, 244, 227, 0.9);
  padding-right: 0.08em;
  white-space: nowrap;
  animation: caretBlink 0.95s steps(1) infinite;
}

.finale-fireworks {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.firework {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.98) 0 32%, rgba(255, 230, 177, 0.9) 33% 58%, rgba(255, 255, 255, 0) 59%);
  box-shadow:
    0 0 0 28px rgba(255, 215, 125, 0.03),
    0 0 42px rgba(255, 205, 120, 0.35);
  animation: burst 3.2s ease-out infinite;
}

.firework::before,
.firework::after {
  content: "";
  position: absolute;
  inset: -38px;
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      rgba(255, 210, 120, 0.9) 0deg 12deg,
      rgba(255, 255, 255, 0) 12deg 30deg,
      rgba(255, 170, 198, 0.8) 30deg 42deg,
      rgba(255, 255, 255, 0) 42deg 60deg,
      rgba(255, 240, 182, 0.86) 60deg 72deg,
      rgba(255, 255, 255, 0) 72deg 90deg,
      rgba(255, 183, 214, 0.82) 90deg 102deg,
      rgba(255, 255, 255, 0) 102deg 120deg,
      rgba(255, 214, 146, 0.9) 120deg 132deg,
      rgba(255, 255, 255, 0) 132deg 150deg,
      rgba(255, 170, 198, 0.82) 150deg 162deg,
      rgba(255, 255, 255, 0) 162deg 180deg,
      rgba(255, 240, 182, 0.86) 180deg 192deg,
      rgba(255, 255, 255, 0) 192deg 210deg,
      rgba(255, 210, 120, 0.9) 210deg 222deg,
      rgba(255, 255, 255, 0) 222deg 240deg,
      rgba(255, 183, 214, 0.82) 240deg 252deg,
      rgba(255, 255, 255, 0) 252deg 270deg,
      rgba(255, 240, 182, 0.86) 270deg 282deg,
      rgba(255, 255, 255, 0) 282deg 300deg,
      rgba(255, 170, 198, 0.8) 300deg 312deg,
      rgba(255, 255, 255, 0) 312deg 330deg,
      rgba(255, 214, 146, 0.9) 330deg 342deg,
      rgba(255, 255, 255, 0) 342deg 360deg
    );
  mask: radial-gradient(circle, transparent 0 40%, black 42% 100%);
  opacity: 0;
}

.firework::after {
  inset: -56px;
  filter: blur(1px);
}

.firework-a { left: 18%; top: 26%; animation-delay: 0s; }
.firework-b { left: 74%; top: 18%; animation-delay: 0.8s; }
.firework-c { left: 62%; top: 58%; animation-delay: 1.3s; }
.firework-d { left: 28%; top: 66%; animation-delay: 1.9s; }
.firework-e { left: 50%; top: 34%; animation-delay: 2.4s; }

body.experience-started .intro-card {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.02);
  pointer-events: none;
}

body.experience-started .message-card {
  opacity: 0;
  transform: translateY(16px);
}

body.experience-started .slideshow-card {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

@keyframes sway {
  0% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(7deg);
  }
}

@keyframes floatBloom {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(4px, -8px, 0) scale(1.06);
  }
}

@keyframes drift {
  0% {
    transform: scale(1.12) translate3d(0, 0, 0);
  }
  100% {
    transform: scale(1.18) translate3d(-12px, -10px, 0);
  }
}

@keyframes burst {
  0% {
    transform: scale(0.18);
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  35% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

@keyframes flare {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

@keyframes caretBlink {
  0%,
  48% {
    border-right-color: rgba(255, 244, 227, 0.9);
  }
  49%,
  100% {
    border-right-color: transparent;
  }
}

.firework::before,
.firework::after {
  animation: flare 3.2s ease-out infinite;
}

@media (max-width: 900px) {
  .gypsophila {
    opacity: 0.82;
  }

  .slide-photo-shell {
    padding-top: 92px;
    padding-bottom: 220px;
  }

  .slide-photo-shell::before,
  .slide-image {
    max-width: min(78vw, 860px);
    max-height: min(54vh, 640px);
    width: min(78vw, 860px);
  }

  .slide-photo-shell::before {
    height: min(54vh, 640px);
  }

  .slide-overlay {
    width: min(92vw, 920px);
  }
}

@media (max-width: 640px) {
  .page-shell {
    width: min(100% - 16px, 1260px);
    padding: 8px 0;
  }

  .intro-card {
    min-height: calc(100vh - 16px);
    border-radius: 28px;
    padding: 24px 16px;
  }

  .intro-card::before {
    inset: 10px;
    border-radius: 22px;
  }

  .message-card {
    border-radius: 22px;
  }

  .message-text {
    font-size: 0.95rem;
    line-height: 1.8;
  }

  .slide-controls {
    top: 14px;
    left: 50%;
    bottom: auto;
    right: auto;
  }

  .slide-counter {
    left: 14px;
    top: 14px;
  }

  .control-btn {
    min-width: 48px;
    padding: 11px 14px;
  }

  .slide-photo-shell {
  padding: 180px 14px 172px;
}

  .slide-photo-shell::before,
  .slide-image {
    max-width: calc(100vw - 28px);
    width: calc(100vw - 28px);
    max-height: 56vh;
  }

  .slide-photo-shell::before {
    height: 56vh;
    border-radius: 24px;
  }

  .slide-image {
    margin-top: 40px;
    border-radius: 20px;
  }

  .slide-overlay {
  left: 50%;
  transform: translateX(-50%);
  width: calc(100vw - 24px);
  top: 72px;
  bottom: auto;
  padding: 16px 16px 14px;
  border-radius: 22px;
}

  .slide-overlay h2 {
    font-size: clamp(1.8rem, 9vw, 2.6rem);
  }

  .gypsophila-left {
    left: -12px;
    bottom: 4px;
  }

  .gypsophila-right {
    right: -12px;
    top: 4px;
  }
}