/* Ported from design/Ghararemoon.dc.html — palette, type and the two layouts (phone / desktop ≥ 900px). */
@font-face{font-family:Vazirmatn;font-weight:100;font-display:swap;src:url(../fonts/Vazirmatn-Thin.woff2) format("woff2")}
@font-face{font-family:Vazirmatn;font-weight:200;font-display:swap;src:url(../fonts/Vazirmatn-ExtraLight.woff2) format("woff2")}
@font-face{font-family:Vazirmatn;font-weight:300;font-display:swap;src:url(../fonts/Vazirmatn-Light.woff2) format("woff2")}
@font-face{font-family:Vazirmatn;font-weight:400;font-display:swap;src:url(../fonts/Vazirmatn-Regular.woff2) format("woff2")}
@font-face{font-family:Vazirmatn;font-weight:500;font-display:swap;src:url(../fonts/Vazirmatn-Medium.woff2) format("woff2")}
:root{
--bg:#0b0b0f;--fg:#ece7dc;--gold:#d9a84e;--blue:#2f6f9f;--card:#111116;
--padX:24px;--secPad:96px;--title:92px;--name:22px;--galCols:2;--tripCols:2;--btwCols:2;
--max:100%;--count:58px;--countGap:14px;--letter:17px;
}
@media (min-width:900px){
:root{--padX:120px;--secPad:150px;--title:190px;--name:30px;--galCols:4;--tripCols:4;--btwCols:5;
--max:1180px;--count:132px;--countGap:36px;--letter:21px;--btwCols:6}
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Vazirmatn,system-ui,sans-serif;text-wrap:pretty;-webkit-font-smoothing:antialiased}
a{color:var(--gold);text-decoration:none}a:hover{color:var(--fg)}
img{display:block}
[hidden]{display:none!important}
.root{position:relative;min-height:100%;overflow:hidden}
.wrap{padding:var(--secPad) var(--padX) 0;max-width:var(--max);margin:0 auto}
.kicker{font-size:12px;color:var(--gold);margin-bottom:10px}
.kicker.blue{color:var(--blue)}
h2{font-weight:200;margin:0}
.rule{height:1px;background:linear-gradient(90deg,transparent,rgba(217,168,78,.45),transparent);margin:var(--secPad) var(--padX) 0}
.tnum{font-variant-numeric:tabular-nums}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.14)}}
@keyframes glow{0%,100%{opacity:.25;r:9}50%{opacity:.6;r:14}}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes drift{from{stroke-dashoffset:0}to{stroke-dashoffset:-40}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* 2 · Hero */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden}
.hero-bg{position:absolute;inset:0;animation:kb 45s ease-in-out infinite alternate;transform-origin:50% 40%}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(11,11,15,.35) 0%,rgba(11,11,15,0) 30%,rgba(11,11,15,.55) 65%,#0b0b0f 100%)}
.hero-text{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--padX) 72px;pointer-events:none}
.hero-kicker{font-size:13px;color:var(--gold);margin-bottom:8px}
.hero-title{font-size:var(--title);font-weight:100;line-height:1;letter-spacing:-.01em;margin:0 0 14px -2px}
.hero-names{font-size:var(--name);font-weight:300;line-height:1.5}
.hero-date{font-size:14px;color:rgba(236,231,220,.6);margin-top:6px;font-weight:300}
.hero-line{width:56px;height:1px;background:rgba(217,168,78,.6);margin:26px 0 14px}
.hero-days{font-size:15px;font-weight:300;color:rgba(236,231,220,.85)}
.hero-days b{color:var(--gold);font-size:22px;font-weight:200}
/* 3 · Map */
.map .kicker{margin-bottom:28px}
.map svg{width:100%;max-width:760px;display:block;margin:0 auto;overflow:visible}
.map .grid{stroke:rgba(236,231,220,.07);stroke-width:1}
.map .arc{fill:none;stroke:var(--blue);stroke-width:1.2;stroke-dasharray:4 6;animation:drift 6s linear infinite}
.map .plane{font-size:11px;fill:var(--fg);font-variant-emoji:text}
.map .dots{fill:var(--gold)}
.map .halo{animation:glow 4s ease-in-out infinite}
.map .city{font-family:Vazirmatn,sans-serif;font-size:11px;fill:var(--fg)}
.map .km{font-family:Vazirmatn,sans-serif;font-size:9.5px;fill:rgba(236,231,220,.55)}
.map-tag{text-align:center;font-size:20px;font-weight:200;margin-top:36px}
/* 4 · Timeline */
.timeline h2{font-size:34px;margin-bottom:56px}
.rail{position:relative;padding-right:28px;display:flex;flex-direction:column;gap:88px;margin-right:4px}
.trip{position:relative}
.trip::before{content:"";position:absolute;right:-33px;top:8px;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 14px rgba(217,168,78,.9)}
.trip-date{font-size:13px;color:var(--gold)}
.trip-title{font-size:22px;font-weight:300;margin:6px 0 22px}
.trip-grid{display:grid;grid-template-columns:repeat(var(--tripCols),minmax(0,1fr));grid-auto-flow:dense;gap:8px}
.ph{position:relative;aspect-ratio:3/4;border-radius:4px;overflow:hidden;background:var(--card);cursor:zoom-in}
.ph.wide{grid-column:span 2;aspect-ratio:3/2}
.ph img,.sq img,.g img,.lb-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.trip-caption{font-size:15px;font-weight:300;line-height:1.9;color:rgba(236,231,220,.75);margin:20px 0 0;max-width:520px}
/* 5 · Between */
.between h2{font-size:28px;margin-bottom:12px}
.between-lead{font-size:14px;font-weight:300;color:rgba(236,231,220,.55);margin:0 0 40px;line-height:1.9}
.between-grid{display:grid;grid-template-columns:repeat(var(--btwCols),minmax(0,1fr));gap:14px}
.between figure{margin:0;display:flex;flex-direction:column;gap:10px}
.sq{position:relative;aspect-ratio:1/1;border-radius:6px;overflow:hidden;background:var(--card);opacity:.9;cursor:zoom-in}
.between figcaption{font-size:12.5px;font-weight:300;color:rgba(236,231,220,.6);line-height:1.7}
/* 6 · Gallery */
.gallery h2{font-size:34px;margin-bottom:40px}
.masonry{columns:var(--galCols);column-gap:10px}
.g{position:relative;break-inside:avoid;margin-bottom:10px;border-radius:4px;overflow:hidden;background:var(--card);cursor:zoom-in}
/* 7 · Countdown */
.countdown{padding:var(--secPad) var(--padX) 0;text-align:center}
.countdown h2{font-size:28px;margin-bottom:36px}
.rings{display:block;margin:0 auto 40px;overflow:visible}
.cd{display:flex;justify-content:center;gap:var(--countGap)}
.cd-n{font-size:var(--count);font-weight:100;line-height:1}
.cd-l{font-size:13px;color:rgba(236,231,220,.55);margin-top:10px}
.cd-sep{display:flex;align-items:center;padding-bottom:26px;opacity:.85}
.cd-sep svg{animation:beat 1.2s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(217,168,78,.7))}
.cd-date{font-size:15px;font-weight:300;color:rgba(236,231,220,.7);margin-top:44px}
/* 8 · Letter */
.letter{padding:var(--secPad) var(--padX);display:flex;justify-content:center}
.letter-box{max-width:560px;width:100%;border:1px solid rgba(217,168,78,.28);padding:40px 32px 34px;position:relative}
.letter-box::before{content:"";position:absolute;top:-1px;right:32px;width:40px;height:1px;background:var(--gold)}
.letter-to{font-size:12px;color:var(--gold);margin-bottom:22px}
.letter p{font-size:var(--letter);font-weight:300;line-height:2.2;margin:0 0 18px;color:rgba(236,231,220,.9)}
.letter p:last-of-type{margin-bottom:28px}
.letter-sign{font-size:26px;font-weight:200;color:var(--gold);text-align:left}
footer{padding:0 var(--padX) 120px;text-align:center;font-size:12px;color:rgba(236,231,220,.4);font-weight:300;line-height:2}
/* 9 · Player */
.player{position:fixed;bottom:20px;left:20px;z-index:40;display:flex;align-items:center;gap:10px;padding:6px 16px 6px 8px;border-radius:999px;background:rgba(11,11,15,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(217,168,78,.35);box-shadow:0 8px 30px rgba(0,0,0,.5);direction:rtl}
.player-title{font-size:12px;font-weight:300;color:rgba(236,231,220,.85);white-space:nowrap}
.player-play{width:34px;height:34px;border-radius:50%;border:1px solid rgba(217,168,78,.6);background:transparent;color:var(--gold);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.player-mute{height:34px;padding:0 10px;border-radius:999px;border:0;background:transparent;color:rgba(236,231,220,.6);font-family:inherit;font-size:11.5px;cursor:pointer}
/* Lightbox */
.lb{position:fixed;inset:0;z-index:70;background:rgba(11,11,15,.96);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;cursor:zoom-out;touch-action:pan-y}
.lb-img{position:relative;width:min(92vw,900px);max-height:78vh;border-radius:4px;overflow:hidden;background:var(--card)}
.lb-img img{object-fit:contain}
.lb-nav{display:flex;align-items:center;gap:28px;margin-top:22px}
.lb-nav button{background:transparent;border:0;color:var(--gold);font-size:26px;cursor:pointer;padding:6px 10px;font-family:inherit}
.lb-count{font-size:13px;color:rgba(236,231,220,.6)}
/* 1 · Gate */
.gate{position:fixed;inset:0;z-index:80;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;opacity:1;transition:opacity 1s ease}
.gate.fading{opacity:0;pointer-events:none}
.gate-for{font-size:14px;font-weight:300;color:rgba(236,231,220,.7)}
.gate-btn{background:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:18px;color:var(--gold);font-family:inherit;padding:16px}
.gate-btn svg{animation:beat 2.6s ease-in-out infinite;filter:drop-shadow(0 0 18px rgba(217,168,78,.55))}
.gate-btn span{font-size:15px;font-weight:300;letter-spacing:.02em}
/* Grain */
.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.07;mix-blend-mode:screen;background-size:220px 220px;
background-image:url("data:image/svg+xml;utf8,")}
/* ---- Motion ---- */
.rail-line{position:absolute;top:0;bottom:0;right:0;width:1px;background:linear-gradient(180deg,var(--gold),rgba(217,168,78,.25));transform:scaleY(0);transform-origin:top;box-shadow:0 0 12px rgba(217,168,78,.35)}
.rail::after{content:"";position:absolute;top:0;bottom:0;right:0;width:1px;background:rgba(217,168,78,.14)}
.rv{opacity:0;transform:translateY(28px);filter:blur(10px);transition:opacity 1.2s ease var(--d,0ms),transform 1.2s cubic-bezier(.2,.7,.2,1) var(--d,0ms),filter 1.2s ease var(--d,0ms)}
.rv.in{opacity:1;transform:none;filter:blur(0)}
.ph.rv,.sq.rv,.g.rv{transform:translateY(28px) rotate(-1.5deg) scale(.96)}
.ph.rv.in,.sq.rv.in,.g.rv.in{transform:none}
.trip::before{transform:scale(0);transition:transform .6s cubic-bezier(.3,1.4,.5,1) .2s}
.trip:has(.in)::before{transform:scale(1)}
img.fade{opacity:0;transition:opacity .9s ease}
img.fade.ok{opacity:1}
.ph img,.sq img,.g img{transition:opacity .9s ease,transform 1.6s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.ph:hover img,.sq:hover img,.g:hover img{transform:scale(1.045)}}
.hero-text>*{opacity:0;transform:translateY(18px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.hero-text.in>*{opacity:1;transform:none}
.hero-text.in>:nth-child(1){transition-delay:.1s}.hero-text.in>:nth-child(2){transition-delay:.25s}.hero-text.in>:nth-child(3){transition-delay:.45s}
.hero-text.in>:nth-child(4){transition-delay:.6s}.hero-text.in>:nth-child(5){transition-delay:.75s}.hero-text.in>:nth-child(6){transition-delay:.9s}
.hero-line{transform-origin:right}
.hero-text>.hero-line{transform:scaleX(0)}.hero-text.in>.hero-line{transform:scaleX(1)}
@keyframes tick{from{opacity:0;transform:translateY(-.25em)}to{opacity:1;transform:none}}
.cd-n.tick{animation:tick .6s cubic-bezier(.2,.7,.2,1)}
.rings circle{stroke-dasharray:164;stroke-dashoffset:164;transition:stroke-dashoffset 2.2s cubic-bezier(.4,0,.2,1)}
.rings circle:nth-child(2){transition-delay:.5s}
.rings.in circle{stroke-dashoffset:0}
.letter-sign span{display:inline-block;clip-path:inset(0 0 0 100%);transition:clip-path 1.6s cubic-bezier(.4,0,.2,1) .9s}
.letter-box.in .letter-sign span{clip-path:inset(0 0 0 0)}
.map .fly{filter:drop-shadow(0 0 6px rgba(236,231,220,.5))}
@keyframes burst{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(6);opacity:0}}
.gate.burst .gate-btn svg{animation:burst .9s cubic-bezier(.3,0,.6,1) forwards}
.gate.burst .gate-btn span,.gate.burst .gate-for{opacity:0;transition:opacity .4s}
@keyframes lbin{from{opacity:0}to{opacity:1}}
@keyframes lbimg{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.lb.show{animation:lbin .35s ease}
.lb.show .lb-img{animation:lbimg .45s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){
.rv,.hero-text>*,.hero-text>.hero-line{opacity:1;transform:none}
img.fade{opacity:1}.rings circle{stroke-dashoffset:0}.letter-sign span{clip-path:none}.rail-line{transform:none}
.trip::before{transform:scale(1)}
}
/* ---- Lovely layer ---- */
#ambient{position:fixed;inset:0;width:100%;height:100%;z-index:85;pointer-events:none;mix-blend-mode:screen}
.progress{position:fixed;top:0;right:0;left:0;height:2px;z-index:60;pointer-events:none}
.progress i{position:absolute;top:0;right:0;height:2px;width:var(--p,0%);background:linear-gradient(90deg,rgba(217,168,78,0),var(--gold));box-shadow:0 0 8px rgba(217,168,78,.6)}
.progress svg{position:absolute;top:-6px;right:calc(var(--p,0%) - 7px);fill:var(--gold);transform:scaleX(-1);filter:drop-shadow(0 0 4px rgba(217,168,78,.8));transition:right .15s linear}
.gate-btn{position:relative}
.ripple{position:absolute;left:50%;top:calc(50% - 20px);width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;border:1px solid rgba(217,168,78,.5);animation:ripple 2.6s ease-out infinite;pointer-events:none}
.ripple.r2{animation-delay:1.3s}
@keyframes ripple{0%{transform:scale(.55);opacity:.7}100%{transform:scale(1.9);opacity:0}}
.gate .mini{position:fixed;left:50%;top:50%;width:14px;height:14px;margin:-7px;pointer-events:none;animation:fly .95s cubic-bezier(.2,.7,.3,1) forwards;color:var(--gold)}
@keyframes fly{0%{transform:translate(0,0) scale(.6);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1.3) rotate(var(--rot));opacity:0}}
.tap-heart{position:fixed;width:18px;height:18px;margin:-9px;pointer-events:none;z-index:88;color:var(--gold);animation:tap 1.4s ease-out forwards;filter:drop-shadow(0 0 6px rgba(217,168,78,.6))}
@keyframes tap{0%{transform:translateY(0) scale(.5);opacity:0}15%{opacity:1;transform:translateY(-6px) scale(1.1)}100%{transform:translateY(-90px) scale(.9);opacity:0}}
.map-heart{fill:var(--gold);transform-box:fill-box;transform-origin:center;animation:beat 1.4s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(217,168,78,.8))}
.map .arc{stroke-dasharray:4 6;stroke-dashoffset:0}
.map .arc.draw{stroke-dasharray:300;stroke-dashoffset:300;animation:drawArc 2.6s cubic-bezier(.4,0,.2,1) forwards}
@keyframes drawArc{to{stroke-dashoffset:0}}
.between figure{animation:float 7s ease-in-out infinite;animation-delay:var(--fd,0s)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.letter-body .w{display:inline-block;opacity:0;transform:translateY(6px);transition:opacity .7s ease var(--wd,0ms),transform .7s ease var(--wd,0ms)}
.letter-body.in .w{opacity:1;transform:none}
.letter-body{line-height:0}
.letter-body p{line-height:2.2}
.eq{display:flex;align-items:flex-end;gap:2px;height:14px;margin-inline-start:2px;opacity:.35}
.eq i{width:2px;height:4px;background:var(--gold);border-radius:1px;transition:height .3s}
.player.playing .eq{opacity:1}
.player.playing .eq i{animation:eq 1s ease-in-out infinite}
.player.playing .eq i:nth-child(2){animation-delay:.2s}.player.playing .eq i:nth-child(3){animation-delay:.4s}
@keyframes eq{0%,100%{height:4px}50%{height:14px}}
.hero-title{background:linear-gradient(100deg,var(--fg) 40%,#fff 50%,var(--fg) 60%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 9s ease-in-out infinite}
@keyframes shimmer{0%,60%{background-position:120% 0}100%{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){
#ambient,.progress svg,.ripple{display:none}
.rv{filter:none}.between figure{animation:none}.letter-body .w{opacity:1;transform:none}
.hero-title{animation:none;color:var(--fg);background:none}
}
/* ---- Riddle gate ---- */
.gate{gap:22px;padding:24px}
.riddle{width:min(92vw,420px);text-align:center}
.riddle-q{font-size:15px;font-weight:300;line-height:2.1;color:rgba(236,231,220,.7);margin:0 0 18px}
.riddle-q b{display:block;font-weight:400;font-size:19px;color:var(--fg);margin-top:4px}
.riddle-form{margin:0}
.riddle-in{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(217,168,78,.45);color:var(--fg);font:inherit;font-size:20px;font-weight:300;text-align:center;padding:10px 6px;outline:none;transition:border-color .3s;caret-color:var(--gold)}
.riddle-in::placeholder{color:rgba(236,231,220,.3)}
.riddle-in:focus{border-color:var(--gold)}
.riddle-msg{min-height:22px;margin-top:12px;font-size:13px;font-weight:300;color:rgba(236,231,220,.55);transition:opacity .3s}
.riddle.wrong .riddle-in{animation:shake .5s cubic-bezier(.36,.07,.19,.97);border-color:rgba(255,120,120,.6)}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
.riddle.right .riddle-in{border-color:var(--gold);color:var(--gold)}
.gate.burst .riddle{opacity:0;transition:opacity .4s}