@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root { color-scheme: dark; --blue:#0787ff; --cyan:#14d9ff; --panel:#080c14; --muted:#929baa; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:#02040a; }
html { scrollbar-width:none; -ms-overflow-style:none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width:0; height:0; display:none; }
body { color:#f8fbff; font-family:Inter,system-ui,-apple-system,sans-serif; overflow-x:hidden; }
.hero { width:100%; height:100vh; min-height:100vh; position:relative; display:grid; grid-template-columns:minmax(420px,46%) 1fr; grid-template-rows:minmax(0,1fr); overflow:hidden; isolation:isolate; background:radial-gradient(circle at 18% 45%,#09152b 0,transparent 37%),#03060d; }
.hero::after { content:""; position:absolute; inset:0; z-index:3; pointer-events:none; background:linear-gradient(90deg,rgba(3,6,13,.08) 0%,rgba(3,6,13,.02) 40%,transparent 70%),linear-gradient(0deg,#03060d 0,transparent 12%); }
.ambient { position:absolute; border-radius:50%; filter:blur(100px); opacity:.13; pointer-events:none; }
.ambient-one { width:420px; height:420px; background:#006eff; left:-160px; top:10%; }
.ambient-two { width:300px; height:300px; background:#12d9ff; left:38%; bottom:-160px; }
.intro { position:relative; z-index:5; align-self:center; width:min(500px,86%); margin-left:clamp(28px,6vw,92px); padding:38px 0; }
.logo { display:block; width:min(360px,82%); height:auto; margin:0 0 18px; filter:drop-shadow(0 12px 28px rgba(0,122,255,.18)); }
.tagline { color:#d5dbe6; font-size:clamp(15px,1.2vw,19px); font-weight:600; letter-spacing:.22em; word-spacing:.5em; margin:0 0 22px; }
.description { color:#a7afbd; max-width:510px; font-size:clamp(14px,1.08vw,17px); line-height:1.75; margin:0 0 29px; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:490px; margin-bottom:28px; }
.stat { min-height:92px; padding:14px 16px; border:1px solid rgba(255,255,255,.08); border-radius:11px; background:linear-gradient(145deg,rgba(13,20,32,.88),rgba(5,9,16,.9)); display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:13px; box-shadow:0 18px 50px rgba(0,0,0,.22); }
.stat-icon { flex:0 0 auto; width:38px; height:38px; color:#ff3f59; line-height:1; filter:drop-shadow(0 0 8px rgba(255,63,89,.48)); }
.stat-icon.movie-clapper { background:currentColor; -webkit-mask:url('movie-clapper.webp') center/contain no-repeat; mask:url('movie-clapper.webp') center/contain no-repeat; }
.stat:nth-child(2) .stat-icon { color:#a74dff; filter:drop-shadow(0 0 8px rgba(167,77,255,.48)); }
.stat:nth-child(3) .stat-icon { color:#208dff; filter:drop-shadow(0 0 8px rgba(32,141,255,.55)); }
.stat-icon svg { display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.stat-icon.anime-mask { background:currentColor; -webkit-mask:url('naruto-leaf-icon.png') center/contain no-repeat; mask:url('naruto-leaf-icon.png') center/contain no-repeat; }
.stat-copy { min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
.stat strong { font-size:19px; line-height:1.1; letter-spacing:-.03em; }
.stat small { color:#8791a1; margin-top:6px; font-size:11px; }
.watch-button { display:inline-flex; align-items:center; justify-content:center; gap:11px; min-width:210px; padding:15px 24px; border-radius:8px; background:linear-gradient(135deg,#087eff,#075cf7); color:#fff; text-decoration:none; text-transform:uppercase; font-size:13px; font-weight:800; letter-spacing:.035em; box-shadow:0 10px 38px rgba(0,100,255,.28),inset 0 1px rgba(255,255,255,.2); transition:.2s ease; }
.watch-button:hover { transform:translateY(-2px); box-shadow:0 14px 45px rgba(0,120,255,.42); }
.play { font-size:12px; }
.telegram { display:flex; width:max-content; gap:8px; color:#2d8cff; text-decoration:none; font-size:13px; font-weight:600; margin-top:23px; }
.telegram:hover { color:#55c8ff; }
.poster-wall { position:relative; z-index:2; width:min(44vw,535px); height:100%; min-height:0; margin-left:clamp(24px,11vw,160px); overflow:hidden; align-self:center; justify-self:start; display:grid; grid-template-columns:repeat(3,minmax(115px,1fr)); gap:10px; padding:0 12px 0 18px; transform:rotate(1deg) scale(1.02); mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 89%,transparent 100%); }
.poster-viewport { min-width:0; overflow:hidden; }
.poster-track { display:flex; flex-direction:column; gap:12px; will-change:transform; animation:float-up var(--slider-speed) linear infinite; }
.poster-track img { display:block; width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:9px; border:1px solid rgba(255,255,255,.09); background:#0a101b; box-shadow:0 12px 30px rgba(0,0,0,.38); }
.column-2 { margin-top:-120px; }
.column-2 .poster-track { animation-name:float-down; animation-duration:calc(var(--slider-speed) + 6s); }
.column-3 { margin-top:-45px; }
.column-3 .poster-track { animation-duration:calc(var(--slider-speed) + 2s); }
@keyframes float-up { from { transform:translateY(0); } to { transform:translateY(calc(-50% - 6px)); } }
@keyframes float-down { from { transform:translateY(calc(-50% - 6px)); } to { transform:translateY(0); } }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@media (min-width:1600px) {
  .hero { grid-template-columns:48% 52%; }
  .intro { transform:scale(1.18); transform-origin:left center; margin-left:6vw; }
  .poster-wall { width:535px; margin-left:9vw; transform:rotate(1deg) scale(1.2); }
}
@media (min-width:2200px) {
  .intro { transform:scale(1.55); margin-left:7vw; }
  .poster-wall { margin-left:10vw; transform:rotate(1deg) scale(1.55); }
}
@media (min-width:3000px) {
  .intro { transform:scale(2.15); margin-left:7vw; }
  .poster-wall { margin-left:11vw; transform:rotate(1deg) scale(2.1); }
}
@media (max-width:1200px) and (min-width:901px) {
  .hero { grid-template-columns:minmax(390px,48%) minmax(0,1fr); }
  .intro { width:min(460px,84%); margin-left:clamp(34px,5vw,64px); }
  .logo { width:min(320px,82%); }
  .description { font-size:14px; }
  .poster-wall { width:min(46vw,500px); margin-left:clamp(18px,5vw,60px); }
  .stats { gap:8px; }
  .stat { padding:12px 11px; gap:9px; }
  .stat-icon { width:34px; height:34px; }
}
@media (max-width:900px) {
  .hero { width:100%; height:auto; grid-template-columns:1fr; min-height:100vh; min-height:100svh; }
  .intro { width:min(560px,88%); margin:0 auto; padding:88px 0 460px; text-align:center; }
  .logo { margin-left:auto; margin-right:auto; }
  .description { margin-left:auto; margin-right:auto; }
  .stats { margin-left:auto; margin-right:auto; }
  .telegram { margin-left:auto; margin-right:auto; }
  .poster-wall { position:absolute; left:-6%; right:-6%; bottom:-355px; width:auto; height:770px; margin-left:0; opacity:.58; filter:saturate(.86); padding:0; }
  .hero::after { background:linear-gradient(180deg,#03060d 0,rgba(3,6,13,.95) 46%,rgba(3,6,13,.2) 80%,#03060d 100%); }
}
@media (max-width:540px) {
  .intro { width:90%; padding-top:clamp(38px,7svh,58px); padding-bottom:390px; }
  .logo { width:min(280px,82vw); }
  .tagline { font-size:12px; }
  .description { font-size:13px; line-height:1.65; }
  .stats { gap:7px; }
  .stat { min-height:82px; padding:10px 9px; gap:7px; }
  .stat strong { font-size:16px; }
  .stat-icon { width:29px; height:29px; margin-bottom:7px; }
  .poster-wall { grid-template-columns:repeat(3,1fr); gap:7px; bottom:-315px; height:680px; }
  .poster-track { gap:7px; }
}
@media (max-width:370px) {
  .intro { width:94%; }
  .stats { gap:5px; }
  .stat { padding:9px 6px; gap:5px; }
  .stat-icon { width:25px; height:25px; }
  .stat strong { font-size:14px; }
  .watch-button { min-width:190px; padding:14px 18px; }
}
@media (prefers-reduced-motion:reduce) { .poster-track { animation-play-state:paused; } }