:root{--bg:#0a0a0a;--fg:#fff;--muted:#b8b8b8;--accent:#b58dff;--accent2:#ff4ecb}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.site-header{position:sticky;top:0;z-index:100;background:rgba(0,0,0,.55);backdrop-filter:blur(8px)}
.navbar{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand img{height:32px}
.menu a{margin:0 8px;opacity:.95}
.menu a:hover{color:var(--accent)}
/* hero */
.hero{position:relative;overflow:hidden}
.hero .slides{position:relative;height:60vw;max-height:840px;min-height:450px}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 2400ms ease-in-out;display:grid;place-items:center;background:#000}
.slide.show{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;transform-origin:center}
/* ken burns */
@keyframes kenburns {
  0%{transform:scale(1.08) translate3d(0,0,0)}
  100%{transform:scale(1.18) translate3d(0,0,0)}
}
.slide.show img{ animation: kbVar var(--kb-dur, 9s) linear infinite alternate; }
/* video stack */
.section{padding:18px 0}
.vid {margin:0 auto 18px;max-width:1200px}
.vid .frame{width:100%;height:auto;aspect-ratio:16/9;border:0;display:block;border-radius:12px;overflow:hidden}
/* comment box container */
.comments{background:linear-gradient(180deg,#0a0a0a,#151027);padding:24px 0;margin-top:28px}
.footer{border-top:1px solid #222;padding:24px 0;color:#bdbdbd}
/* mobile */
@media (max-width:768px){
  .hero .slides{height:84vw;max-height:570px;min-height:330px}
  .menu{display:none}
}

/* --- YouTube thumbnail crop: reduce vertical size by 40% --- */
.vid { margin: 0 auto 3px; max-width:1200px; }
.vid .thumb-crop { position: relative; width: 100%; padding-top: 25.3125%; /* 60% of 16:9 height */ overflow: hidden; border-radius: 12px; }
.vid .thumb-crop img.thumb { position: absolute; top: 50%; left: 0; width: 100%; height: auto; transform: translateY(-50%); object-fit: cover; display: block; }
/* Keep iframe at 16:9 when loaded */
.vid iframe.frame { width:100%; height:auto; aspect-ratio:16/9; border:0; display:block; border-radius:12px; }

#more{display:none}

/* GPU & smoothness */
.slide, .slide img{ backface-visibility: hidden; -webkit-font-smoothing: antialiased; will-change: transform, opacity; transform: translateZ(0); image-rendering: auto; }
/* Variable-driven Ken Burns */
@keyframes kbVar {
  from { transform: translate3d(var(--tx0,0), var(--ty0,0), 0) scale(var(--s0,1.05)); }
  to   { transform: translate3d(var(--tx1,0), var(--ty1,0), 0) scale(var(--s1,1.25)); }
}
.slide.show img{ animation: kbVar var(--kb-dur, 9s) linear infinite alternate; }

/* blackout bg */
.hero .slides{background:#000;}

/* --- smooth outro: freeze transform -> transition to identity while fading --- */
.slide.show.leaving{ opacity:0; transition: opacity 2000ms ease; }
.slide.show.leaving img{ transition: transform 2000ms ease; transform: translate3d(0,0,0) scale(1); }


/* --- Mobile menu toggle & swipe helpers (injected) --- */
.menu-toggle{display:none;background:#0d0d0d;border:1px solid #333;color:#fff;padding:8px 12px;border-radius:10px}
@media (max-width:768px){
  .navbar{ position:relative }
  .menu-toggle{display:inline-flex;align-items:center;gap:6px}
  nav.menu{display:none; position:absolute; top:100%; left:0; right:0; background:#0b0b0b; border-top:1px solid #222; padding:10px 16px; flex-direction:column; gap:10px; z-index:200}
  nav.menu.open{display:flex}
}
/* Allow horizontal gestures while preserving vertical scroll */
.hero .slides, .swiper, .slideshow, .slider { touch-action: pan-y; }