:root{
  --bg: #FFF8FC;
  --card: rgba(255,255,255,0.82);
  --card-solid: #ffffff;
  --text: #23151A;
  --muted-text: rgba(35, 21, 26, 0.68);
  --accent: #FF4FA0;
  --accent-700: #C11F66;
  --lilac: #B7A6FF;
  --peach: #FFD3DA;
  --mint: #BFF4E8;
  --muted: rgba(255, 231, 244, 0.72);
  --line: rgba(35, 21, 26, 0.10);
  --shadow: 0 22px 50px rgba(40, 16, 28, 0.10);
  --shadow-soft: 0 12px 28px rgba(40, 16, 28, 0.10);
  --petal: #FFB3D5;
  --petal-line: rgba(193, 31, 102, 0.18);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color: inherit}
a:hover{color: var(--accent-700)}

::selection{background: rgba(255,79,160,0.24)}

.title{font-family:'Fraunces', ui-serif, Georgia, serif; font-size:68px;margin:0;color:var(--text);letter-spacing:-0.03em;line-height:1.02}
.subtitle{color:var(--muted-text);margin-top:12px;font-size:18px;max-width:62ch}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid rgba(35,21,26,0.08);
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.65));
  box-shadow: 0 10px 24px rgba(40,16,28,0.07);
}

/* Topbar */
.topbar{position:sticky;top:0;z-index:10;background:rgba(255,248,252,0.70);backdrop-filter:saturate(155%) blur(12px);border-bottom:1px solid rgba(35,21,26,0.06)}
.topbar-inner{max-width:1100px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;justify-content:space-between}
.brand{font-family:'Plus Jakarta Sans', ui-sans-serif;letter-spacing:-0.01em;color:rgba(35,21,26,0.78)}
.brand-accent{color:var(--accent-700)}

/* Hero */
.hero{min-height:90vh;display:flex;align-items:center}
.hero-inner{max-width:1100px;margin:0 auto;padding:72px 18px 40px;display:grid;grid-template-columns:1.1fr 0.9fr;gap:42px;position:relative}
.hero-copy{max-width:540px}
.hero-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.hero-art{display:flex;align-items:center;justify-content:center;gap:18px}
.hero-flower{width:118px;height:118px;filter: drop-shadow(0 16px 26px rgba(40,16,28,0.12))}
.hero-flower:nth-child(2){transform:translateY(10px)}
.hero-flower:nth-child(3){transform:translateY(-8px)}

.hero-flower{animation: floaty 6.2s ease-in-out infinite}
.hero-flower:nth-child(2){animation-duration: 7.1s}
.hero-flower:nth-child(3){animation-duration: 6.7s}

@keyframes floaty{
  50%{ transform: translateY(-10px) rotate(2deg); }
}

.scroll-hint{position:absolute;left:18px;bottom:28px;display:flex;align-items:center;gap:10px;opacity:0.8}
.scroll-hint .dot{width:10px;height:10px;border-radius:999px;background:var(--accent)}
.scroll-hint .line{width:42px;height:1px;background:rgba(35,24,27,0.20)}

@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:26px}
  .hero{min-height:auto}
  .title{font-size:50px}
  .subtitle{max-width:none}
}

/* Scroll scene */
.scroll-scene{padding:36px 0 110px}
.scene-inner{max-width:1100px;margin:0 auto;padding:0 18px;display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.scene-copy{padding-top:20vh;padding-bottom:20vh}
.step{min-height:55vh;display:flex;flex-direction:column;justify-content:center;opacity:0.30;transform:translateY(12px);transition:opacity .25s ease, transform .25s ease}
.step.active{opacity:1;transform:none}
.step h2{font-family:'Fraunces', ui-serif;letter-spacing:-0.02em;margin:0 0 10px 0;font-size:34px;line-height:1.1}
.step p{margin:0;color:rgba(35,24,27,0.72);font-size:16px;max-width:46ch}

.scene-media{position:sticky;top:88px;height:calc(100vh - 120px);display:flex;align-items:center;justify-content:center}
.media-frame{
  height: min(74vh, 720px);
  width: auto;
  max-width: min(460px, 92vw);
  aspect-ratio: 9 / 16;
  border:1px solid rgba(35,21,26,0.10);
  border-radius:26px;
  background:rgba(255,255,255,0.88);
  position:relative;
  overflow:hidden;
  box-shadow: var(--shadow)
}
.scene-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(1);transition:opacity .35s ease, transform .35s ease;filter:saturate(1.02);background:rgba(255,255,255,0.75)}
.scene-image.active{opacity:1;transform:scale(calc(1 + (var(--p, 0) * 0.02)))}
.media-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,79,160,0.08), rgba(183,166,255,0.05) 55%, rgba(255,255,255,0));}

@media (max-width:900px){
  .scene-inner{grid-template-columns:1fr}
  /* Keep the "Apple-like" sticky media on mobile too */
  .scene-media{position:sticky;top:64px;height:62vh;padding:14px 0;background:var(--bg)}
  .media-frame{height:58vh;max-width:92vw;aspect-ratio:9/16;border-radius:22px}
  .scene-copy{padding-top:8px;padding-bottom:8px}
  .step{min-height:60vh;padding:22px 0}
  .step h2{font-size:28px}
}

.btn-pink{
  background: linear-gradient(180deg, rgba(255,79,160,1), rgba(193,31,102,1));
  color:white;
  border: 1px solid rgba(0,0,0,0);
  box-shadow: 0 14px 28px rgba(255,79,160,0.22);
}
.btn-pink:hover{background: var(--accent-700); color:#fff}
.btn-ghost{
  background: transparent;
  border: 1px solid var(--line);
  color: rgba(35,24,27,0.78);
}
.btn-ghost:hover{background: rgba(255,231,239,0.55); color: var(--text)}
.btn-pink:active{transform:translateY(1px)}

.icon-btn{
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,0.78);
  color: rgba(35,24,27,0.82);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.icon-btn:hover{background: rgba(255,231,244,0.85); color: var(--text)}
.gift-icon{width:20px;height:20px;display:block}

.message{font-size:16px;margin:0 0 8px 0}
.poem{margin:0;color:#7b555a;font-style:italic}

.gift-row{display:flex;align-items:center;gap:10px;margin-top:10px}
.gift-code{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 14px;
  border-radius:16px;
  border:1px dashed rgba(35,21,26,0.18);
  background: linear-gradient(180deg, rgba(255,231,244,0.65), rgba(255,255,255,0.86));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  letter-spacing:0.08em;
  font-size:14px;
  color: rgba(35,24,27,0.90);
}
.copy-status{min-height:18px;margin-top:8px;color: rgba(35,24,27,0.62);font-size:13px}
.divider{height:1px;background: rgba(36,18,22,0.08);margin:14px 0}

.btn:focus-visible, .icon-btn:focus-visible{
  outline: 3px solid rgba(255,79,160,0.25);
  outline-offset: 2px;
}

@media (max-width:480px){
  .gift-row{flex-direction:column;align-items:stretch}
  .gift-code{justify-content:flex-start}
}


/* Gallery */
.gallery{padding:72px 0 96px}
.gallery-inner{max-width:1100px;margin:0 auto;padding:0 18px}
.gallery-title{font-family:'Fraunces', ui-serif;letter-spacing:-0.02em;margin:0 0 8px 0}
.gallery-subtitle{margin:0 0 18px 0;color:rgba(35,24,27,0.72)}
.gallery-strip{display:grid;grid-auto-flow:column;grid-auto-columns: minmax(180px, 1fr);gap:14px;overflow:hidden}
.gallery-img{
  width:100%;
  height:auto;
  aspect-ratio: 9 / 16;
  object-fit:contain;
  border-radius:20px;
  border:1px solid rgba(35,21,26,0.10);
  box-shadow: var(--shadow-soft);
  background:rgba(255,255,255,0.75)
}
.note{color:rgba(35,24,27,0.62)}

@media (max-width:700px){
  .gallery-strip{grid-auto-columns:minmax(62%, 1fr)}
}

/* Flat 2D background shapes (no blur) */
body::before,
body::after{
  content:'';
  position:fixed;
  pointer-events:none;
  z-index:0;
}
body::before{
  left:-10%; top:-18%;
  width:54vmax;height:54vmax;
  background: radial-gradient(circle at 30% 35%, rgba(255,79,160,0.20), rgba(183,166,255,0.15) 38%, rgba(255,255,255,0) 70%);
  filter: blur(24px);
}
body::after{
  right:-14%; bottom:-18%;
  width:58vmax;height:58vmax;
  background: radial-gradient(circle at 35% 35%, rgba(255,211,218,0.28), rgba(191,244,232,0.14) 45%, rgba(255,255,255,0) 75%);
  filter: blur(28px);
}

/* cute birthday sparkles */
body{
  background-image:
    radial-gradient(rgba(255,79,160,0.09) 1px, transparent 1px),
    radial-gradient(rgba(183,166,255,0.08) 1px, transparent 1px);
  background-size: 26px 26px, 32px 32px;
  background-position: 0 0, 12px 18px;
}

main, .card, .modal-content{position:relative;z-index:1}

/* 2D petals (no emoji, no shadows) */
.petal{
  position:fixed;
  pointer-events:none;
  z-index:9999;
  width:14px;height:14px;
  background: var(--petal);
  border: 1px solid var(--petal-line);
  border-radius: 14px 14px 14px 2px;
  transform: rotate(45deg);
  opacity: 0.95;
  animation:
    petal-fall var(--fall, 4.8s) linear forwards,
    petal-sway var(--sway, 1.8s) ease-in-out infinite;
}
@keyframes petal-fall{
  to{ transform: translate(var(--dx, 0px), 120vh) rotate(70deg); opacity:0; }
}
@keyframes petal-sway{
  50%{ margin-left: var(--mx, 14px); }
}

/* modal: flatter */
.modal-content{
  border: 1px solid rgba(35,21,26,0.10);
  background: rgba(255,255,255,0.92);
  box-shadow: var(--shadow);
}
.modal-backdrop.show{opacity:0.28}

@media (prefers-reduced-motion: reduce){
  .step, .scene-image{transition:none !important}
  .petal{animation:none !important}
}