:root{
  --bg:#0b0b0d; --bg2:#141417; --line:rgba(255,255,255,.12);
  --text:#f3f1ee; --muted:#a6a39f; --red:#ffffff; --gold:#d9d4cc;
  --display:'Oswald',Impact,sans-serif; --body:'Manrope',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:#060607 url(img/pattern.jpg) repeat;background-size:350px auto;color:var(--text);font:16px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{width:min(1760px,100% - 2*clamp(16px,4.5vw,96px));margin-inline:auto}
html{font-size:clamp(16px,.35vw + 11px,19px)}
body{font-size:1rem}

/* шапка */
.top{position:fixed;inset:0 0 auto;z-index:50;transition:background .4s, padding .4s;padding:22px 0}
.top.solid{background:rgba(11,11,13,.86);backdrop-filter:blur(14px);padding:10px 0;border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:32px}
.logo img{height:clamp(46px,3.4vw,64px);width:auto;transition:height .4s}
.top.solid .logo img{height:36px}
.nav{display:flex;gap:28px;margin-left:auto;font-weight:600;font-size:15px}
.nav a{position:relative;opacity:.85}
.nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:var(--red);transition:right .3s}
.nav a:hover{opacity:1}.nav a:hover:after{right:0}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border-radius:999px;font-weight:800;font-size:15px;letter-spacing:.02em;transition:transform .2s, background .2s, box-shadow .2s;cursor:pointer;border:0}
.btn-red{background:#fff;color:#000;box-shadow:0 10px 30px -12px rgba(255,255,255,.45)}
.btn-red:hover{transform:translateY(-2px);box-shadow:0 18px 44px -12px rgba(255,255,255,.6)}
.btn-ghost{border:1.5px solid rgba(255,255,255,.5);color:#fff}
.btn-ghost:hover{background:#fff;color:#000}
.burger{display:none;margin-left:auto;background:none;border:0;color:#fff;font-size:28px}

/* первый экран */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.slide.on{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;object-position:60% 40%;transform:scale(1.12)}
.slide.on img{animation:kb 9s ease-out forwards}
@keyframes kb{to{transform:scale(1.0)}}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,6,7,.85) 0%,rgba(6,6,7,.25) 30%,rgba(6,6,7,0) 50%),linear-gradient(180deg,rgba(6,6,7,.55) 0%,rgba(6,6,7,0) 18%);pointer-events:none}
.caption{text-shadow:0 2px 24px rgba(0,0,0,.75),0 1px 3px rgba(0,0,0,.6)}
.caption{position:absolute;z-index:2;left:0;right:0;bottom:180px}
.kicker{display:inline-flex;align-items:center;gap:10px;font-weight:800;text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:var(--gold)}
.kicker:before{content:"";width:34px;height:2px;background:var(--gold)}
.date{font:700 clamp(54px,9vw,128px)/.9 var(--display);text-transform:uppercase;margin:18px 0 6px;letter-spacing:-.01em}
.date small{font-size:.38em;color:var(--muted);font-weight:500;letter-spacing:.02em;margin-left:.3em}
.show-title{font:500 clamp(24px,3.2vw,40px)/1.15 var(--display);max-width:720px}
.venue{color:var(--muted);margin:10px 0 28px}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.caption .in > *{opacity:0;transform:translateY(24px)}
.caption .in.go > *{animation:up .8s cubic-bezier(.2,.7,.2,1) forwards}
.caption .in.go > *:nth-child(2){animation-delay:.08s}.caption .in.go > *:nth-child(3){animation-delay:.16s}
.caption .in.go > *:nth-child(4){animation-delay:.24s}.caption .in.go > *:nth-child(5){animation-delay:.32s}
@keyframes up{to{opacity:1;transform:none}}
.tabs{position:absolute;z-index:3;left:0;right:0;bottom:36px}
.tabs .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.4vw,28px)}
.tab{background:none;border:0;color:var(--muted);text-align:left;cursor:pointer;font:600 13px/1.35 var(--body);padding-top:14px;position:relative}
.tab:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:rgba(255,255,255,.18)}
.tab i{position:absolute;top:0;left:0;height:2px;width:0;background:var(--red)}
.tab.on{color:#fff}.tab.on i{animation:bar 7s linear forwards}
@keyframes bar{to{width:100%}}
.tab b{display:block;font:700 18px var(--display);color:#fff;letter-spacing:.02em}

/* секции */
section{padding:110px 0;position:relative}
.solidbg{background:rgba(6,6,7,.82)}
.head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:46px}
h2{font:700 clamp(40px,6vw,76px)/.95 var(--display);text-transform:uppercase}
h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px #fff}
.sub{color:var(--muted);max-width:32em}
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.vis{opacity:1;transform:none}

/* афиша: карточки */
.rows{display:grid;gap:18px}
.ev{position:relative;display:grid;grid-template-columns:clamp(120px,9vw,190px) clamp(130px,10vw,210px) 1fr auto;align-items:center;gap:30px;padding:18px 30px 18px 18px;
  border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.14);isolation:isolate}
.ev-bg{position:absolute;inset:-30px;z-index:-1;background:var(--bg) center/cover;filter:blur(26px) saturate(1.2) brightness(.42);transition:filter .5s, transform .8s}
.ev:hover .ev-bg{filter:blur(18px) saturate(1.35) brightness(.6);transform:scale(1.05)}
.ev-media{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:427/604;box-shadow:0 18px 40px -12px rgba(0,0,0,.8);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.ev:hover .ev-media{transform:translateY(-6px) rotate(-2deg) scale(1.04)}
.ev-poster{width:100%;height:100%;object-fit:cover}
.ev-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.ev-media.playing .ev-video{opacity:1}
.ev-media.has-more{cursor:pointer}
.ev-more{position:absolute;left:8px;right:8px;bottom:8px;padding:7px 6px;border-radius:99px;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);
  font:700 11px var(--body);letter-spacing:.08em;text-transform:uppercase;text-align:center;opacity:0;transform:translateY(6px);transition:.3s}
.ev:hover .ev-more,.ev-media:focus .ev-more{opacity:1;transform:none}
.ev-info h3 a{background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .35s}
.ev-info h3 a:hover{background-size:100% 2px}
.ev-date b{display:block;font:700 clamp(60px,5vw,100px)/.9 var(--display)}
.ev-date span{display:block;font:600 22px var(--display);text-transform:uppercase;letter-spacing:.04em}
.ev-date small{display:block;color:#d6d2cc;font-size:14px;margin-top:6px;text-transform:uppercase;letter-spacing:.1em}
.ev-info h3{font:500 clamp(24px,2.3vw,44px)/1.1 var(--display)}
.ev-info p{color:#dcd8d2;margin-top:8px}
.ev-info .age{font-size:13px;color:#b9b5af;margin-top:4px}

/* о театре */
.quote{font:500 clamp(28px,3.4vw,44px)/1.1 var(--display);margin-bottom:22px}
.quote em{font-style:normal;color:var(--gold)}

/* фото-лента */
.marquee{overflow:hidden;padding:0}
.track{display:flex;gap:14px;width:max-content;animation:scroll 60s linear infinite}
.track.rev{animation-direction:reverse;margin-top:14px}
.track img{height:clamp(200px,16vw,340px);width:auto;border-radius:12px}
.marquee:hover .track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}

/* контакты */
.contact{display:grid;grid-template-columns:1fr 1.3fr;gap:40px;align-items:stretch}
.box{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:36px}
.box h3{font:500 28px var(--display);margin-bottom:6px}
.box p{color:var(--muted)}
.links{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.links a{border:1px solid var(--line);padding:10px 16px;border-radius:99px;font-weight:600;font-size:14px}
.links a:hover{background:#fff;color:#000}
.map{border-radius:18px;overflow:hidden;min-height:clamp(380px,28vw,560px);border:1px solid var(--line)}
.map iframe{width:100%;height:100%;border:0;filter:invert(.92) hue-rotate(180deg) saturate(.6)}

.sticky{display:none}
.dots{display:none;position:absolute;z-index:3;left:16px;bottom:56px;gap:8px}
.dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);transition:.3s}
.dots i.on{width:26px;border-radius:4px;background:#fff}
.mmenu{position:fixed;inset:0;z-index:80;background:rgba(6,6,7,.97) url(img/pattern.jpg);display:flex;flex-direction:column;justify-content:center;gap:18px;padding:32px;
  transform:translateY(-100%);transition:transform .5s cubic-bezier(.7,0,.2,1)}
.mmenu.open{transform:none}
.mmenu a{font:700 44px/1.1 var(--display);text-transform:uppercase}
.mmenu .x{position:absolute;top:22px;right:22px;background:none;border:0;color:#fff;font-size:34px}


/* «Про театр» — бархатный красный из палитры афиш */
.paper{background:#160204 var(--about-bg,url(img/bg-about.jpg)) 70% 50%/cover no-repeat;color:#fff;position:relative;overflow:hidden;isolation:isolate}
.paper:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(12,2,4,.82) 0%,rgba(12,2,4,.55) 42%,rgba(12,2,4,.15) 75%,rgba(12,2,4,.35) 100%),linear-gradient(180deg,rgba(6,6,7,.6) 0%,transparent 14%,transparent 86%,rgba(6,6,7,.7) 100%)}
.paper .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.05fr;gap:70px;align-items:center}
.kicker.dark{color:#ffd9d4}.kicker.dark:before{background:#ffd9d4}
.paper .quote{color:#fff;margin-top:18px}.paper .quote em{color:transparent;-webkit-text-stroke:1.2px #fff}
.atext{color:#f1d9d6;font-size:1.1rem;max-width:34em}
.sign{font:500 22px var(--display);margin-top:26px;letter-spacing:.04em}
.frames{position:relative;height:clamp(420px,34vw,720px)}
.fr{position:absolute;background:#fff;padding:12px 12px 46px;box-shadow:0 30px 60px -25px rgba(0,0,0,.45);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.fr img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.fr{box-shadow:0 40px 70px -25px rgba(0,0,0,.85)}
.fr:hover{transform:rotate(0) scale(1.03)!important;z-index:5}
.fr1{width:72%;height:62%;left:4%;top:4%;transform:rotate(-3deg);z-index:2}
.fr2{width:42%;height:46%;right:0;top:0;transform:rotate(5deg);z-index:1}
.fr3{width:46%;height:44%;right:8%;bottom:0;transform:rotate(-1.5deg);z-index:3}
.tape{position:absolute;top:-12px;left:50%;width:96px;height:26px;margin-left:-48px;background:rgba(235,225,210,.8);transform:rotate(-4deg);box-shadow:0 2px 4px rgba(0,0,0,.1)}
/* фото — как киноплёнка */
.film{background:#000;padding:22px 0;position:relative;margin-top:14px}
.film:before,.film:after{content:"";position:absolute;left:0;right:0;height:10px;background:repeating-linear-gradient(90deg,transparent 0 14px,rgba(255,255,255,.75) 14px 26px);opacity:.55}
.film:before{top:6px}.film:after{bottom:6px}
.film .track{margin-top:0}
.track img{cursor:zoom-in;border-radius:4px}
.lb{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.94);display:none;place-items:center;padding:24px}
.lb.on{display:grid}
.lb img{max-height:88vh;max-width:100%;border:10px solid #fff;box-shadow:0 30px 80px #000}
.lb button{position:absolute;top:18px;right:22px;background:none;border:0;color:#fff;font-size:32px;cursor:pointer}
/* контакты на фоне фото зала */
.hallbg{background:linear-gradient(180deg,rgba(6,6,7,.92),rgba(6,6,7,.72) 40%,rgba(6,6,7,.92)),var(--hall,url(img/hall.jpg)) center/cover fixed}
.hallbg .box{background:rgba(10,10,12,.72);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.35);outline:1px solid rgba(255,255,255,.12);outline-offset:8px}
.hallbg .map{border:10px solid #fff;border-radius:6px;box-shadow:0 30px 60px -20px #000}
.coop{display:flex;flex-direction:column;margin-top:30px;padding:18px 20px;border-radius:14px;background:#fff;color:#000;transition:transform .2s}
.coop:hover{transform:translateY(-2px)}
.coop span{font-size:13px;color:#555}.coop b{font:600 20px var(--display)}
/* орнамент у заголовков */
.head h2{position:relative}

/* «Наші обличчя»: единый фон-сцена, рамка-афиша, значок роли */
.team{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2vw,36px)}
.member{margin:0}
.stage{position:relative;aspect-ratio:4/5;border-radius:6px;overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse 60% 45% at 50% 30%,rgba(255,236,220,.30),transparent 70%),
             linear-gradient(180deg,#141113,#0b0a0b)}
.stage:before{content:"";position:absolute;inset:0;z-index:-1;background:url(img/pattern.jpg);background-size:260px;mix-blend-mode:screen;opacity:.35}
.stage:after{content:"";position:absolute;inset:10px;z-index:2;border:1px solid rgba(255,255,255,.45);pointer-events:none;
  background:linear-gradient(#fff,#fff) top left/16px 2px,linear-gradient(#fff,#fff) top left/2px 16px,
             linear-gradient(#fff,#fff) top right/16px 2px,linear-gradient(#fff,#fff) top right/2px 16px,
             linear-gradient(#fff,#fff) bottom left/16px 2px,linear-gradient(#fff,#fff) bottom left/2px 16px,
             linear-gradient(#fff,#fff) bottom right/16px 2px,linear-gradient(#fff,#fff) bottom right/2px 16px;background-repeat:no-repeat;transition:border-color .4s}
.stage .clip{position:absolute;inset:11px;overflow:hidden;z-index:1}
.stage img{position:absolute;left:-11px;top:-11px;width:calc(100% + 22px);height:calc(100% + 22px);object-fit:cover;transform-origin:50% 30%;transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .6s;filter:saturate(.95) contrast(1.03)}
.member:hover .stage img{transform:translateY(-6px) scale(1.03);filter:saturate(1.05) contrast(1.06)}
.member:hover .stage:after{border-color:#fff}
.role-ic{position:absolute;z-index:3;top:20px;right:20px;width:42px;height:42px;border-radius:50%;background:rgba(10,10,12,.7);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.5);display:grid;place-items:center;z-index:2}
.role-ic svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.member figcaption{text-align:center;margin-top:16px}
.member b{display:block;font:500 clamp(20px,1.5vw,28px)/1.1 var(--display);text-transform:uppercase;letter-spacing:.03em}
.member figcaption span{display:block;margin-top:6px;color:var(--muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.16em}

@media (max-width:980px){
  .nav,.top .btn{display:none}.burger{display:block}
  .tabs{display:none}.caption{bottom:110px}
  .date small{display:block;margin:10px 0 0;font-size:20px}
  .dots{display:flex}
  .ev{grid-template-columns:96px 1fr;gap:14px 18px;padding:14px}
  .ev-poster{width:96px;grid-row:span 2}
  .ev{grid-template-columns:96px 1fr}
  .ev-date b{font-size:46px}.ev-date span{font-size:17px}
  .ev-info{grid-column:2}
  .ev-buy{grid-column:1/-1;justify-content:center}
  .ev.soon{grid-template-columns:96px 1fr}
  .head{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:30px}
  .about .wrap,.contact,.paper .wrap{grid-template-columns:1fr}
  .frames{height:420px}.hallbg{background-attachment:scroll}
  .team{grid-template-columns:repeat(2,1fr)}
  .member:last-child{grid-column:1/-1;width:calc(50% - 8px);justify-self:center}
  .track img{height:170px}
  section{padding:80px 0}
  .sticky{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;align-items:center;justify-content:space-between;gap:10px;
    background:rgba(20,20,23,.92);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:16px;padding:10px 10px 10px 16px;
    transform:translateY(140%);transition:transform .4s}
  .sticky.show{transform:none}
  .sticky small{display:block;color:var(--muted);font-size:12px}
  .sticky b{font:600 16px var(--display)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* пустая афиша: «Найближчим часом» */
.ev.soon{grid-template-columns:clamp(120px,9vw,190px) 1fr auto}
.ev.soon .ev-bg{inset:0;filter:none;background:radial-gradient(ellipse 60% 120% at 12% 50%,rgba(165,18,31,.7),transparent 70%),linear-gradient(90deg,rgba(40,4,8,.9),rgba(10,9,10,.95)),url(img/pattern.jpg) 0 0/350px auto}
.ev.soon:hover .ev-bg{filter:brightness(1.15);transform:none}
.ev.soon .kicker{margin-bottom:12px}
.ev.soon .ev-info p{max-width:40em}
.btn.off{background:rgba(255,255,255,.12);color:#e9e6e2;box-shadow:none;cursor:default;border:1.5px dashed rgba(255,255,255,.45);text-shadow:none}
.btn.off:hover{transform:none;box-shadow:none}

/* низ страницы — театральный занавес */
.foot{position:relative;margin-top:0;padding:clamp(150px,13vw,240px) 0 44px;color:#fff;overflow:hidden;isolation:isolate;
  background:#0b0607 var(--foot-bg,url(img/bg-footer.jpg)) 50% 62%/cover no-repeat}
.foot:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,6,7,1) 0%,rgba(6,6,7,0) 22%,rgba(6,6,7,.15) 55%,rgba(6,4,5,.88) 100%)}
.foot .grid{display:grid;grid-template-columns:auto 1fr auto;gap:50px;align-items:center}
.foot .flogo img{height:clamp(70px,6vw,110px);width:auto}
.foot nav{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:center;font:500 clamp(18px,1.4vw,24px) var(--display);text-transform:uppercase;letter-spacing:.04em}
.foot nav a{opacity:.9}.foot nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:6px}
.fsoc{display:flex;gap:12px}
.fsoc a{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.5);display:grid;place-items:center;transition:.25s}
.fsoc a:hover{background:#fff}.fsoc a:hover svg{stroke:#000}
.fsoc svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.foot .bottom{margin-top:56px;padding-top:22px;border-top:1px solid rgba(255,255,255,.22);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#f1d0cc;font-size:14px}
.foot .bottom b{font:500 16px var(--display);letter-spacing:.06em;text-transform:uppercase;color:#fff}

/* страница 404 */
.nf{min-height:100svh;display:grid;place-items:center;text-align:center;padding:120px 16px}
.nf b{display:block;font:700 clamp(90px,16vw,220px)/.9 var(--display)}
.nf p{color:var(--muted);margin:14px 0 30px}

@media (max-width:980px){
  .foot{padding:90px 0 110px}
  .foot .grid{grid-template-columns:1fr;justify-items:center;text-align:center;gap:30px}
  .foot .bottom{justify-content:center;text-align:center}
}

/* правки после ревизии дизайна */
.head .kicker{margin-bottom:14px}
.head h2{line-height:.95}
.ev-info p{font-size:1rem}
.ev-info .age{font-size:.85rem;letter-spacing:.04em}
.box{display:flex;flex-direction:column;justify-content:center}
.nav a.on{opacity:1}.nav a.on:after{right:0}
.sticky.hide{transform:translateY(140%)!important}

/* «Чому варто прийти» */
.why{padding-top:40px}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,34px)}
.why-item{position:relative;padding:clamp(28px,2.6vw,46px);border-radius:20px;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.12);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .4s,opacity .9s}
.why-item:before{content:"";position:absolute;inset:auto -30% -60% -30%;height:90%;z-index:-1;
  background:radial-gradient(ellipse at 50% 100%,rgba(190,18,30,.45),transparent 65%);opacity:.55;transition:opacity .5s}
.why-item:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.35)}
.why-item:hover:before{opacity:1}
.why-num{display:block;font:700 clamp(64px,6vw,110px)/.85 var(--display);color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.55);margin-bottom:26px;letter-spacing:-.02em}
.why-item h3{font:500 clamp(22px,1.8vw,32px)/1.12 var(--display);margin-bottom:12px}
.why-item p{color:#cdc8c2;font-size:1.02rem}
@media (max-width:980px){.why-grid{grid-template-columns:1fr}.why{padding-top:20px}.why-num{margin-bottom:14px}}

/* окно «Про виставу» */
.sp-modal{position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:clamp(10px,3vw,40px);visibility:hidden;opacity:0;transition:opacity .35s,visibility .35s}
.sp-modal.on{visibility:visible;opacity:1}
.sp-back{position:absolute;inset:0;background:rgba(4,3,4,.82);backdrop-filter:blur(8px)}
.sp-box{position:relative;width:min(1180px,100%);max-height:calc(100svh - 2*clamp(10px,3vw,40px));overflow:auto;border-radius:22px;
  background:#0d0b0c url(img/pattern.jpg);background-size:300px;border:1px solid rgba(255,255,255,.16);box-shadow:0 40px 120px #000;
  transform:translateY(24px) scale(.98);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.sp-modal.on .sp-box{transform:none}
.sp-body{display:grid;grid-template-columns:minmax(260px,.85fr) 1.15fr;gap:clamp(22px,3vw,48px);padding:clamp(18px,2.6vw,40px);
  background:radial-gradient(ellipse 70% 60% at 15% 100%,rgba(165,18,31,.35),transparent 70%)}
.sp-media{align-self:start;position:sticky;top:0;border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -20px #000;background:#000}
.sp-media>img{display:block;width:100%;max-height:calc(100svh - 140px);object-fit:contain;background:#000}
.sp-stage{position:relative;background:#000;border-radius:14px;overflow:hidden;height:min(78svh,760px)}
.sp-v{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;opacity:0;pointer-events:none;transition:opacity .4s}
.sp-v.on{opacity:1;pointer-events:auto}
.sp-sound{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);z-index:3;padding:10px 18px;border-radius:99px;border:0;background:#fff;color:#000;font:700 14px var(--body);cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.sp-nav{position:absolute;top:50%;z-index:3;width:44px;height:44px;margin-top:-22px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.55);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.sp-nav.prev{left:10px}.sp-nav.next{right:10px}
.sp-nav:hover{background:#fff;color:#000}
.sp-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px}
.sp-th{flex:0 0 auto;height:70px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:#000;cursor:pointer;opacity:.6;transition:.25s}
.sp-th img{height:100%;width:auto;display:block}
.sp-th.on,.sp-th:hover{opacity:1;border-color:#fff}
.sp-title{font:700 clamp(30px,3.2vw,52px)/1 var(--display);text-transform:uppercase;margin:14px 0 12px}
.sp-tag{font:500 clamp(18px,1.5vw,24px)/1.3 var(--display);color:#f3c9c4;margin-bottom:18px}
.sp-desc{color:#dcd8d2;margin-bottom:12px}
.sp-list{list-style:none;display:grid;gap:10px;margin:20px 0}
.sp-list li{position:relative;padding-left:34px;font-weight:600}
.sp-list li:before{content:"";position:absolute;left:0;top:.18em;width:22px;height:22px;border-radius:50%;border:1.5px solid #fff;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.sp-credits{white-space:pre-line;color:var(--muted);font-size:.92rem;margin:14px 0}
.sp-meta{font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:16px 0 22px}
.sp-dates{display:grid;gap:10px}
.sp-date{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 12px 12px 18px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.sp-date b{font:700 20px var(--display);text-transform:uppercase;margin-right:6px}
.sp-date small{display:block;color:var(--muted);font-size:.8rem}
.sp-soon{color:#f3c9c4;font-weight:600}
.sp-x{position:sticky;float:right;top:12px;margin:12px 12px -50px 0;z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.6);color:#fff;font-size:20px;cursor:pointer}
.sp-x:hover{background:#fff;color:#000}
body.lock{overflow:hidden}
@media (max-width:980px){
  .sp-body{grid-template-columns:1fr}
  .sp-media{position:relative;width:auto;justify-self:center;box-shadow:none;background:none}
  .sp-media>img{max-height:52svh;width:auto;max-width:100%;border-radius:12px}
  .sp-media{width:100%}
  .sp-stage{height:62svh}
  .sp-title{font-size:30px}
  .sp-date{flex-direction:column;align-items:stretch}.sp-date .btn{justify-content:center}
}

/* без дат: постеры спектаклей → окно «Про виставу» */
.repert{margin-top:46px}
.repert .kicker{margin-bottom:20px}
.repert-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(14px,1.6vw,28px)}
.repert-item{background:none;border:0;color:#fff;cursor:pointer;text-align:left;font:inherit;padding:0}
.repert-item img{width:100%;aspect-ratio:427/604;object-fit:cover;border-radius:12px;box-shadow:0 18px 40px -14px #000;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.repert-item:hover img{transform:translateY(-6px) rotate(-1.5deg)}
.repert-item span{display:block;margin-top:12px;font:500 18px/1.2 var(--display)}
@media (max-width:980px){.repert-grid{grid-template-columns:repeat(2,1fr)}}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* «Відео» — лента сторис */
.clips{padding-bottom:40px}
.clips{padding-top:90px}
.clips-box{position:relative}
.ca{position:absolute;top:50%;z-index:3;width:54px;height:54px;margin-top:-27px;border-radius:50%;border:1px solid rgba(255,255,255,.45);
  background:rgba(10,10,12,.75);backdrop-filter:blur(6px);color:#fff;font-size:30px;line-height:1;cursor:pointer;transition:.25s}
.ca.prev{left:-27px}.ca.next{right:-27px}
.ca:hover{background:#fff;color:#000}
.ca:disabled{opacity:.18;cursor:default;pointer-events:none}
.ca[hidden]{display:none}
.clips-rail{display:flex;gap:clamp(12px,1.4vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 2px 22px;scrollbar-width:none}
.vclip:first-child{margin-left:auto}.vclip:last-child{margin-right:auto}
.clips-rail::-webkit-scrollbar{display:none}
.vclip{flex:0 0 clamp(200px,17vw,300px);aspect-ratio:9/16;position:relative;border:0;padding:0;border-radius:18px;overflow:hidden;cursor:pointer;scroll-snap-align:start;
  background:#111;box-shadow:0 24px 50px -24px #000;outline:1px solid rgba(255,255,255,.14);outline-offset:-1px;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.vclip:hover{transform:translateY(-8px)}
.vclip img,.vclip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vclip video{opacity:0;transition:opacity .5s}
.vclip.live video{opacity:1}
.vclip:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 35%);pointer-events:none}
.clip-play{position:absolute;left:14px;bottom:14px;z-index:2;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;transition:transform .3s}
.vclip:hover .clip-play{transform:scale(1.12)}
.clip-play svg{width:20px;height:20px;fill:#000;margin-left:3px}

/* полноэкранный просмотр «как сторис» */
.story{position:fixed;inset:0;z-index:130;background:rgba(0,0,0,.96);display:grid;place-items:center;visibility:hidden;opacity:0;transition:opacity .3s,visibility .3s}
.story.on{visibility:visible;opacity:1}
.story video{height:min(100svh,calc(100vw * 16 / 9));max-width:100vw;aspect-ratio:9/16;object-fit:contain;background:#000;border-radius:clamp(0px,1.4vw,16px)}
.story-bars{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:min(calc(100svh * 9 / 16) - 24px,calc(100vw - 24px));display:flex;gap:4px;z-index:3}
.story-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.story-bars b{display:block;height:100%;width:0;background:#fff}
.story-bars i.done b{width:100%}
.story-x,.story-snd{position:absolute;top:30px;z-index:4;width:44px;height:44px;border-radius:50%;border:0;background:rgba(0,0,0,.45);color:#fff;font-size:20px;cursor:pointer}
.story-x{right:18px}.story-snd{right:70px}
.story-tap{position:absolute;top:80px;bottom:80px;width:35%;z-index:2;background:none;border:0;cursor:pointer}
.story-tap.prev{left:0}.story-tap.next{right:0}
@media (max-width:980px){.ca{display:none}.vclip{flex-basis:46vw}.clips{padding-top:60px}}

/* ===== эффекты ===== */
/* занавес при первом входе */
.intro{position:fixed;inset:0;z-index:300;pointer-events:none;display:none}
.intro-on .intro{display:block;pointer-events:auto;cursor:pointer}
.intro-on body{overflow:hidden}
.intro{--iw:max(100vw,179.2vh)}
.intro i{position:absolute;top:0;bottom:0;width:50.5vw;background:#2a0307 url(img/bg-about.jpg) no-repeat;background-size:var(--iw) auto;
  transition:transform 1.6s cubic-bezier(.7,0,.2,1)}
/* обе половины — части одной картинки, без шва */
.intro i.l{left:0;background-position:calc((100vw - var(--iw)) / 2) 50%}
.intro i.r{right:0;background-position:calc((100vw - var(--iw)) / 2 - 49.5vw) 50%}
.intro i:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 70% at 50% 45%,transparent 40%,rgba(0,0,0,.55))}
.intro i.l:after{background-size:100vw 100%;background-position:0 0}
.intro i.r:after{background-size:100vw 100%;background-position:-49.5vw 0}
.intro.open i{box-shadow:0 0 60px rgba(0,0,0,.8)}
.intro img{position:absolute;left:50%;top:50%;width:min(340px,60vw);transform:translate(-50%,-50%);filter:drop-shadow(0 10px 40px #000);transition:opacity .7s,transform 1.2s;animation:introLogo 1.1s ease-out both}
@keyframes introLogo{from{opacity:0;transform:translate(-50%,-46%) scale(.94)}}
.intro.open i.l{transform:translateX(-101%)}.intro.open i.r{transform:translateX(101%)}
.intro.open img{opacity:0;transform:translate(-50%,-50%) scale(1.15)}

/* полоска прогресса */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:60;background:linear-gradient(90deg,#a5121f,#fff);transform-origin:0 50%;transform:scaleX(0)}

/* прожектор на первом экране */
.spot{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .6s;
  background:radial-gradient(circle 360px at var(--sx,60%) var(--sy,40%),rgba(255,236,210,.16),transparent 70%)}
.hero:hover .spot{opacity:1}

/* заголовки выезжают из-под линии */
h2 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
h2 .w>span{display:inline-block;transform:translateY(105%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.vis h2 .w>span,h2.vis .w>span{transform:none}

/* волна карточек */
.stagger>*{opacity:0;transform:translateY(34px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}
.stagger.vis>*{opacity:1;transform:none}

/* магнитные кнопки */
.btn-red{will-change:transform}

/* зерно плёнки */
body:after{content:"";position:fixed;inset:0;z-index:250;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

@media (prefers-reduced-motion:reduce){h2 .w>span,.stagger>*{transform:none!important;opacity:1!important}.spot{display:none}}

/* слайды без афиши: подпись прямо на картинке, без плашки — читается за счёт тени */
.idle-card{display:block;max-width:min(520px,100%);padding:0;background:none;border:0;
  text-shadow:0 2px 6px rgba(0,0,0,.95),0 0 22px rgba(0,0,0,.85),0 0 48px rgba(0,0,0,.55)}
.idle-card .kicker{margin-bottom:10px}
.idle-cap{font:500 clamp(22px,2vw,32px)/1.18 var(--display);margin-bottom:18px}
.idle-card .btn{text-shadow:none}
.hero:has(.idle-card) .caption{bottom:clamp(36px,6vh,80px)}
@media (max-width:980px){.idle-cap{font-size:22px}}
/* «Відео» — мелкая пометка, что ролики из сторис */
.h2-sub{display:inline-block;margin-left:.5em;font:600 clamp(12px,1.05vw,15px)/1.2 var(--body);letter-spacing:.03em;text-transform:none;color:var(--muted);vertical-align:.55em}
@media (max-width:600px){.h2-sub{display:block;margin:10px 0 0;vertical-align:0}}