:root {
  --ivory: #fffaf7;
  --blush: #f8eaee;
  --sakura: #efd1da;
  --rose: #d7a6b5;
  --plum: #725866;
  --ink: #493d43;
  --line: rgba(114, 88, 102, .17);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.9), transparent 31%),
    linear-gradient(145deg, var(--ivory), var(--blush) 52%, #f4dfe5);
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
}
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.20'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
.wash { position: fixed; border-radius: 50%; filter: blur(35px); opacity: .4; }
.wash-one { width: 46vw; height: 36vw; left: -10vw; top: 52vh; background: #f4cbd7; animation: drift 18s ease-in-out infinite alternate; }
.wash-two { width: 38vw; height: 31vw; right: -8vw; top: -10vw; background: #ffe8ee; animation: drift 23s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate3d(3vw,-2vh,0) scale(1.05); } }
.page-shell { min-height: 100svh; display: grid; place-items: center; padding: 7vh 7vw 10vh; position: relative; z-index: 2; }
.page-card { width: min(860px, 100%); text-align: center; }
.reveal-button {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1rem 1.55rem;
  background: rgba(255,250,247,.56);
  color: var(--plum);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-style: italic;
  letter-spacing: .025em;
  box-shadow: 0 14px 45px rgba(114,88,102,.10), inset 0 1px rgba(255,255,255,.8);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, opacity .45s ease;
}
.reveal-button:hover { transform: translateY(-2px); background: rgba(255,255,255,.76); box-shadow: 0 18px 55px rgba(114,88,102,.15); }
.reveal-button:focus-visible { outline: 2px solid var(--rose); outline-offset: 5px; }
.reveal-button.leaving { opacity: 0; transform: translateY(6px); pointer-events: none; }
.statement {
  margin: 0 auto;
  max-width: 780px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2rem, 5vw, 4.25rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.018em;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1s ease, transform 1s ease;
}
.statement.visible { opacity: 1; transform: translateY(0); }
.countdown-wrap {
  position: fixed;
  bottom: 2.1rem;
  left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .28rem;
  color: rgba(73,61,67,.62);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: lowercase;
}
.countdown-wrap time { font-variant-numeric: tabular-nums; letter-spacing: .16em; font-size: .72rem; }
.branch { position: fixed; right: -2rem; top: -1rem; width: 22rem; height: 20rem; opacity: .32; transform: rotate(-8deg); z-index: 1; }
.twig { position:absolute; display:block; height:1px; background:rgba(91,72,81,.34); transform-origin:right center; }
.t1 { width:18rem; right:0; top:5rem; transform:rotate(-25deg); }
.t2 { width:10rem; right:8rem; top:7rem; transform:rotate(35deg); }
.t3 { width:8rem; right:5rem; top:9.4rem; transform:rotate(63deg); }
.petal { position:absolute; width:1.1rem; height:.7rem; background:rgba(215,166,181,.55); border-radius:70% 30% 70% 30%; }
.p1 { right:12rem; top:4.2rem; transform:rotate(28deg); }
.p2 { right:15.4rem; top:8.8rem; transform:rotate(-18deg); }
.p3 { right:8rem; top:8.4rem; transform:rotate(60deg); }
.p4 { right:5.8rem; top:11.5rem; transform:rotate(12deg); }
.error { font-size: .85rem; color: var(--plum); }
@media (max-width: 600px) {
  .page-shell { padding-inline: 1.5rem; }
  .statement { font-size: clamp(2rem, 10vw, 3rem); line-height: 1.16; }
  .branch { transform: scale(.72) rotate(-8deg); transform-origin: top right; }
  .countdown-wrap { bottom: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}