/* Cinematic hero of /kivo: the auditorium photo fills the hero, a real Kivo
   Multimedia loop plays on the stage screen, and the copy sits over a dark
   gradient. Overrides the split hero in kivo.css only under .hero-cinema.
   Views: landing/{locale}/kivo.blade.php, landing/kivo/hero-screen.blade.php */
.hero.hero-cinema{position:relative;isolation:isolate;display:flex;align-items:flex-end;width:min(1400px,calc(100% - 48px));height:clamp(620px,calc(100svh - 112px),900px);min-height:0;margin:8px auto 0;padding:clamp(40px,6vw,88px);border-radius:24px;overflow:hidden;background:#0b0a18;box-shadow:0 40px 120px rgba(4,4,15,.55)}
.hero.hero-cinema:before{display:none}
.hero-cinema .hero-copy{position:relative;z-index:2;max-width:620px}
.hero-cinema h1{color:#fff;font-size:clamp(60px,7.4vw,108px);line-height:.95;text-shadow:0 4px 40px rgba(5,4,20,.5)}
.hero-cinema .intro{max-width:470px;color:#e2dff6;font-size:clamp(17px,1.4vw,20px)}
.hero-cinema .actions .button{box-shadow:0 10px 40px rgba(52,249,243,.28)}
.hero-cinema .text-link{color:#f0efff}

/* Photo as background, cover-cropped while keeping the 3:2 box so the screen
   overlay stays glued to the projection screen of the photo. */
.hero-cinema .hero-photo{position:absolute;inset:0;z-index:0;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:hidden;container-type:size;animation:none}
.hero-cinema .hero-scene{position:absolute;left:50%;top:50%;width:max(100cqw,150cqh);aspect-ratio:3/2;transform:translate(-50%,-50%) scale(1.04);transform-origin:60% 40%}
.hero-cinema .hero-scene>img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;object-fit:cover}
.hero-cinema .hero-photo:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(9,8,22,.92) 0%,rgba(9,8,22,.72) 30%,rgba(9,8,22,.18) 62%,rgba(9,8,22,0) 80%),linear-gradient(0deg,rgba(9,8,22,.85) 0%,rgba(9,8,22,0) 42%),linear-gradient(180deg,rgba(9,8,22,.45) 0%,rgba(9,8,22,0) 22%)}
.hero-cinema .hero-photo figcaption{z-index:2;right:28px;bottom:28px;top:auto}

/* The live stage screen. */
.hero-screen{position:absolute;left:34.05%;top:13.67%;width:40.69%;height:20.1%;overflow:hidden;background:#0b0a18;-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,#000 82%,transparent 100%)}
/* Stops above the musicians (their heads start ~34% down the photo) and fades
   into the photo's own screen, so the band stays in front. */
.hero-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-screen p{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;color:#fff;font-weight:700;text-align:center;font-size:2.25cqw;line-height:1.2;letter-spacing:-.01em;text-shadow:0 2px 12px rgba(0,0,0,.45)}
@supports not (font-size:1cqw){.hero-screen p{font-size:clamp(12px,1.9vw,28px)}}

@media(prefers-reduced-motion:no-preference){
  .hero-cinema .hero-scene{animation:hero-drift 22s ease-in-out infinite alternate}
  .hero-cinema .hero-copy{animation:enter .8s .1s both}
}
@keyframes hero-drift{from{transform:translate(-50%,-50%) scale(1.04)}to{transform:translate(-51.5%,-50.8%) scale(1.11)}}

@media(max-width:767px){
  .hero.hero-cinema{display:flex;flex-direction:column;align-items:stretch;width:calc(100% - 24px);height:auto;padding:0 0 28px;border-radius:18px}
  .hero-cinema .hero-photo{position:relative;inset:auto;width:100%;aspect-ratio:4/3;container-type:size;order:-1}
  .hero-cinema .hero-photo:after{background:linear-gradient(0deg,#0b0a18 0%,rgba(11,10,24,0) 45%)}
  .hero-cinema .hero-photo figcaption{display:none}
  .hero-cinema .hero-copy{margin-top:-36px;padding-inline:20px}
  .hero-cinema h1{font-size:clamp(46px,13vw,64px)}
}
@media(prefers-reduced-motion:reduce){.hero-screen video{display:none}}