:root{
  --red:#D7261E; --blue:#1B4FD8; --yellow:#FFD20A; --green:#2FBF71;
  --white:#F4F4F0; --rubber:#141414; --wine:#5B0F2B;
  --display:'Unbounded','Arial Black',sans-serif;
  --text:'Golos Text',system-ui,-apple-system,sans-serif;
  --meme:'Oswald','Impact','Arial Narrow',sans-serif;
  --pad:clamp(18px,5vw,48px);
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{overflow-x:clip;background:var(--rubber);color:#fff;font:400 1.0625rem/1.5 var(--text);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

.sec{padding:clamp(64px,13vw,150px) var(--pad)}
.wrap{max-width:1100px;margin:0 auto}
h2{font:900 clamp(2rem,9vw,5.2rem)/.98 var(--display);letter-spacing:-.03em;text-transform:uppercase;margin-bottom:clamp(28px,6vw,56px)}
.big{font:700 clamp(1.3rem,5.8vw,2.5rem)/1.16 var(--display);letter-spacing:-.015em;max-width:22em}
.big+.big{margin-top:1.2em}

/* kinetic words */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.wi{display:inline-block}

/* ───────── HERO ───────── */
.hero{background:var(--yellow);color:#111;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between}
.hero__in{padding:clamp(22px,5vw,56px) var(--pad) clamp(20px,4vw,40px);max-width:1200px;width:100%;margin:0 auto}
.hero__title{font:900 min(22.5vw,29svh)/.93 var(--display);letter-spacing:-.045em;margin-bottom:clamp(18px,4vw,36px)}
.line{display:block;overflow:hidden;padding-bottom:.04em;white-space:nowrap}
.ch{display:inline-block}
.odo{overflow:hidden;height:.93em;vertical-align:top}
.odo__col{display:block}
.odo__col span{display:block;height:.93em}
.pre .ch,.pre .notes,.pre .hero__hint{visibility:hidden}

.notes{background:#111;color:var(--yellow);padding:clamp(16px,3vw,26px);max-width:34rem}
.notes__h{font:700 .95rem/1.2 var(--display);margin-bottom:.9rem}
.notes dl{display:grid;gap:.7rem}
.notes dt{font:700 .72rem/1.2 var(--display);opacity:.7;margin-bottom:.1rem}
.notes dd{font:500 1.05rem/1.3 var(--text);color:#fff}
.hero__hint{margin-top:1.1rem;font:500 .98rem/1.3 var(--text);max-width:22rem}

.hazard{height:clamp(14px,3vw,22px);background:repeating-linear-gradient(-45deg,#111 0 14px,var(--yellow) 14px 28px)}

/* ───────── ШТАНГА ───────── */
.gym{height:380vh;background:var(--rubber)}
.gym__stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;padding:clamp(20px,4vw,48px) var(--pad);overflow:hidden;max-width:1200px;margin:0 auto}
.gym__count{font:900 clamp(5rem,30vw,13rem)/.9 var(--display);letter-spacing:-.04em;display:flex;align-items:baseline;gap:.12em}
.dg{display:inline-block;width:.88em;text-align:center}
.cl{display:inline-block;width:.4em;text-align:center}
.gym__unit{font-size:.26em;color:var(--yellow);letter-spacing:0;min-width:2.6em}
.lift{--pw:clamp(16px,5vw,36px);--ph:clamp(120px,40vw,300px);display:flex;align-items:center;width:100%;align-self:center}
.side{display:flex;align-items:center;gap:3px}
.pl{display:block;width:var(--pw);border-radius:5px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.28);background:var(--c);flex:none}
.pl--1{--c:var(--red);height:var(--ph)}
.pl--2{--c:var(--blue);height:calc(var(--ph)*.86)}
.pl--3{--c:var(--yellow);height:calc(var(--ph)*.72)}
.pl--4{--c:var(--green);height:calc(var(--ph)*.58)}
.pl--5{--c:var(--white);height:calc(var(--ph)*.44)}
.shaft,.tail{display:block;background:linear-gradient(#d9d9d9,#7d7d7d);height:calc(var(--pw)*.55);border-radius:3px}
.shaft{flex:1;min-width:30px}
.tail{width:clamp(8px,3vw,22px);flex:none}
.gym__lines{position:relative;min-height:9.5rem;font:700 clamp(1.1rem,5vw,2.1rem)/1.16 var(--display);letter-spacing:-.01em;max-width:30em}
.gym__lines p{position:absolute;left:0;right:0;top:0}
.gym__lines p:last-child{color:var(--yellow)}

/* ───────── МЕМЫ: ЗАЛ ───────── */
.m-gym{background:var(--red);color:#fff}
.m-gym__grid{display:grid;gap:clamp(28px,5vw,56px);grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));align-items:start}
.m-gym .shot{max-width:440px}
.vs{display:grid;gap:12px;margin-bottom:clamp(28px,5vw,44px)}
.vs>div{padding:1rem 1.1rem}
.vs b{display:block;font:700 .8rem/1.2 var(--display);margin-bottom:.35rem}
.vs p{font:500 1.15rem/1.3 var(--text)}
.vs__a{background:#fff;color:var(--red)}
.vs__b{background:#111;color:#fff}

/* ───────── фото + мем-подписи ───────── */
.shot,.tile{position:relative;margin:0;overflow:hidden;background:#000}
.shot__in{display:block;position:relative;overflow:hidden}
.shot img{width:100%;height:auto}
.shot__in::after,.tile::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(rgba(0,0,0,.30) 1px,transparent 1.5px) 0 0/4px 4px;opacity:.3}
.shot img{filter:contrast(1.07) saturate(1.12)}
.mask{position:absolute;inset:0;background:var(--yellow);transform-origin:50% 0;z-index:2}
.cap{position:absolute;left:0;right:0;z-index:3;padding:.3em .5em;text-align:center;font:600 clamp(1.2rem,6.2vw,2rem)/1.02 var(--meme);text-transform:uppercase;color:#fff;-webkit-text-stroke:.1em #000;paint-order:stroke fill;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.cap--t{top:.15em}
.cap--b{bottom:.15em}


/* ───────── рамки фото ───────── */
.shot--gym{background:#fff;padding:10px 10px 58px;transform:rotate(-2.2deg);box-shadow:9px 9px 0 #111;overflow:visible}
.shot--gym::before{content:'';position:absolute;z-index:4;top:-12px;left:-18px;width:120px;height:26px;transform:rotate(-7deg);background:repeating-linear-gradient(-45deg,#111 0 10px,var(--yellow) 10px 20px)}
.stamp{position:absolute;z-index:4;right:10px;bottom:10px;transform:rotate(-5deg);border:3px solid var(--red);color:var(--red);padding:.3rem .6rem;font:900 .78rem/1 var(--display);background:#fff}

.shot--call{background:#fff;border:4px solid var(--blue);box-shadow:9px 9px 0 #111}
.call__bar{display:flex;align-items:center;gap:7px;background:var(--blue);color:#fff;padding:.55rem .8rem;font:700 .8rem/1 var(--display)}
.call__bar i{width:11px;height:11px;border-radius:50%;background:#fff;opacity:.85}
.call__bar span{margin-left:.4rem}
.call__ctl{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.6rem .8rem;background:#fff}
.chip{font:700 .78rem/1 var(--display);padding:.55rem .7rem;font-style:normal}
.chip--off{background:var(--red);color:#fff}
.chip--end{background:#111;color:#fff}

.shot--polaroid{background:#fff;padding:12px 12px 74px;transform:rotate(2.2deg);box-shadow:9px 9px 0 #111;overflow:visible}
.shot--polaroid::before{content:'';position:absolute;z-index:4;top:-14px;left:50%;width:96px;height:30px;margin-left:-48px;transform:rotate(-4deg);background:rgba(255,210,10,.88)}
.hand{position:absolute;z-index:4;left:12px;right:12px;bottom:14px;text-align:center;font:700 1.7rem/1.1 'Caveat','Comic Sans MS',cursive;color:#222}

/* ───────── РАБОТА ───────── */
.work{background:var(--white);color:#111}
.work h2{color:var(--blue)}
.cal{background:#fff;border:4px solid var(--blue);max-width:34rem;margin-bottom:clamp(32px,6vw,64px)}
.cal__h{background:var(--blue);color:#fff;padding:.55rem 1rem;font:700 .85rem/1.2 var(--display)}
.ev{position:relative;display:grid;grid-template-columns:3.9rem 1fr;gap:.6rem;align-items:baseline;padding:.85rem 1rem;border-top:2px solid var(--blue);font:500 1.05rem/1.25 var(--text)}
.cal__h+.ev{border-top:0}
.ev time{font:700 .8rem var(--display);color:var(--blue)}
.strike{position:absolute;left:.7rem;right:.7rem;top:50%;height:4px;margin-top:-2px;background:var(--red);transform-origin:0 50%}
.ev--keep{background:var(--green);font-weight:700}
.ev--keep time{color:#111}
.work__grid{display:grid;gap:clamp(28px,5vw,56px);grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));align-items:start}
.drake{display:grid;gap:10px;margin-bottom:clamp(28px,5vw,44px)}
.drake>div{display:grid;grid-template-columns:3.2rem 1fr;align-items:stretch;border:3px solid var(--blue)}
.drake p{padding:.8rem 1rem;font:600 1.1rem/1.3 var(--text)}
.mk{display:grid;place-items:center;font:900 1.5rem var(--display);color:#fff;font-style:normal}
.drake__n{background:#e6e6df}.drake__n .mk{background:var(--red)}
.drake__y{background:var(--yellow)}.drake__y .mk{background:var(--green)}

/* ───────── ПЕРЕКУРЫ ───────── */
.smoke{height:300vh;background:var(--green);color:#111}
.smoke__stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;padding:clamp(24px,5vw,56px) var(--pad);overflow:hidden;max-width:1200px;margin:0 auto}
.smoke__h{margin-bottom:0}
.timer{font:900 clamp(3.2rem,20vw,12rem)/.9 var(--display);letter-spacing:-.04em;align-self:center;display:flex}
.smoke__lines{position:relative;min-height:9.5rem;font:700 clamp(1.1rem,5vw,2.1rem)/1.16 var(--display);letter-spacing:-.01em;max-width:28em}
.smoke__lines p{position:absolute;left:0;right:0;top:0}

/* ───────── ВИНИШКО ───────── */
.wine{height:260vh;background:var(--wine);color:#FBE9EE}
.wine__stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;padding:clamp(24px,5vw,56px) var(--pad);overflow:hidden;max-width:1200px;margin:0 auto}
.wine__row{display:flex;align-items:center;justify-content:center;gap:clamp(16px,6vw,64px)}
.glass{width:min(30vw,190px);height:auto;flex:none}
.glass__line{fill:none;stroke:#FBE9EE;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.wine__fill{fill:#EBD47A}
.wine__pct{font:900 clamp(3rem,15vw,9rem)/.9 var(--display);letter-spacing:-.04em;display:flex;color:var(--yellow)}
.pc{display:inline-block}
.wine__lines{position:relative;min-height:6.5rem;font:700 clamp(1.1rem,5vw,2.1rem)/1.16 var(--display);letter-spacing:-.01em;max-width:28em}
.wine__lines p{position:absolute;left:0;right:0;top:0}
.wine-shot{background:var(--wine);color:#FBE9EE}
.wine-shot__grid{display:grid;gap:clamp(28px,5vw,56px);grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));align-items:center}
.wine-shot .shot{max-width:440px}

/* ───────── ГАЛЕРЕЯ ───────── */
.gallery{background:var(--rubber)}
.gallery h2{color:var(--yellow)}
.gallery__grid{display:grid;gap:clamp(22px,4vw,40px);padding:0 10px 10px 0;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))}
.gallery__hint{font:500 1rem/1.3 var(--text);color:#bdbdbd;margin:-1rem 0 1.6rem}
.tile{aspect-ratio:1;background:var(--c);border:0;cursor:pointer;box-shadow:8px 8px 0 var(--c);transition:transform .35s cubic-bezier(.2,.8,.2,1);-webkit-tap-highlight-color:transparent}
.tile--red{--c:var(--red)}.tile--blue{--c:#3E6BEA}.tile--yellow{--c:var(--yellow)}.tile--green{--c:var(--green)}
.tile img{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;filter:grayscale(1) contrast(1.25) brightness(1.18);mix-blend-mode:multiply;transition:filter .4s}
.tile.is-color{background:#000}
.tile.is-color img{filter:contrast(1.07) saturate(1.12);mix-blend-mode:normal}
.tile .mask{background:#111}
.tile:nth-child(odd){transform:rotate(-1.6deg)}
.tile:nth-child(even){transform:rotate(1.6deg)}
@media (min-width:760px){.tile:nth-child(even){margin-top:36px}}

/* ───────── ФИНАЛ ───────── */
.finale{position:relative;background:var(--rubber);color:var(--yellow);min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1.4rem;padding:clamp(72px,14vw,140px) var(--pad);overflow:hidden}
.finale>*{max-width:1100px;width:100%;margin-inline:auto}
.finale__t{font:900 clamp(1.9rem,8.6vw,4.6rem)/1.08 var(--display);letter-spacing:-.03em}
.finale__s{font:500 1.15rem/1.3 var(--text);color:#fff}
.again{align-self:flex-start;margin-inline:auto;width:auto;background:var(--yellow);color:#111;border:0;padding:1rem 1.4rem;font:700 .95rem/1 var(--display)}
.finale>.again{margin-left:max(0px,calc((100% - 1100px)/2))}
.finale__foot{font:400 .85rem/1.3 var(--text);color:#8a8a8a;margin-top:2rem}

.rain{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:40}
.rp{position:absolute;top:0;border-radius:50%;background:radial-gradient(circle,#141414 0 13%,transparent 14%),var(--c);box-shadow:inset 0 0 0 .12em rgba(0,0,0,.3);will-change:transform}

/* ───────── ПАСХАЛКА ───────── */
.bell{position:fixed;z-index:50;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:46px;height:46px;border-radius:50%;border:3px solid var(--yellow);background:#111;display:grid;place-items:center;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.bell svg{fill:var(--yellow)}
.snd{position:fixed;z-index:50;right:max(12px,env(safe-area-inset-right));bottom:calc(max(12px,env(safe-area-inset-bottom)) + 56px);width:46px;height:46px;border-radius:50%;border:3px solid var(--yellow);background:#111;color:var(--yellow);display:grid;place-items:center;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.snd svg{fill:currentColor}
.snd__on{display:none}
.snd[aria-pressed="true"] .snd__on{display:inline}
.snd[aria-pressed="true"] .snd__off{display:none}
.egg{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:var(--yellow);color:#111;opacity:0;pointer-events:none;transition:opacity .2s}
.egg span{font:900 clamp(3rem,17vw,11rem)/.95 var(--display);letter-spacing:-.04em;text-align:center;padding:0 var(--pad);text-transform:uppercase}
.egg.on{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .egg span{transform:scale(.6) rotate(-6deg)}
  .egg.on span{animation:pop .6s cubic-bezier(.2,1.6,.4,1) forwards}
}
@keyframes pop{to{transform:scale(1) rotate(-3deg)}}

/* ───────── без анимации (reduced motion / нет GSAP) ───────── */
.static .gym,.static .smoke,.static .wine{height:auto}
.static .gym__stage,.static .smoke__stage,.static .wine__stage{position:static;height:auto;min-height:0;gap:2rem;padding-block:clamp(48px,10vw,96px)}
.static .gym__lines,.static .smoke__lines,.static .wine__lines{min-height:0;display:grid;gap:1rem}
.static .gym__lines p,.static .smoke__lines p,.static .wine__lines p{position:static}
.static .mask,.static .strike{display:none}
.static .tile img{mix-blend-mode:multiply}
.static .again{display:none}
.static .ev:not(.ev--keep){opacity:.55;text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:3px}

@media (min-width:900px){
  .hero__title{font-size:min(15vw,23svh)}
}