/* ── fonts ─────────────────────────────────────────────── */
@font-face{font-family:"Overused Grotesk";src:url(../fonts/OverusedGrotesk-VF.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(../fonts/cormorant-italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"Fragment Mono";src:url(../fonts/fragment-mono.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Kalam";src:url(../fonts/kalam-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Kalam";src:url(../fonts/kalam-400.woff2) format("woff2");font-weight:400;font-display:swap}

/* ── tokens ────────────────────────────────────────────── */
:root{
  --bg:#05070d;
  --ink:#f1efec;
  --ink-2:rgba(241,239,236,.6);
  --ink-3:rgba(241,239,236,.38);
  --hair:rgba(241,239,236,.11);
  --lamp:#e8c88a;
  --paper:#ebe3d0;
  --pen:#242a3b;

  --sans:"Overused Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Cormorant Garamond",Georgia,serif;
  --mono:"Fragment Mono",ui-monospace,monospace;
  --hand:"Kalam","Segoe Print","Bradley Hand",cursive;

  --ground:clamp(88px,15dvh,130px);
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --ease:cubic-bezier(.22,.8,.24,1);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:var(--bg);color:var(--ink);overflow:hidden;overscroll-behavior:none}
body{font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
ul{list-style:none}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px;border-radius:2px}
[hidden]{display:none!important}
.mono{font-family:var(--mono);text-transform:lowercase;letter-spacing:.02em}

/* ── screens ───────────────────────────────────────────── */
.screen{position:fixed;inset:0;z-index:3;opacity:0;visibility:hidden;transition:opacity .8s var(--ease),visibility 0s .8s;pointer-events:none}
.screen.is-active{opacity:1;visibility:visible;transition-delay:0s;pointer-events:auto}

/* ── shared bits ───────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(var(--sat) + 14px) 18px 22px;
  background:linear-gradient(to bottom,rgba(5,7,13,.92) 40%,rgba(5,7,13,0))}
.link-btn{font-size:15px;color:var(--ink-2);padding:8px 8px 8px 0;margin:-8px 0 -8px -2px;transition:color .3s;min-height:44px;display:inline-flex;align-items:center;gap:6px}
.link-btn span{font-size:20px;line-height:1;transform:translateY(-1px)}
.link-btn:hover{color:var(--ink)}
.progress{font-size:13px;color:var(--ink-2)}
.progress b{font-weight:400;color:var(--ink)}

.btn-primary{background:var(--ink);color:#0a0b0c;font-weight:500;font-size:16px;letter-spacing:.01em;
  padding:15px 30px;border-radius:3px;min-height:50px;transition:transform .4s var(--ease),box-shadow .4s,opacity .3s;
  box-shadow:0 0 0 0 rgba(232,200,138,0)}
.btn-primary:hover{box-shadow:0 0 34px rgba(232,200,138,.28)}
.btn-primary:active{transform:scale(.98)}
.btn-ghost{color:var(--ink-2);font-size:15px;padding:12px 6px;min-height:44px;transition:color .3s}
.btn-ghost:hover{color:var(--ink)}

.rise{opacity:0;transform:translateY(14px);animation:rise 1.4s var(--ease) var(--d,0s) forwards}
@keyframes rise{to{opacity:1;transform:none}}

/* ── home ──────────────────────────────────────────────── */
.home{inset:0 0 var(--ground) 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2.4dvh,22px);
  padding:calc(var(--sat) + 16px) 24px 8px;text-align:center;
  transition:opacity 1s var(--ease),filter 1s var(--ease),transform 1.1s var(--ease),visibility 0s 1s}
.home.is-leaving{opacity:0;filter:blur(8px);transform:scale(1.05)}
.home-copy{display:grid;gap:10px}
.home h1{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(38px,11.5vw,56px);line-height:1;letter-spacing:-.01em;
  text-shadow:0 0 38px rgba(232,200,138,.18)}
.home-sub{color:var(--ink-2);font-size:clamp(14px,4vw,16px)}
.giftbox-wrap{height:min(34dvh,250px);aspect-ratio:240/230;display:grid;place-items:center}
.giftbox{width:100%;height:100%;overflow:visible;animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-6px)}}
.gb-glow{opacity:.5;transform-box:fill-box;transform-origin:center;animation:breathe 5s ease-in-out infinite;transition:opacity 1s,transform 1.4s var(--ease)}
@keyframes breathe{50%{opacity:.9}}
.gb-lid,.gb-env{transform-box:fill-box;transform-origin:center;transition:transform 1.1s var(--ease),opacity 1s}
.gb-env--1{transition-delay:.25s}.gb-env--2{transition-delay:.35s}.gb-env--3{transition-delay:.45s}
.home.is-opening .giftbox{animation:none}
.home.is-opening .gb-glow{opacity:1;transform:scale(1.35);animation:none}
.home.is-opening .gb-lid{transform:translate(-26px,-84px) rotate(-14deg);opacity:.85}
.home.is-opening .gb-env--1{transform:translate(-22px,-86px)}
.home.is-opening .gb-env--2{transform:translate(20px,-70px)}
.home.is-opening .gb-env--3{transform:translate(0,-104px)}

/* ── collection ────────────────────────────────────────── */
.collection{inset:0 0 var(--ground) 0}
.col-scroll{height:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);
  scrollbar-width:none}
.col-scroll::-webkit-scrollbar{display:none}
.col-head{max-width:720px;margin:0 auto;padding:0 20px 22px;display:grid;gap:8px}
.col-head h2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(36px,10vw,48px);line-height:1}
.col-hint{color:var(--ink-2);font-size:15px}
.track{height:1px;background:var(--hair);margin-top:14px;position:relative}
.track i{position:absolute;left:0;top:0;height:1px;width:0;background:var(--lamp);box-shadow:0 0 10px var(--lamp);transition:width 1s var(--ease)}
.grid{max-width:720px;margin:0 auto;padding:6px 18px calc(var(--sab) + 30px);display:grid;grid-template-columns:repeat(2,1fr);gap:16px 14px}
@media (min-width:600px){.grid{grid-template-columns:repeat(3,1fr);gap:22px 18px}}
@media (min-width:900px){.col-head,.grid{max-width:900px}.grid{grid-template-columns:repeat(4,1fr)}}
.grid li{display:block}
.grid li.is-final{grid-column:1/-1;margin-top:8px}

/* ── viewer ────────────────────────────────────────────── */
.viewer{background:radial-gradient(120% 80% at 50% 0%,rgba(10,14,26,.78),rgba(4,6,11,.94))}
.v-scroll{height:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.v-scroll::-webkit-scrollbar{display:none}
.v-stage{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;z-index:2}
.v-stage.is-gone{opacity:0;transform:translateY(40px) scale(.9);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.v-stage .env{width:min(78vw,340px)}
.paper-wrap{position:relative;z-index:3;width:min(100% - 28px,540px);margin:2px auto 0;padding:14px 0 calc(var(--sab) + 56px)}
.paper-wrap.is-in .paper{animation:paperIn 1.1s var(--ease) both}
.paper-wrap.is-in .v-actions{animation:rise 1s var(--ease) .7s both}
@keyframes paperIn{from{opacity:0;transform:translateY(46px) scale(.94) rotate(0)}to{opacity:1;transform:rotate(-.5deg)}}

.paper{position:relative;transform:rotate(-.5deg);background:var(--paper);color:var(--pen);border-radius:2px;
  padding:40px 24px 34px 26px;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 30px 60px -18px rgba(0,0,0,.7),0 0 70px -10px rgba(232,200,138,.12);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .25  0 0 0 0 .15  0 0 0 .13 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>"),
    linear-gradient(180deg,#efe7d4,#e6dcc6)}
.paper::before{content:"";position:absolute;left:0;right:0;top:0;height:120px;background:linear-gradient(rgba(255,255,255,.35),transparent);pointer-events:none}
.paper::after{content:"";position:absolute;top:0;bottom:0;left:15px;width:1px;background:rgba(176,96,96,.28)}
.tape{position:absolute;top:-10px;left:50%;width:92px;height:28px;margin-left:-46px;transform:rotate(-2deg);background:rgba(212,198,160,.55);
  box-shadow:0 1px 2px rgba(0,0,0,.18);-webkit-mask:linear-gradient(90deg,transparent 0,#000 3px calc(100% - 3px),transparent);mask:linear-gradient(90deg,transparent 0,#000 3px calc(100% - 3px),transparent)}
.paper-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:lowercase;color:rgba(36,42,59,.5);margin-bottom:2px;padding-left:8px}
.paper-title{font-family:var(--hand);font-weight:400;font-size:25px;line-height:1.25;color:#1c2234;padding-left:8px;margin-bottom:12px}
.paper-body{font-family:var(--hand);font-weight:300;font-size:20px;line-height:34px;padding-left:8px;
  background:repeating-linear-gradient(to bottom,transparent 0 33px,rgba(60,84,128,.17) 33px 34px);background-position:0 7px}
.paper-body p{margin:0 0 34px;color:#232a3c;hyphens:auto}
.paper-ps{font-family:var(--hand);font-weight:300;font-size:18px;line-height:30px;padding-left:8px;margin-top:-4px;color:#2c3347}
.paper-sign{font-family:var(--hand);font-size:22px;line-height:34px;margin-top:-2px;padding-left:8px;color:#1c2234;transform:rotate(-1.5deg);transform-origin:left}
.paper-gift{margin:18px 0 4px 8px}
.paper-gift img{display:block;width:100%;height:auto;border-radius:2px;box-shadow:0 8px 24px -8px rgba(0,0,0,.45)}
.v-actions{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:30px}

/* ── finale ────────────────────────────────────────────── */
.finale{z-index:4;background:radial-gradient(90% 70% at 50% 45%,rgba(3,5,10,.55),rgba(2,3,7,.9));
  clip-path:circle(0% at var(--cx,50%) var(--cy,50%));opacity:1;
  transition:clip-path 0s,visibility 0s 1.2s}
.finale.is-active{clip-path:circle(150% at var(--cx,50%) var(--cy,50%));transition:clip-path 2.2s var(--ease),visibility 0s}
.finale:not(.is-active){transition:clip-path .9s var(--ease),visibility 0s .9s}
.topbar--finale{position:absolute;left:0;right:0;background:none;opacity:0}
.finale.is-active .topbar--finale{animation:rise 1s ease 2.4s forwards}
.f-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(16px,3.6dvh,30px);
  padding:calc(var(--sat) + 70px) 30px calc(var(--sab) + 40px);text-align:center;overflow-y:auto}
.f-inner>*{flex-shrink:0}
.f-line{font-family:var(--serif);font-style:italic;font-size:clamp(23px,6.6vw,30px);line-height:1.22;max-width:19em;color:rgba(241,239,236,.9);opacity:0;filter:blur(10px);transform:translateY(10px)}
.f-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ink-3);opacity:0}
.f-big{font-family:var(--serif);font-style:italic;font-size:clamp(58px,19vw,104px);line-height:1;color:#fff;opacity:0;filter:blur(14px);transform:scale(.96);
  text-shadow:0 0 30px rgba(232,200,138,.55),0 0 90px rgba(232,200,138,.35)}
.f-after{font-size:15px;color:var(--ink-2);max-width:22em;opacity:0}
.f-sign{font-family:var(--hand);font-size:22px;color:rgba(241,239,236,.8);opacity:0;transform:rotate(-1.5deg)}
.f-actions{display:flex;flex-direction:column;align-items:center;gap:4px;opacity:0;margin-top:6px}
.finale.is-active .f-kicker{animation:fin 1.6s ease var(--fd,1.8s) forwards}
.finale.is-active .f-line{animation:finLine 2s var(--ease) var(--fd,3s) forwards}
.finale.is-active .f-big{animation:finBig 3.2s var(--ease) var(--fd,9s) forwards}
.finale.is-active .f-after,.finale.is-active .f-sign{animation:fin 2s ease var(--fd,13s) forwards}
.finale.is-active .f-actions{animation:fin 1.6s ease var(--fd,14s) forwards}
.finale.is-skip .f-kicker,.finale.is-skip .f-line,.finale.is-skip .f-big,.finale.is-skip .f-after,.finale.is-skip .f-sign,.finale.is-skip .f-actions{animation:none!important;opacity:1;filter:none;transform:none}
.finale.is-skip .f-sign{transform:rotate(-1.5deg)}
@keyframes fin{to{opacity:1}}
@keyframes finLine{to{opacity:1;filter:blur(0);transform:none}}
@keyframes finBig{to{opacity:1;filter:blur(0);transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .f-line,.f-big,.f-kicker,.f-after,.f-sign,.f-actions{opacity:1;filter:none;transform:none}
}