@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&family=Prata&display=swap');

:root { --cream:#f5efe6; --paper:#fbf7f0; --ink:#352d29; --coral:#c8604f; --rose:#df9b8b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:"Manrope",sans-serif; }
main { overflow:clip; }
.intro { min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:3rem; position:relative; background:radial-gradient(circle at 15% 20%,#fff7ed 0,transparent 26%),radial-gradient(circle at 88% 70%,#ecc5b9 0,transparent 25%),var(--cream); }
.intro:before,.intro:after { content:""; position:absolute; width:18vw; aspect-ratio:1; border:1px solid rgba(200,96,79,.2); border-radius:50%; }
.intro:before { left:-8vw; top:18%; } .intro:after { right:-7vw; bottom:12%; width:25vw; }
.kicker { margin:0 0 2rem; text-transform:uppercase; letter-spacing:.22em; font-size:.68rem; color:#8d766c; }
h1,h2 { font-family:"Prata",serif; font-weight:400; margin:0; }
h1 { font-size:clamp(4rem,10vw,9rem); line-height:.88; letter-spacing:-.045em; }
h1 em { color:var(--coral); font-weight:400; }
.scroll-hint { position:absolute; bottom:2.3rem; display:flex; align-items:center; gap:.8rem; text-transform:uppercase; letter-spacing:.18em; font-size:.6rem; color:#8d766c; }
.scroll-hint span { width:1px; height:2.2rem; background:#9f7f72; animation:breathe 1.8s ease-in-out infinite; transform-origin:top; }
@keyframes breathe { 50% { transform:scaleY(.55); opacity:.4; } }
.story { min-height:700vh; display:grid; grid-template-columns:46% 54%; background:var(--paper); }
.copy-side,.photo-side { position:relative; }
.copy-sticky,.photo-sticky { height:100vh; height:100svh; position:sticky; top:0; }
.copy-sticky { padding:clamp(2rem,5vw,5rem); display:flex; flex-direction:column; justify-content:center; }
.counter { position:absolute; top:3rem; left:clamp(2rem,5vw,5rem); display:flex; gap:.8rem; align-items:center; font-size:.65rem; letter-spacing:.15em; color:#9b8980; }
.counter span { color:var(--coral); }.counter i { width:3rem; height:1px; background:#d9c8bd; }
.wish-stack { position:relative; min-height:28rem; display:grid; align-items:center; }
.wish { grid-area:1/1; opacity:0; transform:translateY(34px); pointer-events:none; transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1); }
.wish.is-active { opacity:1; transform:translateY(0); pointer-events:auto; }.wish.is-past { transform:translateY(-28px); }
.wish>p:first-child { text-transform:uppercase; letter-spacing:.2em; font-size:.68rem; color:var(--coral); margin:0 0 1.6rem; }
.wish h2 { font-size:clamp(2.35rem,4.6vw,5rem); line-height:1.08; letter-spacing:-.035em; max-width:11ch; }
.rule { width:3.5rem; height:1px; background:var(--rose); margin:2rem 0; }
.body-copy { max-width:31rem; font-size:clamp(.95rem,1.2vw,1.08rem); line-height:1.85; color:#71625b; }
.mini-progress { position:absolute; bottom:3rem; left:clamp(2rem,5vw,5rem); right:clamp(2rem,5vw,5rem); height:1px; background:#e1d6cd; overflow:hidden; }
.mini-progress span { display:block; width:100%; height:100%; background:var(--coral); transform-origin:left; }
.photo-sticky { display:flex; align-items:center; justify-content:center; padding:clamp(1rem,2.7vw,2.8rem); background:#d8b3a7; }
.photo-frame { width:100%; height:100%; position:relative; overflow:hidden; border-radius:2px; background:linear-gradient(145deg,#b87868,#e2b9a6); box-shadow:0 26px 80px rgba(73,39,31,.18); }
.photo-frame img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.photo-muted { filter:grayscale(1) sepia(.35); opacity:.18; }
.reveal { position:absolute; inset:0; transition:clip-path .12s linear; will-change:clip-path; }
.photo-placeholder { position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.46); text-align:center; font-family:"Prata"; font-size:clamp(2rem,5vw,5rem); line-height:1; }
.grain { position:absolute; inset:0; opacity:.1; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
.photo-label { position:absolute; left:1.5rem; bottom:1.5rem; background:rgba(249,244,236,.9); backdrop-filter:blur(8px); padding:.75rem 1rem; font-size:.64rem; text-transform:uppercase; letter-spacing:.12em; }.photo-label span { color:var(--coral); margin-left:.5rem; }
.vertical-progress { width:2.8rem; height:calc(100% - 5.6rem); margin-left:1.2rem; border-left:1px solid rgba(255,255,255,.35); position:relative; }
.vertical-progress span { position:absolute; top:0; left:-1px; width:2px; background:white; transition:height .12s linear; }
.vertical-progress b { position:absolute; bottom:0; left:.6rem; color:white; font-size:.6rem; font-weight:500; letter-spacing:.1em; }
.finale { min-height:82vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:var(--ink); color:var(--cream); padding:3rem; }
.finale>span { color:var(--coral); font-size:1.2rem; }.finale p { font-family:"Prata"; font-size:clamp(2.5rem,6vw,6rem); line-height:1.08; margin:2rem 0; }.finale small { text-transform:uppercase; letter-spacing:.2em; color:#bdaea5; }
@media (max-width:760px) {
  .story { grid-template-columns:1fr; min-height:760vh; }
  .copy-side,.photo-side { grid-area:1/1; }
  .photo-sticky { height:48svh; top:0; padding:.8rem; align-items:stretch; z-index:1; }
  .photo-frame { height:100%; }.vertical-progress { height:100%; margin-left:.7rem; }
  .copy-sticky { height:100svh; padding:55svh 1.5rem 2rem; justify-content:flex-start; z-index:2; pointer-events:none; }
  .wish-stack { min-height:auto; }.wish { background:rgba(251,247,240,.94); backdrop-filter:blur(14px); padding:1.35rem 1.4rem 1.55rem; box-shadow:0 12px 35px rgba(55,38,31,.12); }
  .wish h2 { font-size:clamp(1.8rem,8vw,2.6rem); max-width:14ch; }.wish>p:first-child { margin-bottom:.8rem; }.rule { margin:1rem 0; }.body-copy { margin:0; font-size:.85rem; line-height:1.6; }
  .counter { display:none; }.mini-progress { bottom:1rem; left:1.5rem; right:1.5rem; }.photo-label { font-size:.52rem; left:1rem; bottom:1rem; }
  .intro { padding:1.5rem; } h1 { font-size:clamp(3.6rem,20vw,6.5rem); }
}
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }