/* play.neyra.vision · токены и вёрстка · 13.10.2026 */
@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@500;700&family=Onest:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
:root{
  --bg:#121110; --bg-2:#1a1917; --surface:#201f1c; --line:#2d2b27; --line-strong:#3a3733;
  --text:#f1ede6; --muted:#9d978d; --dim:#6c675f;
  --accent:oklch(0.80 0.13 72); --accent-ink:#1a1510;
  --disp:Geologica,Onest,sans-serif; --body:Onest,system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(0.16,1,0.3,1); --gutter:clamp(1rem,4vw,3.5rem); --r:12px;
  color-scheme:dark;
}
*{ box-sizing:border-box }
html{ scroll-behavior:smooth } @media (pointer:fine){ html{ overscroll-behavior:none } }
body{ margin:0; background:var(--bg); color:var(--text); font:400 16px/1.5 var(--body); -webkit-font-smoothing:antialiased }
a{ color:inherit; text-decoration:none }
img,video{ display:block; max-width:100% }
h1,h2,h3{ margin:0; font-family:var(--disp); letter-spacing:-0.02em; line-height:1.05; text-wrap:balance }
.wrap{ width:min(100% - 2*var(--gutter),1440px); margin-inline:auto }
.mono{ font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }
.num{ font-variant-numeric:tabular-nums }
::selection{ background:var(--accent); color:var(--accent-ink) }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }

/* шапка */
.top{ position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:20px; padding:12px var(--gutter); background:linear-gradient(to bottom,rgba(18,17,16,.95),rgba(18,17,16,.6) 70%,transparent); }
.top__logo{ display:flex; align-items:center; gap:10px; min-height:44px; font:700 1rem var(--disp); letter-spacing:.02em }
.top__logo img{ width:28px; height:28px; border-radius:6px }
.top__logo span{ color:var(--accent) }
.top nav{ display:flex; gap:18px; font-size:.95rem; color:var(--muted) } .top nav a:hover{ color:var(--text) }
.top__right{ margin-left:auto; display:flex; gap:10px; align-items:center }
.lang{ display:flex; border:1px solid var(--line-strong); border-radius:999px; overflow:hidden; font-size:.8rem }
.lang button{ all:unset; cursor:pointer; min-width:44px; min-height:44px; display:grid; place-items:center; color:var(--muted) } .lang button[aria-pressed=true]{ background:var(--text); color:var(--bg) }
@media (max-width:700px){ .top nav{ display:none } }

/* кнопки */
.btn{ display:inline-flex; align-items:center; gap:.5em; min-height:44px; padding:.6em 1.3em; border-radius:999px; border:1px solid transparent; font:600 .95rem var(--body); cursor:pointer; transition:transform .2s var(--ease),background .2s }
.btn:active{ transform:scale(.97) }
.btn--main{ background:var(--accent); color:var(--accent-ink) }
.btn--ghost{ background:rgba(255,255,255,.08); color:var(--text); border-color:rgba(255,255,255,.18) }
.btn--ghost:hover{ background:rgba(255,255,255,.14) }

/* первый экран тайтла */
.hero{ position:relative; min-height:82svh; display:grid; align-content:end; overflow:hidden; margin-top:-64px }
.hero__art{ position:absolute; inset:0 } .hero__art img,.hero__art video{ width:100%; height:100%; object-fit:cover; object-position:center 30% }
.hero__art::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,var(--bg) 0%,color-mix(in oklch,var(--bg) 78%,transparent) 38%,color-mix(in oklch,var(--bg) 25%,transparent) 62%,transparent 80%),linear-gradient(to right,color-mix(in oklch,var(--bg) 65%,transparent),transparent 65%) }
.hero__body{ position:relative; text-shadow:0 1px 14px rgba(0,0,0,.55); padding-block:0 clamp(2rem,6vh,4rem); display:grid; gap:14px; max-width:60ch }
.hero h1{ font-size:clamp(2.6rem,1.4rem + 6vw,6rem); font-weight:700; text-transform:uppercase; letter-spacing:.01em; line-height:.95 }
.meta{ display:flex; flex-wrap:wrap; list-style:none; margin:0; padding:0; color:var(--muted); font-size:.95rem }
/* точка-разделитель у начала строки уходит в обрезанное поле слева — при переносе строка не начинается с точки */
.meta{ row-gap:.2rem; margin-left:-1.1rem; clip-path:inset(-4px 0 -4px 1.1rem) } .meta li{ white-space:nowrap; position:relative; padding-left:1.1rem } .meta li::before{ content:""; position:absolute; left:.42rem; top:50%; width:3px; height:3px; border-radius:50%; background:var(--dim) }
.logline{ margin:0; font-size:clamp(1rem,.95rem + .35vw,1.2rem); max-width:52ch; text-wrap:pretty }
.actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.3rem }
.credits-line{ color:var(--muted); font-size:.92rem } .credits-line b{ color:var(--text); font-weight:500 }

/* ряды */
section.row-section{ padding-block:clamp(1.6rem,4vw,2.8rem) }
.row-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:14px }
.row-head h2{ font-size:clamp(1.15rem,1rem + .8vw,1.5rem) } .row-head a{ color:var(--muted); font-size:.9rem; min-height:44px; display:inline-flex; align-items:center }
.row{ display:grid; grid-auto-flow:column; grid-auto-columns:min(74vw,380px); gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter); padding:4px var(--gutter) 10px; margin-inline:calc(-1*var(--gutter)); scrollbar-width:none }
.row::-webkit-scrollbar{ display:none }
.row>*{ scroll-snap-align:start }
.card{ display:grid; gap:.55rem; color:inherit }
.card__frame{ position:relative; aspect-ratio:16/9; background:var(--surface); border-radius:var(--r); overflow:hidden; border:1px solid var(--line) }
.card__frame img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease) }
.card:hover .card__frame img{ transform:scale(1.04) }
.card__tag{ position:absolute; left:.6rem; top:.6rem; padding:.15em .55em; border-radius:4px; background:rgba(0,0,0,.6); font:500 .72rem var(--body); letter-spacing:.06em; text-transform:uppercase }
.card__tag--soon{ background:rgba(0,0,0,.6); color:var(--muted) }
.card__dur{ position:absolute; right:.6rem; bottom:.6rem; padding:.1em .5em; border-radius:4px; background:rgba(0,0,0,.65); font:500 .78rem var(--mono) }
.card__play{ position:absolute; inset:0; display:grid; place-items:center; opacity:0; transition:opacity .3s } .card:hover .card__play{ opacity:1 }
.card__play i{ width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; color:#000; font-style:normal }
.card__kind{ font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.card__title{ font-weight:500; line-height:1.3 }
.card--soon .card__frame img{ filter:saturate(.6) brightness(.8) }

/* карта проекта / факты */
.facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem 2rem; margin:0 }
.facts div{ border-top:1px solid var(--line); padding-top:.6rem }
.facts dt{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:.25rem } .facts dd{ margin:0 }

/* плеер */
.player{ position:relative; aspect-ratio:16/9; background:#000; border-radius:var(--r); overflow:hidden; border:1px solid var(--line) }
.player video{ width:100%; height:100%; background:#000 }
.player__ui{ position:absolute; left:0; right:0; bottom:0; padding:28px 16px 14px; display:grid; gap:8px; background:linear-gradient(to top,rgba(0,0,0,.75),transparent); opacity:0; transition:opacity .3s }
.player:hover .player__ui,.player:focus-within .player__ui,.player.paused .player__ui{ opacity:1 }
.player__bar{ position:relative; height:4px; background:rgba(255,255,255,.25); border-radius:2px; cursor:pointer }
.player__bar i{ position:absolute; left:0; top:0; bottom:0; width:0; background:var(--accent); border-radius:2px }
.player__ctl{ display:flex; align-items:center; gap:10px; font-size:.85rem }
.player__ctl button{ all:unset; cursor:pointer; padding:6px 8px; border-radius:6px } .player__ctl button:hover{ background:rgba(255,255,255,.12) }
.player__ctl .time{ font-family:var(--mono); color:var(--muted) } .player__ctl .sp{ flex:1 }
.player__bar:focus-visible{ outline:2px solid var(--accent); outline-offset:4px }
.player__bar{ height:6px; touch-action:none } .player__bar::before{ content:""; position:absolute; inset:-10px 0 }
.player__ctl button{ min-width:40px; min-height:40px; display:grid; place-items:center } .player__ctl svg{ width:22px; height:22px; fill:currentColor }
.player__msg{ display:none; position:absolute; inset:0; place-items:center; text-align:center; padding:24px; background:rgba(0,0,0,.6); font-size:1rem }
.player.failed .player__msg{ display:grid } .player.failed .player__big,.player.failed .player__ui{ display:none }
.title-hero{ min-height:72svh }
.player__big{ position:absolute; inset:0; display:grid; place-items:center; cursor:pointer } .player__big i{ width:84px; height:84px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; font-style:normal; font-size:1.6rem; color:#000; padding-left:6px }
.player.playing .player__big{ display:none }

/* подвал */
footer a{ display:inline-flex; align-items:center; min-height:44px; padding-inline:4px }
footer{ padding:clamp(2rem,6vw,4rem) var(--gutter); color:var(--muted); font-size:.9rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between }
.sticky-cta{ display:none }
@media (max-width:700px){
  .hero{ min-height:92svh } .hero__body{ padding-bottom:5rem }
  .sticky-cta{ display:flex; position:fixed; transform:translateY(110%); transition:transform .35s var(--ease); left:0; right:0; bottom:0; z-index:40; padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background:linear-gradient(to top,var(--bg) 60%,transparent); justify-content:center }
  .sticky-cta .btn{ width:100% ; justify-content:center }
  .sticky-cta.on{ transform:none }
}
@media (prefers-reduced-motion:reduce){ .card__frame img,.btn{ transition:none } html{ scroll-behavior:auto } }