:root {
  color-scheme: dark;
  --app-height: 100dvh;
  --red: #e50922;
  --deep-red: #8c0013;
  --white: #fff7f7;
  --rose-x: -50%;
  --rose-y: -50%;
  --rose-mobile-top: 39%;
  --rose-mobile-size: 118vmin;
  --stroke-width: 2.35;
  --dash-size: 650;
  --draw-duration: 24s;
  --line-opacity: .96;
  --fill-delay: 13s;
  --wish-delay: 11.5s;
  --fill-opacity: .54;
  --float-duration: 9s;
  --line-delay: 0s;
  --prelude-display: none;
  --prelude-stem-display: none;
  --prelude-bloom-display: none;
  --prelude-duration: 5.2s;
  --ghost-display: none;
  --ghost-duration: 5.5s;
  --spark-display: none;
  --spark-duration: 8s;
  --spark-delay: .2s;
  --glow-small: rgba(229, 9, 34, .3);
  --glow-large: rgba(120, 0, 18, .22);
  --accent-glow: rgba(229, 9, 34, .34);
  --button-border: rgba(255, 82, 94, .48);
  --button-bg-hover: rgba(48, 0, 7, .5);
  --bg-red: rgba(190, 0, 24, 0.12);
  --stroke-1: #ff6a72;
  --stroke-2: #f1122b;
  --stroke-3: #9b0015;
  --stroke-4: #4a0009;
  --fill-1: #ff5a62;
  --fill-2: #d91024;
  --fill-3: #70000d;
  --fill-4: #240004;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: var(--app-height);
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
}

body {
  color: var(--white);
  font-family: "Cormorant Garamond", Georgia, serif;
}

.experience {
  position: relative;
  width: 100vw;
  height: var(--app-height);
  min-height: min(560px, var(--app-height));
  background:
    radial-gradient(circle at 50% 35%, var(--bg-red), transparent 27%),
    radial-gradient(circle at 50% 76%, rgba(255, 245, 245, 0.035), transparent 19%),
    #000;
  isolation: isolate;
}

body:not(.is-started) .rose-art,
body:not(.is-started) .rose-fill,
body:not(.is-started) .rose-line,
body:not(.is-started) .prelude-line,
body:not(.is-started) .rose-ghost,
body:not(.is-started) .spark-trace,
body:not(.is-started) .wish,
body:not(.is-started) .experience::after {
  animation-play-state: paused;
}

.experience::before,
.experience::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.experience::before {
  background:
    radial-gradient(circle at 50% 48%, transparent 0 33%, rgba(0, 0, 0, 0.42) 61%, #000 100%),
    linear-gradient(180deg, #000 0%, transparent 20%, transparent 68%, #000 100%);
}

.experience::after {
  opacity: .22;
  background-image:
    radial-gradient(circle, rgba(255, 237, 237, .68) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(229, 9, 34, .3) 0 1px, transparent 1.2px);
  background-position: 12vw 16vh, 64vw 28vh;
  background-size: 220px 220px, 310px 310px;
  animation: stars 24s linear infinite;
}

.rose-wrap {
  position: absolute;
  left: 50%;
  top: 45%;
  z-index: 2;
  width: min(72vmin, 520px);
  transform: translate(var(--rose-x), var(--rose-y));
  filter:
    drop-shadow(0 0 10px var(--glow-small))
    drop-shadow(0 0 25px var(--glow-large));
}

.rose {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.rose-art {
  transform-origin: 50% 52%;
  animation: floatRose var(--float-duration) ease-in-out infinite;
}

.rose-fill {
  fill: url("#petalFill");
  opacity: 0;
  animation: fillRose 8s ease var(--fill-delay) forwards;
}

.rose-line,
.prelude-line,
.rose-ghost,
.spark-trace {
  fill: none;
  stroke: url("#roseStroke");
  stroke-width: var(--stroke-width);
  opacity: var(--line-opacity);
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-miterlimit: 6;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--dash-size);
  stroke-dashoffset: var(--dash-size);
}

.rose-line {
  animation: drawRose var(--draw-duration) cubic-bezier(.42, 0, .16, 1) var(--line-delay) forwards;
}

.prelude-line {
  display: var(--prelude-display);
  opacity: .54;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: drawRose var(--prelude-duration) cubic-bezier(.4, 0, .18, 1) forwards;
}

.prelude-stem {
  display: var(--prelude-stem-display);
}

.prelude-bloom {
  display: var(--prelude-bloom-display);
}

.rose-ghost {
  display: var(--ghost-display);
  opacity: 0;
  stroke-width: calc(var(--stroke-width) * 1.7);
  stroke-dasharray: var(--dash-size);
  stroke-dashoffset: 0;
  animation: ghostFocus var(--ghost-duration) ease-out forwards;
}

.spark-trace {
  display: var(--spark-display);
  opacity: 0;
  stroke-width: calc(var(--stroke-width) * .95);
  stroke-dasharray: 18 632;
  stroke-dashoffset: 650;
  animation: sparkTrace var(--spark-duration) cubic-bezier(.38, 0, .2, 1) var(--spark-delay) forwards;
}

.fill-stop-1 { stop-color: var(--fill-1); }
.fill-stop-2 { stop-color: var(--fill-2); }
.fill-stop-3 { stop-color: var(--fill-3); }
.fill-stop-4 { stop-color: var(--fill-4); }
.stroke-stop-1 { stop-color: var(--stroke-1); }
.stroke-stop-2 { stop-color: var(--stroke-2); }
.stroke-stop-3 { stop-color: var(--stroke-3); }
.stroke-stop-4 { stop-color: var(--stroke-4); }

.wish {
  position: absolute;
  left: 50%;
  bottom: clamp(74px, 11vh, 126px);
  z-index: 3;
  width: min(92vw, 900px);
  text-align: center;
  transform: translateX(-50%);
  opacity: 0;
  animation: revealWish 4.8s cubic-bezier(.19, 1, .22, 1) var(--wish-delay) forwards;
}

h1 {
  margin: 0;
  font-size: clamp(42px, 6.6vw, 88px);
  font-weight: 500;
  line-height: .96;
  letter-spacing: 0;
  text-wrap: balance;
  text-shadow:
    0 0 16px rgba(255, 236, 236, .28),
    0 0 38px var(--accent-glow),
    0 14px 28px rgba(0, 0, 0, .75);
}

.birthday-note {
  width: min(86vw, 520px);
  margin: clamp(14px, 2.5vh, 22px) auto 0;
  color: rgba(255, 247, 247, .68);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(12px, 2.6vw, 15px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .06em;
  text-wrap: balance;
  text-shadow:
    0 0 12px var(--accent-glow),
    0 8px 20px rgba(0, 0, 0, .7);
}

.line {
  display: block;
  white-space: nowrap;
}

.start-button,
.mute-button {
  position: absolute;
  z-index: 4;
  border: 1px solid rgba(255, 245, 245, .18);
  color: var(--white);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, .46);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: opacity .7s ease, transform .7s ease, border-color .25s ease, background .25s ease;
}

.start-button {
  left: 50%;
  bottom: clamp(42px, 8vh, 82px);
  min-width: 190px;
  padding: 15px 22px;
  border-radius: 999px;
  font-size: 12px;
  transform: translateX(-50%);
  box-shadow:
    0 0 22px var(--accent-glow),
    inset 0 0 18px rgba(255, 255, 255, .04);
}

.start-button:hover {
  border-color: var(--button-border);
  background: var(--button-bg-hover);
}

.is-started .start-button {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
}

.mute-button {
  right: clamp(16px, 3vw, 28px);
  top: clamp(16px, 3vw, 28px);
  padding: 10px 13px;
  border-radius: 999px;
  font-size: 10px;
  opacity: 0;
  pointer-events: none;
}

.is-started .mute-button {
  opacity: .46;
  pointer-events: auto;
}

.mute-button:hover {
  opacity: 1;
  border-color: rgba(255, 245, 245, .34);
}

.sound-off,
.is-muted .sound-on {
  display: none;
}

.is-muted .sound-off {
  display: inline;
}

@keyframes drawRose {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes ghostFocus {
  0% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
  35% {
    opacity: .15;
  }
  100% {
    opacity: .045;
  }
}

@keyframes sparkTrace {
  0% {
    opacity: 0;
    stroke-dashoffset: 650;
  }
  10%, 76% {
    opacity: .58;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes fillRose {
  0% {
    opacity: 0;
    filter: saturate(.7) brightness(.7);
  }
  100% {
    opacity: var(--fill-opacity);
    filter: saturate(1.1) brightness(.92);
  }
}

@keyframes revealWish {
  0% {
    opacity: 0;
    filter: blur(12px);
    transform: translate(-50%, 18px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, 0);
  }
}

@keyframes floatRose {
  0%, 100% {
    transform: translateY(0) rotate(-1deg) scale(1);
  }
  50% {
    transform: translateY(-8px) rotate(1deg) scale(1.018);
  }
}

@keyframes stars {
  to {
    background-position: 12vw 12vh, 64vw 22vh;
  }
}

@media (max-width: 720px) {
  html,
  body {
    min-height: var(--app-height);
  }

  .experience {
    min-height: var(--app-height);
  }

  .rose-wrap {
    top: var(--rose-mobile-top);
    width: min(var(--rose-mobile-size), 540px);
    transform: translate(var(--rose-x), var(--rose-y));
  }

  .wish {
    bottom: max(76px, calc(11svh + env(safe-area-inset-bottom, 0px)));
  }

  h1 {
    font-size: clamp(36px, 11.6vw, 52px);
    line-height: .98;
  }

  .start-button {
    top: 50%;
    bottom: auto;
    width: min(64vw, 290px);
    min-width: 0;
    padding: 15px 18px;
    transform: translate(-50%, -50%);
  }

  .is-started .start-button {
    transform: translate(-50%, calc(-50% + 14px));
  }

  .mute-button {
    top: 12px;
    right: 12px;
    padding: 8px 10px;
    font-size: 9px;
    letter-spacing: .12em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rose-art,
  .experience::after {
    animation: none;
  }

  .rose-line {
    stroke-dashoffset: 0;
    animation: none;
  }

  .prelude-line,
  .rose-ghost,
  .spark-trace,
  .rose-fill,
  .wish {
    opacity: 1;
    animation: none;
  }
}