/* Tramiveo — трансляции спектаклей и концертов.
   Токены: бумага программки, бархат занавеса, свет прожектора. */
:root{
  --paper:#F3EEF5;
  --paper-2:#EAE2EE;
  --ink:#1E1222;
  --muted:#6E5F72;
  --line:#D9CCDE;
  --velvet:#5A1638;
  --velvet-deep:#2C0A1D;
  --spot:#FFCB52;
  --brass:#B98B4E;
  --live:#E4433B;

  --display:"Yeseva One", Georgia, serif;
  --body:"Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Consolas, monospace;

  --wrap:1180px;
  --r:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body);
  -webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--spot);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
@media (max-width:640px){.wrap{padding:0 16px}}

/* ---------- шапка ---------- */
.top{position:absolute;inset:0 0 auto;z-index:20}
.top--paper{position:static;border-bottom:1px solid var(--line);background:var(--paper)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-size:24px;letter-spacing:.01em}
.brand svg{width:30px;height:30px}
.top:not(.top--paper) .brand{color:#F7EDE2}
.nav{display:flex;gap:28px;font-size:15px}
.nav a{text-decoration:none;opacity:.86}
.nav a:hover,.nav a[aria-current]{opacity:1;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.top:not(.top--paper) .nav a{color:#F7EDE2}
@media (max-width:720px){.nav{gap:16px;font-size:14px}.nav .hide-sm{display:none}}

/* ---------- первый экран: сцена ---------- */
.stage-hero{position:relative;background:radial-gradient(120% 90% at 70% 0%, #7A2350 0%, var(--velvet) 38%, var(--velvet-deep) 100%);
  color:#F7EDE2;padding:132px 0 88px;overflow:hidden}
.stage-hero::after{/* кромка сцены */content:"";position:absolute;left:0;right:0;bottom:0;height:10px;
  background:repeating-linear-gradient(90deg,var(--brass) 0 26px,#8E6733 26px 28px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,0.88fr) minmax(0,1.22fr);gap:56px;align-items:center}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr;gap:40px}}
.eyebrow{font:500 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--spot)}
.hero h1{font:400 clamp(38px,4.4vw,60px)/1.04 var(--display);margin:18px 0 22px;letter-spacing:-.005em}
.hero h1 em{font-style:normal;color:var(--spot)}
.hero p.lead{font-size:19px;line-height:1.55;max-width:31em;color:#EBDCD3;margin:0 0 32px}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 22px;border-radius:999px;font:500 16px/1 var(--body);
  text-decoration:none;border:1px solid transparent;transition:transform .2s ease, background .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn--spot{background:var(--spot);color:var(--velvet-deep)}
.btn--ghost{border-color:rgba(247,237,226,.35);color:#F7EDE2}
.btn--ghost:hover{background:rgba(247,237,226,.08)}
.btn--ink{background:var(--velvet);color:#F7EDE2}

/* плеер-сцена */
.player{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;
  background:#120610;box-shadow:0 40px 80px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(255,203,82,.18)}
.scene{position:absolute;inset:0;overflow:hidden;
  background:linear-gradient(#1A0A16 0%, #140812 58%, #2A1520 58%, #3A1F28 100%)}
.scene .floor{position:absolute;left:-10%;right:-10%;bottom:0;height:42%;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 64px),
             linear-gradient(#3A1F28,#24121a);transform:perspective(420px) rotateX(48deg);transform-origin:bottom}
.beam{position:absolute;top:-12%;width:44%;height:118%;left:28%;transform-origin:50% 0;
  background:conic-gradient(from 180deg at 50% 0, transparent 0 168deg, rgba(255,214,120,.30) 175deg, rgba(255,214,120,.42) 180deg, rgba(255,214,120,.30) 185deg, transparent 192deg);
  mix-blend-mode:screen;filter:blur(2px)}
.beam--l{left:4%;animation:sweepL 9s ease-in-out infinite alternate}
.beam--r{left:52%;animation:sweepR 11s ease-in-out infinite alternate}
.pool{position:absolute;left:50%;bottom:9%;width:46%;height:16%;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,214,120,.55),rgba(255,214,120,0));filter:blur(4px)}
.performer{position:absolute;left:50%;bottom:12%;width:30%;transform:translateX(-50%);color:#0B0408;opacity:.92}
@keyframes sweepL{from{transform:rotate(14deg)}to{transform:rotate(-6deg)}}
@keyframes sweepR{from{transform:rotate(-12deg)}to{transform:rotate(8deg)}}

/* занавес */
.curtain{position:absolute;top:0;bottom:0;width:51%;z-index:3;
  background:
    linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,0) 30%),
    repeating-linear-gradient(90deg,#6E1A43 0 14px,#8C2656 14px 26px,#5A1638 26px 38px,#7A2050 38px 48px);
  box-shadow:inset 0 -40px 60px rgba(0,0,0,.45);transition:transform 1.8s cubic-bezier(.7,0,.2,1)}
.curtain--l{left:0;transform-origin:left}
.curtain--r{right:0;transform:scaleX(-1);transform-origin:center}
.curtain::after{/* бахрома */content:"";position:absolute;left:0;right:0;bottom:0;height:12px;
  background:repeating-linear-gradient(90deg,var(--brass) 0 3px,transparent 3px 7px)}
.valance{position:absolute;top:0;left:0;right:0;height:12%;z-index:4;
  background:repeating-radial-gradient(circle at 50% -60%,#7A2050 0 30px,#5A1638 30px 46px);
  box-shadow:0 6px 18px rgba(0,0,0,.45);border-bottom:3px solid var(--brass)}
.player.is-open .curtain--l{transform:translateX(-86%)}
.player.is-open .curtain--r{transform:scaleX(-1) translateX(-86%)}

/* интерфейс трансляции поверх сцены */
.hud{position:absolute;inset:0;z-index:5;pointer-events:none;font:500 12px/1 var(--mono);color:#F7EDE2}
.hud .tl{position:absolute;top:16%;left:16px;display:flex;gap:8px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border-radius:6px;background:rgba(18,6,16,.72);
  backdrop-filter:blur(6px);letter-spacing:.06em}
.badge--live{background:var(--live);color:#fff}
.dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1.6s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
.hud .tr{position:absolute;top:16%;right:16px}
.bar{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
  background:linear-gradient(transparent,rgba(10,3,8,.85));display:grid;gap:10px}
.track{position:relative;height:4px;border-radius:2px;background:rgba(247,237,226,.22)}
.track i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--spot)}
.track b{position:absolute;top:-4px;width:2px;height:12px;background:#F7EDE2;opacity:.75}
.bar .row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;opacity:.92}
.chapter{color:var(--spot)}
@media (max-width:520px){.hud .tr{display:none}.bar .row span:nth-child(2){display:none}}

/* ---------- разделы ---------- */
section{padding:104px 0}
@media (max-width:720px){section{padding:72px 0}}
.kicker{font:500 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--velvet)}
h2{font:400 clamp(32px,3.8vw,50px)/1.08 var(--display);margin:14px 0 18px}
.sub{color:var(--muted);max-width:36em;margin:0}

/* программка: строки с отточиями */
.programme{margin-top:48px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 64px}
@media (max-width:860px){.programme{grid-template-columns:1fr}}
.act h3{font:400 26px/1.15 var(--display);margin:0 0 6px}
.act p{color:var(--muted);margin:0 0 18px;font-size:16px}
.leaders{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.leaders li{display:flex;align-items:baseline;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);font-size:16px}
.leaders li::after{content:"";order:1;flex:1;border-bottom:2px dotted #B9A6BF;transform:translateY(-4px)}
.leaders li span:last-child{order:2;font:500 14px/1 var(--mono);color:var(--velvet);white-space:nowrap}

/* для кого */
.venues{background:var(--paper-2)}
.venue-list{margin:40px 0 0;display:flex;flex-wrap:wrap;gap:12px;padding:0;list-style:none}
.venue-list li{padding:12px 18px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:16px}

/* встраивание */
.embed{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:center}
@media (max-width:900px){.embed{grid-template-columns:1fr;gap:32px}}
.code{margin:0;border-radius:var(--r);background:var(--velvet-deep);color:#EBDCD3;padding:22px 24px;
  font:400 14px/1.7 var(--mono);overflow-x:auto;box-shadow:0 0 0 1px rgba(185,139,78,.35)}
.code .k{color:var(--spot)}.code .s{color:#F0A6C4}.code .c{color:#9C8496}

/* тех.данные */
.spec{margin-top:40px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--ink)}
@media (max-width:860px){.spec{grid-template-columns:repeat(2,minmax(0,1fr))}}
.spec div{padding:20px 18px 6px 0;border-bottom:1px solid var(--line)}
.spec dt{font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.spec dd{margin:0 0 14px;font:400 26px/1.15 var(--display)}

/* финал */
.finale{background:var(--velvet);color:#F7EDE2;text-align:center}
.finale h2{margin-left:auto;margin-right:auto;max-width:16em}
.finale p{color:#EBDCD3;max-width:34em;margin:0 auto 30px}

/* контакт: адрес + копирование (без mailto — у посетителя ничего не открывается само) */
.contact{display:inline-flex;align-items:center;gap:6px;padding:6px 6px 6px 18px;border-radius:999px;
  border:1px solid currentColor;font:500 15px/1 var(--mono)}
.contact .addr{user-select:all;letter-spacing:.01em}
.contact button{height:38px;padding:0 16px;border-radius:999px;border:0;cursor:pointer;font:500 14px/1 var(--body);white-space:nowrap;
  background:var(--spot);color:var(--velvet-deep);transition:background .2s ease}
.contact button.done{background:#7FD29A}
.contact--paper{color:var(--velvet)}
.contact--paper button{background:var(--velvet);color:#F7EDE2}
.contact--paper button.done{background:#2E7D4F;color:#fff}
.contact-block{margin-top:44px;padding:28px 30px;border-radius:var(--r);background:#FBF8FC;border:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;justify-content:space-between;scroll-margin-top:24px}
.contact-block h3{font:400 26px/1.15 var(--display);margin:0 0 6px}
.contact-block p{margin:0;color:var(--muted);max-width:34em;font-size:16px}
@media (max-width:520px){.contact{font-size:13px;padding-left:12px}.contact button{padding:0 12px}}

/* форма заявки */
.request{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:56px;align-items:start;margin-top:36px}
@media (max-width:900px){.request{grid-template-columns:1fr;gap:36px}}
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
@media (max-width:620px){.form{grid-template-columns:1fr}}
.field{display:grid;gap:7px}
.field--wide{grid-column:1/-1}
.field label{font:500 13px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.field label b{color:var(--velvet);font-weight:500}
.field input,.field select,.field textarea{width:100%;font:400 16px/1.4 var(--body);color:var(--ink);background:#FBF8FC;
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;transition:border-color .2s ease, box-shadow .2s ease}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--velvet);box-shadow:0 0 0 3px rgba(90,22,56,.14)}
.consent{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;font-size:15px;color:#3A2C3E}
.consent input{width:20px;height:20px;margin-top:2px;accent-color:var(--velvet);flex:none}
.trap{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form .btn{grid-column:1/-1;justify-self:start;border:0;cursor:pointer}
.form-error{grid-column:1/-1;margin:0;padding:12px 16px;border-radius:10px;background:#FBE6E4;color:#8A2420;font-size:15px}
.aside{padding:26px;border-radius:var(--r);background:var(--velvet);color:#F7EDE2}
.aside h3{font:400 24px/1.15 var(--display);margin:0 0 12px}
.aside ol{margin:0 0 22px;padding-left:20px;display:grid;gap:10px;color:#EBDCD3;font-size:15.5px}
.aside p{margin:0 0 12px;color:#E2C9C5;font-size:15px}

/* подвал */
.foot{padding:40px 0 48px;font-size:14px;color:var(--muted);border-top:1px solid var(--line)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;align-items:center}
.foot nav{display:flex;flex-wrap:wrap;gap:20px}
.foot a{text-decoration:none}.foot a:hover{text-decoration:underline}

/* ---------- внутренние страницы ---------- */
.page{padding:64px 0 96px}
.page h1{font:400 clamp(36px,4.6vw,58px)/1.05 var(--display);margin:12px 0 18px}
.prose{max-width:46em}
.prose h2{font-size:28px;margin:44px 0 10px}
.prose p,.prose li{color:#3A2C3E}
.prose ul{padding-left:20px}
.updated{font:500 13px/1 var(--mono);color:var(--muted)}

/* тарифы */
.plans{margin-top:44px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:900px){.plans{grid-template-columns:1fr}}
.plan{position:relative;background:#FBF8FC;border:1px solid var(--line);border-radius:var(--r);padding:28px 26px 26px;display:flex;flex-direction:column}
.plan--main{background:var(--velvet);color:#F7EDE2;border-color:var(--velvet)}
.plan h3{font:400 30px/1.1 var(--display);margin:0 0 4px}
.plan .seats{font:500 13px/1.3 var(--mono);color:var(--muted);letter-spacing:.04em}
.plan--main .seats{color:#E2C9C5}
.price{font:400 44px/1 var(--display);margin:24px 0 4px}
.price small{font:400 15px/1 var(--body);opacity:.75}
.per{font-size:14px;opacity:.75;margin:0 0 20px}
.plan ul{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:9px;font-size:15.5px}
.plan li{padding-left:22px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--brass)}
.plan .btn{margin-top:auto;justify-content:center}
.ticket-note{margin-top:28px;font-size:15px;color:var(--muted)}

/* статус */
.status-head{display:flex;align-items:center;gap:12px;margin:28px 0 36px;padding:18px 20px;border-radius:var(--r);
  background:#E6F3EA;color:#1F5C35;font-weight:500}
.status-head .ok{width:10px;height:10px;border-radius:50%;background:#2E9E5B;box-shadow:0 0 0 5px rgba(46,158,91,.18)}
.svc{padding:18px 0;border-bottom:1px solid var(--line)}
.svc-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.svc-top b{font-weight:500}
.svc-top span{font:500 13px/1.4 var(--mono);color:#2E7D4F}
.uptime{display:grid;grid-template-columns:repeat(90,1fr);gap:2px;height:30px}
.uptime i{border-radius:2px;background:#5DB37E}
.uptime i.w{background:#E3B341}
.legend{display:flex;justify-content:space-between;font:400 12px/1 var(--mono);color:var(--muted);margin-top:8px}

/* 404 */
.lost{min-height:100vh;display:grid;place-items:center;text-align:center;
  background:radial-gradient(70% 60% at 50% 30%,rgba(255,203,82,.18),transparent 70%),var(--velvet-deep);color:#F7EDE2;padding:40px 16px}
.lost h1{font:400 clamp(40px,6vw,76px)/1.05 var(--display);margin:16px 0}
.lost p{color:#EBDCD3;max-width:30em;margin:0 auto 28px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .player .curtain--l{transform:translateX(-86%)}
  .player .curtain--r{transform:scaleX(-1) translateX(-86%)}
}