/* ============================================================
   КИНОТЕАТР — адаптивный лендинг с занавесом
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

:root {
  --velvet-1: #34050d;
  --velvet-2: #8d1526;
  --velvet-3: #b8232f;
  --velvet-4: #5c0a15;
  --gold:     #e3bd72;
  --gold-dim: #a4813f;
  --ink:      #070405;

  --fold: clamp(26px, 6.5vw, 74px);      /* ширина складки бархата */
  --scallop: clamp(22px, 4.5vw, 46px);   /* размер фестонов ламбрекена */
  --rest: 7vw;                           /* сколько занавеса видно после открытия */
  --ease: cubic-bezier(.72, 0, .18, 1);
  --open: 2.6s;
}

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--ink);
  color: #f4ece2;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   ЗАЛ
   ============================================================ */
.hall {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 12%, #1c0d12 0%, #0d0609 45%, #050203 100%);
}

/* Луч проектора */
.hall__light {
  position: absolute;
  inset: -20% -30% auto;
  height: 130%;
  background:
    radial-gradient(60% 55% at 50% 42%, rgba(255, 214, 160, .16), transparent 70%),
    conic-gradient(from 200deg at 50% -18%, transparent 42%, rgba(255, 224, 178, .07) 50%, transparent 58%);
  filter: blur(6px);
  opacity: 0;
  transition: opacity 1.6s ease 1.1s;
  pointer-events: none;
}

/* Силуэты кресел */
.hall__seats {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 0;
  height: clamp(60px, 14vh, 150px);
  background:
    repeating-linear-gradient(90deg,
      transparent 0 4px,
      #000 4px 76px,
      transparent 76px 80px);
  -webkit-mask-image: radial-gradient(46px 100% at 40px 100%, #000 62%, transparent 63%);
  mask-image: radial-gradient(46px 100% at 40px 100%, #000 62%, transparent 63%);
  -webkit-mask-size: 80px 100%;
  mask-size: 80px 100%;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  opacity: 0;
  transition: opacity 1.4s ease 1.2s;
  pointer-events: none;
}

body.is-open .hall__light { opacity: 1; }
body.is-open .hall__seats { opacity: .55; }

/* ============================================================
   ЭКРАН
   ============================================================ */
.theater {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(10px, 3vw, 40px);
  padding-bottom: max(clamp(10px, 3vw, 40px), env(safe-area-inset-bottom));
}

.frame {
  position: relative;
  width: min(100%, calc((100dvh - clamp(24px, 8vh, 110px)) * 9 / 16));
  aspect-ratio: 9 / 16;
  max-height: calc(100dvh - clamp(24px, 8vh, 110px));
  border-radius: clamp(10px, 1.6vw, 20px);
  padding: clamp(5px, .9vw, 12px);
  background: linear-gradient(160deg, #3b2a15, #171012 38%, #1c1417 62%, #4a3419);
  box-shadow:
    0 0 0 1px rgba(227, 189, 114, .38),
    0 30px 80px rgba(0, 0, 0, .8),
    inset 0 0 0 1px rgba(0, 0, 0, .5);
  transform: scale(.9) translateY(18px);
  opacity: 0;
  transition:
    transform 1.5s var(--ease) .55s,
    opacity 1.2s ease .55s;
}

body.is-open .frame {
  transform: none;
  opacity: 1;
}

.frame__inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  background: #000;
  isolation: isolate;
  container-type: inline-size;
}

.frame__glow {
  position: absolute;
  inset: -14%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 208, 150, .30), transparent 72%);
  filter: blur(38px);
  opacity: 0;
  transition: opacity 1.8s ease 1s;
  pointer-events: none;
}

body.is-open .frame__glow { opacity: 1; }

video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;   /* субтитры вшиты в кадр — обрезать нельзя */
  background: #000;
}

/* Кнопка «плей» по центру */
.bigplay {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(62px, 15vw, 92px);
  height: clamp(62px, 15vw, 92px);
  display: grid;
  place-items: center;
  border: 1px solid rgba(227, 189, 114, .55);
  border-radius: 50%;
  background: rgba(12, 6, 8, .5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--gold);
  cursor: pointer;
  opacity: 0;
  transform: scale(.8);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease, background .25s;
}

.bigplay svg { width: 46%; height: 46%; fill: currentColor; }

body.is-open.is-paused .bigplay {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.bigplay:hover { background: rgba(140, 22, 38, .6); }

/* Спиннер загрузки */
.spinner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}

.spinner span {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(227, 189, 114, .22);
  border-top-color: var(--gold);
  animation: spin .9s linear infinite;
}

body.is-loading .spinner { opacity: 1; }
body.is-loading .bigplay { opacity: 0; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   УПРАВЛЕНИЕ
   ============================================================ */
.controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(26px, 8vw, 54px) clamp(10px, 2.4vw, 20px) clamp(8px, 1.8vw, 16px);
  background: linear-gradient(to top, rgba(0, 0, 0, .88), rgba(0, 0, 0, .45) 45%, transparent);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}

body.ui-visible .controls {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.controls__row {
  display: flex;
  align-items: center;
  gap: clamp(2px, 1vw, 8px);
  margin-top: 6px;
}

.ctl {
  flex: 0 0 auto;
  width: clamp(34px, 9vw, 42px);
  height: clamp(34px, 9vw, 42px);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #f6ece0;
  cursor: pointer;
  transition: background .2s, color .2s, transform .15s;
}

.ctl svg { width: 62%; height: 62%; fill: currentColor; }
.ctl:hover { background: rgba(255, 255, 255, .1); color: var(--gold); }
.ctl:active { transform: scale(.92); }

.i-pause, .i-mute, .i-fsx { display: none; }
body.is-playing .i-play { display: none; }
body.is-playing .i-pause { display: block; }
body.is-muted .i-vol { display: none; }
body.is-muted .i-mute { display: block; }
body.is-fs .i-fs { display: none; }
body.is-fs .i-fsx { display: block; }

.time {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 auto 0 4px;
  font-size: clamp(11px, 2.9vw, 13px);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: rgba(246, 236, 224, .82);
  white-space: nowrap;
}

.time i { opacity: .4; font-style: normal; }

/* Громкость */
.vol { display: flex; align-items: center; }

.vol__range {
  width: 0;
  opacity: 0;
  margin-left: 0;
  height: 22px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  transition: width .3s var(--ease), opacity .25s, margin .3s var(--ease);
}

.vol:hover .vol__range,
.vol__range:focus-visible { width: 72px; opacity: 1; margin-left: 4px; }

.vol__range::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .25);
}

.vol__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px;
  height: 11px;
  margin-top: -4px;
  border-radius: 50%;
  background: #fff;
}

.vol__range::-moz-range-track { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .25); }
.vol__range::-moz-range-progress { height: 3px; border-radius: 3px; background: var(--gold); }
.vol__range::-moz-range-thumb { width: 11px; height: 11px; border: 0; border-radius: 50%; background: #fff; }

/* Прогресс */
.progress {
  padding: 9px 0;
  cursor: pointer;
  touch-action: none;
}

.progress__track {
  position: relative;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .2);
  transition: height .15s ease;
}

.progress__buffer,
.progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
}

.progress__buffer { width: 0; background: rgba(255, 255, 255, .22); }

.progress__fill {
  width: 0;
  background: linear-gradient(90deg, var(--velvet-3), var(--gold));
}

.progress__knob {
  position: absolute;
  right: 0;
  top: 50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(227, 189, 114, .9);
  transform: translate(50%, -50%) scale(0);
  transition: transform .18s ease;
}

.progress:hover .progress__track,
.progress.is-drag .progress__track { height: 6px; }

.progress:hover .progress__knob,
.progress.is-drag .progress__knob { transform: translate(50%, -50%) scale(1); }

/* ============================================================
   ЗАНАВЕС
   ============================================================ */
.curtain {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.curtain__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.3%;
  pointer-events: auto;
  background-color: var(--velvet-1);
  background-image:
    linear-gradient(to bottom, rgba(255, 220, 190, .12), transparent 22%, transparent 62%, rgba(0, 0, 0, .55)),
    repeating-linear-gradient(90deg,
      var(--velvet-1) 0,
      var(--velvet-2) calc(var(--fold) * .3),
      var(--velvet-3) calc(var(--fold) * .48),
      var(--velvet-2) calc(var(--fold) * .68),
      var(--velvet-4) calc(var(--fold) * .88),
      var(--velvet-1) var(--fold));
  will-change: transform;
  transition: transform var(--open) var(--ease);
}

/* Затемнение по внутренним краям — стык полотен */
.curtain__panel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(26px, 5.5vw, 90px);
  pointer-events: none;
}

.curtain__panel--l {
  left: 0;
  z-index: 1;
  box-shadow: inset -34px 0 60px rgba(0, 0, 0, .45);
}

.curtain__panel--l::after {
  right: 0;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .72));
}

.curtain__panel--r {
  right: 0;
  box-shadow: inset 34px 0 60px rgba(0, 0, 0, .45);
}

.curtain__panel--r::after {
  left: 0;
  background: linear-gradient(270deg, transparent, rgba(0, 0, 0, .72));
}

/* Золотые подхваты */
.tieback {
  position: absolute;
  z-index: 1;
  top: 46%;
  width: clamp(26px, 5vw, 44px);
  height: clamp(26px, 5vw, 44px);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #f6dc9c, var(--gold) 42%, #7d5a1f 100%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .6);
  opacity: 0;
  transition: opacity .6s ease var(--open);
}

.curtain__panel--l .tieback { right: clamp(6px, 1.4vw, 16px); }
.curtain__panel--r .tieback { left: clamp(6px, 1.4vw, 16px); }

body.is-open .tieback { opacity: 1; }

/* Ламбрекен */
.valance {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(52px, 11vh, 128px);
  filter:
    drop-shadow(0 2px 0 var(--gold))
    drop-shadow(0 5px 0 var(--gold-dim))
    drop-shadow(0 16px 28px rgba(0, 0, 0, .8));
  transition: transform 1.2s var(--ease);
}

.valance__drape {
  width: 100%;
  height: 100%;
  background-color: var(--velvet-1);
  background-image:
    linear-gradient(to bottom, rgba(255, 225, 195, .2), rgba(0, 0, 0, .5)),
    repeating-linear-gradient(90deg,
      var(--velvet-1) 0,
      var(--velvet-2) calc(var(--fold) * .32),
      var(--velvet-3) calc(var(--fold) * .5),
      var(--velvet-2) calc(var(--fold) * .7),
      var(--velvet-1) var(--fold));
  -webkit-mask-image:
    linear-gradient(#000 0 0),
    radial-gradient(circle var(--scallop) at 50% 0, #000 98%, transparent 100%);
  mask-image:
    linear-gradient(#000 0 0),
    radial-gradient(circle var(--scallop) at 50% 0, #000 98%, transparent 100%);
  -webkit-mask-size: 100% calc(100% - var(--scallop)), calc(var(--scallop) * 2) var(--scallop);
  mask-size: 100% calc(100% - var(--scallop)), calc(var(--scallop) * 2) var(--scallop);
  -webkit-mask-position: top left, bottom left;
  mask-position: top left, bottom left;
  -webkit-mask-repeat: no-repeat, repeat-x;
  mask-repeat: no-repeat, repeat-x;
}

body.is-open .valance { transform: translateY(-42%); }

/* Открытие */
body.is-open .curtain__panel--l { transform: translateX(calc(-100% + var(--rest))); }
body.is-open .curtain__panel--r { transform: translateX(calc(100% - var(--rest))); }

/* ============================================================
   ИНТРО НА ЗАНАВЕСЕ
   ============================================================ */
.intro {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.4vh, 14px);
  padding: clamp(20px, 6vw, 50px);
  text-align: center;
  pointer-events: auto;
  transition: opacity .55s ease, transform .7s var(--ease);
}

body.is-open .intro {
  opacity: 0;
  transform: scale(.94);
  pointer-events: none;
}

.intro__bulbs {
  display: flex;
  gap: clamp(10px, 3vw, 20px);
  margin-bottom: clamp(4px, 1.5vh, 14px);
}

.intro__bulbs i {
  width: clamp(6px, 1.6vw, 10px);
  height: clamp(6px, 1.6vw, 10px);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px 2px rgba(227, 189, 114, .85);
  animation: bulb 1.6s ease-in-out infinite;
}

.intro__bulbs i:nth-child(2) { animation-delay: .2s; }
.intro__bulbs i:nth-child(3) { animation-delay: .4s; }
.intro__bulbs i:nth-child(4) { animation-delay: .6s; }
.intro__bulbs i:nth-child(5) { animation-delay: .8s; }
.intro__bulbs i:nth-child(6) { animation-delay: 1s; }
.intro__bulbs i:nth-child(7) { animation-delay: 1.2s; }

@keyframes bulb {
  0%, 100% { opacity: .35; transform: scale(.85); }
  50%      { opacity: 1;   transform: scale(1); }
}

.intro__kicker {
  margin: 0;
  font-size: clamp(10px, 2.6vw, 13px);
  letter-spacing: .55em;
  text-indent: .55em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .9;
}

.intro__title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(44px, 13vw, 116px);
  line-height: .95;
  letter-spacing: .02em;
  color: #fff6e6;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, .45),
    0 0 42px rgba(255, 208, 150, .45);
}

.intro__sub {
  margin: 0;
  max-width: 30ch;
  font-size: clamp(12px, 3.2vw, 16px);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 240, 225, .78);
}

.intro__btn {
  position: relative;
  margin-top: clamp(12px, 3vh, 28px);
  padding: clamp(13px, 2vh, 18px) clamp(26px, 8vw, 48px);
  border: 1px solid rgba(227, 189, 114, .75);
  border-radius: 999px;
  background: rgba(10, 4, 6, .34);
  color: #fff4e2;
  font: inherit;
  font-size: clamp(13px, 3.4vw, 15px);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: pulse 2.8s ease-out infinite;
  transition: background .3s, color .3s, transform .2s;
}

.intro__btn span { position: relative; z-index: 1; }

.intro__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 235, 200, .38), transparent);
  transform: translateX(-100%);
  animation: shine 3.4s ease-in-out infinite;
}

.intro__btn:hover { background: var(--gold); color: #2a0a0f; }
.intro__btn:active { transform: scale(.97); }

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(227, 189, 114, .45); }
  70%  { box-shadow: 0 0 0 22px rgba(227, 189, 114, 0); }
  100% { box-shadow: 0 0 0 0 rgba(227, 189, 114, 0); }
}

@keyframes shine {
  0%, 55% { transform: translateX(-100%); }
  100%    { transform: translateX(100%); }
}

.intro__hint {
  margin: clamp(8px, 2vh, 16px) 0 0;
  font-size: clamp(10px, 2.6vw, 12px);
  letter-spacing: .18em;
  color: rgba(255, 235, 215, .45);
}

/* Панель управления подстраивается под ширину самого экрана,
   а не под ширину окна — важно для вертикального видео */
@container (max-width: 400px) {
  .controls { padding-left: 8px; padding-right: 8px; }
  .controls__row { gap: 0; }
  .ctl { width: 32px; height: 32px; border-radius: 8px; }
  .time { font-size: 11px; gap: 3px; margin-left: 2px; }
  .vol__range { display: none; }
}

@container (max-width: 290px) {
  .controls { padding-left: 5px; padding-right: 5px; }
  .ctl { width: 28px; height: 28px; }
  .time { font-size: 10px; }
}

@container (max-width: 240px) {
  .ctl--curtain { display: none; }
}

/* ============================================================
   АДАПТИВ
   ============================================================ */

/* Телефоны — занавес уходит полностью, экран во всю ширину */
@media (max-width: 720px) {
  :root { --rest: 0px; }
  .tieback { display: none; }
  .theater { padding: 0; }

  .frame {
    width: min(100%, calc(100dvh * 9 / 16));
    max-height: 100dvh;
    aspect-ratio: 9 / 16;
    border-radius: 0;
    padding: 0;
    box-shadow:
      0 0 0 1px rgba(227, 189, 114, .22),
      0 18px 60px rgba(0, 0, 0, .85);
  }

  .frame__inner { border-radius: 0; }
  .controls { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .vol__range { display: none; }
}

/* Планшеты в портрете */
@media (min-width: 721px) and (max-width: 1024px) and (orientation: portrait) {
  .frame { width: min(74%, calc((100dvh - 90px) * 9 / 16)); }
}

/* Телефон в ландшафте — экран по высоте */
@media (max-height: 520px) and (orientation: landscape) {
  .frame {
    width: min(100%, calc(100dvh * 9 / 16));
    max-height: 100dvh;
    aspect-ratio: 9 / 16;
    border-radius: 0;
    padding: 0;
  }
  .intro__title { font-size: clamp(30px, 9vh, 56px); }
  .intro__sub, .intro__hint { display: none; }
  .valance { height: clamp(34px, 16vh, 70px); }
}

/* Широкие экраны */
@media (min-width: 1440px) {
  :root { --rest: 5.5vw; }
}

/* Тач-устройства */
@media (hover: none) {
  .vol:hover .vol__range { width: 0; opacity: 0; margin-left: 0; }
  .progress__knob { transform: translate(50%, -50%) scale(1); }
}

/* Уважение к настройкам анимации */
@media (prefers-reduced-motion: reduce) {
  :root { --open: .3s; }
  .intro__btn, .intro__btn::before, .intro__bulbs i { animation: none; }
}

/* Полноэкранный режим */
.frame:fullscreen,
.frame:-webkit-full-screen {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 0;
  padding: 0;
  background: #000;
}

.frame:fullscreen .frame__inner,
.frame:-webkit-full-screen .frame__inner { border-radius: 0; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }