/* ===== Hero + Chapters 1–4 ===== */

/* ---------- hero ---------- */
#hero{ position:relative; min-height:100vh; min-height:100svh; display:grid; place-items:center; overflow:hidden; padding:9vh 0 15vh }
.land{ position:absolute; top:0; bottom:0; width:50%; z-index:0; overflow:hidden }
.land-k{ left:0 } .land-g{ right:0 }
.land svg{ width:100%; height:112%; display:block; will-change:transform }
.land-label{ position:absolute; bottom:70px; z-index:2; margin:0; font-family:var(--serif); font-size:15px; letter-spacing:.3em; text-transform:uppercase; color:#FFF6E4; text-shadow:0 2px 12px rgba(40,10,10,.6) }
.land-label span{ display:block; font-size:22px; letter-spacing:0; text-transform:none }
.land-label.k{ left:3.5vw } .land-label.g{ right:3.5vw; text-align:right }
.arch{
  position:relative; z-index:2; width:min(560px,88vw); padding:84px clamp(24px,4vw,46px) 56px; text-align:center;
  background:rgba(251,246,236,.95); border-radius:280px 280px 22px 22px;
  box-shadow:0 0 0 1.5px var(--gold), 0 0 0 9px rgba(251,246,236,.92), 0 0 0 10.5px rgba(201,161,74,.7), 0 30px 80px rgba(60,20,20,.35);
}
.arch::after{ content:""; position:absolute; left:34px; right:34px; bottom:18px; height:8px;
  background:linear-gradient(var(--gold) 0 2px, transparent 2px 4px, var(--gold) 4px 8px) }
.arch-orn{ width:150px; margin:-30px auto 6px; display:block }
.cult{ display:flex; gap:12px; justify-content:center; align-items:center; margin:0; color:var(--gold-d); font-size:16px }
.cult i{ font-style:normal; font-family:var(--serif) }
h1{ font-family:var(--serif); font-weight:500; font-size:clamp(34px,4.4vw,54px); line-height:1.04; color:var(--maroon); margin:14px 0 6px }
.title-script{ font-family:var(--script); font-size:clamp(40px,4.8vw,60px); line-height:1.1; color:var(--gold-d); margin:0 }
.hero-copy{ font-family:var(--serif); font-size:20px; line-height:1.5; font-style:italic; color:var(--ink-2); margin:18px 0 8px }
.hero-hook{ font-size:15px; margin:0 0 20px }
.hero-names{ font-family:var(--serif); font-size:15px; letter-spacing:.34em; text-transform:uppercase; color:var(--maroon); margin:0; font-weight:600 }
.hero-names i{ font-family:var(--script); text-transform:none; letter-spacing:0; font-size:26px; font-style:normal; color:var(--gold-d); margin:0 6px; font-weight:400 }
.hero-date{ font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); margin:4px 0 24px }
#threadStart{ position:absolute; left:50%; bottom:5vh; width:1px; height:1px }
@media (max-width:820px){
  #hero{ padding:26vh 0 14vh }
  .arch{ border-radius:200px 200px 20px 20px; padding-top:70px }
  .land-label{ top:14vh; bottom:auto } .land-label span{ font-size:18px }
  .hero-copy{ font-size:18px }
}

/* ---------- ch1 · DM ---------- */
.av{ width:46px; height:46px; flex:none; border-radius:50%; background:url(img/early-days.jpg) no-repeat; background-size:280%; box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--gold) }
.av-her{ background-position:28% 24% } .av-him{ background-position:62% 12% }
.av.sm{ width:32px; height:32px; box-shadow:0 0 0 2px #fff, 0 0 0 3px #D6249F }
.meet{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:30px }
.meet-line{ width:140px; height:24px; overflow:visible }
.meet-line path{ fill:none; stroke:var(--gold); stroke-width:2; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.8s .5s ease }
.meet.in .meet-line path{ stroke-dashoffset:0 }
.meet small{ flex-basis:100%; font-family:var(--hand); font-size:22px; color:var(--ink-2) }
.phone{ width:min(330px,100%); margin:0 auto; background:#fff; border-radius:40px; border:10px solid #1D1418; overflow:hidden;
  box-shadow:0 40px 80px rgba(70,20,30,.25); font-family:-apple-system, "Segoe UI", Roboto, sans-serif; font-weight:400 }
.ph-head{ display:flex; align-items:center; gap:10px; padding:26px 14px 10px; border-bottom:1px solid #EEE }
.ph-back{ font-size:26px; line-height:1 }
.ph-who{ display:flex; flex-direction:column; line-height:1.2; font-size:14px; flex:1 }
.ph-who small{ color:#8E8E8E; font-size:11px }
.ph-ic{ width:48px; height:20px }
.ph-body{ height:390px; overflow:hidden; padding:14px 12px; display:flex; flex-direction:column; justify-content:flex-end; gap:6px }
.ph-stamp{ text-align:center; font-size:11px; color:#999; margin:0 0 auto }
.msg{ display:none; max-width:78%; padding:9px 14px; border-radius:20px; font-size:14.5px; line-height:1.35 }
.msg.show{ display:block; animation:pop .35s cubic-bezier(.3,1.5,.5,1) both }
.msg.him{ align-self:flex-start; background:#EFEFEF; color:#111 }
.msg.her{ align-self:flex-end; background:linear-gradient(135deg,#8A3AB9,#C13584 55%,#E1306C); color:#fff }
@keyframes pop{ from{ opacity:0; transform:scale(.7) translateY(8px) } }
.typing{ display:none; align-self:flex-start; gap:4px; padding:12px 14px; border-radius:20px; background:#EFEFEF }
.typing.her{ align-self:flex-end; background:#F3E3EE }
.typing.show{ display:flex }
.typing i{ width:7px; height:7px; border-radius:50%; background:#999; animation:dot 1s infinite }
.typing i:nth-child(2){ animation-delay:.15s } .typing i:nth-child(3){ animation-delay:.3s }
@keyframes dot{ 30%{ transform:translateY(-4px); opacity:.5 } }
.seen{ align-self:flex-end; margin:0 4px; font-size:11px; color:#8E8E8E; opacity:0; transition:opacity .5s }
.seen.show{ opacity:1 }
.ph-input{ display:flex; justify-content:space-between; align-items:center; margin:8px 12px 14px; padding:9px 16px; border:1px solid #E3E3E3; border-radius:22px; color:#999; font-size:14px }
.ph-input button{ background:none; border:0; color:#C13584; font-size:12px; cursor:pointer }

/* ---------- ch2 · terrace ---------- */
.terrace{ --t:0; min-height:150vh; display:flex; align-items:center }
.terrace .inner{ width:min(1180px, calc(100% - 48px)) }
.sky-day, .sky-night{ position:absolute; inset:0 }
.sky-day{ background:linear-gradient(180deg,#3E2754 0%,#9A4D78 36%,#E07A5F 68%,#F5B971 100%) }
.sky-night{ background:linear-gradient(180deg,#0B0A24 0%,#1B1840 55%,#3A2D5E 100%); opacity:var(--t) }
.sun{ position:absolute; left:58%; top:44%; width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle,#FFE3A3 0 38%,#F5A55A 55%,transparent 70%); transform:translateY(calc(var(--t) * 45vh)); opacity:calc(1 - var(--t) * 1.2) }
.moon{ position:absolute; right:14%; top:12%; width:70px; height:70px; border-radius:50%; box-shadow:inset -16px 8px 0 0 #F6EBCB; transform:rotate(-20deg); opacity:var(--t); filter:drop-shadow(0 0 18px rgba(246,235,203,.5)) }
.tiny-stars{ position:absolute; inset:0 0 35% 0; opacity:var(--t) }
.tiny-stars i{ position:absolute; width:2px; height:2px; border-radius:50%; background:#FFF; animation:twinkle 3s ease-in-out infinite alternate }
@keyframes twinkle{ from{ opacity:.25 } }
.terrace-scene{ position:absolute; left:0; right:0; bottom:0; width:100%; height:40% }
.terrace .ch-text{ text-shadow:0 2px 18px rgba(30,10,40,.55) }
.star-field{ position:relative; min-height:460px; align-self:stretch }
.star-hint{ position:absolute; left:0; right:0; bottom:0; margin:0; text-align:center; font-family:var(--hand); font-size:22px; color:#FFE9C2; opacity:calc(.5 + var(--t)) }
.star-hint b{ font-family:var(--sans); font-size:12px; font-weight:500; margin-left:6px; padding:2px 8px; border-radius:999px; background:rgba(255,233,194,.18) }
.wish{ position:absolute; width:44px; height:44px; padding:0; border:0; background:none; cursor:pointer; transform:translate(-50%,-50%); opacity:calc(.45 + var(--t)) }
.wish svg{ width:100%; height:100%; color:#FFF3C4; filter:drop-shadow(0 0 6px rgba(255,236,170,.95)); animation:pulse 2.4s ease-in-out infinite }
.wish.seen svg{ color:var(--gold-l); animation:none; transform:scale(.8) }
.wish:focus-visible{ outline:2px solid var(--gold-l); border-radius:50% }
@keyframes pulse{ 50%{ transform:scale(.75) rotate(20deg) } }
.star-note{ position:absolute; z-index:3; width:250px; padding:14px 18px; border-radius:14px; pointer-events:none;
  background:rgba(20,15,40,.8); border:1px solid rgba(233,209,142,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  font-family:var(--serif); font-size:20px; font-style:italic; line-height:1.35; color:#FFF3DA; opacity:0; transform:translateY(8px); transition:opacity .4s, transform .4s }
.star-note.show{ opacity:1; transform:none }
@media (max-width:820px){ .terrace{ min-height:170vh } .star-field{ min-height:380px } }

/* ---------- ch3 · receipt ---------- */
.receipt-zone{ position:relative; padding-bottom:40px }
.printer{ position:relative; width:min(340px,100%); margin:0 auto }
.slot{ position:relative; z-index:2; height:26px; border-radius:14px; background:linear-gradient(#2B2326,#3D3336); box-shadow:inset 0 -4px 0 #151012, 0 10px 20px rgba(0,0,0,.2) }
.receipt-wrap{ margin:-12px 16px 0; padding-bottom:14px; overflow:hidden }
.receipt{ transform:translateY(-101%); transition:transform 3.2s cubic-bezier(.45,.05,.3,1) }
.printed .receipt{ transform:none }
.receipt{ position:relative; padding:32px 22px 30px; background:#FFFDF6; font-family:var(--mono); font-size:13px; line-height:1.55; color:#2A221F; box-shadow:0 12px 20px rgba(80,40,20,.14) }
.receipt::after{ content:""; position:absolute; left:0; right:0; bottom:-10px; height:10px;
  background:linear-gradient(135deg,#FFFDF6 50%,transparent 50%) 0 0/14px 10px repeat-x, linear-gradient(225deg,#FFFDF6 50%,transparent 50%) 0 0/14px 10px repeat-x }
.receipt p{ margin:0 }
.r-center{ text-align:center } .r-big{ font-size:18px; font-weight:700; letter-spacing:.12em } .r-small{ font-size:11.5px; letter-spacing:.06em }
.r-row{ display:flex; align-items:baseline; gap:6px; margin:3px 0 }
.r-row i{ flex:1; border-bottom:1.5px dotted #9C8F86; transform:translateY(-4px) }
.r-rule{ border-top:1px dashed #9C8F86; margin:10px 0 } .r-rule.dbl{ border-top:3px double #9C8F86 }
.r-total{ font-weight:700; font-size:13px; letter-spacing:.1em } .r-total.big{ font-size:17px; letter-spacing:.02em; text-align:center; padding:4px 0 }
.barcode{ height:40px; margin:12px 0 8px; background:repeating-linear-gradient(90deg,#2A221F 0 2px,transparent 2px 4px,#2A221F 4px 5px,transparent 5px 8px,#2A221F 8px 11px,transparent 11px 12px,#2A221F 12px 13px,transparent 13px 17px) }
.stamp{ position:absolute; right:14px; top:44%; padding:4px 12px; border:3px solid #C8324B; border-radius:8px; color:#C8324B; font-weight:700; font-size:20px; letter-spacing:.12em; opacity:0; transform:rotate(-14deg) scale(2.4); mix-blend-mode:multiply }
.printed .stamp{ animation:stamp .45s 3.3s forwards }
@keyframes stamp{ to{ opacity:.85; transform:rotate(-14deg) scale(1) } }
.polaroid{ position:relative; margin:0; padding:12px 12px 46px; background:#FFF; transform:rotate(var(--r,0deg)); box-shadow:0 18px 40px rgba(60,30,20,.22) }
.polaroid img{ width:100%; aspect-ratio:1/1; object-fit:cover }
.polaroid figcaption{ position:absolute; left:0; right:0; bottom:10px; text-align:center; font-family:var(--hand); font-size:22px; line-height:1.1; color:#3A2A22 }
.p-dinner{ position:absolute; right:0; bottom:-30px; width:190px; --r:6deg }
.p-dinner.reveal{ transform:translateY(28px) rotate(6deg) } .p-dinner.reveal.in{ transform:rotate(6deg) }
@media (max-width:1000px){ .p-dinner{ position:relative; right:auto; bottom:auto; margin:26px auto 0 } }

/* ---------- ch4 · waiting ---------- */
.wait-scene{ position:relative; max-width:520px; margin:0 auto }
.wait-scene > svg{ width:100%; height:auto; border-radius:24px; box-shadow:0 30px 60px rgba(90,40,20,.2) }
.clock{ position:absolute; left:-20px; top:-34px; width:124px; text-align:center }
.clock svg{ width:120px; height:120px; filter:drop-shadow(0 10px 20px rgba(60,30,20,.25)) }
.wait-time{ display:inline-block; margin-top:4px; padding:2px 12px; border-radius:999px; background:var(--maroon); color:#F6E7C8; font-family:var(--mono); font-size:13px }
.wait-caption{ text-align:center; font-family:var(--hand); font-size:22px; color:var(--ink-2); margin:14px 0 0 }
@media (max-width:820px){ .clock{ left:auto; right:-6px; top:-44px; transform:scale(.8) } }