/* Ringo v15 · направление C, выбранное владельцем: живые кадры днём, огромный QUIET IS OVER. лаймом, наш логотип (файл). */
@font-face{font-family:P;src:url(Poppins-Medium.ttf);font-weight:500}
@font-face{font-family:P;src:url(Poppins-SemiBold.ttf);font-weight:600}
@font-face{font-family:P;src:url(Poppins-Bold.ttf);font-weight:700}
@font-face{font-family:P;src:url(Poppins-ExtraBold.ttf);font-weight:800}
:root{--bg:#0f1217;--tx:#fff;--lime:#c7f64a;--ink:#11160b}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--tx);font:500 16px/1.45 P,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img,video{display:block}

.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:22px clamp(18px,3.6vw,56px);
  background:linear-gradient(180deg,rgba(10,12,16,.55),transparent)}
.brand img{height:clamp(30px,2.9vw,44px);width:auto;opacity:0;transition:opacity .5s}
body.ready .brand img{opacity:1}
.nav nav{display:flex;align-items:center;gap:clamp(16px,2.4vw,36px)}.nav nav a{color:#fff;text-decoration:none;font-weight:500;font-size:15px}
.nav-cta{padding:9px 16px;border-radius:10px;background:var(--lime);color:var(--ink)!important;font-weight:600!important}

/* интро: жидкий логотип поверх всего, затем исчезает */
.intro{position:fixed;inset:0;z-index:60;background:radial-gradient(120% 90% at 50% 40%,#1b2532,#0b0f15 70%);transition:opacity .5s .1s}
.intro svg{width:100%;height:100%}
body.ready .intro{opacity:0;pointer-events:none}

/* сцена закреплена, скролл ведёт историю (высоту задаёт JS) */
.stage{position:relative;height:520vh}
.pin{position:sticky;top:0;height:100svh;overflow:hidden;background:#2a2620 url(v15/street-bg.jpg) center/cover}
.pin:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,14,18,.28),rgba(12,14,18,.12) 40%,rgba(12,14,18,.62));pointer-events:none}
.panels{position:absolute;inset:0}
.panel{position:absolute;margin:0;top:12%;width:27vw;aspect-ratio:3/4;border-radius:18px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.8);
  opacity:0;will-change:transform,opacity}
.panel video{width:100%;height:100%;object-fit:cover}
.panel figcaption{position:absolute;left:12px;bottom:12px;padding:7px 12px;border-radius:999px;background:rgba(15,18,23,.72);backdrop-filter:blur(8px);font-size:13px}
.panel figcaption b{color:var(--lime)}
.p1{left:6vw}.p2{left:36.5vw;top:8%}.p3{left:67vw}

.headline{position:absolute;left:clamp(18px,4vw,64px);right:clamp(18px,4vw,64px);bottom:7%;z-index:5;pointer-events:none}
.headline h1{margin:0;max-width:72vw;font:800 clamp(60px,8.6vw,160px)/.86 P;letter-spacing:-.035em;color:var(--lime);text-transform:uppercase;
  text-shadow:0 10px 40px rgba(0,0,0,.35)}
.headline h1 span{display:inline-block;opacity:0;will-change:transform,opacity}
.sub{margin:14px 0 0;font:700 clamp(22px,2.4vw,38px)/1.1 P;opacity:0;will-change:transform,opacity}
.deal{margin:10px 0 18px;max-width:640px;color:#e8ebef;opacity:0}.deal b{color:#fff}
.cta{pointer-events:auto;display:inline-flex;align-items:center;min-height:56px;padding:0 30px;border-radius:14px;background:var(--lime);color:var(--ink);font-weight:700;font-size:18px;text-decoration:none;opacity:0;
  box-shadow:0 14px 34px -12px rgba(199,246,74,.55)}

/* пост Instagram с лайком и переходом */
.ig{position:absolute;right:clamp(18px,4vw,64px);bottom:7%;width:min(280px,20vw);z-index:6;border-radius:16px;overflow:hidden;background:#fff;color:#111;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.7);opacity:0;transform:translateY(40px) rotate(3deg);will-change:transform,opacity}
.ig-head{display:flex;gap:8px;align-items:center;padding:8px 10px}.ig-head i{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7)}
.ig-head span{display:grid;line-height:1.1}.ig-head b{font-size:12.5px}.ig-head small{font-size:11px;color:#777}
.ig img{width:100%}
.ig-acts{display:flex;align-items:center;justify-content:space-between;padding:8px 10px}
.heart svg{width:24px;height:24px;fill:none;stroke:#111;stroke-width:2;transition:all .25s}
.ig.liked .heart svg{fill:#ff3040;stroke:#ff3040;transform:scale(1.25)}
.ig-cta{font-size:12px;font-weight:600;color:#0a7cff}
.tap{position:absolute;left:22px;bottom:16px;width:36px;height:36px;border-radius:50%;border:2px solid rgba(0,0,0,.35);opacity:0}
.ig.tapping .tap{animation:tap .6s ease}
@keyframes tap{0%{opacity:.8;transform:scale(.5)}100%{opacity:0;transform:scale(1.6)}}

.hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);margin:0;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6);transition:opacity .3s}
.next{min-height:60vh;display:grid;place-items:center;padding:40px 20px;color:#9aa3ae;text-align:center}

@media (max-width:820px){
  .nav nav a:not(.nav-cta){display:none}
  .panel{width:56vw;top:10%;border-radius:14px}.p1{left:4vw}.p2{left:22vw;top:14%}.p3{left:40vw;top:18%}
  .headline{bottom:5%}.headline h1{font-size:clamp(52px,17vw,84px)}.deal{font-size:14px}.cta{min-height:50px;font-size:16px}
  .ig{width:52vw;right:24vw;bottom:auto;top:14%}
}
@media (prefers-reduced-motion:reduce){.panel,.headline h1 span,.sub,.deal,.cta,.ig{opacity:1!important;transform:none!important}.intro{display:none}.brand img{opacity:1}}