:root{--pink:#ff2c92;--cyan:#169cff;--gold:#ffc32c;--cream:#f4d8b5;--deep:#02040d;--max:1280px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#02040d}
body{margin:0;color:#fff;font-family:"DM Sans",sans-serif;overflow-x:hidden;background:#06144d url("../assets/back.jpg") center top/cover fixed no-repeat}
body:before{content:"";position:fixed;inset:0;z-index:-3;background:radial-gradient(circle at 50% 10%,rgba(35,100,255,.18),transparent 30%),linear-gradient(180deg,rgba(2,5,17,.04),rgba(2,5,17,.5))}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}main{margin-left:92px}
.scene{min-height:100svh;display:grid;align-items:center;padding:110px 5vw 80px;position:relative;overflow:hidden}
.scene:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 30%,rgba(22,156,255,.1),transparent 34%),linear-gradient(90deg,rgba(0,0,0,.24),transparent 18%,transparent 82%,rgba(0,0,0,.24))}
.inner{width:min(var(--max),100%);margin:auto;position:relative;z-index:2}
.eyebrow{font:400 .8rem "Bebas Neue";letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
h1,h2,p{margin-top:0}h2{font:400 clamp(3rem,8vw,7.4rem)/.88 "Rye";text-transform:uppercase;max-width:1100px;margin-bottom:28px;text-shadow:0 6px 0 rgba(0,0,0,.3)}
.lead{font-size:clamp(1.05rem,2vw,1.42rem);line-height:1.65;color:var(--cream);max-width:800px}
.side-nav{position:fixed;left:0;top:0;bottom:0;width:92px;z-index:60;background:rgba(1,4,15,.74);backdrop-filter:blur(18px);border-right:1px solid rgba(255,255,255,.09);display:flex;flex-direction:column;align-items:center;justify-content:center}
.side-brand{position:absolute;top:20px;left:50%;transform:translateX(-50%) rotate(-90deg);white-space:nowrap;font:400 .72rem "Rye";letter-spacing:.12em;color:var(--gold)}
.chapter-nav{display:flex;flex-direction:column;gap:18px;align-items:center}.chapter-link{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.15);position:relative;transition:.3s;color:#b7a995;font:400 .86rem "Bebas Neue"}
.chapter-link span{position:absolute;left:56px;white-space:nowrap;padding:7px 10px;background:rgba(2,5,17,.95);border:1px solid rgba(255,255,255,.1);opacity:0;transform:translateX(-8px);transition:.25s;pointer-events:none;font:600 .67rem "DM Sans";letter-spacing:.1em;text-transform:uppercase}
.chapter-link:hover span{opacity:1;transform:none}.chapter-link.active{border-color:var(--pink);color:#fff;box-shadow:0 0 20px rgba(255,44,146,.42);background:rgba(255,44,146,.12)}
.progress{position:absolute;right:10px;top:14%;bottom:14%;width:1px;background:rgba(255,255,255,.1)}.progress i{position:absolute;left:0;top:0;width:1px;height:0;background:linear-gradient(var(--pink),var(--cyan),var(--gold));box-shadow:0 0 12px var(--pink)}
.menu-toggle{display:none;position:fixed;right:16px;top:16px;z-index:70;border:1px solid var(--pink);background:rgba(2,5,17,.82);color:#fff;width:46px;height:46px;border-radius:50%;font-size:1.1rem}
.prelude{position:fixed;inset:0;z-index:100;background:#010207;display:grid;place-items:center;transition:opacity .9s,visibility .9s}.prelude.hide{opacity:0;visibility:hidden}
.prelude-line{position:absolute;text-align:center;width:min(90%,900px);font:400 clamp(2rem,6vw,5.8rem)/1 "Rye";text-transform:uppercase;opacity:0;animation:lineFade 6s forwards}.line-1{animation-delay:.4s}.line-2{animation-delay:3s;color:var(--gold)}
.enter-btn{position:absolute;bottom:12vh;opacity:0;animation:buttonIn 1s 5.5s forwards;border:1px solid var(--pink);border-radius:999px;padding:14px 24px;background:transparent;color:#fff;font:600 .78rem "DM Sans";letter-spacing:.15em;text-transform:uppercase;box-shadow:0 0 24px rgba(255,44,146,.32)}
@keyframes lineFade{0%{opacity:0;transform:translateY(18px)}12%,42%{opacity:1;transform:none}55%,100%{opacity:0}}@keyframes buttonIn{to{opacity:1}}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,690px);gap:5vw;align-items:center}.hero-copy h1{font:400 clamp(3.2rem,7vw,7rem)/.9 "Rye";text-transform:uppercase;margin:15px 0 24px;color:var(--gold)}
.logo-stage{position:relative}.halo{position:absolute;inset:12% 8%;border-radius:50%;background:radial-gradient(circle,rgba(255,44,146,.2),rgba(22,156,255,.08) 42%,transparent 68%);filter:blur(26px);animation:halo 4.6s ease-in-out infinite}
.logo{position:relative;width:100%;filter:drop-shadow(0 24px 18px rgba(0,0,0,.48));animation:float 5s ease-in-out infinite}@keyframes float{50%{transform:translateY(-12px)}}@keyframes halo{50%{transform:scale(1.08);opacity:.7}}
.hero-tags{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px}.hero-tags b{font:400 1rem "Bebas Neue";letter-spacing:.12em;color:var(--cream)}.hero-tags b:before{content:"✦";color:var(--pink);margin-right:8px}
.mini-next{position:absolute;right:34px;bottom:28px;display:flex;align-items:center;gap:12px;font:600 .72rem "DM Sans";letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}.mini-next i{display:block;width:48px;height:1px;background:var(--pink)}
.tv-layout{display:grid;grid-template-columns:.78fr 1.22fr;gap:5vw;align-items:center}.tv-note{font-size:.82rem;color:var(--pink);letter-spacing:.08em;text-transform:uppercase}
.real-tv{position:relative;width:min(820px,100%);margin:auto;cursor:pointer;filter:drop-shadow(0 38px 34px rgba(0,0,0,.48));transition:.35s}.real-tv:hover{transform:translateY(-6px)}
.tv-photo{position:relative;z-index:2;width:100%;pointer-events:none}
.tv-video-mask{position:absolute;z-index:1;left:10.7%;top:12.2%;width:72.1%;height:71.5%;overflow:hidden;border-radius:11%/13%;background:#000;box-shadow:inset 0 0 38px #000}
.tv-video-mask video{width:100%;height:100%;object-fit:cover;filter:saturate(.95) contrast(1.1) brightness(.9)}
.scanlines{position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px);pointer-events:none}
.static{position:absolute;inset:0;background:repeating-radial-gradient(circle,rgba(255,255,255,.16) 0 1px,transparent 1px 3px);opacity:.17;mix-blend-mode:screen;transition:.4s}.static.off{opacity:.03}
.play-copy{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);font:400 .78rem "Bebas Neue";letter-spacing:.2em;color:var(--gold);text-shadow:0 0 10px #000;white-space:nowrap}
.statement-inner{text-align:center}.statement-inner h2{margin-inline:auto}.manifesto{margin:46px auto 0;max-width:950px}.manifesto p{font:400 clamp(1.7rem,4vw,4.2rem)/1.05 "Bebas Neue";text-transform:uppercase}.manifesto p:nth-child(2){color:var(--cyan)}.manifesto p:nth-child(3){color:var(--pink)}
.metrics{display:flex;justify-content:center;gap:50px;flex-wrap:wrap;margin-top:64px}.metric strong{display:block;font:400 clamp(4.5rem,9vw,9rem)/.75 "Bebas Neue";color:var(--pink)}.metric:nth-child(2) strong{color:var(--cyan)}.metric:nth-child(3) strong{color:var(--gold)}.metric span{font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--cream)}
.program{margin-top:56px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 42px}.act{padding:26px 0;border-bottom:1px solid rgba(255,255,255,.14)}.act span{font:400 .9rem "Bebas Neue";letter-spacing:.18em;color:var(--pink)}.act b{display:block;font:400 clamp(2rem,4vw,4rem)/1 "Rye";text-transform:uppercase;color:var(--gold);margin:10px 0}.act p{color:#ead4bd;line-height:1.5}
.cast-grid{margin-top:54px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:42px 28px}.cast{text-align:center}.face{width:min(170px,100%);aspect-ratio:1;margin:auto;border-radius:50%;background:radial-gradient(circle at 50% 38%,#d58d6f 0 25%,transparent 26%),radial-gradient(circle at 50% 50%,rgba(255,44,146,.34),transparent 58%),linear-gradient(135deg,#200716,#07195a);box-shadow:0 0 42px rgba(255,44,146,.2);border:1px solid rgba(255,255,255,.1)}.cast:nth-child(even) .face{box-shadow:0 0 42px rgba(22,156,255,.22)}.cast b{display:block;margin-top:18px;font:400 1.25rem "Bebas Neue";letter-spacing:.08em;color:var(--gold)}
.role-invite{max-width:900px;margin-top:58px;padding-left:28px;border-left:2px solid var(--pink)}.role-invite p{font-size:1.15rem;line-height:1.65;color:var(--cream)}.role-invite strong{color:var(--gold)}.role-invite.musician{border-color:var(--cyan)}
.guest-stack{margin-top:58px}.guest-line{font:400 clamp(2.5rem,7vw,7rem)/1 "Rye";text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.12);padding:18px 0}.guest-line span{color:var(--pink)}.guest-line:nth-child(2){padding-left:8vw;color:var(--cyan)}.guest-line:nth-child(3){padding-left:16vw;color:var(--gold)}
.door-layout{display:grid;grid-template-columns:1fr .9fr;gap:6vw;align-items:center}.real-door{display:block}.door-photo-wrap{position:relative;width:min(520px,100%);margin:auto;overflow:hidden;border-radius:2px;box-shadow:0 30px 80px rgba(0,0,0,.5);transform:perspective(1200px) rotateY(-4deg);transition:.6s}
.door-photo-wrap img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 42%;filter:saturate(.92) contrast(1.08) brightness(.78);transition:.65s}
.door-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.72));transition:.5s}
.door-cta{position:absolute;left:8%;right:8%;bottom:8%;display:grid;gap:8px;color:#fff}.door-cta span{font:600 .65rem "DM Sans";letter-spacing:.16em;color:var(--gold)}.door-cta strong{font:400 clamp(2rem,5vw,4rem)/.95 "Rye";text-transform:uppercase}.door-cta em{font-style:normal;font-size:2rem;color:var(--pink)}
.real-door:hover .door-photo-wrap{transform:perspective(1200px) rotateY(0) scale(1.02);box-shadow:0 30px 90px rgba(255,44,146,.22)}.real-door:hover img{filter:saturate(1.08) contrast(1.12) brightness(.94);transform:scale(1.04)}.real-door:hover .door-overlay{background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.48))}
footer{margin-left:92px;padding:32px;text-align:center;background:rgba(1,3,10,.6);border-top:1px solid rgba(255,255,255,.08);color:#c8b29a;font-size:.78rem}.reveal{opacity:0;transform:translateY(40px);transition:.8s}.reveal.in{opacity:1;transform:none}
.ambient-flames{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}.flame{position:absolute;bottom:-8vh;width:26vw;height:58vh;opacity:.24;filter:blur(18px);background:radial-gradient(ellipse at 50% 100%,rgba(255,40,20,.55),transparent 58%),radial-gradient(ellipse at 50% 55%,rgba(255,153,0,.38),transparent 44%);clip-path:polygon(50% 0,66% 28%,79% 13%,80% 44%,100% 30%,88% 69%,70% 100%,50% 84%,31% 100%,13% 69%,0 30%,20% 44%,21% 13%,34% 28%);animation:flamePulse 4.8s ease-in-out infinite;mix-blend-mode:screen}.left-a{left:-12vw}.left-b{left:2vw;width:18vw;height:42vh;animation-delay:-2s}.right-a{right:-12vw;animation-delay:-1.2s}.right-b{right:2vw;width:18vw;height:40vh;animation-delay:-3.2s}@keyframes flamePulse{0%,100%{transform:translateY(3vh) scale(.94) rotate(-1deg);opacity:.17}50%{transform:translateY(-2vh) scale(1.06) rotate(1deg);opacity:.32}}
@media(max-width:1050px){.cast-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.tv-layout,.door-layout{grid-template-columns:1fr}.tv-copy,.door-copy{text-align:center}.tv-copy .lead,.door-copy .lead{margin-inline:auto}}
@media(max-width:900px){body{background-image:url("../assets/back-mobile.jpg");background-attachment:scroll}main,footer{margin-left:0}.side-nav{width:min(320px,86vw);transform:translateX(-105%);transition:.35s;align-items:flex-start;padding-left:30px}.side-nav.open{transform:none}.side-brand{position:static;transform:none;margin-bottom:34px}.chapter-nav{align-items:flex-start}.chapter-link{border-radius:0;width:auto;height:auto;border:0;gap:10px}.chapter-link span{position:static;opacity:1;transform:none;background:none;border:0;padding-left:12px}.progress{display:none}.menu-toggle{display:block}.scene{padding:95px 18px 70px}.hero-grid{grid-template-columns:1fr}.hero-copy{order:2;text-align:center}.logo-stage{order:1}.logo{max-width:690px;margin:auto}.mini-next{display:none}.program{grid-template-columns:1fr}}
@media(max-width:700px){.cast-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 18px}.face{width:min(140px,100%)}}
@media(max-width:600px){.scene{min-height:auto;padding-top:92px}.hero{min-height:100svh}.hero-copy h1{font-size:clamp(2.8rem,13vw,5rem)}h2{font-size:clamp(2.8rem,13vw,5.3rem)}.metric strong{font-size:4.4rem}.guest-line:nth-child(2),.guest-line:nth-child(3){padding-left:0}.cast b{font-size:1rem}.door-photo-wrap{max-width:330px}.prelude-line{font-size:clamp(1.8rem,10vw,4rem)}.real-tv{width:112%;margin-left:-6%}.play-copy{font-size:.62rem}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* === TV WITH REAL TRANSPARENT SCREEN HOLE ===
   Artwork remains on the original 1024 × 1536 canvas.
   The white screen area has been removed from the PNG itself,
   so the video is now physically visible through the opening. */
.real-tv{
  position:relative;
  width:min(760px,100%);
  aspect-ratio:1024/1536;
  margin:auto;
  cursor:pointer;
  filter:drop-shadow(0 35px 30px rgba(0,0,0,.52));
  transition:transform .35s ease;
  overflow:visible;
}
.real-tv:hover{transform:translateY(-6px)}

.tv-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  z-index:4;
  pointer-events:none;
}

/* Exact opening behind the transparent screen hole */
.tv-video-mask{
  position:absolute;
  left:20.95%;
  top:31.55%;
  width:46.55%;
  height:23.15%;
  z-index:2;
  overflow:hidden;
  border-radius:9% / 12%;
  background:#020204;
  box-shadow:
    inset 0 0 24px rgba(0,0,0,.78),
    inset 0 0 70px rgba(5,8,20,.28);
  transform:translateZ(0);
}

.tv-video-mask video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  background:#020204;
  filter:saturate(.98) contrast(1.1) brightness(.93);
}

.real-tv .scanlines{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:repeating-linear-gradient(
    180deg,
    rgba(255,255,255,.045) 0 1px,
    transparent 1px 4px
  );
  mix-blend-mode:screen;
}

.real-tv .static{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  background:repeating-radial-gradient(
    circle,
    rgba(255,255,255,.16) 0 1px,
    transparent 1px 3px
  );
  opacity:.17;
  mix-blend-mode:screen;
  transition:.35s;
}
.real-tv .static.off{opacity:.025}

.real-tv .play-copy{
  position:absolute;
  left:50%;
  bottom:8%;
  z-index:5;
  transform:translateX(-50%);
  font:400 .72rem "Bebas Neue";
  letter-spacing:.18em;
  color:var(--gold);
  text-shadow:0 2px 9px #000;
  white-space:nowrap;
  pointer-events:none;
}

.screen-hit{
  position:absolute;
  left:20.95%;
  top:31.55%;
  width:46.55%;
  height:23.15%;
  z-index:8;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  border-radius:9% / 12%;
}

.tv-layout{grid-template-columns:.78fr 1.22fr}
.tv-note{
  color:var(--pink);
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

@media(max-width:1050px){
  .tv-layout{grid-template-columns:1fr}
  .tv-copy{text-align:center}
  .tv-copy .lead{margin-inline:auto}
}

@media(max-width:600px){
  .real-tv{
    width:108%;
    margin-left:-4%;
  }
  .real-tv .play-copy{font-size:.56rem}
}


/* === AUDIO MARQUEE === */
.audio-marquee{
  position:relative;
  display:grid;
  gap:7px;
  width:min(430px,88vw);
  margin:-38px auto 0;
  padding:16px 20px;
  border:3px solid #6f150d;
  border-radius:12px;
  background:
    linear-gradient(180deg,#8e2418,#4b0c09 58%,#250504);
  color:#ffe2a1;
  cursor:pointer;
  z-index:12;
  box-shadow:
    0 12px 24px rgba(0,0,0,.42),
    inset 0 0 0 2px rgba(255,207,92,.18),
    0 0 26px rgba(255,60,20,.22);
  transition:.3s ease;
}
.audio-marquee:hover{transform:translateY(-3px) scale(1.02)}
.marquee-label{
  font:400 clamp(1.45rem,4vw,2.35rem)/1 "Rye";
  letter-spacing:.05em;
  text-align:center;
  text-shadow:0 3px 0 #35100b,0 0 12px rgba(255,195,44,.55);
}
.bulbs{
  height:8px;
  display:block;
  background:
    radial-gradient(circle,#fff2a9 0 2px,#ff9b25 3px 4px,transparent 5px) 0 50%/22px 8px repeat-x;
  filter:drop-shadow(0 0 5px #ffb12c);
  animation:bulbChase 1.2s linear infinite;
}
.bulbs.bottom{animation-direction:reverse}
.audio-marquee.active{
  background:linear-gradient(180deg,#a92f1f,#650f0b 62%,#320706);
  box-shadow:
    0 12px 24px rgba(0,0,0,.42),
    inset 0 0 0 2px rgba(255,207,92,.2),
    0 0 34px rgba(255,160,30,.5);
}
@keyframes bulbChase{
  50%{filter:drop-shadow(0 0 10px #ffd86a) brightness(1.35)}
}
.real-tv .play-copy{display:none!important}

/* tighten vertical rhythm around TV */
.tv-scene{
  min-height:auto;
  padding-bottom:48px;
}
.tv-layout{row-gap:24px}
#concepto{padding-top:64px}

/* === FINAL CURTAIN CTA === */
.curtain-scene{
  min-height:100svh;
  padding-bottom:0;
  align-items:end;
}
.curtain-layout{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:5vw;
  align-items:center;
}
.curtain-stage{
  position:relative;
  width:min(760px,100%);
  aspect-ratio:4/5;
  margin:auto;
  overflow:hidden;
  background:#090204;
  box-shadow:0 28px 80px rgba(0,0,0,.58),0 0 46px rgba(255,26,54,.18);
}
.curtain-panel{
  position:absolute;
  top:0;
  bottom:0;
  width:51%;
  z-index:5;
  background-image:
    linear-gradient(90deg,rgba(0,0,0,.34),transparent 16%,rgba(255,255,255,.08) 34%,rgba(0,0,0,.22) 55%,transparent 77%,rgba(0,0,0,.36)),
    url("../assets/curtain.jpg");
  background-size:auto 100%,cover;
  background-repeat:no-repeat;
  transition:transform 1.6s cubic-bezier(.2,.75,.18,1);
}
.curtain-left{
  left:0;
  background-position:left center;
  transform-origin:left center;
}
.curtain-right{
  right:0;
  background-position:right center;
  transform-origin:right center;
}
.curtain-stage.open .curtain-left{transform:translateX(-92%)}
.curtain-stage.open .curtain-right{transform:translateX(92%)}

.curtain-light{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 42%,rgba(255,186,72,.72),rgba(255,60,20,.28) 28%,transparent 68%),
    linear-gradient(180deg,#280309,#030107 72%);
  filter:saturate(1.2);
}
.curtain-message{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:10%;
  opacity:.12;
  transform:scale(.94);
  transition:opacity .8s .7s,transform .9s .7s;
}
.curtain-stage.open .curtain-message{opacity:1;transform:none}
.curtain-message span{
  color:var(--gold);
  font:600 .72rem "DM Sans";
  letter-spacing:.2em;
}
.curtain-message strong{
  margin:18px 0 28px;
  font:400 clamp(2.4rem,6vw,5.6rem)/.92 "Rye";
  text-transform:uppercase;
  text-shadow:0 5px 0 #461017;
}
.mail-cta{
  padding:17px 24px;
  border:1px solid var(--pink);
  border-radius:999px;
  background:rgba(2,3,9,.62);
  font:600 .78rem "DM Sans";
  letter-spacing:.14em;
  box-shadow:0 0 28px rgba(255,44,146,.42);
}
.open-curtain{
  position:absolute;
  left:50%;
  bottom:6%;
  z-index:8;
  transform:translateX(-50%);
  width:min(360px,82%);
  display:grid;
  gap:6px;
  padding:14px 18px;
  border:3px solid #75180e;
  border-radius:12px;
  background:linear-gradient(#95281a,#4f0d08);
  color:#ffe5a9;
  cursor:pointer;
  font:400 clamp(1.2rem,3vw,1.9rem) "Rye";
  text-shadow:0 3px 0 #35100b;
  box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 28px rgba(255,60,20,.3);
  transition:opacity .4s,transform .4s;
}
.curtain-stage.open .open-curtain{
  opacity:0;
  pointer-events:none;
  transform:translateX(-50%) translateY(20px);
}

@media(max-width:1050px){
  .curtain-layout{grid-template-columns:1fr}
  .curtain-copy{text-align:center}
  .curtain-copy .lead{margin-inline:auto}
}
@media(max-width:600px){
  .audio-marquee{
    margin:-24px auto 0;
    width:min(330px,88vw);
  }
  .tv-scene{padding-bottom:28px}
  #concepto{padding-top:38px}
  .curtain-stage{
    width:108%;
    margin-left:-4%;
  }
}


/* === REAL CABARET CHARACTERS === */
.characters-scene{
  padding-top:120px;
  padding-bottom:90px;
}
.real-cast{
  margin-top:52px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:end;
  gap:22px;
  width:100%;
  position:relative;
}
.real-cast:before{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--pink),var(--gold),var(--cyan),transparent);
  box-shadow:0 0 22px rgba(255,44,146,.38);
}
.real-character{
  position:relative;
  min-height:540px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  overflow:visible;
  isolation:isolate;
}
.real-character img{
  position:relative;
  z-index:2;
  width:100%;
  height:480px;
  object-fit:contain;
  object-position:center bottom;
  filter:
    drop-shadow(0 22px 22px rgba(0,0,0,.55))
    grayscale(.08)
    contrast(1.06);
  transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .45s ease;
}
.real-character:hover img{
  transform:translateY(-10px) scale(1.025);
  filter:
    drop-shadow(0 28px 28px rgba(0,0,0,.62))
    grayscale(0)
    contrast(1.1);
}
.character-glow{
  position:absolute;
  left:8%;right:8%;bottom:52px;height:68%;
  border-radius:50%;
  z-index:1;
  opacity:.32;
  filter:blur(34px);
  background:radial-gradient(circle at 50% 64%,rgba(255,44,146,.58),rgba(22,156,255,.12) 44%,transparent 72%);
  transition:.45s;
}
.real-character:nth-child(even) .character-glow{
  background:radial-gradient(circle at 50% 64%,rgba(22,156,255,.5),rgba(255,195,44,.12) 45%,transparent 72%);
}
.real-character:hover .character-glow{opacity:.62;transform:scale(1.08)}
.character-name{
  position:relative;
  z-index:4;
  width:100%;
  min-height:84px;
  padding:14px 8px 10px;
  text-align:center;
  background:linear-gradient(180deg,transparent,rgba(2,4,13,.82) 35%,rgba(2,4,13,.96));
}
.character-name span{
  display:block;
  color:var(--pink);
  font:600 .58rem "DM Sans";
  letter-spacing:.18em;
}
.character-name strong{
  display:block;
  margin-top:7px;
  color:var(--gold);
  font:400 clamp(1rem,2vw,1.55rem)/1 "Bebas Neue";
  letter-spacing:.06em;
}
.real-character.maestro img{
  transform:scale(1.04);
}
.real-character.maestro:hover img{
  transform:translateY(-10px) scale(1.075);
}

@media(max-width:1100px){
  .real-cast{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:34px 20px;
  }
  .real-character{min-height:520px}
  .real-character img{height:450px}
}
@media(max-width:640px){
  .characters-scene{padding-top:84px}
  .real-cast{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px 10px;
    margin-top:34px;
  }
  .real-character{
    min-height:330px;
  }
  .real-character img{
    width:112%;
    max-width:none;
    height:285px;
  }
  .character-name{
    min-height:74px;
    padding-inline:2px;
  }
  .character-name strong{
    font-size:.92rem;
  }
  .character-name span{
    font-size:.47rem;
  }
  .real-character.maestro img{
    transform:scale(1.02);
  }
}