/* HERO — LED-табло зала. Префикс .hero- */
#hero{position:relative;display:block;height:100vh;height:100svh;min-height:640px;max-height:1400px;overflow:hidden;overflow:clip;background:var(--bg);isolation:isolate}

/* без JS: тот же зал через точечную маску — статичный кадр табло */
html:not(.js) #hero::before{content:"";position:absolute;inset:0;
  background:url("../img/hall.jpg") 50% 50%/cover no-repeat;
  filter:grayscale(1) sepia(1) saturate(2.2) hue-rotate(-12deg) brightness(.85) contrast(1.15);
  -webkit-mask:radial-gradient(circle,#000 34%,transparent 40%) 0 0/10px 10px;
          mask:radial-gradient(circle,#000 34%,transparent 40%) 0 0/10px 10px}

.hero-led{position:absolute;inset:0;width:100%;height:100%;z-index:0;touch-action:pan-y}

.hero-inner{position:absolute;left:0;right:0;bottom:0;z-index:1;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;
  padding-bottom:clamp(40px,9vh,112px);pointer-events:none}
.hero-inner a,.hero-title{pointer-events:auto}

/* десктоп: один столбец слева — имя, подпись, лид, кнопки; справа светится зал */
.hero-title{grid-column:1/7;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,1.6vw,24px);justify-items:start}
.hero-name{display:block;width:min(48vw,760px);overflow:visible;white-space:nowrap;
  line-height:.8;letter-spacing:0;color:var(--ink)}
.hero-name-t{display:inline-block;font-size:var(--t-display)}

.hero-sub{display:block;max-width:34ch;
  font-family:var(--f-text);font-weight:400;font-size:clamp(18px,1.4vw,22px);line-height:1.35;letter-spacing:0;color:var(--ink)}

.hero-act{grid-column:1/7;display:grid;gap:32px;justify-items:start;margin-top:clamp(20px,2.2vw,32px)}
.hero-lead{font-size:var(--t-body);line-height:1.55;max-width:40ch;color:var(--ink-2);text-wrap:pretty}
.hero-cta{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.hero-more{position:relative;display:inline-flex;align-items:center;min-height:52px;font-size:var(--t-body);color:var(--ink);text-decoration:none}
.hero-more::after{content:"";position:absolute;left:0;right:0;bottom:12px;height:1px;background:currentColor;transform:scaleX(.24);transform-origin:0 50%;transition:transform var(--d-mid) var(--ease)}
.hero-more:hover::after,.hero-more:focus-visible::after{transform:scaleX(1)}

/* хореография текста: подпись, лид, кнопки — снизу вверх; имя «включается» как табло */
.js .hero-lead,.js .hero-cta{opacity:0;transform:translateY(16px);transition:opacity var(--d-slow) var(--ease),transform var(--d-slow) var(--ease)}
.hero--on .hero-lead,.hero--on .hero-cta{opacity:1;transform:none}
.hero--on .hero-lead{transition-delay:.3s}.hero--on .hero-cta{transition-delay:.45s}

/* мобильная композиция: имя в одну строку по ширине, действие — в зоне большого пальца */
@media (max-width:899px){
  #hero{height:88vh;height:88svh;min-height:560px}
  .hero-inner{display:flex;flex-direction:column;gap:0;padding-bottom:max(24px,env(safe-area-inset-bottom,0px))}
  .hero-title{gap:14px;justify-items:stretch}
  .hero-name{width:100%}
  .hero-sub{max-width:28ch;font-size:18px}
  .hero-act{gap:24px;justify-items:stretch;margin-top:20px}
  .hero-lead{max-width:none}
  .hero-cta{gap:24px;flex-wrap:nowrap}
  .hero-cta .btn{flex:1 1 auto;padding:0 20px;white-space:nowrap}
  .hero-more{flex:0 0 auto;white-space:nowrap}
}

@media (prefers-reduced-motion:reduce){
  .js .hero-sub,.js .hero-lead,.js .hero-cta,.js .hero-name{opacity:1;transform:none;transition:none;animation:none}
}