/* ===== Hanken (локально) ===== */
@font-face{
  font-family:"Hanken Grotesk";
  src:url("assets/fonts/HankenGrotesk-VariableFont_wght.ttf") format("truetype");
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  --text: rgba(255,255,255,.92);
  --nav: #5b5b5b;
  --nav-active: #e8e8e8;
  --subtitle: #7a7a7a;

  --about-section-shift: -75px;    /* для десктопа можем слегка «заезжать» вверх */
  --about-text-offset: 37px;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; background:#000; color:var(--text);
  font-family:"Hanken Grotesk","Hanken Grotesk Variable",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:100;
}

/* ===== Header ===== */
.brand{ position:fixed; top:20px; left:20px; z-index:30 }
.brand img{ width:120px; height:auto; display:block; filter:drop-shadow(0 2px 8px rgba(0,0,0,.5)) }

.top-nav{
  position:fixed; top:28px; left:50%; transform:translateX(-50%); z-index:30;
  display:flex; gap:18px; background:transparent; white-space:nowrap;
}
.top-nav a{
  color:var(--nav); text-decoration:none; font-weight:800; font-size:14px;
  padding:8px 10px; border-radius:10px;
  background:rgba(8,8,8,.18);
  backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%);
  border:1px solid rgba(255,255,255,.12);
  transition:color .15s ease, background .15s ease, border-color .15s ease;
}
.top-nav a:hover, .top-nav a:focus{ color:var(--nav-active) }
body.is-scrolled .top-nav a{ background:rgba(8,8,8,.30); border-color:rgba(255,255,255,.20) }
.top-nav a.active{ color:var(--nav) }

/* Contact button */
.contact-fixed{
  position:fixed; top:28px; right:20px; z-index:30;
  background:#0b0b0b; color:#bfbfbf;
  border:1.5px solid #ffffff;
  border-radius:999px; padding:10px 14px; font-size:13px; font-weight:800; cursor:pointer;
  box-shadow:0 2px 14px rgba(0,0,0,.35);
}

/* ===== HERO (главная) ===== */
.hero{
  min-height:80vh; display:flex; align-items:flex-start; justify-content:center;
  padding-top:clamp(156px, 21vh, 236px);
  padding-bottom:clamp(12px, 4vh, 56px);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,.12), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.12) 100%);
}
.hero-inner{ text-align:center; padding:0 24px; max-width:1000px }
.hero h1{ margin:0 0 16px; font-size:clamp(44px, 9vw, 92px); line-height:1.04; font-weight:200 }
.subtitle{ margin:0; font-size:clamp(16px,2.2vw,22px); color:var(--subtitle); font-weight:700 }

/* ===== О нас + видео ===== */
.about-video{
  position:relative; margin:0 3vw; min-height:100vh; --video-radius:28px;
  margin-top: var(--about-section-shift); /* на десктопе заезжаем вверх для красоты */
  border-radius: var(--video-radius);
  overflow: hidden;
}
.bg-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000;
  border-radius: inherit; transition:border-radius .2s ease;
  z-index:0; /* ЯВНЫЙ ПОРЯДОК СЛОЁВ */
}
.video-overlay{
  position:absolute; inset:0; border-radius: inherit;
  background:
    radial-gradient(1000px 420px at 50% 0%, rgba(0,0,0,0), rgba(0,0,0,.32) 70%),
    linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.32) 100%);
  transition:border-radius .2s ease;
  z-index:1;
}
.about-video.unrounded{ border-radius:0 }
.about-video.unrounded .bg-video,
.about-video.unrounded .video-overlay{ border-radius:0 }

.about-content{
  min-height:100vh; display:grid; align-content:start; justify-items:center;
  padding: clamp(12vh, 18vh, 22vh) 24px 24px;
  text-align:center;
  position:relative; z-index:2; /* поверх видео и затемнения */
}
.about-content p{
  margin-top: var(--about-text-offset);
  max-width:760px;
  font-size:clamp(18px,2vw,22px); line-height:1.6;
  text-align:justify; text-justify:inter-word;
  background:rgba(0,0,0,.35); backdrop-filter:saturate(120%) blur(2px);
  padding:38px 22px 18px; border-radius:12px; border:1px solid rgba(255,255,255,.08);
}

/* ===== Интро и плитки (главная) ===== */
.section-intro{ max-width:1100px; margin:6vh auto 0; padding:0 16px; text-align:center }
.section-title{ font-weight:800; font-size:clamp(26px,4.2vw,40px); margin:0 0 .25rem; color:#e3e3e3 }
.section-subtitle{ font-size:clamp(16px,2.2vw,20px); color:var(--subtitle); font-weight:700 }

.portfolio{
  width:100%; max-width:1200px; margin:4.5vh auto 3.5rem;
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:0 16px;
}
.tile{
  position:relative; display:block; overflow:hidden; border-radius:16px;
  min-height:220px; background:#111; color:#fff; text-decoration:none;
  border:1px solid rgba(255,255,255,.08);
}
.tile-video .tile-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(105%) }
.tile-visual .tile-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }
.tile-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.00) 55%, rgba(0,0,0,0.55) 100%),
    radial-gradient(100% 60% at 50% 10%, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.35) 100%);
  pointer-events:none;
}
.tile-title{
  position:absolute; left:14px; right:14px; bottom:42px;
  font-weight:600; font-size:clamp(16px,2.2vw,22px); color:#ededed;
  text-shadow:0 1px 6px rgba(0,0,0,.55);
}
.tile-badge{
  position:absolute; left:14px; bottom:10px;
  border:1px solid #fff; border-radius:999px; padding:6px 10px;
  font-size:12px; background:#0b0b0b; color:#e0e0e0; font-weight:500;
}
@media (hover:hover){
  .tile-video .tile-bg{ transition:transform .35s ease }
  .tile:hover .tile-bg{ transform:scale(1.02) }
  .tile:hover{ border-color:rgba(255,255,255,.18) }
}

/* ===== Низ ===== */
.contact-section{ display:flex; flex-direction:column; align-items:center; text-align:center; margin-top:auto }
.contact{
  max-width:900px; background:rgba(0,0,0,.35); backdrop-filter:saturate(120%) blur(2px);
  padding:.85rem 1rem; border-radius:12px; border:1px solid rgba(255,255,255,.08);
}
.mail-link{ display:inline-flex; align-items:center; gap:12px; color:var(--text); text-decoration:none }
.mail-text{ font-size:1.2rem; line-height:1 }
.contact-plain{ color:var(--text); text-decoration:underline; text-underline-offset:3px }

.site-footer{ display:grid; place-items:center; min-height:18vh; padding:20px; text-align:center; color:rgba(255,255,255,.8) }

/* ===== Drawer ===== */
.scrim{ position:fixed; inset:0; background:rgba(0,0,0,.35); opacity:0; transition:opacity .2s ease; z-index:40 }
.scrim.is-visible{ opacity:1 }
.drawer{
  position:fixed; top:0; right:0; height:100vh; width:min(420px, 92vw);
  background:rgba(10,10,14,.92); backdrop-filter:saturate(120%) blur(6px);
  box-shadow:-12px 0 40px rgba(0,0,0,.35);
  transform:translateX(100%); transition:transform .2s ease; z-index:41;
  display:flex; flex-direction:column; border-left:1px solid rgba(255,255,255,.08);
}
.drawer.is-open{ transform:translateX(0) }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.08) }
.drawer-head h3{ margin:0; font-size:18px; font-weight:600 }
.drawer-close{ appearance:none; border:0; background:transparent; color:var(--text); font-size:18px; cursor:pointer }
.contact-form{ padding:16px 18px; display:grid; gap:14px }
.contact-form input,.contact-form textarea{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06); color:var(--text);
}
.contact-submit{ padding:12px 16px; border:0; border-radius:999px; cursor:pointer; background:#2563EB; color:var(--text); font-weight:700 }

/* ===== Страница «Сериалы» (общие стили) ===== */
.hero--series{
  min-height:64vh;
  padding-top:clamp(140px,18vh,210px);
  padding-bottom:clamp(6px,2vh,32px);
}
.series-frame{
  position:relative;
  width:min(1280px,94vw);
  margin:0 auto;
  border-radius:24px;
  background: var(--bg, transparent) center/cover no-repeat;
  overflow:hidden;
}
.series-glass{
  position:absolute; inset:0;
  background:
    radial-gradient(1100px 460px at 50% 0%, rgba(0,0,0,.00) 0%, rgba(0,0,0,.32) 70%),
    linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.50) 100%);
  pointer-events:none;
}
.series-inner{ position:relative; padding: 28px 24px 36px; }
.series-head .section-title{ font-weight:600; color:#ececec; font-size:clamp(28px,4.6vw,52px); margin:6px 0 8px }
.series-head .section-subtitle{ font-weight:600; color:#d1d1d1 }
.series-grid{
  margin-top:18px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
@media (max-width:980px){ .series-grid{ grid-template-columns:1fr; } }
.series-grid .tile{ min-height:240px; }

.player-wrap{ max-width:min(1100px,92vw); margin:-2vh auto 48px; padding:0 8px; }
.player-wrap.no-hero{ margin:16vh auto 48px; }
@media (max-width:900px){ .player-wrap{ margin:-1vh auto 40px; } }
.player-box{ border-radius:18px; overflow:hidden; background:#000; border:1px solid rgba(255,255,255,.08); box-shadow:0 10px 40px rgba(0,0,0,.45) }
.player-frame{ display:block; width:100%; aspect-ratio:16/9; border:0; background:#000 }
.player-fallback{ text-align:center; opacity:.8; margin:14px 0 0 }

/* ===================================================================== */
/* === MOBILE (<=1024px, без hover): единый чистый блок ================= */
/* ===================================================================== */
@media (max-width: 1024px) and (hover: none){

  /* Верх (лого/меню/кнопка): деликатное масштабирование */
  .brand img{
    width: clamp(64px, 9vw, 94px);
  }
  .top-nav{
    gap: clamp(6px, 1.5vw, 12px);
    top: clamp(18px, 3vh, 28px);
  }
  .top-nav a{
    font-size: clamp(10.5px, 1.4vw, 12.5px);
    padding: 5px 8px;
    border-radius: 9px;
  }
  .contact-fixed{
    top: clamp(18px, 3vh, 28px);
    padding: 7px 10px;
    font-size: clamp(10.5px, 1.4vw, 12px);
  }

  /* Слойность + центрирование текста «О нас» (всегда на мобилке) */
  .about-video .bg-video{ z-index:0; }
  .about-video .video-overlay{ z-index:1; }
  .about-content{ position:relative; z-index:2; }
  .about-content, .about-content p{ text-align:center; }
  .about-content p{ margin-left:auto; margin-right:auto; }

  /* ---------- Портрет (вертикально) ---------- */
  @media (orientation: portrait){
    /* делаем низ героя компактнее, чтобы «О нас» было ближе, но не налезало */
    .hero{
      min-height: 68svh;
      padding-bottom: clamp(4px, 1.5svh, 12px);
    }
    /* секция «О нас» ближе и менее вытянута */
    .about-video{
      margin-top: clamp(8px, 2svh, 14px) !important; /* ближе к hero */
      min-height: 58svh;                             /* короче секция */
      display:grid; place-items:center; border-radius:24px;
    }
    /* плашка «О нас»: меньше верх/низ */
    .about-content{
      padding-top: clamp(8vh, 12vh, 14vh);
      padding-bottom: clamp(10px, 2.2vh, 16px);
      max-width: min(640px, 88vw);
      padding-inline: clamp(14px, 4vw, 20px);
    }
    .about-content p{
      font-size: clamp(15.5px, 3.7vw, 18px);
      line-height: 1.55;
    }
    /* видео «дальше», кадр читабельнее */
    .about-video .bg-video{
      transform: scale(.92);
      transform-origin:center;
      object-position: 50% 32%;
    }
  }

  /* ---------- Горизонталь (альбомная) ---------- */
  @media (orientation: landscape){
    /* безопасный зазор: «О нас» не перекрывает заголовок hero */
    .about-video{
      margin-top: clamp(18px, 3.5svh, 32px) !important;
      min-height: 60svh;
      display:grid; place-items:center; border-radius:24px;
    }
    .about-content{
      max-width: min(680px, 84vw);
      padding-inline: clamp(12px, 3.2vw, 20px);
    }
    .about-content p{
      font-size: clamp(14px, 1.9vh, 16px);
      line-height: 1.55;
    }
    /* проекты не меняем — по задаче правим только верх и «О нас» */
  }
}
/* === MOBILE OVERRIDES — только телефоны (iOS/Android) === */
@media (max-width: 1024px) and (hover: none){

  /* Плашка «О нас» — текст по центру на мобилках */
  .about-content, .about-content p{
    text-align: center !important;
  }
  .about-content p{
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* -------- ПОРТРЕТ (вертикально) -------- */
  @media (orientation: portrait){

    /* Подтянуть секцию «О нас» к hero, но без налезания */
    .about-video{
      margin-top: clamp(4px, 1.2svh, 10px) !important; /* было больше — делаем ближе */
      min-height: 56svh;                                /* делаем секцию короче */
      display: grid; place-items: center;
      border-radius: 24px;
    }

    /* Плашка «О нас» — меньше верх/низ (менее вытянута) */
    .about-content{
      padding-top: clamp(6vh, 9vh, 11vh);
      padding-bottom: clamp(8px, 1.6vh, 14px);
      max-width: min(640px, 88vw);
      padding-inline: clamp(14px, 4vw, 20px);
    }
    .about-content p{
      font-size: clamp(15.5px, 3.6vw, 18px);
      line-height: 1.55;
    }

    /* Фон-видео «отдаляем», чтобы было видно больше кадра */
    .about-video .bg-video{
      transform: scale(.88);
      transform-origin: center;
      object-position: 50% 32%;
    }

    /* ПРОЕКТЫ: в портрете строго один столбец */
    .portfolio{
      grid-template-columns: 1fr !important;
      padding-left: 3vw !important;
      padding-right: 3vw !important;
      max-width: 100%;
    }
  }

  /* -------- ЛАНДШАФТ (горизонтально) -------- */
  @media (orientation: landscape){
    /* Здесь оставляем 3 в ряд (как и должно быть) */
    .portfolio{
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: clamp(10px, 2vw, 16px);
      padding-left: 3vw !important;
      padding-right: 3vw !important;
      width: 100%;
      max-width: none;
    }
  }
}
/* === MOBILE OVERRIDES (телефоны): устойчиво и без конфликтов === */
@media (max-width: 1024px) and (hover: none){

  /* Хедер: деликатное масштабирование */
  .brand img{ width: clamp(64px, 9vw, 94px); }
  .top-nav{ gap: clamp(6px, 1.5vw, 12px); top: clamp(18px, 3vh, 28px); }
  .top-nav a{ font-size: clamp(10.5px, 1.4vw, 12.5px); padding: 5px 8px; border-radius: 9px; }
  .contact-fixed{ top: clamp(18px, 3vh, 28px); padding: 7px 10px; font-size: clamp(10.5px, 1.4vw, 12px); }

  /* Текст блока «О нас» центрируем всегда на мобилке */
  .about-content, .about-content p{ text-align: center !important; }
  .about-content p{ margin-left: auto !important; margin-right: auto !important; }

  /* ---------- ПОРТРЕТ (вертикально) ---------- */
  @media (orientation: portrait){
    /* Герой компактнее снизу, чтобы «О нас» приблизилась */
    .hero{
      padding-bottom: clamp(4px, 1.4vh, 12px) !important;
      min-height: 68vh; /* безопасный vh для старых iOS */
    }
    @supports (min-height: 100svh){
      .hero{ min-height: 68svh; }
    }

    /* «О нас»: ближе к hero и менее вытянута */
    .about-video{
      margin-top: clamp(4px, 1.2vh, 10px) !important;  /* ближе к hero */
      min-height: 56vh !important;                     /* короче секция */
      display:grid; place-items:center; border-radius:24px;
    }
    @supports (min-height: 100svh){
      .about-video{ min-height: 56svh !important; }
    }

    /* Плашка: меньше верх/низ — именно это «обрезает» вытянутость */
    .about-content{
      padding-top: clamp(6vh, 9vh, 11vh) !important;
      padding-bottom: clamp(8px, 1.6vh, 14px) !important;
      max-width: min(640px, 88vw);
      padding-inline: clamp(14px, 4vw, 20px);
    }
    .about-content p{
      font-size: clamp(15.5px, 3.6vw, 18px);
      line-height: 1.55;
    }

    /* Фоновое видео «отдаляем» — видно больше кадра */
    .about-video .bg-video{
      transform: scale(.88);
      transform-origin: center;
      object-position: 50% 32%;
    }

    /* Проекты: ТОЛЬКО один столбец в портрете */
    .portfolio{
      grid-template-columns: 1fr !important;
      padding-left: 3vw !important;
      padding-right: 3vw !important;
      max-width: 100%;
    }
  }

  /* ---------- ЛАНДШАФТ (горизонтально) ---------- */
  @media (orientation: landscape){
    /* Безопасный зазор от hero */
    .about-video{
      margin-top: clamp(18px, 3.5vh, 32px) !important;
      min-height: 60vh !important;
      display:grid; place-items:center; border-radius:24px;
    }
    @supports (min-height: 100svh){
      .about-video{ min-height: 60svh !important; }
    }

    /* Проекты: 3 в ряд в горизонтали */
    .portfolio{
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: clamp(10px, 2vw, 16px);
      padding-left: 3vw !important;
      padding-right: 3vw !important;
      width: 100%;
      max-width: none;
    }
  }
}