body{margin:0;background:#0E0E0E}
a{color:#EDE8DF}a:hover{color:#E8B04A}
.site{background:#0E0E0E;color:#EDE8DF;font-family:Inter,system-ui,sans-serif;font-size:17px;line-height:1.65;font-weight:300;position:relative;overflow-x:clip;-webkit-font-smoothing:antialiased}
.site *{box-sizing:border-box}
.serif{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8A857C;font-weight:400}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 28px;background:#E8B04A;color:#0E0E0E;font:500 15px/1 Inter,system-ui,sans-serif;letter-spacing:.02em;text-decoration:none;border:0;border-radius:2px;cursor:pointer;transition:background .4s,box-shadow .4s}
.btn:hover{color:#0E0E0E;background:#F0BE5E;box-shadow:0 0 40px rgba(232,176,74,.25)}
.btn:focus-visible,.ghost:focus-visible,.snd:focus-visible{outline:2px solid #E8B04A;outline-offset:3px}
.ghost{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border:1px solid rgba(237,232,223,.35);color:#EDE8DF;text-decoration:none;font:400 15px/1 Inter,system-ui,sans-serif;border-radius:2px;transition:border-color .4s}
.ghost:hover{border-color:#EDE8DF;color:#EDE8DF}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.kick{display:flex;align-items:center;gap:14px}
.kick::before{content:'';width:28px;height:1px;background:#8A857C}

/* overlays */
.grain{position:fixed;left:-50%;top:-50%;width:200%;height:200%;pointer-events:none;z-index:60;animation:grain 1.2s steps(6) infinite}
.grain svg{width:100%;height:100%;display:block}
@keyframes grain{0%{transform:translate(0,0)}17%{transform:translate(-3%,2%)}33%{transform:translate(2%,-3%)}50%{transform:translate(-2%,-1%)}67%{transform:translate(3%,3%)}83%{transform:translate(-1%,2%)}100%{transform:translate(0,0)}}
.vig{position:fixed;inset:0;pointer-events:none;z-index:59;background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 55%,rgba(0,0,0,.6) 100%);animation:flick 9s infinite}
@keyframes flick{0%,46%,49%,82%,85%,100%{opacity:1}47%{opacity:.78}48%{opacity:.95}83%{opacity:.86}}

/* bars */
.bar{position:fixed;top:0;left:0;right:0;z-index:50;height:52px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 24px;background:rgba(14,14,14,.74);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(237,232,223,.07)}
.bar-r{display:flex;align-items:center;gap:18px}
.bar .btn{min-height:36px;padding:0 18px;font-size:14px}
.snd{display:inline-flex;align-items:center;gap:8px;min-height:44px;background:none;border:0;color:#8A857C;cursor:pointer;padding:0 4px}
.snd:hover{color:#EDE8DF}
.mbar{display:none}

/* reveal */
.ready .rv .up{opacity:0;transform:translateY(16px);transition:opacity 1.3s ease,transform 1.3s ease}
.ready .rv.in .up{opacity:1;transform:none}
.ready .rv.in .up:nth-child(2){transition-delay:.15s}
.ready .rv.in .up:nth-child(3){transition-delay:.3s}
.ready .rv.in .up:nth-child(4){transition-delay:.45s}
@keyframes fadeIn{from{opacity:0;filter:blur(5px)}to{opacity:1;filter:blur(0)}}

/* 1 hero */
.hero{min-height:min(100vh,940px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:30px;padding:110px 24px 80px;position:relative}
.t1,.t2,.t3,.t4{opacity:0;animation:fadeIn 1.8s ease forwards}
.t1{animation-delay:.4s}.t2{animation-delay:2s}.t3{animation-delay:3.4s}.t4{animation-delay:5s}
.hero-title{width:min(620px,84vw);height:auto;display:block}
.title-hand{margin:0;font-family:Caveat,'Comic Sans MS',cursive;font-weight:600;font-size:clamp(72px,10vw,148px);line-height:.88;letter-spacing:.005em;color:#EDE8DF;text-wrap:balance}
.hero-sub{font-size:clamp(22px,2.6vw,30px);font-style:italic;margin:0;color:#EDE8DF}
.hint{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:26px}
.hint i{display:block;width:1px;height:48px;background:linear-gradient(#8A857C,rgba(138,133,124,0));animation:hint 2.6s ease-in-out infinite;transform-origin:top}
@keyframes hint{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* rain on glass */
.rain{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.drop{position:absolute;top:-40px;width:7px;height:9px;border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.7),rgba(255,255,255,.12) 55%,rgba(255,255,255,0) 72%);animation:slide linear infinite}
.drop::after{content:'';position:absolute;left:50%;bottom:7px;width:2px;height:60px;margin-left:-1px;background:linear-gradient(rgba(237,232,223,0),rgba(237,232,223,.18))}
@keyframes slide{0%{transform:translate(0,0)}30%{transform:translate(0,180px)}34%{transform:translate(2px,190px)}62%{transform:translate(1px,520px)}66%{transform:translate(-2px,540px)}100%{transform:translate(0,1100px)}}
.drop:nth-child(1){left:6%;animation-duration:9s;animation-delay:-2s}
.drop:nth-child(2){left:13%;animation-duration:13s;animation-delay:-7s;transform:scale(.7)}
.drop:nth-child(3){left:21%;animation-duration:11s;animation-delay:-4s}
.drop:nth-child(4){left:27%;animation-duration:15s;animation-delay:-11s}
.drop:nth-child(5){left:34%;animation-duration:10s;animation-delay:-1s}
.drop:nth-child(6){left:41%;animation-duration:14s;animation-delay:-9s}
.drop:nth-child(7){left:48%;animation-duration:12s;animation-delay:-5s}
.drop:nth-child(8){left:55%;animation-duration:9.5s;animation-delay:-8s}
.drop:nth-child(9){left:61%;animation-duration:16s;animation-delay:-3s}
.drop:nth-child(10){left:67%;animation-duration:11.5s;animation-delay:-10s}
.drop:nth-child(11){left:73%;animation-duration:13.5s;animation-delay:-6s}
.drop:nth-child(12){left:79%;animation-duration:10.5s;animation-delay:-12s}
.drop:nth-child(13){left:85%;animation-duration:14.5s;animation-delay:-2.5s}
.drop:nth-child(14){left:91%;animation-duration:12.5s;animation-delay:-7.5s}
.drop:nth-child(15){left:96%;animation-duration:9s;animation-delay:-5.5s}
.drop:nth-child(16){left:17%;animation-duration:17s;animation-delay:-14s}
.drop:nth-child(17){left:52%;animation-duration:18s;animation-delay:-13s}
.drop:nth-child(18){left:82%;animation-duration:16.5s;animation-delay:-15s}
.rain .drop{animation-name:slideR}
.rain .drop:nth-child(even){animation-name:slideL}
.rain .drop::after{width:2px;height:90px;bottom:7px;margin-left:-1px;border-radius:1px;transform-origin:50% 100%;transform:rotate(-1.2deg);background:linear-gradient(rgba(237,232,223,0) 0%,rgba(237,232,223,.05) 14%,rgba(237,232,223,0) 22%,rgba(237,232,223,.12) 34%,rgba(237,232,223,.04) 47%,rgba(237,232,223,.14) 58%,rgba(237,232,223,.06) 72%,rgba(237,232,223,.16) 86%,rgba(237,232,223,.2) 100%)}
.rain .drop:nth-child(even)::after{transform:rotate(1.2deg);height:70px}
.rain .drop:nth-child(3n)::after{height:120px;width:1.5px}
.rain .drop:nth-child(3n+1){animation-duration:18s}
.rain .drop:nth-child(3n+2){animation-duration:21s}
.rain .drop:nth-child(3n){animation-duration:24s}
.rain .drop:nth-child(4n){animation-duration:16s}

/* 2 prologue */
.pro{position:relative;min-height:min(100vh,920px);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:120px 24px}
.pro-bg{position:absolute;inset:-4%;background:url(../img/prologue-car.webp) 62% 50%/cover no-repeat;opacity:.34;filter:grayscale(1) blur(2px)}
.pro::after{content:'';position:absolute;inset:0;background:linear-gradient(#0E0E0E,rgba(14,14,14,.2) 25%,rgba(14,14,14,.2) 75%,#0E0E0E);z-index:1}
.pro-txt{position:relative;z-index:3;max-width:760px;display:flex;flex-direction:column;gap:34px;text-align:center}
.pl{margin:0;font-size:clamp(22px,2.4vw,31px);line-height:1.45;font-style:italic;text-shadow:0 1px 18px rgba(0,0,0,.8)}
.pl-last{font-size:clamp(28px,3.6vw,46px);font-style:normal;line-height:1.2}
.ready .pro .pl,.ready .pro .rew{opacity:0}
.pro.in .pl:nth-child(2){animation:fadeIn 2s .4s forwards}
.pro.in .pl:nth-child(3){animation:fadeIn 2s 2.6s forwards}
.pro.in .pl:nth-child(4){animation:fadeIn 2s 4.8s forwards}
.pro.in .rew{animation:fadeIn 1.2s 6.6s forwards}
.rew{display:flex;justify-content:center;gap:10px;align-items:center}
.rew b{font-weight:400;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* 3 film */
#film{position:relative;height:6300px}
.stage{position:sticky;top:0;height:min(100vh,920px);overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:22px}
.film-head{display:flex;justify-content:space-between;align-items:baseline;padding:0 32px;margin-top:40px}
.track{display:flex;width:max-content;padding:40px 16vw;background:#171615;position:relative;will-change:transform}
.track::before,.track::after{content:'';position:absolute;left:0;right:0;height:40px;background:repeating-linear-gradient(90deg,#0E0E0E 0 14px,rgba(0,0,0,0) 14px 36px) 0 50%/100% 13px no-repeat}
.track::before{top:0}.track::after{bottom:0}
.fr{flex:none;width:min(60vw,860px,calc((100vh - 330px) * 1.5));padding:16px 20px 22px;border-left:3px solid #0E0E0E;display:flex;flex-direction:column;gap:14px;position:relative}
.fr:last-child{border-right:3px solid #0E0E0E}
.edge{display:flex;justify-content:space-between;font-size:10px;color:#6F6B64;letter-spacing:.2em}
.win{position:relative;aspect-ratio:3/2;overflow:hidden;background:#050505}
.win img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1)}
.ready .fr:not(.in) .win img{filter:grayscale(1) brightness(0)}
.fr.in .win img{animation:develop 1.1s ease forwards,kb 16s 1s ease-out forwards}
@keyframes develop{0%{filter:grayscale(1) brightness(0)}60%{filter:grayscale(1) brightness(1.45) contrast(.8)}100%{filter:grayscale(1) brightness(1) contrast(1)}}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.08)}}
.scratch{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,0) 31%,rgba(255,255,255,.08) 31.1%,rgba(0,0,0,0) 31.3%),linear-gradient(90deg,rgba(0,0,0,0) 77%,rgba(255,255,255,.05) 77.1%,rgba(0,0,0,0) 77.2%);animation:scr 3s steps(3) infinite}
@keyframes scr{33%{transform:translateX(-6%)}66%{transform:translateX(4%)}}
.tc{display:flex;justify-content:space-between;gap:12px;color:#8A857C}
.tc b{font-weight:500;color:#EDE8DF}
.q{margin:0;font-size:clamp(19px,1.75vw,27px);line-height:1.38;font-style:italic;max-width:46ch}
.ready .fr:not(.in) .q{opacity:0}
.fr.in .q{animation:fadeIn 1.6s 1s both}
.pos-top img{object-position:50% 30%}
.pos-mid img{object-position:50% 21%}
/* fx: dust */
.beam{position:absolute;inset:-10%;pointer-events:none;background:linear-gradient(115deg,rgba(0,0,0,0) 30%,rgba(255,248,230,.10) 42%,rgba(255,248,230,.18) 50%,rgba(0,0,0,0) 64%);mix-blend-mode:screen}
.mote{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(255,250,235,.85);box-shadow:0 0 6px rgba(255,250,235,.7);animation:mote linear infinite}
@keyframes mote{0%{transform:translate(0,0);opacity:0}15%{opacity:1}50%{transform:translate(26px,-34px)}85%{opacity:.9}100%{transform:translate(-12px,-80px);opacity:0}}
.mote:nth-child(2){left:38%;top:52%;animation-duration:9s}
.mote:nth-child(3){left:44%;top:38%;animation-duration:12s;animation-delay:-3s;width:2px;height:2px}
.mote:nth-child(4){left:50%;top:60%;animation-duration:10s;animation-delay:-6s}
.mote:nth-child(5){left:47%;top:28%;animation-duration:14s;animation-delay:-2s;width:2px;height:2px}
.mote:nth-child(6){left:55%;top:45%;animation-duration:11s;animation-delay:-8s}
.mote:nth-child(7){left:41%;top:70%;animation-duration:13s;animation-delay:-5s;width:2px;height:2px}
.mote:nth-child(8){left:58%;top:32%;animation-duration:9.5s;animation-delay:-1s}
.mote:nth-child(9){left:52%;top:50%;animation-duration:15s;animation-delay:-10s;width:4px;height:4px;opacity:.6}
.mote:nth-child(10){left:35%;top:40%;animation-duration:12.5s;animation-delay:-7s}
/* fx: bolt */
.bolt{position:absolute;inset:0;background:#fff;opacity:0;mix-blend-mode:screen;pointer-events:none}
.fr.in .bolt{animation:bolt 7s 1.6s infinite}
@keyframes bolt{0%{opacity:0}2%{opacity:.85}3%{opacity:.1}5%{opacity:.6}8%,100%{opacity:0}}
.fx-bolt .rain .drop{width:5px;height:7px}
/* fx: pull back + flicker */
.fr.in.fx-pull .win img{animation:develop 1.1s ease forwards,pull 14s ease-out forwards,fl 4s 1.2s infinite}
@keyframes pull{from{transform:scale(1.14)}to{transform:scale(1)}}
@keyframes fl{0%,100%{opacity:1}40%{opacity:1}42%{opacity:.84}44%{opacity:1}70%{opacity:.92}71%{opacity:1}}
/* fx: shake */
.fr.in.fx-shake .win img{animation:develop 1.1s ease forwards,shake .5s 1.1s steps(2) infinite}
@keyframes shake{0%{transform:scale(1.04) translate(0,0)}25%{transform:scale(1.04) translate(-1px,1px)}50%{transform:scale(1.04) translate(1px,0)}75%{transform:scale(1.04) translate(0,-1px)}}
/* fx: focus */
.fr.in.fx-focus .win img{animation:focus 2.8s ease-out forwards,kb 16s 1s ease-out forwards}
@keyframes focus{0%{filter:grayscale(1) brightness(0) blur(14px)}30%{filter:grayscale(1) brightness(1.1) blur(12px)}100%{filter:grayscale(1) brightness(1) blur(0)}}
/* fx: dusk */
.fr.in.fx-dusk .win img{animation:dusk 7s ease forwards,kb 16s 1s ease-out forwards}
@keyframes dusk{0%{filter:grayscale(1) brightness(0)}12%{filter:grayscale(1) brightness(1.1)}100%{filter:grayscale(1) brightness(.62) contrast(1.15)}}
/* fx: sway */
.fr.in.fx-sway .win img{animation:develop 1.1s ease forwards,sway 2.6s 1.1s ease-in-out infinite}
@keyframes sway{0%,100%{transform:scale(1.06) rotate(0) translateY(0)}25%{transform:scale(1.06) rotate(.35deg) translateY(1px)}75%{transform:scale(1.06) rotate(-.35deg) translateY(-1px)}}
.shadows{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(100deg,rgba(0,0,0,0) 0 120px,rgba(0,0,0,.28) 120px 190px,rgba(0,0,0,0) 190px 330px);background-size:660px 100%;animation:pass 3.2s linear infinite;mix-blend-mode:multiply}
@keyframes pass{from{background-position:0 0}to{background-position:-660px 0}}
/* fx: fade */
.fr.in.fx-fade .win img{animation:fade 6s ease forwards}
@keyframes fade{0%{filter:grayscale(1) brightness(0)}15%{filter:grayscale(1) brightness(1.1)}100%{filter:grayscale(1) brightness(.68) contrast(.78)}}
/* text frames (intertitles) */
.card{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:9%}
.card::before{content:'';position:absolute;inset:16px;border:1px solid rgba(237,232,223,.22);outline:1px solid rgba(237,232,223,.1);outline-offset:-8px}
.card p{margin:0;font-size:clamp(22px,2.3vw,36px);line-height:1.3;font-style:italic;position:relative}
.ready .fr:not(.in) .card p{opacity:0}
.fr.in.fx-slam .card p{animation:slam 1.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes slam{0%{opacity:0;transform:scale(1.5);filter:blur(6px)}18%{opacity:1;filter:blur(0)}100%{transform:scale(1)}}
.fr.in.fx-slam .card p span{display:inline-block;animation:fadeIn 1.6s both}
.fr.in.fx-slam .win img{animation:slamimg 1.5s cubic-bezier(.2,.8,.2,1) forwards,kb 16s 1.5s ease-out forwards}
@keyframes slamimg{0%{filter:grayscale(1) brightness(0) blur(8px);transform:scale(1.35)}22%{filter:grayscale(1) brightness(1.35) blur(2px)}100%{filter:grayscale(1) brightness(1) blur(0);transform:scale(1)}}
.lamp{position:absolute;left:50%;top:0;width:2px;height:22%;background:#3a3732;margin-left:-1px}
.bulb{position:absolute;left:50%;top:22%;width:22px;height:14px;margin-left:-11px;border-radius:0 0 11px 11px;background:#E8B04A;box-shadow:0 0 18px 6px rgba(232,176,74,.6)}
.glow{position:absolute;left:50%;top:22%;width:150%;height:160%;transform:translate(-50%,-30%);background:radial-gradient(ellipse at 50% 30%,rgba(232,176,74,.34),rgba(232,176,74,.08) 35%,rgba(0,0,0,0) 60%);pointer-events:none}
.fr.in.fx-lamp .glow,.fr.in.fx-lamp .bulb{animation:lampfl 5s 1s infinite}
@keyframes lampfl{0%,100%{opacity:1}31%{opacity:1}32%{opacity:.35}33%{opacity:1}35%{opacity:.6}36%,78%{opacity:1}79%{opacity:.7}80%{opacity:1}}
.fx-lamp .card{padding-top:24%}
.fr.in.fx-lamp .win img{animation:night 2.4s ease forwards}
@keyframes night{0%{filter:grayscale(1) brightness(0)}50%{filter:grayscale(1) brightness(.9)}100%{filter:grayscale(1) brightness(.72) contrast(1.1)}}
.ywin{position:absolute;left:81.6%;top:26%;width:11.2%;height:23.2%;background:#E8B04A;mix-blend-mode:multiply;opacity:0;pointer-events:none}
.yglow{position:absolute;left:87.2%;top:37.6%;width:44%;height:60%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,rgba(232,176,74,.38),rgba(232,176,74,.1) 40%,rgba(0,0,0,0) 68%);mix-blend-mode:screen;opacity:0;pointer-events:none}
.fr.in.fx-lamp .ywin,.fr.in.fx-lamp .yglow{animation:winOn 1.4s 1.4s ease forwards,lampfl 5s 2.8s infinite}
@keyframes winOn{from{opacity:0}to{opacity:1}}
.wind,.splash{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.wind i{position:absolute;right:100%;height:1.5px;width:24%;border-radius:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6) 40%,rgba(255,255,255,0));opacity:0}
.fr.in .wind i{animation:gust 1.6s 1.4s linear infinite}
@keyframes gust{0%{transform:translateX(0);opacity:0}12%{opacity:.85}85%{opacity:.6}100%{transform:translateX(560%);opacity:0}}
.wind i:nth-child(1){top:14%;animation-duration:1.5s !important;animation-delay:1.4s !important}
.wind i:nth-child(2){top:24%;width:16%;animation-duration:1.9s !important;animation-delay:1.9s !important}
.wind i:nth-child(3){top:33%;animation-duration:1.3s !important;animation-delay:2.3s !important}
.wind i:nth-child(4){top:41%;width:30%;animation-duration:1.7s !important;animation-delay:1.6s !important}
.wind i:nth-child(5){top:52%;width:14%;animation-duration:1.4s !important;animation-delay:2.7s !important}
.wind i:nth-child(6){top:61%;animation-duration:2s !important;animation-delay:2s !important}
.wind i:nth-child(7){top:70%;width:20%;animation-duration:1.6s !important;animation-delay:3.1s !important}
.wind i:nth-child(8){top:79%;width:28%;animation-duration:1.8s !important;animation-delay:1.8s !important}
.wind i:nth-child(9){top:88%;width:18%;animation-duration:1.45s !important;animation-delay:2.5s !important}
.splash i{position:absolute;bottom:22%;left:58%;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.85);opacity:0}
.fr.in .splash i{animation:spray 1.1s 1.6s ease-out infinite}
@keyframes spray{0%{transform:translate(0,0);opacity:0}10%{opacity:.9}100%{transform:translate(var(--sx),var(--sy));opacity:0}}
.splash i:nth-child(1){--sx:-60px;--sy:-40px}
.splash i:nth-child(2){--sx:-90px;--sy:-18px;animation-delay:1.9s !important;width:3px;height:3px}
.splash i:nth-child(3){--sx:-40px;--sy:-60px;animation-delay:2.2s !important}
.splash i:nth-child(4){--sx:-110px;--sy:-30px;animation-delay:2.5s !important;width:3px;height:3px}
.splash i:nth-child(5){--sx:-70px;--sy:-70px;animation-delay:2.8s !important;width:2px;height:2px}
.splash i:nth-child(6){--sx:-130px;--sy:-10px;animation-delay:2.05s !important}
.rain-soft{z-index:0;opacity:0;animation:fadeIn 4s 1.2s ease forwards}
.hero > *:not(.rain){position:relative;z-index:1}
.rain-soft .drop{width:7px;height:9px;opacity:.6;animation-name:slideR}
.rain-soft .drop:nth-child(even){animation-name:slideL}
.rain-soft .drop::after{width:2px;height:90px;bottom:7px;margin-left:-1px;border-radius:1px;transform-origin:50% 100%;transform:rotate(-1.2deg);background:linear-gradient(rgba(237,232,223,0) 0%,rgba(237,232,223,.05) 14%,rgba(237,232,223,0) 22%,rgba(237,232,223,.12) 34%,rgba(237,232,223,.04) 47%,rgba(237,232,223,.14) 58%,rgba(237,232,223,.06) 72%,rgba(237,232,223,.16) 86%,rgba(237,232,223,.2) 100%)}
.rain-soft .drop:nth-child(even)::after{transform:rotate(1.2deg);height:70px}
.rain-soft .drop:nth-child(3n)::after{height:120px;width:1.5px}
@keyframes slideR{0%{transform:translate(0,0)}22%{transform:translate(5px,150px)}27%{transform:translate(6px,158px)}52%{transform:translate(10px,400px)}58%{transform:translate(13px,430px)}80%{transform:translate(15px,690px)}100%{transform:translate(20px,1000px)}}
@keyframes slideL{0%{transform:translate(0,0)}18%{transform:translate(-3px,120px)}24%{transform:translate(-5px,132px)}49%{transform:translate(-9px,380px)}55%{transform:translate(-10px,400px)}78%{transform:translate(-14px,680px)}100%{transform:translate(-18px,1000px)}}
.rain-soft .drop:nth-child(1){left:3%;animation-duration:16s;animation-delay:-3s}
.rain-soft .drop:nth-child(2){left:7%;animation-duration:21s;animation-delay:-11s}
.rain-soft .drop:nth-child(3){left:11%;animation-duration:18s;animation-delay:-7s}
.rain-soft .drop:nth-child(4){left:15%;animation-duration:24s;animation-delay:-16s}
.rain-soft .drop:nth-child(5){left:5%;animation-duration:20s;animation-delay:-19s}
.rain-soft .drop:nth-child(6){left:85%;animation-duration:17s;animation-delay:-5s}
.rain-soft .drop:nth-child(7){left:89%;animation-duration:22s;animation-delay:-13s}
.rain-soft .drop:nth-child(8){left:93%;animation-duration:19s;animation-delay:-9s}
.rain-soft .drop:nth-child(9){left:97%;animation-duration:25s;animation-delay:-2s}
.rain-soft .drop:nth-child(10){left:91%;animation-duration:23s;animation-delay:-18s}
@media (max-width:899px){.rain-soft .drop:nth-child(4),.rain-soft .drop:nth-child(10){display:none}}
/* some drops hit the bottom and leave a warm glow */
.rain{container-type:size}
.rain .drop:nth-child(3n+1){animation:slideHit var(--hd,19s) var(--hdl,-4s) linear infinite !important;background-size:100% 100%;background-repeat:no-repeat;background-position:50% 50%}
.rain .drop:nth-child(3n+1)::before{content:'';position:absolute;left:50%;top:50%;width:70px;height:22px;margin:-11px 0 0 -35px;border-radius:50%;background:radial-gradient(ellipse,rgba(232,176,74,.75),rgba(232,176,74,.22) 45%,rgba(232,176,74,0) 70%);opacity:0;pointer-events:none;animation:hitGlow var(--hd,19s) var(--hdl,-4s) linear infinite}
.rain .drop:nth-child(1){--hd:18s;--hdl:-3s}
.rain .drop:nth-child(4){--hd:22s;--hdl:-15s}
.rain .drop:nth-child(7){--hd:20s;--hdl:-9s}
.rain .drop:nth-child(10){--hd:24s;--hdl:-19s}
.rain .drop:nth-child(13){--hd:19s;--hdl:-6s}
.rain .drop:nth-child(16){--hd:23s;--hdl:-12s}
@keyframes slideHit{0%{transform:translate(0,0);background-size:100% 100%}22%{transform:translate(4px,20cqh)}27%{transform:translate(5px,21cqh)}52%{transform:translate(9px,50cqh)}58%{transform:translate(11px,53cqh)}95%{transform:translate(15px,calc(100cqh + 10px)) scale(1,1);background-size:100% 100%}96.5%{transform:translate(15px,calc(100cqh + 14px)) scale(2.2,.35);background-size:60% 60%}100%{transform:translate(15px,calc(100cqh + 14px)) scale(2.6,.3);background-size:0 0}}
.ex .rain .drop:nth-child(odd){animation:slideHit var(--hd,16s) var(--hdl,-5s) linear infinite !important;background-size:100% 100%;background-repeat:no-repeat;background-position:50% 50%}
.ex .rain .drop:nth-child(odd)::before{content:'';position:absolute;left:50%;top:50%;width:120px;height:34px;margin:-17px 0 0 -60px;border-radius:50%;background:radial-gradient(ellipse,rgba(232,176,74,.85),rgba(232,176,74,.25) 45%,rgba(232,176,74,0) 70%);opacity:0;pointer-events:none;animation:hitGlow var(--hd,16s) var(--hdl,-5s) linear infinite}
.ex .rain .drop:nth-child(1){--hd:14s;--hdl:-2s}
.ex .rain .drop:nth-child(3){--hd:17s;--hdl:-9s}
.ex .rain .drop:nth-child(5){--hd:15s;--hdl:-6s}
.ex .rain .drop:nth-child(7){--hd:18s;--hdl:-13s}
.ex .rain .drop:nth-child(9){--hd:13s;--hdl:-4s}
.ex .rain .drop:nth-child(11){--hd:16s;--hdl:-11s}
.ex .rain .drop:nth-child(13){--hd:19s;--hdl:-16s}
@keyframes hitGlow{0%,95%{opacity:0;transform:scale(.2)}96.5%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.8)}}
.title-one{font-size:clamp(56px,7.2vw,124px);line-height:1;white-space:nowrap}
@media (max-width:899px){.title-one{white-space:normal;font-size:clamp(52px,15vw,96px);line-height:.92}}
.fx-lamp .card p{color:#EDE8DF}
.film-foot{padding:0 32px;display:flex;justify-content:space-between;gap:20px}

/* 4 break */
.brk{position:relative;min-height:min(100vh,820px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;text-align:center;padding:100px 24px;overflow:hidden}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:3}
.brk.in .flash{animation:burn 2.6s ease forwards}
.fr.in .flash{animation:burn 2.6s 3.4s ease forwards}
@keyframes burn{0%{opacity:0;background:#E8B04A}8%{opacity:.85;background:#F3D9A4}12%{opacity:.15}17%{opacity:.8;background:#fff}22%{opacity:.05}28%{opacity:.55}34%{opacity:0}40%{opacity:.25}48%,100%{opacity:0}}
.hole{position:absolute;left:50%;top:46%;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle,#fff 0 25%,#F3D9A4 35%,#E8B04A 48%,#3b1d00 62%,rgba(0,0,0,0) 72%);transform:translate(-50%,-50%) scale(0);opacity:0;z-index:2;pointer-events:none}
.brk.in .hole{animation:hole 1.8s .15s ease-in forwards}
@keyframes hole{0%{transform:translate(-50%,-50%) scale(0);opacity:1}75%{opacity:1}100%{transform:translate(-50%,-50%) scale(70);opacity:0}}
.ready .brk .bt{opacity:0}
.brk.in .bt{animation:fadeIn 1.8s both}
.brk.in .bt:nth-child(3){animation-delay:2.4s}
.brk.in .bt:nth-child(4){animation-delay:3.4s}
.brk.in .bt:nth-child(5){animation-delay:4.4s}
.brk h2{margin:0;font-size:clamp(40px,6vw,80px);line-height:1.05;font-weight:400}

/* sections */
.sec{padding:140px 0}
.h2{margin:0;font-size:clamp(36px,4.6vw,60px);line-height:1.08;font-weight:400}
.lede{font-size:clamp(19px,1.6vw,22px);line-height:1.6;margin:0;color:#EDE8DF}
.book{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px;align-items:center}
.mock{perspective:1600px;display:flex;justify-content:center}
.mock-in{position:relative;width:min(360px,72vw);aspect-ratio:900/1349;transform:rotateY(-24deg) rotateX(3deg);transform-style:preserve-3d;transition:transform 1.4s ease;box-shadow:30px 40px 80px rgba(0,0,0,.7),0 0 0 1px rgba(237,232,223,.06)}
.mock:hover .mock-in{transform:rotateY(-10deg) rotateX(2deg)}
.mock-in img{width:100%;height:100%;display:block;object-fit:cover}
.mock-in::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.14) 0,rgba(0,0,0,.35) 2.5%,rgba(255,255,255,.06) 4%,rgba(0,0,0,0) 9%,rgba(0,0,0,0) 80%,rgba(255,255,255,.04));pointer-events:none}
.badge{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(237,232,223,.28);padding:10px 16px;color:#EDE8DF}
.badge i{width:7px;height:7px;border-radius:50%;background:#EDE8DF;display:block;flex:none}
.specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid rgba(237,232,223,.12);margin:0}
.specs div{padding:18px 0 4px;border-bottom:1px solid rgba(237,232,223,.12)}
.specs dt{margin:0}
.specs dd{margin:6px 0 12px;font-family:'Cormorant Garamond',Georgia,serif;font-size:24px}

.chaps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:#0E0E0E}
.chap{background:#151413;padding:26px 24px 28px;display:flex;flex-direction:column;gap:12px;min-height:150px;position:relative;transition:background .5s}
.chap:hover{background:#1c1b19}
.chap .serif{font-size:25px;line-height:1.2;color:#EDE8DF}
.chap .ph{color:#8A857C;font-style:italic}

/* 7 excerpt */
.ex{position:relative;overflow:hidden;padding:180px 24px;background:linear-gradient(#0E0E0E,#09090a 22%,#0a0b0c 78%,#0E0E0E)}
.road{position:absolute;inset:0;pointer-events:none}
.fish{position:absolute;top:8%;width:var(--w);height:var(--h);left:var(--l);border-radius:50%;background:radial-gradient(ellipse,rgba(232,176,74,.62),rgba(232,176,74,.18) 45%,rgba(232,176,74,0) 70%);filter:blur(5px);opacity:0;animation:swim var(--d) var(--dl) linear infinite}
@keyframes swim{0%{transform:translate(0,0) scale(.35,.5);opacity:0}12%{opacity:.85}70%{opacity:.6}100%{transform:translate(var(--dx),1100px) scale(1.5,1.1);opacity:0}}
.fish:nth-child(1){--w:180px;--h:26px;--l:18%;--d:17s;--dl:-2s;--dx:-90px}
.fish:nth-child(2){--w:120px;--h:20px;--l:58%;--d:21s;--dl:-9s;--dx:60px}
.fish:nth-child(3){--w:240px;--h:30px;--l:72%;--d:24s;--dl:-15s;--dx:120px}
.fish:nth-child(4){--w:150px;--h:22px;--l:32%;--d:19s;--dl:-12s;--dx:-40px}
.fish:nth-child(5){--w:90px;--h:16px;--l:46%;--d:15s;--dl:-6s;--dx:20px}
.fish:nth-child(6){--w:200px;--h:28px;--l:8%;--d:26s;--dl:-19s;--dx:-150px}
.fish:nth-child(7){--w:130px;--h:18px;--l:84%;--d:20s;--dl:-4s;--dx:90px}
.streak{position:absolute;top:0;bottom:0;left:76%;width:2px;background:linear-gradient(rgba(237,232,223,0),rgba(237,232,223,.22) 30%,rgba(237,232,223,.12) 70%,rgba(237,232,223,0));animation:streak 8s ease-in-out infinite;z-index:2}
@keyframes streak{0%,100%{transform:translateX(0) skewX(0)}30%{transform:translateX(-8px) skewX(-1deg)}60%{transform:translateX(5px) skewX(1deg)}}
.ex-txt{position:relative;z-index:3;max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:28px}
.ex-txt p.serif{margin:0;font-size:clamp(21px,2vw,27px);line-height:1.55;text-shadow:0 1px 20px rgba(0,0,0,.9)}

/* 8 author */
.au{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:80px;align-items:center}
.au-ph{position:relative;width:min(340px,70vw);aspect-ratio:1;justify-self:center}
.au-ph img{width:100%;height:100%;display:block;object-fit:cover;border-radius:50%;filter:grayscale(1) contrast(1.08) brightness(.95)}
.au-ph::after{content:'';position:absolute;inset:-14px;border:1px solid rgba(237,232,223,.16);border-radius:50%}
.aq{margin:0;padding:0;border:0;font-size:clamp(24px,2.4vw,32px);line-height:1.35;font-style:italic}

/* 9 order */
.ord{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px;align-items:start}
.price{font-size:clamp(56px,7vw,92px);line-height:1;margin:0}
.gets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid rgba(237,232,223,.12)}
.gets li{padding:16px 0;border-bottom:1px solid rgba(237,232,223,.12);display:flex;gap:16px}
.gets .mono{flex:none;width:28px;padding-top:4px}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 28px;background:#141312;padding:40px;border:1px solid rgba(237,232,223,.08)}
.fld{display:flex;flex-direction:column;gap:6px}
.full{grid-column:1/-1}
.fld label{color:#8A857C}
.fld input,.fld textarea{width:100%;min-height:48px;background:transparent;border:0;border-bottom:1px solid rgba(237,232,223,.3);color:#EDE8DF;font:400 17px/1.4 Inter,system-ui,sans-serif;padding:10px 0;border-radius:0;transition:border-color .3s}
.fld textarea{min-height:88px;resize:vertical}
.fld input::placeholder,.fld textarea::placeholder{color:#6F6B64}
.fld input:focus,.fld textarea:focus{outline:none;border-bottom-color:#E8B04A}
.fld input:focus-visible,.fld textarea:focus-visible{outline:2px solid #E8B04A;outline-offset:4px}
.thanks{background:#141312;border:1px solid rgba(237,232,223,.08);padding:80px 40px;min-height:520px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center}
.thanks > *{animation:fadeIn 1.8s both}
.thanks > *:nth-child(2){animation-delay:.9s}
.thanks > *:nth-child(3){animation-delay:1.8s}

.step{display:flex;align-items:center;border-bottom:1px solid rgba(237,232,223,.3)}
.step input{border-bottom:0 !important;text-align:center;-moz-appearance:textfield;appearance:textfield}
.step input::-webkit-inner-spin-button,.step input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.stp{flex:none;width:44px;height:48px;background:none;border:0;color:#EDE8DF;font:300 22px/1 Inter,system-ui,sans-serif;cursor:pointer}
.stp:hover{color:#E8B04A}
.stp:focus-visible{outline:2px solid #E8B04A;outline-offset:-2px}
.pay{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pay legend{padding:0 0 10px;color:#8A857C}
.opt{position:relative;display:flex;gap:14px;align-items:flex-start;padding:18px;border:1px solid rgba(237,232,223,.18);cursor:pointer;transition:border-color .3s,background .3s}
.opt:hover{border-color:rgba(237,232,223,.4)}
.opt:has(input:checked){border-color:#E8B04A;background:rgba(232,176,74,.06)}
.opt input{flex:none;width:18px;height:18px;margin:3px 0 0;accent-color:#E8B04A}
.opt input:focus-visible{outline:2px solid #E8B04A;outline-offset:3px}
.opt-b{display:flex;flex-direction:column;gap:4px}
.opt-t{font-size:16px;font-weight:400;color:#EDE8DF}
.opt-d{font-size:13px;line-height:1.45;color:#8A857C}
.total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 0 4px;border-top:1px solid rgba(237,232,223,.12)}
.total .serif{font-size:40px;line-height:1}
@media (max-width:899px){.pay{grid-template-columns:minmax(0,1fr)}}

/* 10 faq + credits */
.faq{max-width:820px;margin:0 auto;border-top:1px solid rgba(237,232,223,.14)}
.faq details{border-bottom:1px solid rgba(237,232,223,.14)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:72px;padding:14px 0;font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(21px,2vw,26px)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:'IBM Plex Mono',monospace;font-size:20px;color:#8A857C;transition:transform .4s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline:2px solid #E8B04A;outline-offset:4px}
.faq details p{margin:0 0 24px;color:#C9C3B8;max-width:62ch}
.credits{padding:64px 24px 120px;display:flex;flex-direction:column;align-items:center;gap:56px;text-align:center}
.cr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 28px;max-width:640px;width:100%}
.cr dt{text-align:right;margin:0}
.cr dd{text-align:left;margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-size:21px;line-height:1.3}
.soc{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px}
.soc a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;border-bottom:1px solid rgba(237,232,223,.25)}

/* phone */
@media (max-width:899px){
.site{font-size:16px}
.bar{padding:0 16px}
.bar .btn{min-height:40px;padding:0 14px;font-size:13px}
.bar > a.mono{font-size:10px;letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.bar-r{gap:6px;flex:none}
.snd span{display:none}
.mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(14,14,14,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid rgba(237,232,223,.08)}
.mbar .btn{flex:1}
#film{height:auto}
.stage{position:static;height:auto;overflow:visible;padding:80px 0 40px}
.film-head,.film-foot{padding:0 16px;flex-direction:column;gap:6px}
.track{flex-direction:column;width:auto;padding:24px 34px;margin:0 8px;transform:none !important}
.track::before,.track::after{top:0;bottom:0;left:0;right:auto;width:34px;height:auto;background:repeating-linear-gradient(180deg,#0E0E0E 0 11px,rgba(0,0,0,0) 11px 28px) 50% 0/12px 100% no-repeat}
.track::after{left:auto;right:0}
.fr{width:auto;border-left:0;border-top:3px solid #0E0E0E;padding:18px 0 26px}
.fr:last-child{border-right:0;border-bottom:3px solid #0E0E0E}
.edge{font-size:9px}
.tc{flex-direction:column;gap:2px}
.sec{padding:96px 0}
.book,.au,.ord{grid-template-columns:minmax(0,1fr);gap:48px}
.specs{column-gap:16px}
.chaps{grid-template-columns:minmax(0,1fr)}
.chap{min-height:0}
.ex{padding:120px 16px}
.form{grid-template-columns:minmax(0,1fr);padding:28px 20px}
.thanks{padding:64px 20px}
.credits{padding:64px 16px 140px}
.wrap{padding:0 16px}
}
@media (prefers-reduced-motion:reduce){
.site *,.site *::before,.site *::after{animation:none !important}
.grain{animation:none !important}
.vig{animation:none !important}
.t1,.t2,.t3,.t4,.ready .pro .pl,.ready .pro .rew,.ready .fr .q,.ready .fr .card p,.ready .brk .bt{opacity:1 !important;filter:none !important}
.ready .fr .win img{filter:grayscale(1) !important;transition:filter 1s ease}
.flash,.hole,.drop,.fish,.mote{display:none}
}
.snd .snd-on{display:none}
.snd[aria-pressed="true"] .snd-on{display:inline}
.snd[aria-pressed="true"] .snd-off{display:none}

[hidden]{display:none !important}

/* форма: одна опція оплати, згода, помилка, антиспам */
.pay-one{grid-template-columns:minmax(0,1fr)}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:13px;line-height:1.5;color:#8A857C;cursor:pointer}
.consent input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:#E8B04A}
.consent input:focus-visible{outline:2px solid #E8B04A;outline-offset:3px}
.form-err{margin:0;padding:12px 14px;border:1px solid rgba(232,90,74,.5);color:#F0A89E;font-size:14px;line-height:1.5}
.btn:disabled{opacity:.6;cursor:wait}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.linkbtn{background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:#8A857C;text-decoration:underline;cursor:pointer}
.linkbtn:hover{color:#E8B04A}

/* банер cookies */
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:80;max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:16px;padding:20px 22px;background:#141312;border:1px solid rgba(237,232,223,.14);box-shadow:0 20px 60px rgba(0,0,0,.6);font-size:14px;line-height:1.55;color:#C9C3B8}
.cookie p{margin:0}
.cookie-b{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}
.cookie .ghost{background:transparent;cursor:pointer}
.cookie .btn,.cookie .ghost{min-height:44px;padding:0 22px;font-size:14px}
@media (max-width:480px){.cookie-b > *{flex:1}}

/* сторінка політики */
.legal{max-width:760px;margin:0 auto;padding:64px 24px 120px}
.legal h1{font-size:clamp(36px,5vw,56px);line-height:1.1;margin:16px 0 8px;font-weight:400}
.legal h2{font-size:28px;line-height:1.2;margin:48px 0 12px;font-weight:400}
.legal p,.legal li{color:#C9C3B8}
.legal ul{padding-left:20px}
.legal li{margin:6px 0}
.legal b{color:#EDE8DF;font-weight:500}
@media (max-width:899px){.legal{padding:40px 16px 96px}}