* { margin:0; padding:0; box-sizing:border-box; }

html, body { background:#000; }
body {
  color:#fff;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a { color:inherit; text-decoration:none; }

/* ===== ШАПКА ===== */
header {
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.25rem 2rem;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.logo { font-weight:600; letter-spacing:-0.01em; }
.logo small {
  display:block; color:#888; font-weight:400;
  font-size:0.7rem; margin-top:0.15rem; letter-spacing:0.02em;
}
.tabs { display:flex; gap:0.4rem; }
.tab {
  background:transparent;
  border:none;
  color:#bbb;
  padding:0.45rem 0.5rem;
  font:inherit;
  font-size:0.9rem;
  font-weight:500;
  letter-spacing:0.8em;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  transition:color 0.25s;
}
.tab::before { content:"["; opacity:0; transition:opacity 0.25s; }
.tab::after  { content:"]"; opacity:0; transition:opacity 0.25s; }
.tab:hover { color:#fff; }
.tab:hover::before,
.tab:hover::after,
.tab.active::before,
.tab.active::after { opacity:1; }
.tab.active { color:#fff; }
.contact-link { color:#aaa; font-size:0.875rem; }
.contact-link:hover { color:#fff; }

/* ===== ПЕРЕКЛЮЧЕНИЕ ВИДОВ ===== */
.view { display:none; }
.view.active { display:block; }

/* ===== HERO (ГЛАВНАЯ) ===== */
.view-hero {
  width:100%;
  height:100vh;        /* fallback */
  height:100dvh;       /* реальная видимая область (учитывает панели Safari) */
}
.hero-stage {
  width:100%; height:100%; position:relative;
  background:#000; border:none; padding:0; cursor:pointer;
  display:block; overflow:hidden;
  font-family:inherit;
}
.hero-stage img {
  width:100%; height:100%; object-fit:cover;
  transition:opacity 0.7s ease;
}
/* мобильная вертикальная картинка — по умолчанию скрыта */
.hero-stage .hero-img-mobile { display:none; }
.hero-stage.swap img { opacity:0; }
.hero-stage::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(0,0,0,0.5) 0%,
    transparent 25%,
    transparent 55%,
    rgba(0,0,0,0.85) 100%);
  pointer-events:none;
}
.hero-caption {
  position:absolute; left:2rem; right:2rem; bottom:3rem; z-index:2;
  text-align:left; color:#fff; pointer-events:none;
}
.hero-caption h1 {
  font-size:clamp(2.5rem, 6vw, 5rem);
  font-weight:500; letter-spacing:-0.03em; line-height:1;
}
.hero-caption p {
  margin-top:0.75rem; color:#ccc; font-size:1rem;
}

/* ===== СТРАНИЦА WORKS ===== */
.view-works { padding-top:6rem; padding-bottom:2rem; }

.reel {
  padding:0 0 3rem;
  border-bottom:1px solid #1a1a1a;
  margin-bottom:2rem;
}
.reel:last-child { border-bottom:none; }

.reel-title {
  padding:0 2rem;
  font-size:1.4rem; font-weight:500;
  letter-spacing:-0.01em;
  color:#fff;
  margin-bottom:1rem;
}

/* Полоса миниатюр */
.strip {
  display:flex; gap:1rem;
  overflow-x:auto;
  padding:0.5rem 2rem 1.25rem;
  scrollbar-width:thin; scrollbar-color:#333 transparent;
  align-items:flex-start; /* верхнее выравнивание — обложки в линию */
}
.strip::-webkit-scrollbar { height:6px; }
.strip::-webkit-scrollbar-thumb { background:#333; border-radius:3px; }

.thumb {
  flex:0 0 340px;
  background:none; border:none; padding:0;
  cursor:pointer; text-align:left;
  font-family:inherit;
  transition:transform 0.3s;
  display:flex;
  flex-direction:column;
}
.thumb:hover { transform:translateY(-3px); }
.thumb img {
  width:100%; aspect-ratio:16/9; object-fit:cover;
  border-radius:4px; display:block;
  outline:2px solid transparent;
  transition:outline-color 0.25s;
}
.thumb.active img { outline-color:#fff; }
.thumb-label {
  display:block; margin-top:0.6rem;
  font-size:0.875rem; line-height:1.35; color:#888;
}
.thumb-label strong { color:#fff; font-weight:500; }
.thumb-label em { font-style:normal; color:#888; font-size:0.8rem; }

/* Плеер */
.player { padding:2rem 2rem 1rem; }
.player-frame {
  position:relative; padding-bottom:44.8%; /* уменьшено на 20% от 16:9 */
  height:0;
  background:#0a0a0a; border-radius:6px; overflow:hidden;
  max-width:1120px;
  margin:0 auto;
}
.player-frame iframe {
  position:absolute; top:0; left:0;
  width:100%; height:100%; border:0;
}
.player-placeholder {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:#555; font-size:1rem;
}

/* ===== ФУТЕР ===== */
footer {
  padding:5rem 2rem 3rem;
  border-top:1px solid #1a1a1a;
  display:grid; grid-template-columns:1.3fr 1fr; gap:3rem;
  background:#000;
}
.about p {
  font-size:1.05rem; line-height:1.6;
  color:#ccc; max-width:520px;
}
.about .email {
  display:inline-block; margin-top:1.25rem;
  font-size:1.05rem; color:#fff;
  border-bottom:1px solid #444;
  padding-bottom:0.15rem;
}
.about .email:hover { border-color:#fff; }
.socials {
  display:flex; flex-direction:column; gap:0.75rem;
  align-items:flex-end;
}
.socials a {
  font-size:1rem; color:#bbb;
  border-bottom:1px solid transparent;
  padding-bottom:0.1rem;
}
.socials a:hover { color:#fff; border-color:#fff; }

/* Появление рядов при скролле */
.reel {
  opacity:0;
  transform:translateY(40px);
  transition:opacity 0.8s ease, transform 0.8s ease;
}
.reel.visible {
  opacity:1;
  transform:translateY(0);
}

/* Скрыть футер, пока активна главная (Hero) */
#view-hero.active ~ footer,
body:has(#view-hero.active) footer { display:none; }


/* =========================================
   АДАПТИВ: ПЛАНШЕТЫ И НЕБОЛЬШИЕ ЭКРАНЫ
   ========================================= */
@media (max-width:900px) {
  header { padding:1rem; }
  .view-works { padding-top:5rem; }
  .reel-title { padding:0 1rem; font-size:1.2rem; }
  .strip { padding:0.5rem 1rem 1rem; }
  .player { padding:1rem 1rem 0; }
  .thumb { flex:0 0 250px; }
  .hero-caption { left:1.25rem; right:1.25rem; bottom:2rem; }
  footer {
    grid-template-columns:1fr; padding:3rem 1.5rem;
  }
  .socials {
    flex-direction:row; flex-wrap:wrap; gap:1.25rem;
    align-items:flex-start;
  }
}


/* =========================================
   АДАПТИВ: ТЕЛЕФОНЫ (≤ 768px)
   ========================================= */
@media (max-width:768px) {

  /* --- HERO: вертикальная картинка, фикс высоты под Safari --- */
  .view-hero {
    height:100vh;        /* fallback */
    height:100dvh;       /* реальная видимая область */
  }
  .hero-stage .hero-img-desktop { display:none; }
  .hero-stage .hero-img-mobile  {
    display:block;
    width:100%; height:100%;
    object-fit:cover;
  }
  /* подпись фиксируется снизу видимой области и не уезжает */
  .hero-caption {
    left:1.25rem; right:1.25rem;
    bottom:calc(2rem + env(safe-area-inset-bottom));
  }
  .hero-caption h1 {
    font-size:clamp(1.8rem, 7vw, 2.6rem);
  }
  .hero-caption p {
    font-size:0.875rem; margin-top:0.5rem;
  }

  /* --- ШАПКА: меньше шрифты, скрыть Contact на Hero --- */
  header { padding:0.75rem 1rem; }
  .logo { font-size:0.85rem; }
  .logo small { font-size:0.6rem; }
  .tab {
    font-size:0.72rem;
    letter-spacing:0.45em;
    padding:0.35rem 0.4rem;
  }
  .contact-link { font-size:0.78rem; }

  /* На Hero — Contact скрыт; WORKS уходит вправо вместо него */
  body:has(#view-hero.active) .contact-link { display:none; }
  body:has(#view-hero.active) .tabs {
    margin-left:auto; 
  margin-right: 0.05rem; /* отступ от края экрана */
  transform: translateY(-1px); /* тонкая подстройка */
}

  /* На странице Works — кнопка WORKS скрыта; справа стоит Contact */
  body:has(#view-works.active) .tabs { display:none; }
  
  /* --- WORKS: выравнивание обложек --- */
  .thumb { flex:0 0 230px; }
  .thumb img {
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
  }
  /* фиксированная высота подписи — обложки больше не сдвигаются */
  .thumb-label {
    min-height:3.2em;
    font-size:0.8rem;
  }
  .thumb-label em { font-size:0.72rem; }

  /* --- ПЛЕЕР: полная ширина, классический 16:9, без скруглений --- */
  .player {
    padding:1.5rem 0 0.5rem;
  }
  .player-frame {
    padding-bottom:56.25%;   /* классический 16:9 */
    max-width:none;
    border-radius:0;
  }

  /* --- ФУТЕР: email ниже, соцсети ближе к нему --- */
  footer {
    gap:0.5rem;
    padding:3rem 1.5rem 3.5rem;
  }
  .about p { font-size:0.95rem; }
  .about .email {
    margin-top:1.75rem;
    font-size:1rem;
  }
  .socials {
    margin-top:0.5rem;
    gap:1.25rem;
  }
  .socials a { font-size:0.95rem; }
}

/* ===== ПОДПИСЬ НАД ПЛЕЕРОМ (полная версия) ===== */
.player-note {
  display:none;                 /* по умолчанию скрыта */
  max-width:1120px;
  margin:0 auto 0.9rem;         /* центрируем по ширине плеера + отступ снизу */
  font-size:0.95rem;
  color:#bbb;
  text-align:center;
}
.player-note a {
  color:#fff;
  border-bottom:1px solid #555;
  padding-bottom:0.1rem;
  transition:border-color 0.25s, color 0.25s;
}
.player-note a:hover {
  border-color:#fff;
}

@media (max-width:768px) {
  .player-note {
    max-width:none;
    margin:0 1rem 0.8rem;
    font-size:0.85rem;
  }
}