/* =========================================================================
   ANIMORE cinema — стили лендинга
   Концепция «Премьера»: тёмный «кинозал» (смотрим) и кремовая «программка» (читаем).
   ========================================================================= */

/* ---------- 1. Токены ---------- */
:root{
  color-scheme: only light;

  /* тёмный «кинозал» */
  --ink:#15100E; --ink-2:#1F1714; --ink-3:#0B0807;
  --line-dark:#3A2E29; --line-dark-gold:rgba(210,174,109,.28);

  /* кремовая «бумага» */
  --paper:#F4EADB; --paper-2:#EBDDC6; --paper-3:#FBF6EE; --paper-2-hover:#E3D2B6;
  --line-cream:rgba(107,20,36,.18); --line-cream-2:rgba(107,20,36,.35);

  /* бренд */
  --burgundy:#6B1424; --burgundy-hover:#8A2233; --burgundy-deep:#4E0E1A;
  --gold:#D2AE6D; --gold-hover:#DDBE84; --gold-ink:#7A5B22; --gold-ornament:#B38C4A;

  /* текст */
  --text-on-dark:#F1E6D3; --muted-on-dark:#B9A993;
  --text-on-cream:#2A1E1B; --muted-on-cream:#5E4C45;

  --r-1:2px; --r-2:3px; --r-phone:28px;
  --shadow-prop:0 18px 32px -20px rgba(42,30,27,.38);
  --shadow-modal:0 30px 80px rgba(0,0,0,.6);

  --pad-occasions:clamp(72px,10vw,112px);
  --pad-works:clamp(80px,11vw,128px);
  --pad-process:clamp(88px,12vw,136px);
  --pad-reviews:clamp(80px,10vw,120px);
  --pad-faq:clamp(72px,9vw,104px);
  --pad-final:clamp(96px,13vw,160px);

  --container:1200px; --container-wide:1320px;
  --gutter:16px; --header-h:60px; --bar-h:64px; --measure:62ch;
  --leader:48px; --rail:18px;

  --ease-film:cubic-bezier(.7,0,.2,1); --ease-out:cubic-bezier(.2,.7,.2,1);
  --t-fast:160ms; --t-mid:240ms; --t-reveal:500ms;
  --z-header:50; --z-bar:60;

  --font-display:'Forum','Cormorant SC',Georgia,'Times New Roman',serif;
  --font-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --font-ui:'Golos Text',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-hand:'Bad Script','Segoe Print',cursive;

  --fs-h1:clamp(2.125rem,1.2rem + 4.6vw,5.25rem);
  --fs-h1-sub:clamp(1.625rem,1.1rem + 2.4vw,3.25rem);
  --fs-h2:clamp(1.75rem,1.15rem + 2.7vw,3.25rem);
  --fs-h3:clamp(1.375rem,1.2rem + .8vw,1.875rem);
  --fs-lead:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --fs-body:clamp(1.0625rem,1.04rem + .12vw,1.125rem);
  --fs-small:.875rem; --fs-kicker:.75rem; --fs-button:1.0625rem;
  --fs-num:clamp(1.5rem,1.3rem + .6vw,1.875rem);
  --h-scale:1; --kicker-track:.24em;

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
  --perf-h:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14'%3E%3Crect width='16' height='14' fill='%2315100E'/%3E%3Crect x='4' y='4' width='8' height='6' rx='1.5' fill='%23F4EADB'/%3E%3C/svg%3E");
  --perf-v:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Crect width='24' height='12' fill='%2315100E'/%3E%3Crect x='3' y='4' width='5' height='4' rx='1' fill='%23F4EADB'/%3E%3Crect x='16' y='4' width='5' height='4' rx='1' fill='%23F4EADB'/%3E%3C/svg%3E");
}
@media (min-width:400px){ :root{ --gutter:20px } }
@media (min-width:768px){ :root{ --gutter:32px; --leader:60px; --rail:20px } }
@media (min-width:1100px){ :root{ --gutter:40px; --header-h:76px } }
html:lang(kk){ --h-scale:.88; --kicker-track:.16em }
html:lang(en){ --h-scale:.94; --kicker-track:.16em }

/* ---------- 2. Темы секций ---------- */
.theme-dark{
  --bg:var(--ink); --fg:var(--text-on-dark); --fg-muted:var(--muted-on-dark);
  --heading:var(--text-on-dark); --accent:var(--gold); --kicker:var(--gold);
  --line:var(--line-dark); --line-strong:rgba(241,230,211,.5); --focus:var(--gold);
  --ornament:var(--gold); --keyline:rgba(210,174,109,.55);
  --tk-bg:var(--gold); --tk-bg-h:var(--gold-hover); --tk-fg:var(--ink);
  --hover-tint:rgba(210,174,109,.08);
  --grain-o:.06;
  background:var(--bg); color:var(--fg);
}
.theme-cream{
  --bg:var(--paper); --fg:var(--text-on-cream); --fg-muted:var(--muted-on-cream);
  --heading:var(--burgundy); --accent:var(--burgundy); --kicker:var(--gold-ink);
  --line:var(--line-cream); --line-strong:rgba(107,20,36,.5); --focus:var(--burgundy);
  --ornament:var(--gold-ornament); --keyline:var(--line-cream-2);
  --tk-bg:var(--burgundy); --tk-bg-h:var(--burgundy-hover); --tk-fg:var(--paper-3);
  --hover-tint:rgba(107,20,36,.05);
  --grain-o:.05;
  background:var(--bg); color:var(--fg);
}

/* ---------- 3. База ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ font-synthesis:none; -webkit-text-size-adjust:100%; text-size-adjust:100%; background:var(--ink) }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth } }
body{
  margin:0; background:var(--ink); color:var(--text-on-dark);
  font:400 var(--fs-body)/1.6 var(--font-ui);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden }
img,svg,video{ display:block; max-width:100% }
img{ height:auto }
a{ color:inherit }
button{ font:inherit; color:inherit }
p{ margin:0 }
ul,ol{ margin:0; padding:0 }
h1,h2,h3{ margin:0 }
[hidden]{ display:none !important }
[id]{ scroll-margin-top:calc(var(--header-h) + 12px) }
::selection{ background:var(--gold); color:var(--ink) }

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

.container{ width:100%; max-width:calc(var(--container) + 2 * var(--gutter)); margin-inline:auto; padding-inline:var(--gutter) }
.container--wide{ max-width:calc(var(--container-wide) + 2 * var(--gutter)) }

.skip-link{
  position:absolute; left:12px; top:0; transform:translateY(-120%); z-index:100; padding:12px 16px;
  background:var(--gold); color:var(--ink); font-weight:600; text-decoration:none; border-radius:var(--r-2);
}
.skip-link:focus{ transform:translateY(12px) }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0 }
h2[tabindex="-1"]:focus:not(:focus-visible){ outline:none }

/* зерно плёнки / бумаги */
.grain{ position:relative; isolation:isolate }
.grain::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:var(--grain) 0 0/200px 200px; opacity:var(--grain-o,.05);
}

/* ---------- 4. Типографика ---------- */
h1,h2,.display{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  text-wrap:balance; overflow-wrap:break-word; color:var(--heading);
}
.h1__caps{ display:block; font-size:calc(var(--fs-h1) * var(--h-scale)); line-height:1.02; letter-spacing:.015em }
.h1__sub{
  display:block; margin-top:.14em;
  font:italic 500 calc(var(--fs-h1-sub) * var(--h-scale))/1.1 var(--font-serif);
  text-transform:none; letter-spacing:0; color:var(--gold); text-wrap:balance;
}
h2{ font-size:calc(var(--fs-h2) * var(--h-scale)); line-height:1.08; letter-spacing:.02em }
h3{ font:600 var(--fs-h3)/1.15 var(--font-serif); color:var(--heading); text-wrap:balance }
p{ text-wrap:pretty }
.lead{ font:500 var(--fs-lead)/1.4 var(--font-serif); max-width:46ch }
.quote{ font:italic 500 clamp(1.25rem,1.1rem + .6vw,1.5rem)/1.35 var(--font-serif); color:var(--heading); max-width:40ch }
.small{ font-size:var(--fs-small); line-height:1.5; color:var(--fg-muted) }
.kicker{
  font:600 var(--fs-kicker)/1.4 var(--font-ui); letter-spacing:var(--kicker-track);
  text-transform:uppercase; color:var(--kicker); margin:0 0 16px;
}
.num{ font-family:var(--font-display); font-variant-numeric:lining-nums }
.card-title{
  font:400 1.25rem/1.15 var(--font-display); letter-spacing:.06em; text-transform:uppercase; color:var(--heading);
}

.kicker--reel{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px }
.kicker__rule{ width:32px; height:1px; background:currentColor; opacity:.5 }
.kicker__part{ opacity:.7 }
.theme-cream .kicker__part{ opacity:1 }

.section-head{ max-width:44rem }
.section-lead{ margin-top:20px; max-width:56ch; color:var(--fg-muted); font-size:1rem; line-height:1.6 }

/* орнамент «— ◆ ♥ ◆ —» */
/* цвета передаются внутрь <use> через переменные */
.ornament{ display:block; margin-top:20px; overflow:visible; --orn-line-o:1; --orn-center:var(--burgundy) }
.ornament.is-dark{ --orn-line-o:.6; --orn-center:var(--gold) }
.ornament--center{ margin-inline:auto }

/* ---------- 5. Кнопки и ссылки ---------- */
/* билет: все кнопки WhatsApp */
.ticket{
  position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center;
  min-height:56px; padding:10px 24px 10px 64px; border-radius:var(--r-2);
  color:var(--tk-fg); font:600 var(--fs-button)/1.25 var(--font-ui); letter-spacing:.01em;
  text-align:center; text-decoration:none; text-wrap:balance; -webkit-tap-highlight-color:transparent;
  transition:transform var(--t-fast) var(--ease-out);
}
.ticket::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--tk-bg); transition:background-color var(--t-fast);
  -webkit-mask:radial-gradient(circle 7px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,
               radial-gradient(circle 7px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 7px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,
               radial-gradient(circle 7px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
}
.ticket::after{ content:""; position:absolute; left:46px; top:9px; bottom:9px; border-left:1px dashed currentColor; opacity:.45 }
.ticket__icon{ position:absolute; left:14px; top:50%; width:20px; height:20px; margin-top:-10px; fill:currentColor }
.ticket:hover::before{ background:var(--tk-bg-h) }
.ticket:active{ transform:translateY(1px) }
.ticket--block{ display:flex; width:100% }
.ticket--lg{ min-height:60px }
.ticket--sm{ min-height:40px; padding:6px 16px 6px 52px; font-size:.9375rem }
.ticket--sm::after{ left:38px; top:7px; bottom:7px }
.ticket--sm .ticket__icon{ left:10px; width:18px; height:18px; margin-top:-9px }
.ticket--soft{ --tk-bg:var(--paper-2); --tk-bg-h:var(--paper-2-hover); --tk-fg:var(--burgundy); min-height:48px }

.btn-line{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:48px; padding:8px 20px; border:1px solid var(--line-strong); border-radius:var(--r-2);
  background:transparent; color:var(--fg); font:600 var(--fs-button)/1.25 var(--font-ui);
  text-decoration:none; cursor:pointer; transition:background-color var(--t-fast);
  -webkit-tap-highlight-color:transparent;
}
.btn-line:hover{ background:var(--hover-tint) }
.btn-line__icon{ width:20px; height:20px }
.ring-play{
  display:grid; place-items:center; width:32px; height:32px; margin-left:-8px; border-radius:50%;
  box-shadow:inset 0 0 0 1px currentColor;
}
.ring-play svg{ width:14px; height:14px; margin-left:2px }

.text-link{
  color:var(--accent); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.25em;
  font-weight:500; transition:color var(--t-fast);
}
.theme-dark .text-link{ color:var(--text-on-dark); text-decoration-color:var(--gold) }
.text-link:hover{ text-decoration-thickness:2px }

.icon-link{ display:inline-flex; align-items:center; gap:10px; min-height:44px; text-decoration:none; color:var(--fg) }
.icon-link svg{ width:20px; height:20px; flex:none; color:var(--gold) }
.icon-link:hover{ text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:.25em }
.icon-link--static:hover{ text-decoration:none }

.round-btn{
  display:grid; place-items:center; width:48px; height:48px; border-radius:50%;
  border:1px solid rgba(210,174,109,.6); background:transparent; color:var(--gold); cursor:pointer;
  transition:background-color var(--t-fast);
}
.round-btn svg{ width:22px; height:22px }
.round-btn:hover{ background:rgba(210,174,109,.1) }
.round-btn:disabled{ opacity:.35; cursor:default }

.btn-close{
  display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 14px 0 10px;
  border:1px solid rgba(241,230,211,.35); border-radius:var(--r-2); background:transparent;
  color:var(--text-on-dark); font:500 .9375rem/1 var(--font-ui); cursor:pointer;
}
.btn-close svg{ width:22px; height:22px }
.btn-close:hover{ background:rgba(241,230,211,.08) }

/* ---------- 6. Шапка ---------- */
.site-header{
  --focus:var(--gold); --tk-bg:var(--gold); --tk-bg-h:var(--gold-hover); --tk-fg:var(--ink);
  position:fixed; inset:0 0 auto 0; z-index:var(--z-header); height:var(--header-h);
  color:var(--text-on-dark);
  background:linear-gradient(rgba(21,16,14,.6),rgba(21,16,14,0));
  transition:background-color var(--t-mid), box-shadow var(--t-mid);
}
.site-header.is-solid{ background:rgba(21,16,14,.94); box-shadow:inset 0 -1px 0 var(--line-dark-gold) }
.header__inner{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px }

.wordmark{ display:inline-flex; flex-direction:column; align-items:center; line-height:1; text-decoration:none; color:var(--text-on-dark) }
.wordmark__main{ font:400 1.375rem/1 var(--font-display); letter-spacing:.16em; margin-right:-.16em }
.wordmark__sub{ margin-top:4px; font:500 .5625rem/1 var(--font-ui); letter-spacing:.6em; margin-right:-.6em; color:var(--gold); text-transform:lowercase }
.wordmark--lg .wordmark__main{ font-size:2rem }
.wordmark--lg .wordmark__sub{ font-size:.6875rem; margin-top:6px }

.nav{ display:none }
.nav a{
  position:relative; font:500 .9375rem/1 var(--font-ui); color:var(--text-on-dark); text-decoration:none;
  padding:10px 0;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:4px; height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform var(--t-mid) var(--ease-out);
}
.nav a:hover::after,.nav a.is-active::after{ transform:scaleX(1) }

.header__tools{ display:flex; align-items:center; gap:8px }
.lang{ display:flex; align-items:center }
.lang button{
  min-width:40px; height:44px; padding:0 6px; border:0; background:transparent; cursor:pointer;
  font:600 .75rem/1 var(--font-ui); letter-spacing:.08em; color:var(--muted-on-dark);
  text-decoration:none; text-underline-offset:6px;
}
.lang button:hover{ color:var(--text-on-dark) }
.lang button[aria-pressed="true"]{ color:var(--gold); text-decoration:underline; text-decoration-thickness:1px }
.header__wa{ display:none }

.burger{
  display:grid; place-content:center; gap:7px; width:44px; height:44px; padding:0; margin-right:-8px;
  border:0; background:transparent; cursor:pointer;
}
.burger span{ display:block; width:22px; height:1px; background:var(--text-on-dark) }

@media (min-width:1100px){
  .nav{ display:flex; gap:clamp(16px,2vw,32px) }
  html:lang(kk) .nav{ gap:clamp(14px,1.4vw,24px) }
  .header__wa{ display:inline-flex }
  .burger{ display:none }
  .header__tools{ gap:16px }
}

/* мобильное меню */
.menu{
  --focus:var(--gold);
  position:fixed; inset:0; width:100%; max-width:none; height:100%; max-height:none; margin:0; padding:0;
  border:0; overflow-y:auto; overscroll-behavior:contain;
}
.menu[open]{ display:flex; flex-direction:column }
.menu::backdrop{ background:var(--ink-3) }
.menu__top{ display:flex; align-items:center; justify-content:space-between; min-height:var(--header-h); padding-top:8px }
.menu__list{ list-style:none; margin-top:24px; border-top:1px solid var(--line-dark) }
.menu__list li{ border-bottom:1px solid var(--line-dark) }
.menu__list a{
  display:flex; align-items:baseline; gap:18px; min-height:60px; padding:14px 0;
  text-decoration:none; color:var(--text-on-dark);
  font:400 1.75rem/1.1 var(--font-display); text-transform:uppercase; letter-spacing:.03em;
}
html:lang(kk) .menu__list a{ font-size:1.5rem }
.menu__idx{ font:600 .75rem/1 var(--font-ui); letter-spacing:.12em; color:var(--gold) }
.menu__bottom{ margin-top:auto; padding-top:32px; padding-bottom:calc(24px + env(safe-area-inset-bottom)) }
.menu__links{ display:flex; flex-wrap:wrap; gap:4px 24px; margin-top:16px }
@media (prefers-reduced-motion:no-preference){
  .menu[open]{ animation:fade-in var(--t-mid) var(--ease-out) }
}

/* ---------- 7. Главный экран ---------- */
.hero{
  position:relative; overflow:hidden;
  min-height:560px; min-height:clamp(560px,100vh,900px); min-height:clamp(560px,100svh,900px);
  display:flex; align-items:flex-end;
}
.hero__media{ position:absolute; inset:0; z-index:-1; background:var(--ink-2) }
.hero__poster,.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.hero__poster img{ display:block; width:100%; height:100%; object-fit:cover }
.hero__video{ opacity:0; transition:opacity 1200ms var(--ease-out) }
.hero.is-ready .hero__video{ opacity:1 }
.hero.has-media .hero__placeholder{ display:none }

/* заглушка: «ракорд» перед сеансом */
.hero__placeholder{
  --cx:50%;
  position:absolute; inset:0; display:grid; place-items:center;
  background:
    linear-gradient(rgba(241,230,211,.14),rgba(241,230,211,.14)) var(--cx) 0/1px 100% no-repeat,
    linear-gradient(rgba(241,230,211,.14),rgba(241,230,211,.14)) 0 50%/100% 1px no-repeat,
    radial-gradient(ellipse at var(--cx) 45%, #2a201b 0%, var(--ink-2) 60%);
}
@media (min-width:1100px){
  .hero__placeholder{ --cx:70%; justify-items:start }
  .leader-frame{ margin-left:calc(70% - min(62vmin,420px) / 2) }
}
.leader-frame{
  position:relative; width:min(62vmin,420px); aspect-ratio:1; border-radius:50%;
  box-shadow:0 0 0 1px rgba(241,230,211,.45), inset 0 0 0 calc(min(62vmin,420px) * .08) transparent;
  display:grid; place-items:center;
}
.leader-frame::before{ content:""; position:absolute; inset:8%; border-radius:50%; box-shadow:0 0 0 1px rgba(241,230,211,.25) }
.leader-frame::after{
  content:""; position:absolute; inset:-14%; border-radius:50%;
  box-shadow:0 0 0 1px rgba(210,174,109,.12);
}
.leader-frame__a{
  font:400 min(40vmin,270px)/1 var(--font-display); color:transparent;
  -webkit-text-stroke:1px rgba(210,174,109,.4); transform:translateY(4%);
}
@media (max-width:767px){
  .hero.has-media .hero__media{
    bottom:26%;
    -webkit-mask:linear-gradient(#000 62%, transparent); mask:linear-gradient(#000 62%, transparent);
  }
  .hero__placeholder{ align-items:start; padding-top:calc(var(--header-h) + 5vh) }
  .leader-frame{ width:min(56vmin,300px) }
  .leader-frame__a{ font-size:min(36vmin,190px) }
}

.hero__scrim{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(to top, rgba(21,16,14,.97) 0%, rgba(21,16,14,.86) 42%, rgba(21,16,14,.5) 62%, rgba(21,16,14,0) 82%),
    linear-gradient(to bottom, rgba(21,16,14,.55) 0%, rgba(21,16,14,0) 30%);
}
/* текст на видео: мягкая тень для читаемости на ярких кадрах (не свечение) */
.hero.has-media .hero__content{ text-shadow:0 1px 2px rgba(11,8,7,.45) }
.hero.has-media .hero__content .ticket,.hero.has-media .hero__content .btn-line{ text-shadow:none }
.hero.has-media .btn-line{ background:rgba(21,16,14,.35) }
@media (min-width:768px){
  .hero__scrim{
    background:
      linear-gradient(90deg, rgba(21,16,14,.82) 0%, rgba(21,16,14,.55) 36%, rgba(21,16,14,.12) 62%, rgba(21,16,14,0) 75%),
      linear-gradient(to top, rgba(21,16,14,.9) 0%, rgba(21,16,14,.35) 40%, rgba(21,16,14,0) 65%),
      linear-gradient(to bottom, rgba(21,16,14,.55) 0%, rgba(21,16,14,0) 30%);
  }
}
.hero__content{
  position:relative; z-index:2;
  padding-top:calc(var(--header-h) + 24px);
  padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom) + 36px);
}
.hero__kicker{ display:flex; align-items:center; gap:10px; max-width:34rem }
.kicker__icon{ width:18px; height:18px; flex:none }
.hero h1{ max-width:48rem }
.hero .h1__caps{ max-width:12ch }
html:lang(kk) .hero .h1__caps,html:lang(en) .hero .h1__caps{ max-width:14ch }
.hero .h1__sub{ max-width:22ch }
.hero__lead{ margin-top:20px; color:var(--text-on-dark); max-width:40ch }
.hero__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-top:28px }
.hero__cta{ display:none }
.hero__watch{ width:100% }
.hero__note{ margin-top:14px; max-width:44ch; display:none }

.hero__toggle{
  position:absolute; right:var(--gutter); top:calc(var(--header-h) + 12px); z-index:3;
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(241,230,211,.5); background:rgba(21,16,14,.45); color:var(--text-on-dark); cursor:pointer;
}
.hero__toggle svg{ width:18px; height:18px }

/* перфорация внизу тёмной секции */
.seam-perf::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:14px; z-index:3;
  background:var(--perf-h) 0 0/16px 14px repeat-x; pointer-events:none;
}
.splice{ box-shadow:inset 0 1px 0 rgba(210,174,109,.3) }

@media (min-width:768px){
  .hero__content{ padding-top:calc(var(--header-h) + 32px); padding-bottom:72px }
  .hero__watch{ width:auto }
  .hero__toggle{ top:auto; bottom:40px }
}
@media (min-width:1100px){
  .hero .h1__caps{ max-width:none }
  .hero__cta{ display:inline-flex }
  .hero__note{ display:block }
  .hero__content{ padding-bottom:88px }
}
@media (max-height:640px) and (max-width:767px){
  .hero__lead{ font-size:1.125rem; margin-top:14px }
  .hero__actions{ margin-top:18px }
}

/* ---------- 8. Для кого ---------- */
.occasions{ padding-block:var(--pad-occasions) }
.occ-grid{ display:grid; gap:12px; margin-top:40px }
/* телефон: «строка программки» — постер слева, текст справа, кнопка во всю ширину */
.occ{
  display:grid; grid-template-columns:104px minmax(0,1fr); grid-template-rows:auto auto 1fr auto;
  column-gap:16px; padding:14px;
  background:var(--paper-3); border:1px solid var(--line-cream); border-radius:var(--r-2);
}
.occ__poster{
  position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:var(--r-1); background:var(--paper-2);
  grid-column:1; grid-row:1 / span 3; align-self:start; container-type:inline-size;
}
.occ__poster img{ width:100%; height:100%; object-fit:cover; object-position:50% 30% }
.occ__poster::after{ content:""; position:absolute; inset:6px; border:1px solid rgba(251,246,238,.55); pointer-events:none }
.occ__body{ display:contents }
.occ .card-title{ grid-column:2; grid-row:1; font-size:1.125rem }
.occ__text{ grid-column:2; grid-row:2; margin-top:8px; font-size:.9375rem; line-height:1.5; color:var(--muted-on-cream) }
.occ__tags{ display:none; font:600 .75rem/1.5 var(--font-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--gold-ink) }
.occ__cta{ grid-column:1 / -1; grid-row:4; margin-top:14px }
.occ-other{ margin-top:32px; font-size:1rem }

/* типографический «постер» (если нет картинки) */
.tposter{
  container-type:inline-size; position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4cqw; padding:14% 10% 12%; text-align:center;
  background:var(--tp-bg); color:var(--tp-fg); isolation:isolate;
}
.tposter::before{ content:""; position:absolute; inset:8px; border:1px solid var(--tp-rule); pointer-events:none }
.tposter::after{ content:""; position:absolute; inset:0; z-index:-1; background:var(--grain) 0 0/200px 200px; opacity:.08 }
.tposter__top{
  position:absolute; top:9%; left:10%; right:10%;
  font:600 max(7px,3.1cqw)/1.3 var(--font-ui); letter-spacing:.28em; text-transform:uppercase; color:var(--tp-accent);
}
.tposter__title{ font:400 11cqw/1.02 var(--font-display); letter-spacing:.04em; text-transform:uppercase; text-wrap:balance; overflow-wrap:anywhere }
.tposter--long .tposter__title{ font-size:8.5cqw }
.tposter__sub{ font:italic 500 6cqw/1.2 var(--font-serif); text-wrap:balance }
.tposter__orn{ width:50cqw; height:auto; --ornament:var(--tp-accent); --orn-center:var(--tp-accent); --orn-line-o:.7 }
.tposter__no{ position:absolute; bottom:8%; font:italic 500 5cqw var(--font-serif); color:var(--tp-accent) }
.tposter__mark{ display:none; color:var(--tp-accent) }
@container (max-width:170px){
  .tposter > :not(.tposter__mark){ display:none }
  .tposter__mark{ display:block; width:42cqw; height:42cqw }
}
.tposter--wine{ --tp-bg:var(--burgundy-deep); --tp-fg:var(--text-on-dark); --tp-accent:var(--gold); --tp-rule:rgba(210,174,109,.5) }
.tposter--ink{ --tp-bg:var(--ink-2); --tp-fg:var(--text-on-dark); --tp-accent:var(--gold); --tp-rule:rgba(210,174,109,.45) }
.tposter--paper{ --tp-bg:var(--paper-2); --tp-fg:var(--burgundy); --tp-accent:var(--gold-ink); --tp-rule:var(--line-cream-2) }

@media (min-width:768px){
  .occ-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px }
  .occ{
    width:calc((100% - 40px) / 3); display:flex; flex-direction:column; padding:0; overflow:hidden;
    container-type:inline-size;
  }
  .occ__poster{ border-radius:0; align-self:stretch }
  .occ__body{ display:flex; flex-direction:column; flex:1; padding:18px 18px 20px }
  .occ .card-title{ font-size:clamp(1rem,8cqi,1.25rem) }
  .occ__text{ margin-bottom:16px }
  .occ__tags{ display:block; margin-bottom:20px }
  .occ__cta{ margin-top:auto; padding-left:50px; padding-right:12px; font-size:.875rem; letter-spacing:0 }
  .occ__cta::after{ left:40px }
  .occ__cta .ticket__icon{ left:12px }
}
@media (min-width:1100px){
  .occ-grid{ display:grid; grid-template-columns:repeat(5,1fr) }
  .occ{ width:auto }
}

/* ---------- 9. Примеры работ ---------- */
.works{ padding-block:var(--pad-works) calc(var(--pad-works) + 14px) }
.works__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px 40px }
.works__ig{ display:none }
.chips{
  display:flex; gap:8px; margin:32px calc(-1 * var(--gutter)) 0; padding:6px var(--gutter);
  overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity; scroll-padding-inline:var(--gutter);
  -webkit-mask:linear-gradient(90deg,#000 calc(100% - 24px),transparent); mask:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
}
.chips::-webkit-scrollbar{ display:none }
.chip{
  flex:none; scroll-snap-align:start; min-height:44px; padding:0 16px; border-radius:var(--r-2);
  border:1px solid rgba(210,174,109,.4); background:transparent; color:var(--text-on-dark);
  font:500 .9375rem/1 var(--font-ui); cursor:pointer; white-space:nowrap;
  transition:background-color var(--t-fast), color var(--t-fast);
}
.chip:hover{ background:rgba(210,174,109,.1) }
.chip[aria-pressed="true"]{ background:var(--gold); color:var(--ink); border-color:var(--gold) }
.chip:disabled{ opacity:.4; cursor:default }

.works-grid{ list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:28px 12px; margin-top:32px }
.work{ transition:opacity 180ms linear }
.work.is-fading{ pointer-events:none }
.poster{ margin:0 }
.work.is-fading{ opacity:0 }
.works__more{ display:flex; justify-content:center; margin-top:40px }
.works__more:has(> [hidden]){ margin-top:0 }

.poster__frame{
  position:relative; display:block; width:100%; aspect-ratio:3/4; padding:0; border:0;
  border-radius:var(--r-1); overflow:hidden; background:var(--ink-2); cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.poster__frame img{ width:100%; height:100%; object-fit:cover; transition:transform 700ms var(--ease-out) }
.poster__frame::after{
  content:""; position:absolute; inset:8px; border:1px solid var(--keyline); pointer-events:none;
  transition:border-color var(--t-fast);
}
.poster__play{
  position:absolute; right:10px; bottom:10px; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; color:var(--text-on-dark);
  background:rgba(21,16,14,.55); box-shadow:inset 0 0 0 1px rgba(241,230,211,.7);
  transition:background-color var(--t-fast), color var(--t-fast);
}
.poster__play svg{ width:18px; height:18px; margin-left:2px }
.poster__frame:is(:hover,:focus-visible)::after{ border-color:var(--gold) }
.poster__frame:is(:hover,:focus-visible) img{ transform:scale(1.03) }
.poster__frame:is(:hover,:focus-visible) .poster__play{ background:var(--gold); color:var(--ink) }

.museum{ margin-top:12px; padding-top:10px; border-top:1px solid var(--line) }
.museum__no{ font:italic 500 1.125rem/1 var(--font-serif); color:var(--accent) }
.museum__cat{ display:block; margin-top:6px; font:600 .6875rem/1.4 var(--font-ui); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-muted) }
.museum__title{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  margin-top:4px; font:italic 500 1.125rem/1.25 var(--font-serif); color:var(--fg);
}

@media (min-width:600px){ .works-grid{ grid-template-columns:repeat(3,1fr); gap:32px 20px } }
@media (min-width:768px){ .chips{ flex-wrap:wrap; overflow:visible; margin-inline:0; padding-inline:0; -webkit-mask:none; mask:none } }
@media (min-width:900px){
  .works__ig{ display:inline }
  .works-grid{ gap:48px 32px; padding-bottom:56px }
  .work.is-mid{ transform:translateY(56px) }
  .museum__title{ font-size:1.1875rem }
}

/* ---------- 10. Как создаём ---------- */
.process{ padding-block:var(--pad-process) }
.process__grid{ display:grid; gap:48px }
.process__lead{ margin-top:20px; color:var(--text-on-cream) }
.reel-index{ display:none }

.steps{ position:relative; list-style:none }
.steps::before{
  content:""; position:absolute; top:calc(var(--leader) / 2); bottom:0;
  left:calc(var(--leader) / 2 - var(--rail) / 2); width:var(--rail);
  background:var(--perf-v) 0 0/100% auto repeat-y;
}
.step{
  position:relative; display:grid; grid-template-columns:var(--leader) minmax(0,1fr); column-gap:clamp(12px,3vw,40px);
  padding-bottom:clamp(64px,9vw,112px);
}
.step:last-child{ padding-bottom:0 }
.steps > .step:last-child::after{
  /* скрываем ленту под последним шагом */
  content:""; position:absolute; left:0; width:var(--leader); top:var(--leader); bottom:0; background:var(--paper);
}

@property --p{ syntax:'<number>'; inherits:false; initial-value:0 }
.leader{ position:relative; width:var(--leader); height:var(--leader); z-index:1 }
.leader svg{ position:absolute; inset:0; width:100%; height:100% }
.l-disc{ fill:var(--paper-3) }
.l-ring{ fill:none; stroke:var(--burgundy); vector-effect:non-scaling-stroke }
.l-ring2{ fill:none; stroke:var(--burgundy); stroke-opacity:.4; vector-effect:non-scaling-stroke }
.l-cross{ stroke:var(--burgundy); stroke-opacity:.22; vector-effect:non-scaling-stroke }
.leader__wedge{
  position:absolute; inset:5px; border-radius:50%;
  background:conic-gradient(rgba(107,20,36,.14) calc(var(--p) * 1turn), transparent 0);
}
.leader__num{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:var(--fs-num); line-height:1; color:var(--burgundy);
}
html.js .step:not(.is-in) .leader__num{ opacity:0 }
.step.is-in .leader__num{ transition:opacity 200ms 600ms }
.step.is-in .leader__wedge{ animation:sweep 700ms linear forwards }
@keyframes sweep{ to{ --p:1 } }

.step__body{ min-width:0; position:relative; z-index:1 }
.step__tag{
  display:inline-block; margin:calc((var(--leader) - 26px) / 2) 0 14px; padding:6px 10px; border-radius:var(--r-2);
  background:var(--burgundy); color:var(--paper-3);
  font:600 .75rem/1.2 var(--font-ui); letter-spacing:.16em; text-transform:uppercase;
}
.step h3{ font-size:var(--fs-h3) }
.step__text{ margin-top:12px; max-width:56ch; color:var(--text-on-cream) }

.credits-list{
  list-style:none; margin-top:20px; display:grid; grid-template-columns:1fr; column-gap:28px; max-width:36rem;
}
.credits-list li{
  position:relative; padding:9px 0 9px 18px; border-bottom:1px dotted rgba(107,20,36,.3);
  font-size:.9375rem; line-height:1.45; color:var(--text-on-cream);
}
.credits-list li::before{
  content:""; position:absolute; left:2px; top:calc(9px + .72em - 3px); width:5px; height:5px;
  background:var(--gold-ornament); transform:rotate(45deg);
}
@media (min-width:768px){ .credits-list{ grid-template-columns:1fr 1fr } }

.step__prop{ margin-top:32px }
.step .quote{ margin-top:28px; padding-left:18px; border-left:2px solid var(--burgundy) }
@media (max-width:767px){
  .bleed-rail{ margin-left:calc(-1 * (var(--leader) + clamp(12px,3vw,40px))) }
  .bleed-rail .ba__caption{ padding-left:calc(var(--leader) + clamp(12px,3vw,40px)) }
}

/* бумажные «реквизиты» */
.paper{
  position:relative; max-width:28rem; background:var(--paper-3); border:1px solid var(--line-cream);
  border-radius:var(--r-1); box-shadow:var(--shadow-prop); padding:24px 22px;
}
.paper__clip{ position:absolute; right:28px; top:-10px }
.paper__title{ font:400 1.125rem/1 var(--font-display); letter-spacing:.2em; text-transform:uppercase; color:var(--burgundy) }
.checklist__items{ list-style:none; margin-top:14px }
.checklist__items li{
  position:relative; padding:10px 0 10px 18px; border-bottom:1px dotted rgba(107,20,36,.25);
  font-size:.9375rem; line-height:1.45; color:var(--text-on-cream);
}
.checklist__items li:last-child{ border-bottom:0 }
.checklist__items li::before{
  content:""; position:absolute; left:2px; top:calc(10px + .72em - 3px); width:5px; height:5px;
  background:var(--gold-ornament); transform:rotate(45deg);
}
.hand{
  display:inline-flex; align-items:center; gap:6px;
  font:400 1.1875rem/1.25 var(--font-hand); color:var(--burgundy); transform:rotate(-3deg);
}
.hand svg{ flex:none }
.hand--voice{ margin-top:10px; margin-left:12px }
.screenplay__title{ font:400 1.125rem/1 var(--font-display); letter-spacing:.2em; text-transform:uppercase; color:var(--burgundy) }
.screenplay__film{ margin-top:6px; font-size:.75rem; color:var(--muted-on-cream); letter-spacing:.04em }
.screenplay__lines{ list-style:none; margin-top:14px }
.screenplay__lines li{
  padding:10px 0; border-bottom:1px dotted rgba(107,20,36,.25);
  font:400 .875rem/1.5 'Courier New',Courier,monospace; color:var(--muted-on-cream);
}
.hand--more{ position:absolute; right:14px; top:14px; flex-direction:column; align-items:flex-end; gap:0; transform:rotate(-5deg) }
@media (min-width:768px){
  .checklist{ transform:rotate(-.8deg) }
  .screenplay{ transform:rotate(-1.2deg) }
}

/* до / после */
.ba-wrap{ display:flex }
.ba{ position:relative; width:100%; max-width:420px; margin:0; padding-top:14px }
.ba__plate{
  position:relative; aspect-ratio:630/960; border-radius:var(--r-1); overflow:hidden;
  touch-action:pan-y; user-select:none; -webkit-user-select:none; box-shadow:var(--shadow-prop); background:var(--paper-2);
}
.ba__plate::after{ content:""; position:absolute; inset:8px; border:1px solid rgba(210,174,109,.55); pointer-events:none }
.ba__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none }
.ba__after{ clip-path:inset(0 0 0 var(--pos)) }
.ba__handle{ position:absolute; top:0; bottom:0; left:var(--pos); width:2px; margin-left:-1px; background:var(--gold); pointer-events:none; z-index:1 }
.ba__knob{
  position:absolute; top:50%; left:50%; width:48px; height:48px; margin:-24px 0 0 -24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--paper-3);
  box-shadow:inset 0 0 0 1px var(--burgundy), 0 6px 16px -6px rgba(0,0,0,.45); color:var(--burgundy);
}
.ba__knob svg{ width:16px; height:16px; margin:0 -3px }
.ba__range{ position:absolute; inset:0; z-index:2; width:100%; height:100%; margin:0; opacity:0; pointer-events:none }
.ba__plate{ cursor:ew-resize }
.ba:focus-within .ba__knob{ outline:2px solid var(--burgundy); outline-offset:3px }
.ba__tab{
  position:absolute; top:0; z-index:3; padding:8px 12px; border-radius:var(--r-2); max-width:calc(50% - 20px);
  background:var(--burgundy); color:var(--paper-3); font:600 .75rem/1.2 var(--font-ui); letter-spacing:.12em; text-transform:uppercase;
  text-align:center; overflow-wrap:anywhere;
  box-shadow:inset 0 0 0 2px var(--burgundy), inset 0 0 0 3px rgba(210,174,109,.6);
}
.ba__tab--l{ left:16px } .ba__tab--r{ right:16px }
@media (max-width:359px){ .ba__tab{ letter-spacing:.06em; padding:7px 9px } .ba__tab--l{ left:10px } .ba__tab--r{ right:10px } }
.ba__caption{ margin-top:14px; font:italic 500 1.125rem/1.35 var(--font-serif); color:var(--muted-on-cream) }
.hand--drag{ position:absolute; right:-8px; top:44%; transform:translateX(100%) rotate(-4deg); flex-direction:column; align-items:flex-start }
.ba.is-touched .hand--drag{ opacity:0; transition:opacity 300ms }
@media (max-width:767px){
  .ba{ max-width:none }
  .hand--drag{ display:none }
}
.ba.is-empty .ba__before{ background:var(--paper-2) }

/* раскадровка */
.storyboard{ position:relative; margin:0; padding:22px 12px 20px; background:var(--ink); border-radius:var(--r-1); max-width:40rem }
.storyboard::before,.storyboard::after{
  content:""; position:absolute; left:0; right:0; height:14px;
  background:var(--perf-h) 0 0/16px 14px repeat-x; filter:invert(0);
}
.storyboard::before{ top:0 } .storyboard::after{ bottom:0 }
.storyboard__title{
  margin:8px 4px 12px; font:600 .6875rem/1 var(--font-ui); letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
}
.storyboard__frames{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding-bottom:8px }
.sb-frame{ display:flex; flex-direction:column; gap:8px; min-width:0 }
.sb-frame__box{
  width:100%; aspect-ratio:16/9; height:auto; background:var(--paper-3); border:1px solid var(--line-cream-2);
  fill:none; stroke:var(--burgundy); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
}
.sb-frame__box .sb-soft{ stroke-opacity:.45 }
.sb-frame > span{ font:600 .6875rem/1.3 var(--font-ui); letter-spacing:.12em; text-transform:uppercase; color:var(--muted-on-dark) }

/* кадры + песня */
.prints-wrap{ display:grid; gap:28px; align-items:center }
.prints{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; max-width:30rem; padding-top:16px }
.print{ position:relative; margin:0; padding:8px; background:var(--paper-3); box-shadow:var(--shadow-prop); border-radius:var(--r-1) }
.print img{ width:100%; aspect-ratio:3/4; object-fit:cover }
.print--static{ transform:rotate(-2deg); margin-right:-12px; z-index:1 }
.print--live{ transform:rotate(1.5deg) translateY(18px); margin-left:-12px; z-index:2 }
.print__tab{
  position:absolute; top:-12px; left:14px; z-index:1; padding:6px 10px; border-radius:var(--r-2);
  background:var(--burgundy); color:var(--paper-3); font:600 .6875rem/1 var(--font-ui); letter-spacing:.12em; text-transform:uppercase;
}
.song-card{
  display:grid; grid-template-columns:auto 1fr; gap:12px 14px; align-items:center; max-width:26rem;
  padding:20px 22px; border-radius:var(--r-2); background:var(--burgundy); color:var(--paper-3);
}
.song-card__icon{ width:26px; height:26px; color:var(--gold) }
.song-card__text{ font:600 1.25rem/1.25 var(--font-serif) }
.song-card__note{ display:block; font:italic 500 1rem/1.3 var(--font-serif); color:var(--gold) }
.wave-bars{ grid-column:1/-1; width:100%; height:32px; fill:var(--gold) }
@media (min-width:1100px){ .prints-wrap{ grid-template-columns:1.1fr .9fr } }

/* «Что вы получите» — билет */
.get-ticket{
  position:relative; display:grid; grid-template-columns:1fr; max-width:36rem;
  background:var(--paper-2); border-radius:var(--r-2); box-shadow:var(--shadow-prop);
  -webkit-mask:radial-gradient(circle 10px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,
               radial-gradient(circle 10px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 10px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,
               radial-gradient(circle 10px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
}
.get-ticket__main{ padding:26px 28px 22px }
.get-ticket__title{ font:400 1.5rem/1.1 var(--font-display); text-transform:uppercase; letter-spacing:.04em; color:var(--burgundy) }
.get-list{ list-style:none; margin-top:16px; display:grid; gap:10px }
.get-list li{ display:grid; grid-template-columns:22px 1fr; gap:10px; align-items:start; font-size:1rem; line-height:1.45 }
.get-list svg{ width:22px; height:22px; color:var(--burgundy) }
.get-ticket__stub{
  display:flex; align-items:center; justify-content:center; gap:10px; padding:14px 20px;
  border-top:1px dashed rgba(107,20,36,.4); color:var(--burgundy);
  font:400 .875rem/1 var(--font-display); letter-spacing:.18em; text-transform:uppercase;
}
.get-ticket__stub svg{ width:22px; height:22px; flex:none }
@media (min-width:600px){
  .get-ticket{ grid-template-columns:1fr 120px }
  .get-ticket__stub{ flex-direction:column; border-top:0; border-left:1px dashed rgba(107,20,36,.4); padding:20px 10px }
  .get-ticket__stub span{ writing-mode:vertical-rl; transform:rotate(180deg) }
}

.process__cta{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-top:64px }
.process__cta .small{ max-width:40ch }

@media (min-width:1100px){
  .process__grid{ grid-template-columns:repeat(12,minmax(0,1fr)); gap:40px }
  .process__aside{ grid-column:1 / span 4; align-self:start; position:sticky; top:calc(var(--header-h) + 32px) }
  .process__main{ grid-column:5 / span 8 }
  .reel-index{ display:block; margin-top:36px }
  .reel-index ol{ list-style:none; border-top:1px solid var(--line-cream) }
  .reel-index li{ border-bottom:1px solid var(--line-cream) }
  .reel-index a{
    display:grid; grid-template-columns:28px 1fr; align-items:center; gap:10px; min-height:46px; padding:8px 0;
    text-decoration:none; color:var(--muted-on-cream); font-size:.9375rem; line-height:1.3;
    transition:color var(--t-fast);
  }
  .reel-index__n{ font-size:1.125rem; color:var(--gold-ink) }
  .reel-index a:hover{ color:var(--text-on-cream) }
  .reel-index a[aria-current="step"]{ color:var(--burgundy); font-weight:500 }
  .reel-index a[aria-current="step"] .reel-index__n{ color:var(--burgundy) }
  .process__cta{ padding-left:calc(var(--leader) + 40px) }
}

/* ---------- 11. Отзывы ---------- */
.reviews{ padding-block:var(--pad-reviews) }
.reviews__head{ display:flex; align-items:center; justify-content:center; gap:clamp(12px,3vw,28px); text-align:center }
@media (min-width:600px) and (max-width:1099px){ .reviews__head > div{ max-width:26rem } }
.reviews__head .kicker{ margin-bottom:12px }
.laurel{ width:34px; height:64px; color:var(--gold); flex:none }
.laurel--r{ transform:scaleX(-1) }
@media (max-width:599px){ .laurel{ width:26px; height:48px } }
.reviews__empty{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:24px; margin-top:24px }
.reviews__empty .section-lead{ margin-top:0 }
.reviews__lead{ margin:24px auto 0; text-align:center }
.rev-track{
  list-style:none; display:flex; gap:20px; margin-top:40px; padding:4px var(--gutter) 12px;
  margin-inline:calc(-1 * var(--gutter)); overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--gutter); scrollbar-width:none; overscroll-behavior-x:contain;
}
.rev-track::-webkit-scrollbar{ display:none }
.rev{ flex:none; width:min(72vw,280px); scroll-snap-align:center }
.phone{
  display:block; width:100%; padding:10px; border:1px solid var(--line-dark); border-radius:var(--r-phone);
  background:var(--ink-2); cursor:zoom-in; position:relative;
}
.phone::before{ content:""; position:absolute; left:50%; top:18px; width:56px; height:6px; margin-left:-28px; border-radius:3px; background:var(--ink-3); z-index:1 }
.phone__screen{ display:block; aspect-ratio:9/19.5; border-radius:20px; overflow:hidden; background:var(--ink-3) }
.phone__screen img{ width:100%; height:100%; object-fit:cover; object-position:top }
.phone.is-broken .phone__screen{
  background:
    linear-gradient(var(--burgundy),var(--burgundy)) 0 0/100% 14% no-repeat,
    linear-gradient(rgba(241,230,211,.12),rgba(241,230,211,.12)) 8% 24%/70% 7% no-repeat,
    linear-gradient(rgba(210,174,109,.2),rgba(210,174,109,.2)) 92% 36%/55% 7% no-repeat,
    linear-gradient(rgba(241,230,211,.12),rgba(241,230,211,.12)) 8% 48%/80% 7% no-repeat,
    linear-gradient(rgba(210,174,109,.2),rgba(210,174,109,.2)) 92% 60%/40% 7% no-repeat,
    var(--ink-3);
}
.phone.is-broken img{ display:none }
.rev__cap{ margin-top:12px; text-align:center; font:600 .75rem/1.4 var(--font-ui); letter-spacing:.14em; text-transform:uppercase; color:var(--gold) }
.rev-controls{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:24px }
.rev-count{ min-width:5ch; text-align:center; font-size:1.125rem; color:var(--gold) }
.rev-swipe{ display:none }
.reviews__more{ margin-top:28px; text-align:center }
@media (max-width:767px){ .rev-swipe{ display:inline } .rev-controls{ flex-wrap:wrap } }
@media (min-width:768px){ .rev{ width:240px } }
@media (min-width:1100px){ .rev{ width:260px } }

/* ---------- 12. Вопросы ---------- */
.faq{ padding-top:var(--pad-faq) }
.faq__grid{ display:grid; gap:40px }
.ask-card{
  margin-top:0; padding:24px; background:var(--paper-3); border:1px solid var(--line-cream); border-radius:var(--r-2);
  max-width:26rem;
}
.ask-card p{ margin:8px 0 18px; color:var(--muted-on-cream) }
.faq__list{ border-top:1px solid var(--line-cream) }
.qa{ border-bottom:1px solid var(--line-cream); transition:background-color var(--t-fast) }
.qa[open]{ background:var(--paper-2) }
.qa summary{
  display:grid; grid-template-columns:44px 1fr 28px; align-items:center; gap:8px; min-height:64px; padding:14px 8px 14px 0;
  cursor:pointer; list-style:none; -webkit-tap-highlight-color:transparent;
}
.qa summary::-webkit-details-marker{ display:none }
.qa summary:hover .qa__q{ color:var(--burgundy) }
.qa__n{ font-size:1.125rem; color:var(--gold-ink); padding-left:8px }
.qa__q{ font:600 1.0625rem/1.4 var(--font-ui); color:var(--text-on-cream); transition:color var(--t-fast) }
.qa__icon{ position:relative; width:28px; height:28px; border-radius:50%; box-shadow:inset 0 0 0 1px var(--burgundy); transition:transform 200ms var(--ease-out) }
.qa__icon::before,.qa__icon::after{ content:""; position:absolute; left:50%; top:50%; width:12px; height:1.5px; margin:-.75px 0 0 -6px; background:var(--burgundy) }
.qa__icon::after{ transform:rotate(90deg) }
.qa[open] .qa__icon{ transform:rotate(45deg) }
.qa__a{ padding:0 44px 22px 52px; max-width:calc(60ch + 96px); color:var(--muted-on-cream) }
@media (max-width:599px){ .qa__a{ padding:0 12px 20px 52px } }

.wave-wrap{ position:relative; margin-top:var(--pad-faq); line-height:0 }
.wave{ display:block; width:100%; height:clamp(56px,7vw,110px) }
.wave-sprig{ position:absolute; right:6%; bottom:calc(clamp(56px,7vw,110px) * .3); width:34px; height:64px; color:var(--gold-ornament); transform:rotate(18deg) }
@media (min-width:768px){ .wave-sprig{ width:50px; height:96px } }

@media (min-width:1100px){
  .faq__grid{ grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:auto 1fr; row-gap:32px }
  .faq__aside{ grid-column:1 / span 5; grid-row:1 }
  .ask-card{ grid-column:1 / span 5; grid-row:2; align-self:start; position:sticky; top:calc(var(--header-h) + 32px) }
  .faq__list{ grid-column:6 / span 7; grid-row:1 / span 2 }
}

/* ---------- 13. Финал ---------- */
.final{ position:relative; padding-block:var(--pad-final) 72px; margin-top:-1px }
.final::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:conic-gradient(from 160deg at 50% -6%, transparent 0deg, rgba(241,230,211,.085) 20deg, transparent 40deg, transparent 360deg);
}
.final__panel{
  position:relative; max-width:760px; margin-inline:auto; padding:clamp(36px,6vw,64px) clamp(22px,6vw,64px);
  background:var(--burgundy-deep); border-radius:var(--r-2); text-align:center; --grain-o:.08;
}
.final__panel::after{ content:""; position:absolute; inset:12px; border:1px solid rgba(210,174,109,.5); pointer-events:none }
.final__panel h2{ max-width:18ch; margin-inline:auto }
.final__text{ margin:20px auto 32px; max-width:34ch }
.final__panel .ticket{ position:relative; z-index:1 }
.final__alt{ margin-top:22px; color:var(--muted-on-dark) }
.final__alt a{ color:var(--text-on-dark); text-decoration-color:var(--gold); text-underline-offset:.25em; position:relative; z-index:1 }
.final__alt .sep{ margin:0 8px }

/* ---------- 14. Подвал ---------- */
.site-footer{ padding:24px 0 48px; border-top:1px solid var(--line-dark) }
.credits{ max-width:560px; margin:24px auto 0; display:grid; gap:14px }
.credits > div{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:baseline }
.credits dt{ text-align:right; font:600 .6875rem/1.4 var(--font-ui); letter-spacing:.2em; text-transform:uppercase; color:var(--muted-on-dark) }
.credits dd{ margin:0; font:500 1.125rem/1.3 var(--font-serif); color:var(--text-on-dark) }
@media (max-width:599px){
  .credits > div{ grid-template-columns:1fr; gap:2px; text-align:center }
  .credits dt{ text-align:center }
}
.site-footer .ornament{ margin-top:40px }
.footer__brand{ margin-top:40px; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center }
.footer__tagline{ font:italic 500 1.25rem/1.3 var(--font-serif); color:var(--text-on-dark) }
.footer__row{
  display:grid; gap:28px; margin-top:48px; padding-top:28px; border-top:1px solid var(--line-dark);
}
.footer__contacts{ display:flex; flex-direction:column; align-items:flex-start }
.footer__contacts .kicker{ margin-bottom:6px }
.footer__nav{ display:flex; flex-wrap:wrap; gap:4px 20px }
.footer__nav a{ display:inline-flex; align-items:center; min-height:44px; color:var(--text-on-dark); text-decoration:none; font-size:.9375rem }
.footer__nav a:hover{ text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:.25em }
.lang--footer{ margin-left:-6px }
.footer__rights{ margin-top:28px; font-size:.8125rem }
@media (min-width:900px){
  .footer__row{ grid-template-columns:1.2fr 1.5fr auto; align-items:start }
  .footer__nav{ padding-top:22px }
  .lang--footer{ padding-top:22px }
}
@media (max-width:1099px){
  .site-footer{ padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom) + 32px) }
}

/* ---------- 15. Нижняя панель WhatsApp ---------- */
.wa-bar{
  --tk-bg:var(--gold); --tk-bg-h:var(--gold-hover); --tk-fg:var(--ink); --focus:var(--gold);
  position:fixed; inset:auto 0 0 0; z-index:var(--z-bar);
  padding:6px var(--gutter) calc(6px + env(safe-area-inset-bottom));
  background:rgba(21,16,14,.96); box-shadow:inset 0 1px 0 rgba(210,174,109,.3);
  transition:transform 200ms var(--ease-out);
}
.wa-bar .ticket{ min-height:52px }
body.bar-hidden .wa-bar{ transform:translateY(110%) }
@media (min-width:1100px){ .wa-bar{ display:none } }

/* ---------- 16. Просмотр (диалог) ---------- */
.viewer{
  --focus:var(--gold); --tk-bg:var(--gold); --tk-bg-h:var(--gold-hover); --tk-fg:var(--ink);
  width:100%; max-width:none; height:100%; max-height:none; margin:0; padding:0; border:0;
  background:transparent; color:var(--text-on-dark); overflow-y:auto; overscroll-behavior:contain;
}
.viewer::backdrop{ background:rgba(11,8,7,.97) }
.viewer[open]{ display:block }
.viewer__frame{
  min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:safe center; gap:20px;
  padding:72px var(--gutter) calc(24px + env(safe-area-inset-bottom));
}
.viewer__close{ position:fixed; top:12px; right:var(--gutter); z-index:2; background:rgba(11,8,7,.6) }
.viewer__stage{ display:flex; justify-content:center; width:100%; touch-action:pan-y; touch-action:pan-y pinch-zoom }
.viewer__stage video{ width:min(100%, calc((100svh - 300px) * 16 / 9)); aspect-ratio:16/9; height:auto; max-height:none }
.viewer__stage video,.viewer__stage img{
  max-width:100%; max-height:74svh; background:#000;
  outline:1px solid rgba(210,174,109,.6); outline-offset:6px; box-shadow:var(--shadow-modal);
}
.viewer__stage img{ width:auto; height:auto }
.viewer__stage img.is-poster{ max-height:66svh }
.viewer__meta{ display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; max-width:36rem }
.viewer__label{ font:italic 500 1.25rem/1.3 var(--font-serif) }
.viewer__label .museum__no{ margin-right:8px }
.viewer__row{ display:flex; align-items:center; gap:18px }
.viewer__count{ min-width:5ch; font-size:1.125rem; color:var(--gold) }
.viewer.is-review .viewer__cta,.viewer.is-review .viewer__label{ display:none }
.viewer.is-single .viewer__row{ display:none }
@media (prefers-reduced-motion:no-preference){
  .viewer[open] .viewer__frame{ animation:dialog-in 220ms var(--ease-out) }
}
@keyframes dialog-in{ from{ opacity:0; transform:scale(.985) } to{ opacity:1; transform:none } }
@keyframes fade-in{ from{ opacity:0 } to{ opacity:1 } }

/* ---------- 17. Появление при прокрутке ---------- */
html.js .reveal{ opacity:0; transform:translateY(12px) }
html.js .reveal.is-in{ opacity:1; transform:none; transition:opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); transition-delay:var(--d,0ms) }
html.js .ornament .o-line{ transform-box:fill-box }

/* свет гаснет: вход главного экрана */
@media (prefers-reduced-motion:no-preference){
  html.js .hero__content > *{ animation:rise 600ms var(--ease-out) both }
  html.js .hero__content > :nth-child(1){ animation-delay:300ms }
  html.js .hero__content > :nth-child(2){ animation-delay:410ms }
  html.js .hero__content > :nth-child(3){ animation-delay:520ms }
  html.js .hero__content > :nth-child(4){ animation-delay:630ms }
  html.js .hero__content > :nth-child(5){ animation-delay:740ms }
}
@keyframes rise{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; transition-delay:0ms !important }
  html.js .reveal{ opacity:1; transform:none }
  .leader__wedge{ --p:1 }
  html.js .step:not(.is-in) .leader__num{ opacity:1 }
}

/* ---------- 18. Доработки после проверки ---------- */
/* Короткие экраны ноутбуков: заголовок и кнопка помещаются на первый экран */
@media (min-width:768px) and (max-height:820px){
  .hero .h1__caps{ font-size:min(calc(var(--fs-h1) * var(--h-scale)), 10vh) }
  .hero .h1__sub{ font-size:min(calc(var(--fs-h1-sub) * var(--h-scale)), 6vh) }
  .hero__lead{ margin-top:12px }
  .hero__actions{ margin-top:20px }
  .hero__note{ display:none }
}
@media (min-width:768px) and (max-height:680px){
  .hero .h1__caps{ font-size:min(calc(var(--fs-h1) * var(--h-scale)), 9vh) }
  .hero__content{ padding-top:calc(var(--header-h) + 16px) }
}
/* Телефоны: текст не заходит под кнопку паузы, мелкий текст на видео читается */
@media (max-width:767px){
  .hero__content{ padding-top:calc(var(--header-h) + 64px) }
  .hero__scrim{ background:
    linear-gradient(to top, rgba(21,16,14,.97) 0%, rgba(21,16,14,.86) 42%, rgba(21,16,14,.7) 64%, rgba(21,16,14,0) 84%),
    linear-gradient(to bottom, rgba(21,16,14,.55) 0%, rgba(21,16,14,0) 30%); }
  .hero.has-media .hero__kicker{ position:relative }
  .hero.has-media .hero__kicker::before{
    content:""; position:absolute; z-index:-1; pointer-events:none;
    top:-16px; bottom:-16px; left:calc(-1 * var(--gutter)); right:-24px;
    background:linear-gradient(90deg, rgba(21,16,14,.8), rgba(21,16,14,.8) 70%, rgba(21,16,14,0));
    -webkit-mask:linear-gradient(transparent, #000 16px, #000 calc(100% - 16px), transparent);
            mask:linear-gradient(transparent, #000 16px, #000 calc(100% - 16px), transparent);
  }
}
/* Мелкий текст поверх видео: кремовый вместо приглушённого (контраст AA на любых кадрах) */
.site-header:not(.is-solid) .lang button,
.site-header:not(.is-solid) .lang button[aria-pressed="true"]{ color:var(--text-on-dark); text-decoration-color:var(--gold) }
.hero.has-media .hero__kicker{ color:var(--text-on-dark) }
.hero.has-media .kicker__icon{ color:var(--gold) }

/* Окно фильма на телефоне, повёрнутом боком: видео занимает почти всю высоту */
@media (orientation:landscape) and (max-height:520px){
  .viewer__frame{ justify-content:flex-start; gap:14px }
  .viewer__stage video{ width:min(100%, calc((100svh - 96px) * 16 / 9)); max-height:none }
}

/* Карточки поводов: картинка открывает пример фильма */
.occ__poster.has-film{ cursor:pointer }
.occ__watch{
  position:absolute; inset:0; z-index:1; display:block; width:100%; height:100%; padding:0; border:0;
  background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.occ__watch .poster__play{ right:8px; bottom:8px; width:36px; height:36px }
.occ__watch .poster__play svg{ width:15px; height:15px }
.occ__watch:is(:hover,:focus-visible) .poster__play{ background:var(--gold); color:var(--ink) }
.occ__watch:focus-visible{ outline:2px solid var(--burgundy); outline-offset:-4px }
@media (min-width:768px){ .occ__watch .poster__play{ width:44px; height:44px; right:12px; bottom:12px } }

/* Узкие телефоны: описание поводов на всю ширину карточки */
.occ .card-title{ overflow-wrap:anywhere }
@media (max-width:379px){
  .occ{ grid-template-columns:84px minmax(0,1fr) }
  .occ__poster{ grid-row:1 / span 2 }
  .occ__text{ grid-column:1 / -1; grid-row:3; margin-top:12px }
}
@media (max-width:399px){
  .museum__cat{ letter-spacing:.06em }
  .museum__title{ -webkit-line-clamp:3 }
}

/* Списки шагов на телефоне — в две колонки, короче страница */
@media (max-width:767px){
  .credits-list{ grid-template-columns:1fr 1fr; column-gap:16px }
  .credits-list li{ font-size:.875rem; padding:7px 0 7px 16px }
  .credits-list li::before{ top:calc(7px + .72em - 3px) }
}

/* Беззвучная петля в шаге 5 */
.print__video{ display:block; width:100%; aspect-ratio:3/4; object-fit:cover; background:var(--ink-2) }

/* Плитка-приглашение в конце галереи: заполняет свободные места последнего ряда при любом числе фильмов */
.work--cta{ display:flex }
.work-cta{
  --tk-bg:var(--gold); --tk-bg-h:var(--gold-hover); --tk-fg:var(--ink);
  flex:1; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:18px;
  min-height:100%; padding:28px 24px; border:1px solid var(--keyline); border-radius:var(--r-1);
  color:var(--text-on-dark); text-decoration:none; position:relative; isolation:isolate;
  background:linear-gradient(180deg, rgba(78,14,26,.55), rgba(21,16,14,0) 70%);
  transition:border-color var(--t-fast);
}
.work-cta::after{ content:""; position:absolute; inset:8px; border:1px solid rgba(210,174,109,.25); pointer-events:none }
.work-cta:hover{ border-color:var(--gold) }
.work-cta__icon{ width:34px; height:34px; color:var(--gold) }
.work-cta__title{ font:italic 500 clamp(1.25rem,1.1rem + .6vw,1.625rem)/1.25 var(--font-serif); max-width:18ch; text-wrap:balance }
.work-cta__btn{ pointer-events:none }
/* 2 колонки: на чётном месте — заполняет свободную клетку; на нечётном — полоса во всю ширину */
.work--cta:nth-child(odd){ grid-column:1 / -1 }
.work--cta:nth-child(odd) .work-cta{ align-items:center; text-align:center; min-height:auto }
@media (min-width:600px){
  .work--cta:nth-child(odd){ grid-column:auto }
  .work--cta:nth-child(odd) .work-cta{ align-items:flex-start; text-align:left; min-height:100% }
  .work--cta:nth-child(3n+2){ grid-column:span 2 }
  .work--cta:nth-child(3n+3){ grid-column:span 1 }
  .work--cta:nth-child(3n+1){ grid-column:1 / -1 }
  .work--cta:nth-child(3n+1) .work-cta{ align-items:center; text-align:center; min-height:auto }
}
@media (min-width:900px){ .work--cta{ transform:none !important } }

/* ---------- 17. Правовые ссылки в подвале и баннер cookie ---------- */
.footer__legal{ display:flex; flex-wrap:wrap; gap:0 20px; margin-top:16px }
.footer__legal a,
.footer__legal button{
  display:inline-flex; align-items:center; min-height:44px; padding:0; border:0; background:none; cursor:pointer;
  font:400 .8125rem/1.3 var(--font-ui); color:var(--muted-on-dark); text-decoration:none;
}
.footer__legal a:hover,
.footer__legal button:hover{ color:var(--text-on-dark); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:.25em }
.footer__entity{ margin-top:8px; font-size:.75rem; color:var(--muted-on-dark) }

.consent{
  --focus:var(--gold);
  position:fixed; z-index:70; left:var(--gutter); right:var(--gutter); bottom:calc(12px + env(safe-area-inset-bottom));
  max-width:440px; padding:20px 20px 18px; border:1px solid var(--line-dark-gold); border-radius:var(--r-2);
  background:rgba(21,16,14,.97); color:var(--text-on-dark); box-shadow:var(--shadow-modal);
}
.consent__title{ font:600 var(--fs-kicker)/1.4 var(--font-ui); letter-spacing:var(--kicker-track); text-transform:uppercase; color:var(--gold); margin-bottom:8px }
.consent__text{ font-size:.9375rem; line-height:1.5; color:var(--text-on-dark) }
.consent__more{ color:var(--text-on-dark); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:.25em }
.consent__actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px }
.consent__btn{
  min-height:48px; padding:8px 12px; border:1px solid var(--gold); border-radius:var(--r-2);
  background:transparent; color:var(--text-on-dark); font:600 .9375rem/1.2 var(--font-ui); cursor:pointer;
  transition:background-color var(--t-fast);
}
.consent__btn:hover{ background:rgba(210,174,109,.14) }
@media (max-width:1099px){ body.has-consent .wa-bar{ transform:translateY(110%) } }
@media (min-width:600px){ .consent{ right:auto } }