@font-face{font-family:'Groovy Script';src:url('fonts/GroovyScript.woff2') format('woff2'),url('fonts/GroovyScript.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Groovy Script Extrude';src:url('fonts/GroovyScriptExtrude.woff2') format('woff2'),url('fonts/GroovyScriptExtrude.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Sonic Logo';src:url('fonts/SonicLogoBold.woff2') format('woff2'),url('fonts/SonicLogoBold.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}

:root{
  --navy:#1E2766;
  --navy-2:#2B3590;
  --navy-deep:#141A4D;
  --blue:#2D5BFF;
  --peri:#3F9BEB;
  --lav:#E4F4FF;
  --lav-2:#C6E6FF;
  --sky:#86DAFF;
  --sky-2:#B9EAFF;
  --gold:#FFC93C;
  --pink:#FF92C2;
  --red:#FF5C5C;
  --green:#4CD38E;
  --white:#FFFFFF;
  --text:#1E2766;
  --muted:#5A6199;
  --muted-dark:rgba(255,255,255,0.8);
  --bounce:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(20px,4.2vw,96px);
  --aero-top:#0A4FC2;
  --hill:#4DB52C;
  --aero-sky:radial-gradient(ellipse 70% 60% at 18% 0%, rgba(255,255,255,0.42), transparent 60%), radial-gradient(ellipse 60% 50% at 90% 105%, rgba(142,224,78,0.45), transparent 60%), linear-gradient(180deg, #0A4FC2 0%, #1C86E6 58%, #5CC6FF 100%);
  --pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23A9D8FF' stroke-opacity='.15' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='40' cy='44' r='16'/%3E%3Ccircle cx='40' cy='44' r='9'/%3E%3Cpath d='M177 30l6 13 14 2-10 10 2 14-12-7-12 7 2-14-10-10 14-2z'/%3E%3Cpath d='M98 140h56a12 12 0 0 0 0-24 18 18 0 0 0-34-6 13 13 0 0 0-22 9 11 11 0 0 0 0 21z'/%3E%3Cpath d='M215 160q3 17 20 20-17 3-20 20-3-17-20-20 17-3 20-20z'/%3E%3Cpath d='M62 168l-10 18h10l-6 16 18-22h-11l7-12z'/%3E%3Ccircle cx='215' cy='96' r='4'/%3E%3Ccircle cx='130' cy='222' r='13'/%3E%3Ccircle cx='130' cy='222' r='7'/%3E%3Ccircle cx='24' cy='236' r='4'/%3E%3C/g%3E%3C/svg%3E");
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:clamp(15px, 0.42vw + 10px, 21px);}
body{
  margin:0;background:var(--white);color:var(--text);
  font-family:'Nunito',system-ui,sans-serif;font-size:1.08rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%;}
img,video{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{margin:0;font-family:'Fredoka','Nunito',sans-serif;font-weight:700;letter-spacing:-0.01em;line-height:1.08;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
button{font:inherit;background:none;border:none;color:inherit;cursor:pointer;padding:0;}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:8px;}
.wrap{max-width:2400px;margin:0 auto;padding:0 var(--gutter);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Pill labels */
.label{
  display:inline-block;padding:6px 14px 5px;border-radius:999px;background:var(--sky);color:var(--navy);
  font-family:'Zen Kaku Gothic New',sans-serif;font-size:0.85rem;font-weight:600;letter-spacing:0.02em;text-transform:lowercase;line-height:1.4;
}
.label.on-lav{background:var(--white);}
.label.gold{background:var(--gold);}

/* Chunky game-style buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:999px;
  font-family:'Zen Kaku Gothic New',sans-serif;font-size:1.12rem;font-weight:700;letter-spacing:0.01em;line-height:1;
  border:3px solid var(--navy);box-shadow:0 6px 0 var(--btn-shade,var(--navy));
  transition:transform .2s var(--bounce), box-shadow .2s var(--bounce), background .2s ease;
}
.btn:hover{transform:translateY(-3px) rotate(-1.5deg);box-shadow:0 9px 0 var(--btn-shade,var(--navy));}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--btn-shade,var(--navy));}
.btn svg{width:16px;height:16px;margin-top:-3px;}
.btn-gold{background:var(--gold);color:var(--navy);}
.btn-ghost{background:var(--white);color:var(--navy);--btn-shade:var(--navy-deep);border-color:var(--navy-deep);}
.btn-ink{background:var(--navy);color:var(--white);--btn-shade:var(--blue);}

.progress-bar{position:fixed;top:0;left:0;height:4px;width:0%;background:var(--gold);z-index:200;border-radius:0 4px 4px 0;}

/* Sticker look: white die-cut outline */
.sticker img{
  filter:drop-shadow(5px 0 0 #fff) drop-shadow(-5px 0 0 #fff) drop-shadow(0 5px 0 #fff) drop-shadow(0 -5px 0 #fff) drop-shadow(0 12px 0 rgba(20,26,77,0.18));
}

/* Floating doodles */
.deco{position:absolute;z-index:3;pointer-events:none;}
.deco svg{width:100%;height:100%;overflow:visible;animation:bob 4.5s ease-in-out infinite;}
.deco.d2 svg{animation-duration:5.5s;animation-delay:-1.5s;}
.deco.d3 svg{animation-duration:3.8s;animation-delay:-2.6s;}
.deco.spin svg{animation:spin 9s linear infinite;}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-6deg);}50%{transform:translateY(-14px) rotate(6deg);}}
@keyframes spin{from{transform:rotate(0);}to{transform:rotate(360deg);}}

/* Section edges */
.torn{position:relative;}
.torn::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:140px;z-index:6;pointer-events:none;
  background:linear-gradient(180deg, rgba(5,9,32,0) 0%, #070B26 100%);
}
.cloud-edge{
  position:relative;z-index:4;height:44px;margin-bottom:-1px;background-color:var(--bg,#fff);
  background-image:
    radial-gradient(circle at 50% 100%, var(--c) 36px, transparent 37px),
    radial-gradient(circle at 50% 100%, var(--c) 24px, transparent 25px);
  background-size:96px 44px, 96px 30px;
  background-position:0 100%, 48px 100%;
  background-repeat:repeat-x;
}

/* ---------- HEADER / NAV ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:150;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px var(--gutter);background:var(--navy);
  transition:padding .35s var(--ease), box-shadow .35s ease;
}
.site-header.scrolled{padding-top:9px;padding-bottom:9px;box-shadow:0 5px 0 rgba(20,26,77,0.18);}
.brand{display:flex;align-items:center;gap:12px;flex:none;color:#fff;}
.brand-cloud64{height:28px;width:auto;}
.brand-divider{width:3px;height:22px;border-radius:3px;background:rgba(255,255,255,0.35);}
.brand-tbh{display:flex;align-items:center;gap:9px;}
.brand-tbh img{height:30px;width:auto;}
.brand-name{font-family:'Sonic Logo','Zen Kaku Gothic New',sans-serif;font-size:1.15rem;letter-spacing:0.02em;}
@media (max-width:560px){.brand-cloud64,.brand-divider{display:none;}}
.main-nav{display:flex;align-items:center;gap:2px;}
.nav-item{position:relative;}
.nav-link{
  display:inline-flex;align-items:center;gap:7px;padding:10px 14px;border-radius:999px;
  font-family:'Zen Kaku Gothic New',sans-serif;font-weight:600;font-size:1rem;letter-spacing:0.01em;color:#fff;transition:color .2s ease;
}
.nav-link .caret{flex:none;width:10px;height:10px;transition:transform .25s var(--bounce);}
.nav-link:hover,.nav-item.open > .nav-link{color:var(--sky);}
.nav-item.open > .nav-link .caret{transform:rotate(180deg);}
.dropdown{
  position:absolute;top:calc(100% + 12px);left:0;min-width:270px;padding:10px;
  background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:20px;
  box-shadow:0 7px 0 var(--navy-deep);
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.96);transform-origin:top left;
  transition:opacity .2s ease, transform .3s var(--bounce), visibility .2s;
}
.dropdown::before{content:'';position:absolute;top:-15px;left:0;right:0;height:15px;}
.nav-item.open > .dropdown{opacity:1;visibility:visible;transform:none;}
@media (hover:hover){.nav-item:hover > .dropdown{opacity:1;visibility:visible;transform:none;} .nav-item:hover > .nav-link{color:var(--sky);} .nav-item:hover > .nav-link .caret{transform:rotate(180deg);}}
.dropdown .dd-label{display:block;padding:8px 12px 4px;font-family:'Zen Kaku Gothic New',sans-serif;font-size:0.8rem;font-weight:600;letter-spacing:0.02em;color:var(--peri);}
.dropdown a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px;border-radius:12px;font-size:0.95rem;font-weight:800;transition:background .15s ease;}
.dropdown a:hover{background:var(--lav);}
.dropdown a .ext{font-size:0.8rem;color:var(--muted);}
.dropdown a .soon{font-family:'Zen Kaku Gothic New',sans-serif;font-size:0.75rem;font-weight:600;text-transform:lowercase;color:var(--navy);background:var(--gold);padding:3px 8px;border-radius:999px;}
.dropdown.right{left:auto;right:0;transform-origin:top right;}
.header-actions{display:flex;align-items:center;gap:12px;flex:none;}
.header-actions .btn{padding:11px 18px 8px;font-size:0.92rem;--btn-shade:var(--navy-deep);border-color:var(--navy-deep);box-shadow:0 4px 0 var(--navy-deep);}
.menu-toggle{display:none;width:46px;height:46px;border-radius:50%;background:#fff;align-items:center;justify-content:center;flex-direction:column;gap:5px;}
.menu-toggle span{display:block;width:18px;height:3px;border-radius:3px;background:var(--navy);transition:transform .3s var(--bounce);}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg);}
.mobile-nav{
  position:fixed;inset:0;z-index:140;background:var(--navy) var(--pattern);background-size:260px;color:#fff;padding:96px var(--gutter) 48px;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .3s ease, visibility .3s;
}
.mobile-nav.open{opacity:1;visibility:visible;}
.m-group{padding:16px 0 12px;border-top:3px dashed rgba(255,255,255,0.15);}
.m-group .label{margin-bottom:8px;}
.m-group a{display:block;padding:6px 0;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.6rem;line-height:1.2;}
.m-group a:hover{color:var(--sky);}
@media (max-width:1100px){.nav-link{padding:10px 10px;font-size:0.8rem;} .header-actions .btn{padding:10px 14px 7px;}}
@media (max-width:860px){.main-nav,.header-actions .btn{display:none;} .menu-toggle{display:flex;}}

/* ---------- PARALLAX HELPERS ---------- */
[data-speed],[data-speed-x],[data-scale-in]{will-change:transform;}

/* ---------- REVEALS (bouncy) ---------- */
.reveal{opacity:0;transform:translateY(40px) scale(.96);transition:opacity .9s ease, transform 1s var(--bounce);}
.reveal.in-view{opacity:1;transform:none;}
.reveal-stagger > *{opacity:0;transform:translateY(36px) scale(.94);transition:opacity .8s ease, transform .9s var(--bounce);}
.reveal-stagger.in-view > *{opacity:1;transform:none;}
.reveal-stagger.in-view > *:nth-child(2){transition-delay:.1s;}
.reveal-stagger.in-view > *:nth-child(3){transition-delay:.2s;}
.reveal-stagger.in-view > *:nth-child(4){transition-delay:.3s;}
.reveal-stagger.in-view > *:nth-child(5){transition-delay:.4s;}
.reveal-stagger.in-view > *:nth-child(6){transition-delay:.5s;}
.reveal-stagger.in-view > *:nth-child(7){transition-delay:.6s;}

/* ---------- UPCOMING (HOME HERO) ---------- */
.upcoming{position:relative;min-height:max(100vh,700px);overflow:hidden;isolation:isolate;color:#fff;background:#04061A;}
.slide{
  position:absolute;inset:0;overflow:hidden;display:flex;align-items:center;padding:120px 0 150px;
  opacity:0;visibility:hidden;transition:opacity .9s ease, visibility 0s linear .9s;
}
.slide.is-active{opacity:1;visibility:visible;transition:opacity .9s ease, visibility 0s;}
.up-disc-wrap{position:absolute;inset:0;pointer-events:none;}
.up-disc{
  position:absolute;right:5vw;top:calc(50% - min(23vw,38vh));width:min(46vw,76vh);aspect-ratio:1;border-radius:50%;
  background:var(--navy-2);box-shadow:inset 0 0 0 clamp(14px,1.6vw,26px) rgba(255,255,255,0.06), 0 0 0 clamp(14px,1.6vw,26px) rgba(43,53,144,0.45);
}
.up-sonic{position:absolute;z-index:1;right:3vw;bottom:0;height:min(90vh,940px,62vw);pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 20%);mask-image:linear-gradient(90deg,transparent 0%,#000 20%);}
.up-sonic img{height:100%;width:auto;max-width:none;}
.slide.is-active .up-sonic img,.slide.is-active .studio-orb{animation:sonicIn 1.3s var(--bounce) .3s both;}
@keyframes sonicIn{from{opacity:0;transform:translateY(16%) scale(.92);}to{opacity:1;transform:none;}}
.up-content{position:relative;z-index:2;width:100%;}
.slide.is-active .up-content > *{animation:popIn .9s var(--bounce) both;}
.up-content > :nth-child(1){animation-delay:.15s;}
.up-content > :nth-child(2){animation-delay:.3s;}
.up-content > :nth-child(3){animation-delay:.5s;}
.up-content > :nth-child(4){animation-delay:.62s;}
.up-content > :nth-child(5){animation-delay:.74s;}
@keyframes popIn{from{opacity:0;transform:translateY(30px) scale(.9);}to{opacity:1;transform:none;}}
.up-title{margin-top:1.2rem;width:min(34vw,54vh);font-size:0;}
.up-title img{width:100%;height:auto;}
.trailer-badge{
  margin-top:22px;display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px 7px 12px;border-radius:999px;background:#fff;color:var(--navy);
  font-family:'Zen Kaku Gothic New',sans-serif;font-size:0.95rem;font-weight:600;letter-spacing:0.01em;text-transform:lowercase;
}
.trailer-badge .rec{width:10px;height:10px;border-radius:50%;background:var(--red);animation:recPulse 1.8s ease-out infinite;}
@keyframes recPulse{0%{box-shadow:0 0 0 0 rgba(255,92,92,0.7);}70%{box-shadow:0 0 0 10px rgba(255,92,92,0);}100%{box-shadow:0 0 0 0 rgba(255,92,92,0);}}
.up-lede{margin-top:1.2rem;max-width:clamp(28rem,34vw,40rem);font-size:1.15rem;font-weight:600;color:var(--muted-dark);}
.up-lede strong{color:#fff;font-weight:900;}
.up-actions{margin-top:30px;display:flex;flex-wrap:wrap;gap:16px;}
@media (max-width:860px){
  .slide{align-items:flex-end;padding-bottom:130px;}
  .up-disc{right:-30vw;top:10vh;width:90vw;}
  .up-sonic{z-index:auto;right:-30vw;bottom:auto;top:8vh;height:58vh;opacity:0.55;}
  .up-title{width:min(440px,84vw);}
  .up-lede{max-width:none;}
  .trailer-badge{font-size:0.85rem;}
  .upcoming .deco,.team-hero .deco{display:none;}
}

/* ---------- FRAMES ---------- */
.frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--navy);border:6px solid var(--navy);border-radius:28px;box-shadow:0 12px 0 var(--lav-2);}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}

/* ---------- TRAILER ---------- */
.trailer{position:relative;background:#fff;padding:110px 0 140px;overflow:hidden;}
.section-head{text-align:center;max-width:52rem;margin:0 auto;}
.section-head h2{margin-top:16px;font-size:clamp(2.8rem,6.5vw,8rem);color:var(--navy);}
.section-head p{margin-top:16px;font-weight:600;color:var(--muted);}
.section-head p.label{margin-top:0;color:var(--navy);font-weight:900;}
.section-head p a{color:var(--blue);font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;}
.film{position:relative;margin-top:50px;max-width:calc((100vh - 120px) * 16 / 9);margin-inline:auto;}

/* ---------- ABOUT ---------- */
.about{position:relative;background:var(--lav);color:var(--navy);padding:120px 0 170px;overflow:hidden;}
.about-inner{position:relative;z-index:2;max-width:62rem;margin:0 auto;text-align:center;}
.about-heading{margin-top:16px;font-size:clamp(3rem,6vw,8rem);color:var(--navy);}
.about-inner p{margin-top:22px;font-size:1.2rem;font-weight:600;line-height:1.8;color:var(--muted);}
.about-inner p.label{margin-top:0;font-size:0.72rem;line-height:1.4;color:var(--navy);font-weight:900;}
.about-inner .btn{margin-top:38px;}
.about-art{position:absolute;z-index:1;pointer-events:none;}
.about-art img{width:100%;height:auto;}
.about-art.a-left{left:-2vw;bottom:-6px;width:min(24vw,340px);}
.about-art.a-right{right:-4vw;top:40px;width:min(28vw,400px);}
.about-art.a-right img{transform:scaleX(-1) rotate(-4deg);}
.about-stamp-wrap{position:absolute;z-index:1;left:0;right:0;top:40px;text-align:center;pointer-events:none;overflow:hidden;}
.about-stamp{display:inline-block;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:700;font-size:22vw;line-height:0.9;white-space:nowrap;color:var(--lav-2);opacity:0.7;}
@media (max-width:980px){.about-art{opacity:0.3;} .about-art.a-left{width:44vw;} .about-art.a-right{width:50vw;}}

/* ---------- TBH BAND ---------- */
.band{position:relative;background:var(--navy) var(--pattern);background-size:260px;color:#fff;padding:90px 0 150px;overflow:hidden;}
.band-card{position:relative;max-width:min(1400px,calc((100vh - 200px) * 16 / 9));margin:0 auto;aspect-ratio:16/9;overflow:hidden;border-radius:32px;border:6px solid #fff;box-shadow:0 12px 0 var(--navy-deep);}
.band-img{position:absolute;left:0;right:0;top:-12%;height:124%;}
.band-img img{width:100%;height:100%;object-fit:cover;}
.band-caption{margin-top:44px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;}
.band-caption .band-line{font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(2rem,3.8vw,3.8rem);line-height:1.05;}

/* ---------- VIDEOS ---------- */
.videos{position:relative;padding:100px 0 150px;overflow:hidden;background:#fff;}
.section-head .meta-pill{margin-top:18px;}
.video-embed{margin-top:46px;max-width:calc((100vh - 140px) * 16 / 9);margin-inline:auto;}
.catalog-head{margin-top:100px;text-align:center;}
.video-catalog{margin-top:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,34px);}
.video-card{display:block;padding:14px 14px 20px;border-radius:26px;background:var(--lav);}
.video-card{transition:transform .35s var(--bounce), background .25s ease, opacity .8s ease;}
.video-card:hover{background:var(--sky-2);}
.video-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:var(--navy);}
.video-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.video-card:hover .video-thumb img{transform:scale(1.06);}
.video-title{display:block;margin-top:16px;padding:0 6px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.15rem;line-height:1.3;color:var(--navy);}
.video-catalog.in-view > .video-card:nth-child(1){transform:rotate(-1.2deg);}
.video-catalog.in-view > .video-card:nth-child(2){transform:rotate(0.8deg);}
.video-catalog.in-view > .video-card:nth-child(3){transform:rotate(-0.6deg);}
.video-catalog.in-view > .video-card:hover{transform:translateY(-8px) scale(1.02);transition-delay:0s;}
@media (max-width:900px){.video-catalog{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.video-catalog{grid-template-columns:1fr;}}

/* ---------- CTA ---------- */
.cta{position:relative;background:var(--sky);color:#fff;padding:90px 0 130px;overflow:hidden;}
.cta .wrap{position:relative;z-index:2;}
.cta h2{
  font-size:clamp(3.4rem,8.5vw,12rem);max-width:62vw;line-height:0.95;color:#fff;
  -webkit-text-stroke:clamp(6px,0.7vw,12px) var(--navy);paint-order:stroke fill;text-shadow:0 clamp(6px,0.6vw,10px) 0 var(--navy);
}
.cta .btn{margin-top:40px;}
.cta-art{position:absolute;z-index:3;right:0;top:50%;width:min(42vw,600px);pointer-events:none;}
.cta-art img{transform:translateY(-50%);}
@media (max-width:860px){.cta-art{opacity:0.4;width:80vw;right:-30vw;} .cta h2{max-width:none;}}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--navy);color:#fff;padding:70px 0 36px;}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;}
.footer-brand img{height:30px;width:auto;}
.footer-brand p{margin-top:16px;max-width:22rem;font-size:0.95rem;font-weight:600;color:var(--muted-dark);}
.footer-brand a{color:var(--sky);font-weight:800;}
.footer-col .label{margin-bottom:12px;}
.footer-col a{display:block;padding:5px 0;font-weight:800;font-size:0.98rem;color:#fff;transition:color .2s ease, transform .2s var(--bounce);}
.footer-col a:hover{color:var(--sky);transform:translateX(4px);}
.footer-bottom{margin-top:60px;padding-top:24px;border-top:3px dashed rgba(255,255,255,0.15);display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-size:0.85rem;font-weight:700;color:var(--muted-dark);}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;} .footer-brand{grid-column:1/-1;}}

/* ---------- TEAM PAGE ---------- */
.team-hero{position:relative;padding:190px 0 150px;overflow:hidden;background:var(--navy) var(--pattern);background-size:260px;color:#fff;}
.team-hero .wrap{position:relative;z-index:2;}
.team-hero-art{position:absolute;z-index:1;right:6vw;bottom:0;width:min(26vw,360px);pointer-events:none;}
@media (max-width:860px){.team-hero-art{opacity:0.35;width:52vw;right:-10vw;}}

.hero-title{font-size:clamp(4rem,11vw,14rem);margin-top:18px;}
.hero-title .title-word{display:inline-block;animation:titleWordIn 1s var(--bounce) both;}
.hero-title .title-word:nth-of-type(1){animation-delay:.15s;}
.hero-title .title-accent{color:var(--gold);animation:titleWordIn 1s var(--bounce) .4s both;}
.hero-title .title-dot{display:inline-block;color:var(--pink);animation:dotPop .7s var(--bounce) 1s both;}
@keyframes titleWordIn{0%{opacity:0;transform:translateY(60px) scale(.7) rotate(-6deg);}100%{opacity:1;transform:none;}}
@keyframes dotPop{0%{opacity:0;transform:scale(0);}100%{opacity:1;transform:scale(1);}}

.crew{position:relative;padding:80px 0 130px;background:#fff;}
.cast{position:relative;padding:90px 0 130px;background:var(--lav);}
.cast .section-head{margin-bottom:46px;}
.bio-role{margin-top:8px;font-family:'Zen Kaku Gothic New',sans-serif;font-size:0.95rem;font-weight:600;color:var(--peri);}
.avatar{
  width:92px;height:92px;border-radius:50%;flex:none;overflow:hidden;background:var(--sky);
  border:5px solid #fff;box-shadow:0 0 0 3px var(--navy);
}
.avatar img{width:100%;height:100%;object-fit:cover;}
.member-bio{margin-top:14px;font-size:0.98rem;font-weight:600;line-height:1.7;color:var(--muted);}
.member-bio strong{color:var(--navy);font-weight:900;}
.member-links{margin-top:auto;padding-top:18px;display:flex;flex-wrap:wrap;gap:8px;}
.member-links a{padding:6px 12px 5px;border-radius:999px;background:#fff;color:var(--navy);font-size:0.78rem;font-weight:900;transition:background .2s ease, transform .2s var(--bounce);}
.member-links a:hover{background:var(--gold);transform:translateY(-2px);}
.founder-badge{align-self:flex-start;margin-bottom:10px;padding:5px 12px 4px;background:var(--gold);color:var(--navy);border-radius:999px;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:600;font-size:0.85rem;text-transform:lowercase;}

.member-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,18.5rem),1fr));gap:28px;}
.member-card{
  display:flex;flex-direction:column;padding:28px;border-radius:28px;background:var(--lav);
  transition:transform .35s var(--bounce), background .25s ease, opacity .8s ease;
}
.member-grid.in-view > .member-card:hover{transform:translateY(-8px) rotate(-1deg);transition-delay:0s;background:var(--sky-2);}
.member-card .avatar{width:84px;height:84px;margin-bottom:20px;}
.member-card h3{font-size:clamp(1.7rem,2.2vw,2.3rem);color:var(--navy);}
.member-card-founder{background:#FFF1C7;}
.member-card-founder .avatar{box-shadow:0 0 0 3px var(--navy), 0 0 0 9px var(--gold);}
.cast .member-card{background:#fff;}
.cast .member-card .member-links a{background:var(--lav);}


/* ---------- HERO SLIDER ---------- */
.studio-orb{
  position:absolute;z-index:1;right:3.5vw;top:calc(50% - min(18vw,31vh));width:min(36vw,62vh);aspect-ratio:1;border-radius:50%;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  background:radial-gradient(circle at 34% 26%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.25) 24%, rgba(255,255,255,0.06) 55%, rgba(120,210,255,0.35) 100%);
  border:2px solid rgba(255,255,255,0.6);
  box-shadow:inset 0 -40px 80px rgba(120,220,255,0.4), 0 0 90px rgba(180,235,255,0.45);
}
.studio-orb .orb-logo{width:64%;height:auto;filter:drop-shadow(0 10px 0 rgba(10,79,194,0.35));animation:bob 5s ease-in-out infinite;}
.studio-orb .orb-icon{position:absolute;left:-4%;bottom:2%;width:34%;height:auto;filter:drop-shadow(5px 0 0 #fff) drop-shadow(-5px 0 0 #fff) drop-shadow(0 5px 0 #fff) drop-shadow(0 -5px 0 #fff) drop-shadow(0 12px 0 rgba(20,26,77,0.18));animation:bob 4.2s ease-in-out -1.4s infinite;}
.studio-title{font-size:clamp(3rem,6.2vw,7.4rem);line-height:1.05;max-width:11ch;margin-top:1rem;text-shadow:0 6px 0 rgba(8,58,148,0.45);}
.studio-title .accent{color:var(--gold);}
.studio-title .dot{color:var(--pink);}
.slide-studio .up-lede{color:#fff;text-shadow:0 1px 2px rgba(8,58,148,0.35);}

.slider-ui{position:absolute;z-index:8;left:0;right:0;bottom:62px;display:flex;align-items:center;justify-content:center;gap:14px;pointer-events:none;}
@media (min-width:861px){.slider-ui{justify-content:flex-end;padding-right:var(--gutter);bottom:56px;}}
.slider-ui > *{pointer-events:auto;}
.slider-arrow{
  width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.12));border:1px solid rgba(255,255,255,0.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.8), 0 6px 18px rgba(0,0,0,0.25);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;transition:transform .2s var(--bounce), background .2s ease;
}
.slider-arrow:hover{transform:scale(1.1);background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.2));}
.slider-arrow svg{width:18px;height:18px;}
.slider-dots{display:flex;gap:10px;padding:9px 12px;border-radius:999px;background:rgba(255,255,255,0.16);border:1px solid rgba(255,255,255,0.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.slider-dot{position:relative;width:12px;height:12px;border-radius:999px;background:rgba(255,255,255,0.55);overflow:hidden;transition:width .4s var(--bounce), background .3s ease;}
.slider-dot[aria-current="true"]{width:46px;background:rgba(255,255,255,0.35);}
.slider-dot[aria-current="true"]::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,#FFE27A,#FFC93C);transform-origin:left;transform:scaleX(0);animation:dotFill var(--slide-time,7s) linear forwards;}
.upcoming.is-paused .slider-dot[aria-current="true"]::after{animation-play-state:paused;}
@keyframes dotFill{to{transform:scaleX(1);}}
@media (max-width:860px){
  .studio-orb{right:-18vw;top:12vh;width:70vw;opacity:0.5;}
  .slider-ui{bottom:56px;}
  .slider-arrow{width:40px;height:40px;}
}

/* =========================================================
   FRUTIGER AERO LAYER: gloss, glass, bubbles, sky + grass
   ========================================================= */
.slide-studio,.band,.team-hero,.mobile-nav{background:var(--pattern) 0 0/260px, var(--aero-sky);}
.site-footer{background:radial-gradient(ellipse 60% 80% at 80% 0%, rgba(92,198,255,0.35), transparent 60%), linear-gradient(180deg, var(--aero-top) 0%, #083A94 100%);}

/* Dark faded top bar: solid at the top, fading out into the page */
.site-header{
  background:linear-gradient(180deg, rgba(3,5,22,0.92) 0%, rgba(3,5,22,0.7) 55%, rgba(3,5,22,0) 100%);
  box-shadow:none;padding-bottom:28px;
}
.site-header::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  -webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 100%);mask-image:linear-gradient(180deg,#000 45%,transparent 100%);
}
.site-header.scrolled{
  background:linear-gradient(180deg, rgba(3,5,22,0.96) 0%, rgba(3,5,22,0.82) 55%, rgba(3,5,22,0) 100%);
  box-shadow:none;padding-bottom:22px;
}
.dropdown{
  background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(232,246,255,0.92));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.95);box-shadow:0 18px 40px rgba(10,79,194,0.3), inset 0 1px 0 #fff;
}

/* Gel gloss on buttons + pills */
.btn{position:relative;isolation:isolate;}
.btn::before{
  content:'';position:absolute;z-index:-1;left:8%;right:8%;top:2px;height:48%;border-radius:999px;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.12));
}
.btn-gold{background:linear-gradient(180deg, #FFE27A 0%, #FFC93C 55%, #F5A800 100%);}
.btn-ink{background:linear-gradient(180deg, #3FA2FF 0%, #1667D6 55%, #0A4FC2 100%);border-color:#083A94;--btn-shade:#083A94;}
.btn-ghost{background:linear-gradient(180deg, #FFFFFF 0%, #EAF6FF 60%, #CFE9FF 100%);}
.label{background-image:linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0) 60%);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.6), 0 2px 6px rgba(10,79,194,0.18);}
.trailer-badge,.founder-badge,.dropdown a .soon{background-image:linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0) 60%);}

/* Glossy orb behind hero Sonic */
.up-disc{
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.18) 26%, rgba(255,255,255,0.04) 55%, rgba(120,210,255,0.25) 100%);
  border:2px solid rgba(255,255,255,0.45);
  box-shadow:inset 0 -30px 60px rgba(120,220,255,0.35), 0 0 80px rgba(160,230,255,0.35);
}

/* Light sections: airy sky wash */
.trailer,.videos,.crew{background:linear-gradient(180deg, #FFFFFF 0%, #F1FAFF 100%);}
.about,.cast{background:linear-gradient(180deg, var(--lav) 0%, #D3EEFF 100%);}

/* Glass cards */
.member-card,.video-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(232,246,255,0.75) 100%);
  border:1px solid rgba(255,255,255,0.95);
  box-shadow:0 14px 34px rgba(10,79,194,0.14), inset 0 1px 0 #fff, inset 0 -8px 20px rgba(120,200,255,0.18);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.member-card-founder{background:linear-gradient(180deg, #FFF8DF 0%, #FFE9A8 100%);}
.member-grid.in-view > .member-card:hover,.video-card:hover{background:linear-gradient(180deg, #FFFFFF 0%, #CFEFFF 100%);}
.frame{box-shadow:0 12px 0 var(--lav-2), 0 26px 50px rgba(10,79,194,0.25);border-color:var(--aero-top);}
.band-card{box-shadow:0 12px 0 rgba(8,58,148,0.6), 0 30px 60px rgba(0,30,90,0.35);}

/* CTA: blue sky + rolling green hill */
.cta{background:radial-gradient(ellipse 50% 60% at 15% 10%, rgba(255,255,255,0.6), transparent 60%), linear-gradient(180deg, #2E9BF0 0%, #7FD3FF 60%, #C8F0FF 100%);padding-bottom:170px;}
.cta::after{
  content:'';position:absolute;z-index:1;left:-15%;right:-15%;bottom:-62%;height:95%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse 40% 30% at 40% 8%, rgba(255,255,255,0.55), transparent 70%), linear-gradient(180deg, #A9EE6A 0%, #6CCB3B 30%, var(--hill) 60%);
  box-shadow:inset 0 6px 14px rgba(255,255,255,0.55);
}

/* Bubbles */
.bubbles{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.bubble{
  position:absolute;bottom:-90px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,0.95) 0 7%, rgba(255,255,255,0.28) 15%, rgba(190,235,255,0.08) 45%, rgba(140,215,255,0.22) 72%, rgba(255,255,255,0.65) 100%);
  box-shadow:inset 0 0 10px rgba(255,255,255,0.35);
  animation:bubbleRise var(--d,18s) linear var(--delay,0s) infinite;
}
@keyframes bubbleRise{
  0%{transform:translate(0,0);opacity:0;}
  8%{opacity:1;}
  50%{transform:translate(var(--sway,30px),-60vh);}
  92%{opacity:1;}
  100%{transform:translate(0,-125vh);opacity:0;}
}
.slide > .wrap,.about > .wrap,.band > .wrap,.cta > .wrap,.team-hero > .wrap,.crew > .wrap,.cast > .wrap{position:relative;z-index:2;}

/* Teaser slide stays dark: night sky with a plague glow */
.slide-teaser{
  background:radial-gradient(ellipse 45% 55% at 78% 55%, rgba(76,211,142,0.24), transparent 65%),
    radial-gradient(ellipse 40% 45% at 8% 100%, rgba(255,70,70,0.2), transparent 65%),
    radial-gradient(ellipse 60% 50% at 30% 0%, rgba(45,91,255,0.28), transparent 60%),
    linear-gradient(180deg, #04061A 0%, #0A0F2E 60%, #11174A 100%);
}
.slide-teaser::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 75% 70% at 50% 45%, transparent 55%, rgba(0,0,8,0.55) 100%);}
.slide-teaser .bubbles{opacity:0.35;}
.slide-teaser .up-disc{
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.03) 40%, rgba(76,211,142,0.12) 100%);
  border-color:rgba(255,255,255,0.12);
  box-shadow:inset 0 -30px 60px rgba(76,211,142,0.18), 0 0 120px rgba(76,211,142,0.22);
}
.slide-teaser .sticker img{filter:drop-shadow(0 0 40px rgba(76,211,142,0.35)) drop-shadow(0 20px 40px rgba(0,0,0,0.6));}

/* =========================================================
   DARK AERO (PS3 XMB) LAYER: deep blues, neon mist, light ribbons
   ========================================================= */
:root{
  --text:#EAF2FF;
  --muted:rgba(214,228,255,0.72);
  --lav:#0B1440;
  --lav-2:#16245E;
  --neon:#2EC5FF;
  --neon-soft:rgba(46,197,255,0.55);
  --hill:#0B3A18;
  --aero-sky:radial-gradient(ellipse 70% 60% at 18% 0%, rgba(46,197,255,0.22), transparent 60%), radial-gradient(ellipse 60% 55% at 90% 100%, rgba(122,76,255,0.25), transparent 60%), linear-gradient(180deg, #04071F 0%, #0A1A55 60%, #0D2A7A 100%);
}
body{background:#03051A;}

/* Section skies */
.trailer,.videos,.crew{background:#070B26;}
.about,.cast{background:linear-gradient(180deg, #0B1440 0%, #0A1238 100%);color:var(--text);}
.cta{background:radial-gradient(ellipse 50% 60% at 15% 10%, rgba(46,197,255,0.3), transparent 60%), radial-gradient(ellipse 40% 50% at 85% 30%, rgba(255,79,216,0.18), transparent 60%), linear-gradient(180deg, #0A1E5E 0%, #123A9A 55%, #1B5BC8 100%);}
.cta::after{
  background:radial-gradient(ellipse 40% 30% at 40% 8%, rgba(170,255,120,0.35), transparent 70%), linear-gradient(180deg, #2E8F2A 0%, #175A1E 30%, var(--hill) 60%);
  box-shadow:0 -6px 40px rgba(142,255,90,0.45), inset 0 3px 0 rgba(170,255,120,0.85);
}
.site-footer{position:relative;overflow:hidden;background:radial-gradient(ellipse 60% 80% at 80% 0%, rgba(46,197,255,0.16), transparent 60%), linear-gradient(180deg, #03051A 0%, #060A2A 100%);}
.site-footer > .wrap,.trailer > .wrap,.videos > .wrap{position:relative;z-index:2;}

/* Neon type */
h1,h2,h3{text-shadow:0 0 22px rgba(46,197,255,0.45), 0 0 2px rgba(255,255,255,0.5);}
.section-head h2,.about-heading,.member-card h3,.video-title{color:#fff;}
.section-head p,.about-inner p,.member-bio{color:var(--muted);}
.about-inner p strong,.member-bio strong{color:#fff;}
.section-head p a{color:var(--neon);}
.bio-role{color:#7FDBFF;}
.about-stamp{color:transparent;-webkit-text-stroke:2px rgba(46,197,255,0.14);opacity:1;}
.cta h2{text-shadow:0 clamp(6px,0.6vw,10px) 0 var(--navy), 0 0 40px rgba(46,197,255,0.6);}
.studio-title{text-shadow:0 0 30px rgba(46,197,255,0.6), 0 6px 0 rgba(3,5,26,0.6);}

/* Neon glass pills */
.label,.label.on-lav{
  background:rgba(46,197,255,0.14);color:#BFF0FF;border:1px solid rgba(46,197,255,0.55);
  box-shadow:0 0 14px rgba(46,197,255,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.section-head p.label,.about-inner p.label{color:#BFF0FF;}
.label.gold{background:rgba(255,201,60,0.16);color:#FFE08A;border-color:rgba(255,201,60,0.6);box-shadow:0 0 14px rgba(255,201,60,0.3);}

/* Buttons keep the gel, gain a neon halo */
.btn-gold{box-shadow:0 6px 0 var(--navy), 0 0 22px rgba(255,201,60,0.45);}
.btn-gold:hover{box-shadow:0 9px 0 var(--navy), 0 0 30px rgba(255,201,60,0.6);}
.btn-ink{box-shadow:0 6px 0 #083A94, 0 0 22px rgba(46,197,255,0.5);}
.btn-ghost{box-shadow:0 6px 0 var(--navy-deep), 0 0 18px rgba(190,235,255,0.35);}

/* Dark glass cards with neon rims */
.member-card,.video-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
  border:1px solid rgba(120,210,255,0.28);
  box-shadow:0 18px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.18), 0 0 0 0 rgba(46,197,255,0);
}
.member-grid.in-view > .member-card:hover,.video-card:hover{
  background:linear-gradient(180deg, rgba(46,197,255,0.16) 0%, rgba(46,197,255,0.04) 100%);
  border-color:rgba(46,197,255,0.8);box-shadow:0 0 28px rgba(46,197,255,0.45), inset 0 1px 0 rgba(255,255,255,0.3);
}
.member-card-founder{background:linear-gradient(180deg, rgba(255,201,60,0.2) 0%, rgba(255,201,60,0.05) 100%);border-color:rgba(255,201,60,0.6);box-shadow:0 0 26px rgba(255,201,60,0.25), inset 0 1px 0 rgba(255,255,255,0.2);}
.cast .member-card{background:linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);}
.member-links a,.cast .member-card .member-links a{background:rgba(46,197,255,0.14);color:#BFF0FF;border:1px solid rgba(46,197,255,0.45);}
.member-links a:hover{background:var(--gold);color:var(--navy);}
.avatar{border-color:#0B1440;box-shadow:0 0 0 3px var(--neon), 0 0 18px rgba(46,197,255,0.6);}
.member-card-founder .avatar{box-shadow:0 0 0 3px var(--navy), 0 0 0 7px var(--gold), 0 0 22px rgba(255,201,60,0.6);}

/* Neon frames */
.frame{border-color:#0B1440;box-shadow:0 0 0 2px rgba(46,197,255,0.7), 0 0 40px rgba(46,197,255,0.4), 0 24px 60px rgba(0,0,0,0.5);}
.band-card{border-color:rgba(190,235,255,0.9);box-shadow:0 0 40px rgba(46,197,255,0.45), 0 30px 60px rgba(0,0,0,0.5);}

/* Dark glass dropdowns */
.dropdown{background:linear-gradient(180deg, rgba(14,22,70,0.94), rgba(6,10,38,0.94));color:#fff;border:1px solid rgba(46,197,255,0.45);box-shadow:0 0 30px rgba(46,197,255,0.25), 0 20px 40px rgba(0,0,0,0.5);}
.dropdown a:hover{background:rgba(46,197,255,0.14);color:#BFF0FF;}
.dropdown .dd-label{color:#7FDBFF;}
.dropdown a .ext{color:var(--muted);}

/* Doodles + stickers glow */
.deco svg{filter:drop-shadow(0 0 10px rgba(46,197,255,0.45));}
.sticker img{filter:drop-shadow(5px 0 0 #fff) drop-shadow(-5px 0 0 #fff) drop-shadow(0 5px 0 #fff) drop-shadow(0 -5px 0 #fff) drop-shadow(0 0 26px rgba(46,197,255,0.55));}
.studio-orb{box-shadow:inset 0 -40px 80px rgba(46,197,255,0.35), 0 0 110px rgba(46,197,255,0.45);}

/* Neon mist clouds */
.mist{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.mist-cloud{
  position:absolute;border-radius:50%;mix-blend-mode:screen;
  animation:mistDrift var(--d,40s) ease-in-out var(--delay,0s) infinite alternate;
}
@keyframes mistDrift{from{transform:translate(0,0) scale(1);}to{transform:translate(var(--dx,8vw),var(--dy,4vh)) scale(1.15);}}

/* PS3-style light ribbons */
.waves{position:absolute;left:0;right:0;top:22%;height:62%;z-index:0;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.waves svg{position:absolute;left:0;top:0;width:200%;height:100%;max-width:none;animation:waveFlow var(--d,40s) linear infinite;}
.waves .wave-line{filter:drop-shadow(0 0 6px rgba(140,225,255,0.9));}
@keyframes waveFlow{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.site-footer .waves{opacity:0.45;top:30%;}
.about .waves{opacity:0.6;}

/* =========================================================
   PS3 XMB LAYER: one smooth gradient, a light ribbon, a little dust
   ========================================================= */
:root{
  --xmb:radial-gradient(ellipse 130% 75% at 50% 62%, #1A5BD6 0%, #0C3796 32%, #061F5E 62%, #020A26 100%);
  --xmb-deep:radial-gradient(ellipse 120% 80% at 50% 70%, #0E3A9C 0%, #072163 40%, #030D33 75%, #020718 100%);
}
.slide-studio,.band,.team-hero,.mobile-nav,.about,.cast{background:var(--xmb);}
.about,.cast{background:var(--xmb-deep);}
.cta{background:var(--xmb);}
.trailer,.videos,.crew{background:#070B26;}
.site-footer{background:linear-gradient(180deg, #03051A 0%, #050A26 100%);}
.slide-teaser{background:radial-gradient(ellipse 120% 75% at 55% 65%, #0F3B2A 0%, #0A1F2A 35%, #060B1E 65%, #020410 100%);}
.slide-teaser::before{background:radial-gradient(ellipse 75% 70% at 50% 45%, transparent 55%, rgba(0,0,8,0.6) 100%);}
.slide-teaser .up-disc{display:none;}
.about-stamp-wrap{display:none;}
@media (max-width:1100px){.about-art{display:none;}}
h1,h2,h3{text-shadow:0 0 24px rgba(120,200,255,0.35);}

/* XMB ribbon: one soft sheet with bright edges, centered low like the PS3 */
.waves{top:34%;height:56%;-webkit-mask-image:none;mask-image:none;}
.waves .wave-line{filter:drop-shadow(0 0 5px rgba(200,235,255,0.95));}
.waves.plague .wave-line{filter:drop-shadow(0 0 5px rgba(140,255,190,0.9));}
.site-footer .waves{opacity:0.35;top:20%;}
.about .waves,.cast .waves{opacity:0.75;}

/* Floating dust sparkles */
.dust{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.dust span{
  position:absolute;width:var(--s,3px);height:var(--s,3px);border-radius:50%;background:#fff;
  box-shadow:0 0 6px 2px rgba(190,230,255,0.75);opacity:0;
  animation:dustFloat var(--d,16s) ease-in-out var(--delay,0s) infinite;
}
.dust.plague span{box-shadow:0 0 6px 2px rgba(150,255,200,0.7);}
@keyframes dustFloat{
  0%{opacity:0;transform:translate(0,0);}
  20%{opacity:var(--o,0.8);}
  80%{opacity:var(--o,0.8);}
  100%{opacity:0;transform:translate(var(--dx,60px),var(--dy,-40px));}
}

/* Sound toggle */
.sound-toggle{
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.28);transition:background .2s ease, color .2s ease;
}
.sound-toggle:hover{background:rgba(255,255,255,0.16);color:var(--sky);}
.sound-toggle svg{width:20px;height:20px;}
.sound-toggle .snd-off{display:none;}
.sound-toggle[aria-pressed="false"] .snd-on{display:none;}
.sound-toggle[aria-pressed="false"] .snd-off{display:block;}
.sound-toggle[aria-pressed="false"]{color:rgba(255,255,255,0.55);}

/* ---------- BALANCE: kawaii pattern in some places, clean XMB in others ---------- */
.slide-studio,.band,.team-hero{background:var(--pattern) 0 0/260px, var(--xmb);}
.videos{background:var(--pattern) 0 0/260px, #070B26;}
.deco svg{filter:drop-shadow(0 0 8px rgba(120,200,255,0.35));}
@media (max-width:860px){.slide .deco,.team-hero .deco{display:none;}}

/* ---------- XMB FONT TRIAL: menu-style text in a Rodin-like gothic ---------- */
.nav-link,.dropdown a,.dropdown .dd-label,.label,.trailer-badge,.bio-role,.founder-badge,
.footer-col a,.footer-bottom,.m-group a,.member-links a,.dropdown a .soon{
  font-family:'Zen Kaku Gothic New','Nunito',sans-serif;
}
.nav-link{font-weight:500;font-size:0.98rem;letter-spacing:0.02em;text-shadow:0 0 10px rgba(170,215,255,0.55);}
.dropdown a{font-weight:500;}
.dropdown .dd-label,.label,.trailer-badge,.founder-badge,.bio-role{font-weight:500;letter-spacing:0.04em;}
.m-group a{font-weight:500;font-size:1.6rem;text-shadow:0 0 14px rgba(170,215,255,0.5);}
.footer-col a{font-weight:500;}
/* Paragraphs in the XMB gothic too */
body{font-family:'Zen Kaku Gothic New','Nunito',sans-serif;}
.up-lede,.section-head p,.about-inner p,.member-bio,.footer-brand p,.footer-brand a{font-weight:500;letter-spacing:0.01em;line-height:1.75;}
.up-lede strong,.about-inner p strong,.member-bio strong,.section-head p strong{font-weight:700;}
.section-head p a{font-weight:700;}

/* ---------- XMB BUTTON TRIAL: frosted glass bars, soft glow ---------- */
.btn,.header-actions .btn{
  gap:12px;padding:13px 24px;border-radius:12px;
  font-family:'Zen Kaku Gothic New','Nunito',sans-serif;font-weight:500;font-size:1rem;letter-spacing:0.03em;color:#fff;
  background:linear-gradient(180deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 51%, rgba(255,255,255,0.1) 100%);
  border:1px solid rgba(255,255,255,0.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.45), 0 4px 18px rgba(0,0,0,0.35);
  text-shadow:0 0 10px rgba(180,225,255,0.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease, transform .2s ease;
}
.btn::before{left:4px;right:4px;top:1px;height:46%;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0));}
.btn-gold{background:linear-gradient(180deg, rgba(255,255,255,0.34) 0%, rgba(190,225,255,0.16) 50%, rgba(120,190,255,0.1) 51%, rgba(160,215,255,0.2) 100%);border-color:rgba(255,255,255,0.75);}
.btn:hover,.btn:focus-visible,.btn-gold:hover,.btn-ink:hover{
  transform:none;border-color:#fff;
  background:linear-gradient(180deg, rgba(255,255,255,0.38) 0%, rgba(200,232,255,0.2) 50%, rgba(140,200,255,0.14) 51%, rgba(180,225,255,0.26) 100%);
  animation:xmbPulse 1.6s ease-in-out infinite;
}
.btn:active{transform:scale(0.97);}
@keyframes xmbPulse{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,0.6), 0 0 10px rgba(150,215,255,0.35), 0 4px 18px rgba(0,0,0,0.35);}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,0.6), 0 0 28px rgba(150,215,255,0.75), 0 4px 18px rgba(0,0,0,0.35);}
}
.btn svg{margin-top:0;}

/* ---------- GROOVY SCRIPT showpiece titles: script face over its extrude layer ---------- */
.groovy{
  position:relative;z-index:0;font-family:'Groovy Script','Fredoka',sans-serif;font-weight:400;
  letter-spacing:0;line-height:1.12;-webkit-text-stroke:0;text-shadow:none;
}
.groovy::before{
  content:attr(data-text);position:absolute;left:0;top:0;width:100%;z-index:-1;pointer-events:none;
  font-family:'Groovy Script Extrude','Fredoka',sans-serif;color:#0A2A8A;white-space:pre-line;
  text-shadow:0 0 28px rgba(46,197,255,0.55);
}
.cta h2.groovy{-webkit-text-stroke:0;text-shadow:none;}
.cta h2.groovy::before{color:#062070;}
.hero-title.groovy::before{animation:popIn .9s var(--bounce) .5s both;}
.studio-title.groovy{font-size:clamp(3.2rem,6.6vw,7.8rem);}
.section-head h2.groovy{font-size:clamp(3rem,6.5vw,7.6rem);}

/* ---------- 2011 YOUTUBE CHANNEL (Channel 2.0 era): dark glass modules over the section's own background ---------- */
.channel{padding:100px 0 170px;}
.yt12{max-width:1060px;margin:0 auto;text-align:left;color:#DDD;font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:1.45;}
.yt12 *{text-shadow:none;}
.yt12 a{color:#8CC6FF;}
.yt12 a:hover{color:#BFE0FF;text-decoration:underline;}

/* Branded header: banner + dark bar + tabs, one rounded unit */
.yt12-art{display:block;aspect-ratio:6.2/1;overflow:hidden;background:#000;border-radius:6px 6px 0 0;border:1px solid rgba(255,255,255,0.14);border-bottom:0;}
.yt12-art img{width:100%;height:100%;object-fit:cover;}
.yt12-head{
  display:flex;align-items:flex-end;gap:14px;padding:0 18px 12px;
  background:linear-gradient(180deg, rgba(28,32,52,0.94) 0%, rgba(10,12,26,0.94) 100%);
  border-left:1px solid rgba(255,255,255,0.14);border-right:1px solid rgba(255,255,255,0.14);
}
.yt12-avatar{flex:none;width:96px;height:96px;margin-top:-44px;background:#fff;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,0.6);}
.yt12-avatar img{width:100%;height:100%;object-fit:cover;}
.yt12-title{flex:1;min-width:0;padding-top:12px;}
.yt12 .yt12-name{font-family:Arial,Helvetica,sans-serif;font-weight:bold;font-size:26px;line-height:1.15;letter-spacing:-0.01em;color:#FFF;}
.yt12-by{margin-top:2px;font-size:12px;color:#9AA3B8;}
/* 2011 yellow Subscribe */
.yt12 a.yt12-subscribe{
  flex:none;display:inline-flex;align-items:center;height:28px;padding:0 14px;border-radius:3px;
  background:linear-gradient(180deg, #FFF3A6 0%, #FFD94A 45%, #F5BE00 100%);border:1px solid #C99A00;
  color:#2B2200;font-weight:bold;font-size:12px;text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 2px rgba(0,0,0,0.4);
}
.yt12 a.yt12-subscribe:hover{background:linear-gradient(180deg, #FFF7C2 0%, #FFE066 45%, #FFC800 100%);color:#2B2200;text-decoration:none;}
.yt12-logo{display:none;}
.yt12-tabs{
  display:flex;flex-wrap:wrap;gap:2px;padding:6px 14px;
  background:linear-gradient(180deg, rgba(0,0,0,0.62), rgba(0,0,0,0.78));
  border:1px solid rgba(255,255,255,0.14);border-top:1px solid rgba(255,255,255,0.08);border-radius:0 0 6px 6px;
}
.yt12 .yt12-tabs a{padding:6px 12px;border-radius:3px;color:#C9CED9;font-size:12px;font-weight:bold;text-decoration:none;}
.yt12 .yt12-tabs a:hover{background:rgba(255,255,255,0.08);color:#FFF;}
.yt12 .yt12-tabs a.is-active{background:linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08));color:#FFF;box-shadow:inset 0 1px 0 rgba(255,255,255,0.25);}

/* Content modules float on the channel background */
.yt12-body{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:16px;margin-top:16px;}
.yt12-feature,.yt12-side{
  background:rgba(6,10,30,0.8);border:1px solid rgba(255,255,255,0.12);border-radius:6px;
  box-shadow:0 12px 32px rgba(0,0,0,0.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.yt12-feature{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;padding:14px;}
.yt12-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,0.15);}
.yt12-thumb img{width:100%;height:100%;object-fit:cover;}
.yt12-playbtn{position:absolute;left:50%;top:50%;width:54px;height:38px;margin:-19px 0 0 -27px;border-radius:9px;background:rgba(20,20,20,0.82);transition:background .2s ease;}
.yt12-playbtn::after{content:'';position:absolute;left:21px;top:11px;border-left:15px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;}
.yt12-thumb:hover .yt12-playbtn{background:#CC181E;}
.yt12-module{font-size:11px;font-weight:bold;letter-spacing:0.05em;text-transform:uppercase;color:#9FB3D9;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,0.1);}
.yt12-info h3{margin-top:8px;font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:bold;line-height:1.3;letter-spacing:0;}
.yt12-meta{margin-top:4px;font-size:12px;color:#99A1B3;}
.yt12-desc{margin-top:10px;color:#CDD3DF;}
.yt12-side{padding:14px 16px;}
.yt12-about{margin:8px 0 16px;color:#EEE;}
.yt12-links{margin-top:6px;}
.yt12-links li{padding:3px 0;}
@media (max-width:860px){
  .yt12-body{grid-template-columns:1fr;}
  .yt12-feature{grid-template-columns:1fr;}
  .yt12-head{flex-wrap:wrap;}
  .yt12-avatar{width:80px;height:80px;margin-top:-36px;}
  .yt12-art{aspect-ratio:4/1;}
}

/* ---------- FOUNDER CARD without a photo ---------- */
.member-card-founder{position:relative;overflow:hidden;padding-top:34px;}
.member-card-founder::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg, #FFC93C, #FF8FD8);}
.founder-mark{position:absolute;right:-34px;top:-18px;width:230px;height:140px;background:url('cloud64_Logo.png') center/contain no-repeat;opacity:0.09;transform:rotate(-8deg);pointer-events:none;}
.member-card .founder-name{margin-top:6px;font-size:clamp(2.8rem,3.8vw,3.6rem);color:#FFD45C;}
.member-card .founder-name::before{color:#6B3600;text-shadow:0 0 22px rgba(255,201,60,0.45);}

/* ---------- A touch of neon pink ---------- */
.nav-link:hover,.nav-item.open > .nav-link{color:#FFA6E0;text-shadow:0 0 12px rgba(255,120,210,0.8);}
@media (hover:hover){.nav-item:hover > .nav-link{color:#FFA6E0;}}
.dust span.pink{box-shadow:0 0 6px 2px rgba(255,140,215,0.8);}
.slider-dot[aria-current="true"]::after{background:linear-gradient(90deg, #FFC93C, #FF8FD8);}
.member-grid.in-view > .member-card:hover{box-shadow:0 0 28px rgba(46,197,255,0.4), 0 0 22px rgba(255,120,210,0.28), inset 0 1px 0 rgba(255,255,255,0.3);}

/* ---------- BOOT INTRO: PS3-style cold boot, K-pop sparkle on the logo reveal ---------- */
body.booting{overflow:hidden;}
.boot{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;overflow:hidden;background:#000;color:#fff;transition:opacity 1s ease;}
.boot.is-done{opacity:0;pointer-events:none;}
.boot-bg{position:absolute;inset:0;background:var(--xmb);opacity:0;}
.boot-stage{position:absolute;inset:0;}
.boot-stage .waves{top:46%;height:48%;opacity:0;}
.boot-stage .dust{opacity:0;}
.boot.is-playing .boot-bg{animation:bootFade 2s ease .15s forwards;}
.boot.is-playing .boot-stage .waves{animation:bootFade 2.2s ease .6s forwards;}
.boot.is-playing .boot-stage .dust{animation:bootFade 2.2s ease 1s forwards;}
@keyframes bootFade{to{opacity:1;}}

/* Logo: blur-in with RGB split + glitch slices, then a soft pink/cyan glow pulse */
.boot-logo{position:relative;z-index:2;width:min(44vw,400px);aspect-ratio:4800/2800;opacity:0;}
.boot-logo > img{position:relative;z-index:2;width:100%;height:auto;filter:drop-shadow(0 0 26px rgba(255,255,255,0.55)) drop-shadow(0 0 60px rgba(120,200,255,0.45));}
.boot.is-playing .boot-logo{animation:bootLogo 4.8s ease .9s forwards;}
.boot.is-playing .boot-logo > img{animation:bootGlitch .55s steps(1,end) .9s both, bootGlow 2.4s ease-in-out 2.1s 1;}
@keyframes bootLogo{
  0%{opacity:0;filter:blur(14px);transform:scale(1.12);}
  18%{opacity:1;filter:blur(0);transform:scale(1);}
  84%{opacity:1;filter:blur(0);transform:scale(1.015);}
  100%{opacity:0;filter:blur(6px);transform:scale(1.04);}
}
@keyframes bootGlitch{
  0%{clip-path:inset(0 0 62% 0);transform:translateX(-12px);}
  20%{clip-path:inset(40% 0 22% 0);transform:translateX(10px);}
  40%{clip-path:inset(70% 0 0 0);transform:translateX(-6px);}
  60%{clip-path:inset(10% 0 50% 0);transform:translateX(6px);}
  80%{clip-path:inset(-60%);transform:translateX(-2px);}
  100%{clip-path:inset(-60%);transform:none;}
}
@keyframes bootGlow{
  0%,100%{filter:drop-shadow(0 0 26px rgba(255,255,255,0.55)) drop-shadow(0 0 60px rgba(120,200,255,0.45));}
  35%{filter:drop-shadow(0 0 30px rgba(255,140,215,0.85)) drop-shadow(0 0 80px rgba(255,90,190,0.5));}
  70%{filter:drop-shadow(0 0 30px rgba(120,235,255,0.85)) drop-shadow(0 0 80px rgba(46,197,255,0.5));}
}
.bl-split{position:absolute;inset:0;z-index:1;opacity:0;overflow:hidden;mix-blend-mode:screen;}
/* Tinted silhouette: the image sits off to the left and only its colored drop-shadow lands in view */
.bl-split img{position:absolute;top:0;left:-2000px;width:100%;height:auto;}
.bl-pink img{filter:drop-shadow(2000px 0 0 #FF3FA4);}
.bl-cyan img{filter:drop-shadow(2000px 0 0 #2EE6FF);}
.boot.is-playing .bl-pink{animation:splitPink 1.1s ease-out .9s both;}
.boot.is-playing .bl-cyan{animation:splitCyan 1.1s ease-out .9s both;}
@keyframes splitPink{0%{opacity:0.95;transform:translate(-16px,3px);}30%{transform:translate(9px,-2px);}55%{opacity:0.7;transform:translate(-5px,0);}100%{opacity:0;transform:none;}}
@keyframes splitCyan{0%{opacity:0.95;transform:translate(16px,-3px);}30%{transform:translate(-9px,2px);}55%{opacity:0.7;transform:translate(5px,0);}100%{opacity:0;transform:none;}}
/* Sheen sweep */
.boot-logo::after{
  content:'';position:absolute;inset:-10% -20%;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(100deg, transparent 35%, rgba(255,255,255,0.8) 50%, transparent 65%);
  -webkit-mask:url('cloud64_Logo.png') center/72% no-repeat;mask:url('cloud64_Logo.png') center/72% no-repeat;
  background-size:250% 100%;background-position:120% 0;
}
.boot.is-playing .boot-logo::after{animation:bootSheen 1.4s ease-in-out 2.3s forwards;}
@keyframes bootSheen{0%{opacity:1;background-position:120% 0;}100%{opacity:1;background-position:-30% 0;}}

/* Anamorphic lens-flare streak through the logo */
.boot-flare{position:absolute;z-index:3;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;opacity:0;pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,120,210,0.9) 30%, #fff 50%, rgba(120,235,255,0.9) 70%, transparent);
  box-shadow:0 0 18px 4px rgba(255,255,255,0.45), 0 0 40px 10px rgba(255,120,210,0.25);
}
.boot.is-playing .boot-flare{animation:bootFlare 1.2s ease-out 1.2s both;}
@keyframes bootFlare{0%{opacity:0;transform:scaleX(0);}25%{opacity:1;transform:scaleX(1);}100%{opacity:0;transform:scaleX(1.1);}}

/* Twinkles */
.boot-sparkles{position:absolute;inset:0;z-index:4;pointer-events:none;}
.boot-sparkles i{position:absolute;width:var(--s,24px);height:var(--s,24px);margin:calc(var(--s,24px) / -2) 0 0 calc(var(--s,24px) / -2);opacity:0;
  background:radial-gradient(circle, #fff 0 12%, transparent 13%), conic-gradient(from 45deg, transparent 0 20%, rgba(255,255,255,0.95) 24% 26%, transparent 30% 45%, rgba(255,255,255,0.95) 49% 51%, transparent 55% 70%, rgba(255,255,255,0.95) 74% 76%, transparent 80% 95%, rgba(255,255,255,0.95) 99% 100%);
  filter:drop-shadow(0 0 8px var(--g,#FF7AD0));
}
.boot.is-playing .boot-sparkles i{animation:twinkle .9s ease-out var(--delay,1.2s) both;}
@keyframes twinkle{0%{opacity:0;transform:scale(0) rotate(0);}35%{opacity:1;transform:scale(1.15) rotate(40deg);}100%{opacity:0;transform:scale(0.3) rotate(110deg);}}

.boot-company{
  position:absolute;z-index:2;left:0;right:0;top:calc(50% + min(16vw,150px));text-align:center;opacity:0;
  font-family:'Zen Kaku Gothic New',sans-serif;font-weight:500;font-size:0.8rem;letter-spacing:0.45em;color:rgba(255,255,255,0.85);
}
.boot.is-playing .boot-company{animation:bootCompany 3.4s ease 2s forwards;}
@keyframes bootCompany{0%{opacity:0;letter-spacing:0.6em;}30%{opacity:1;letter-spacing:0.45em;}75%{opacity:1;}100%{opacity:0;}}

/* ---------- BACKGROUND MUSIC: player tucked out of sight, note toggle in the header ---------- */
.music{position:fixed;left:0;bottom:0;width:200px;height:200px;opacity:0.01;pointer-events:none;z-index:-1;}
.music iframe{width:200px;height:200px;border:0;}
.music-btn{
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.55);
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.28);transition:background .2s ease, color .2s ease;
}
.music-btn svg{width:20px;height:20px;}
.music-btn:hover{background:rgba(255,255,255,0.16);}
.music-btn[aria-pressed="true"]{color:#fff;}
.music-btn.is-audible{color:#FF9BDB;box-shadow:0 0 14px rgba(255,120,210,0.45);}

@media (max-width:1100px){.header-actions{gap:8px;} .music-btn,.sound-toggle{width:38px;height:38px;} .brand-name{font-size:1rem;}}

/* =========================================================
   APPLE-STYLE SCROLL SCENES (pinned frames, progress-driven)
   ========================================================= */
.scene-pin{display:contents;}
.gallery{position:relative;background:var(--pattern) 0 0/260px, #070B26;padding:10px 0 150px;}
.gallery-head{text-align:center;}
.gallery-track{max-width:2400px;margin:28px auto 0;padding:0 var(--gutter);}
.videos{padding-bottom:90px;}

html.scenes-on [data-scene]{padding:0 !important;overflow:clip;}
html.scenes-on [data-scene] > .scene-pin{
  position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;background:inherit;
}
html.scenes-on [data-scene] > .scene-pin > .wrap{position:relative;z-index:2;width:100%;}

/* Hero + team header: stay put while the next section slides over them */
html.scenes-on [data-curtain]{position:sticky;top:0;z-index:0;}
html.scenes-on .upcoming{height:100vh;min-height:0;}
html.scenes-on main > section:not([data-curtain]),html.scenes-on main > div{position:relative;z-index:1;}
/* Background stays edge-to-edge; only the content recedes as the next section slides over */
html.scenes-on .upcoming .slide{filter:brightness(calc(1 - var(--hp,0) * 0.55));}
html.scenes-on .upcoming .slide > .wrap,html.scenes-on .upcoming .studio-orb,html.scenes-on .upcoming .up-sonic{scale:calc(1 - var(--hp,0) * 0.08);}
html.scenes-on .team-hero > .wrap{scale:calc(1 - var(--hp,0) * 0.1);opacity:calc(1 - var(--hp,0) * 0.9);}
html.scenes-on .team-hero-art{opacity:calc(1 - var(--hp,0) * 0.8);}

/* Trailer: headline stays put while the film rises up and settles underneath it */
html.scenes-on .trailer > .scene-pin{flex-direction:column;justify-content:center;padding-top:64px;}
html.scenes-on .trailer > .scene-pin > .wrap{display:flex;flex-direction:column;align-items:center;gap:clamp(16px,3vh,30px);}
html.scenes-on .trailer .section-head{
  --h:clamp(0, calc(var(--p,0) / 0.6), 1);
  position:relative;transform:none;opacity:1;
  translate:0 calc(var(--h) * -1.5vh);scale:calc(1 - var(--h) * 0.04);
}
html.scenes-on .trailer .film{
  --z:clamp(0, calc(var(--p,0) / 0.7), 1);
  position:relative;margin:0;transform:none;
  width:min(84vw, calc((100vh - 340px) * 16 / 9));max-width:none;
  translate:0 calc((1 - var(--z)) * 16vh);scale:calc(0.84 + var(--z) * 0.16);opacity:calc(0.35 + var(--z) * 0.65);
}
html.scenes-on .trailer .film .frame{box-shadow:0 0 0 2px rgba(46,197,255,0.7), 0 0 calc(20px + var(--z) * 40px) rgba(46,197,255,0.45), 0 24px 60px rgba(0,0,0,0.5);}

/* About: words light up as you scroll, stickers slide in from the sides */
html.scenes-on .about .about-inner{transform:none;opacity:1;}
html.scenes-on .about-inner p[data-words] .w{opacity:clamp(0.16, calc((var(--p,0) * 1.45 - 0.08) * var(--n) - var(--i) + 1), 1);transition:opacity .12s linear;}
html.scenes-on .about .about-art{--s:clamp(0, calc(var(--p,0) / 0.45), 1);}
html.scenes-on .about .about-art.a-left{translate:calc((1 - var(--s)) * -38vw) 0;}
html.scenes-on .about .about-art.a-right{translate:calc((1 - var(--s)) * 38vw) 0;}
html.scenes-on .about-inner .btn{opacity:clamp(0, calc((var(--p,0) - 0.72) / 0.14), 1);translate:0 calc((1 - clamp(0, calc((var(--p,0) - 0.72) / 0.14), 1)) * 20px);}

/* Channel: the 2012 YouTube window tilts up into view */
html.scenes-on .channel > .scene-pin{perspective:1400px;}
html.scenes-on .channel .yt12{
  --s:clamp(0, calc(var(--p,0) / 0.55), 1);
  transform-origin:50% 100%;transform:none;opacity:calc(0.25 + var(--s) * 0.75);
  rotate:x calc((1 - var(--s)) * 34deg);scale:calc(0.8 + var(--s) * 0.2);translate:0 calc((1 - var(--s)) * 12vh);
}

/* Gallery: vertical scroll drives the cards sideways */
html.scenes-on .gallery > .scene-pin{flex-direction:column;justify-content:center;align-items:stretch;gap:30px;}
html.scenes-on .gallery-track{
  display:flex;gap:clamp(18px,2vw,34px);width:max-content;max-width:none;margin:0;
  translate:calc(var(--shift,0px) * var(--p,0) * -1) 0;
}
html.scenes-on .gallery-track .video-card{flex:none;width:clamp(320px,40vw,620px);}
html.scenes-on .gallery-track .video-title{font-size:1.5rem;}

/* Subscribe: title scales up, Sonic flies in, the hill rises */
html.scenes-on .cta > .scene-pin{--s:clamp(0, calc(var(--p,0) / 0.5), 1);}
html.scenes-on .cta::after{display:none;}
html.scenes-on .cta > .scene-pin::after{
  content:'';position:absolute;z-index:1;left:-15%;right:-15%;bottom:-62%;height:95%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse 40% 30% at 40% 8%, rgba(170,255,120,0.35), transparent 70%), linear-gradient(180deg, #2E8F2A 0%, #175A1E 30%, var(--hill) 60%);
  box-shadow:0 -6px 40px rgba(142,255,90,0.45), inset 0 3px 0 rgba(170,255,120,0.85);
  translate:0 calc((1 - var(--s)) * 35vh);
}
html.scenes-on .cta .wrap{transform:none;opacity:1;}
html.scenes-on .cta h2{scale:calc(0.6 + var(--s) * 0.4);opacity:calc(0.2 + var(--s) * 0.8);transform-origin:0 50%;}
html.scenes-on .cta .btn{opacity:clamp(0, calc((var(--p,0) - 0.45) / 0.2), 1);}
html.scenes-on .cta-art{translate:calc((1 - var(--s)) * 60vw) calc((1 - var(--s)) * 25vh);}

/* ---------- CHROME GLASS TITLE (TWICE "Ready To Be" style) ---------- */
.studio-title.chrome-title{
  max-width:none;margin-top:0.4rem;line-height:1;text-shadow:none;
  font-family:'Groovy Script','Fredoka',sans-serif;font-weight:400;letter-spacing:0;
}
.ct-line{position:relative;display:block;width:max-content;max-width:100%;}
.ct-small{font-size:clamp(2.4rem,min(5vw,11vh),6.4rem);}
.ct-big{font-size:clamp(4.6rem,min(12.6vw,27vh),17rem);line-height:0.92;margin-top:-0.04em;}
.ct-float{position:relative;display:block;}
@media (max-height:720px) and (min-width:861px){.slide-studio{padding-top:96px;padding-bottom:110px;} .slide-studio .up-lede{margin-top:0.8rem;} .slide-studio .up-actions{margin-top:20px;}}
/* Dark glass depth from the extrude face */
.ct-ex{
  position:absolute;left:0;top:0;white-space:nowrap;pointer-events:none;
  font-family:'Groovy Script Extrude','Fredoka',sans-serif;color:rgba(14,28,78,0.9);
  filter:drop-shadow(0 0 26px rgba(120,190,255,0.35));
}
/* Liquid chrome face */
.ct-face{
  position:relative;display:block;white-space:nowrap;color:transparent;
  background:linear-gradient(180deg, #FFFFFF 0%, #F2F7FF 12%, #CFE0F7 28%, #8FA9D2 44%, #5F7FB8 49%, #DCE9FF 54%, #B5C9E8 68%, #F4F8FF 88%, #FFFFFF 100%);
  background-size:100% 180%;background-position:0 0;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-stroke:1px rgba(255,255,255,0.4);
  filter:drop-shadow(0 1px 0 rgba(255,255,255,0.5)) drop-shadow(0 0 18px rgba(170,215,255,0.5));
  animation:ctLiquid 6s ease-in-out infinite alternate;
}
@keyframes ctLiquid{to{background-position:0 100%;}}
/* Gleam that sweeps across the letters */
.ct-face::after{
  content:attr(data-t);position:absolute;left:0;top:0;white-space:nowrap;color:transparent;-webkit-text-stroke:0;
  background:linear-gradient(110deg, transparent 38%, rgba(255,255,255,0.95) 47%, rgba(200,235,255,0.9) 52%, rgba(255,190,235,0.6) 55%, transparent 64%);
  background-size:260% 100%;background-position:140% 0;
  -webkit-background-clip:text;background-clip:text;
  animation:ctSheen 5s ease-in-out 1.7s infinite;
}
@keyframes ctSheen{0%{background-position:140% 0;}38%,100%{background-position:-40% 0;}}
/* Little star glint after "cloud64." */
.ct-spark{
  position:absolute;right:-0.22em;top:0.06em;width:0.32em;height:0.32em;opacity:0;pointer-events:none;
  background:radial-gradient(circle, #fff 0 12%, transparent 13%), conic-gradient(from 45deg, transparent 0 20%, #fff 24% 26%, transparent 30% 45%, #fff 49% 51%, transparent 55% 70%, #fff 74% 76%, transparent 80% 95%, #fff 99% 100%);
  filter:drop-shadow(0 0 10px rgba(255,170,230,0.9)) drop-shadow(0 0 18px rgba(170,225,255,0.8));
  animation:ctSpark 5s ease-in-out 2.1s infinite;
}
@keyframes ctSpark{0%,100%{opacity:0;transform:scale(0) rotate(0);}8%{opacity:1;transform:scale(1.1) rotate(45deg);}18%{opacity:0;transform:scale(0.2) rotate(110deg);}}

/* Entrance: small line glides in, the big word drops in hot and settles to chrome */
.slide.is-active .up-content > .chrome-title{animation:none;}
.slide.is-active .ct-small{animation:ctInLeft 1.1s cubic-bezier(.16,1,.3,1) .2s both;}
.slide.is-active .ct-big{animation:ctInBig 1.4s cubic-bezier(.2,.9,.25,1.12) .45s both;}
@keyframes ctInLeft{from{opacity:0;transform:translateX(-70px) skewX(-10deg);filter:blur(12px);}to{opacity:1;transform:none;filter:blur(0);}}
@keyframes ctInBig{
  0%{opacity:0;transform:scale(1.5) translateY(24px);filter:blur(20px) brightness(2.4);}
  55%{opacity:1;filter:blur(0) brightness(1.6);}
  100%{opacity:1;transform:none;filter:blur(0) brightness(1);}
}
.ct-big .ct-float{animation:ctFloat 6s ease-in-out 2s infinite;}
@keyframes ctFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
@media (max-width:860px){
  .ct-small{font-size:clamp(2rem,9vw,3.4rem);}
  .ct-big{font-size:clamp(3.8rem,19vw,6.5rem);}
}

/* ---------- Pink neon on the chrome title ---------- */
.ct-ex{filter:drop-shadow(0 0 1.5px #FF6FD0) drop-shadow(0 0 10px rgba(255,90,200,0.75)) drop-shadow(0 0 28px rgba(255,90,200,0.4));animation:ctNeon 3.2s ease-in-out infinite;}
@keyframes ctNeon{
  0%,100%{filter:drop-shadow(0 0 1.5px #FF6FD0) drop-shadow(0 0 10px rgba(255,90,200,0.75)) drop-shadow(0 0 28px rgba(255,90,200,0.4));}
  50%{filter:drop-shadow(0 0 2px #FF9BE0) drop-shadow(0 0 16px rgba(255,90,200,0.95)) drop-shadow(0 0 44px rgba(255,90,200,0.55));}
  52%{filter:drop-shadow(0 0 1px #FF6FD0) drop-shadow(0 0 6px rgba(255,90,200,0.5)) drop-shadow(0 0 18px rgba(255,90,200,0.25));}
  55%{filter:drop-shadow(0 0 2px #FF9BE0) drop-shadow(0 0 16px rgba(255,90,200,0.95)) drop-shadow(0 0 44px rgba(255,90,200,0.55));}
}
.ct-face{-webkit-text-stroke:1px rgba(255,190,235,0.55);}
.ct-big::before{
  content:'';position:absolute;left:4%;right:6%;top:58%;height:42%;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%, rgba(255,80,200,0.42), rgba(255,80,200,0) 70%);filter:blur(18px);
  animation:ctHalo 3.2s ease-in-out infinite;
}
@keyframes ctHalo{0%,100%{opacity:0.7;}50%{opacity:1;}}
.ct-big{isolation:isolate;}

/* ---------- AERO GLOSS HEADINGS (chrome face + sweeping gleam) ---------- */
.gloss{
  position:relative;display:inline-block;color:transparent !important;text-shadow:none;
  background:linear-gradient(180deg, #FFFFFF 0%, #F2F7FF 12%, #CFE0F7 30%, #8FA9D2 46%, #5F7FB8 50%, #DCE9FF 55%, #B5C9E8 70%, #F4F8FF 90%, #FFFFFF 100%);
  background-size:100% 180%;-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,0.45)) drop-shadow(0 0 14px rgba(170,215,255,0.45));
  animation:ctLiquid 6s ease-in-out infinite alternate;
}
.gloss::after{
  content:attr(data-t);position:absolute;left:0;top:0;width:100%;white-space:pre-line;color:transparent;-webkit-text-stroke:0;
  background:linear-gradient(110deg, transparent 38%, rgba(255,255,255,0.95) 47%, rgba(200,235,255,0.9) 52%, rgba(255,190,235,0.6) 55%, transparent 64%);
  background-size:260% 100%;background-position:140% 0;-webkit-background-clip:text;background-clip:text;
  animation:ctSheen 5.5s ease-in-out 1.2s infinite;
}
.gloss-gold{background-image:linear-gradient(180deg, #FFFBEA 0%, #FFE9A3 20%, #FFC93C 42%, #B87A00 50%, #FFE38A 56%, #F5B700 74%, #FFF4C8 100%);filter:drop-shadow(0 1px 0 rgba(255,255,255,0.45)) drop-shadow(0 0 16px rgba(255,201,60,0.5));}
.gloss-pink{background-image:linear-gradient(180deg, #FFF0FA 0%, #FFB6E4 22%, #FF6FC8 44%, #B0287A 50%, #FFC2EA 56%, #FF7CCD 74%, #FFE8F7 100%);filter:drop-shadow(0 0 14px rgba(255,111,200,0.65));}
/* Keep the team title's word-pop entrance alongside the liquid chrome */
.hero-title .title-word.gloss{animation:titleWordIn 1s var(--bounce) .15s both, ctLiquid 6s ease-in-out infinite alternate;}
.hero-title .title-word.title-accent.gloss{animation:titleWordIn 1s var(--bounce) .4s both, ctLiquid 6s ease-in-out infinite alternate;}
.hero-title .title-dot.gloss{animation:dotPop .7s var(--bounce) 1s both, ctLiquid 6s ease-in-out infinite alternate;}
/* Script headings: neon-tinged depth layer behind the chrome */
.groovy::before{text-shadow:0 0 18px rgba(255,90,200,0.35), 0 0 30px rgba(46,197,255,0.45);}

/* ---------- 2011 subscriber count bubble + live profile stats ---------- */
.yt12-subwrap{flex:none;display:flex;align-items:center;gap:8px;}
.yt12-subcount{
  position:relative;display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:3px;
  background:linear-gradient(180deg, #FFFFFF, #E9E9E9);border:1px solid #BDBDBD;color:#333;font-weight:bold;font-size:12px;
  box-shadow:0 1px 2px rgba(0,0,0,0.35);
}
.yt12-subcount::before,.yt12-subcount::after{content:'';position:absolute;top:50%;border-style:solid;border-color:transparent;}
.yt12-subcount::before{left:-7px;margin-top:-6px;border-width:6px 7px 6px 0;border-right-color:#BDBDBD;}
.yt12-subcount::after{left:-5px;margin-top:-5px;border-width:5px 6px 5px 0;border-right-color:#FAFAFA;}
.yt12-stats{margin:0 0 14px;padding:8px 0;border-top:1px solid rgba(255,255,255,0.08);border-bottom:1px solid rgba(255,255,255,0.08);}
.yt12-stats li{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:12px;}
.yt12-stats span{color:#99A1B3;}
.yt12-stats b{color:#FFF;font-variant-numeric:tabular-nums;}
.yt12-live{display:flex;align-items:center;gap:6px;margin:-6px 0 14px;font-size:11px;color:#8FE3A8;}
.yt12-live i{width:7px;height:7px;border-radius:50%;background:#3EE07A;box-shadow:0 0 0 0 rgba(62,224,122,0.6);animation:livePulse 2s ease-out infinite;}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(62,224,122,0.6);}70%{box-shadow:0 0 0 7px rgba(62,224,122,0);}100%{box-shadow:0 0 0 0 rgba(62,224,122,0);}}
html.yt-stats-failed .yt12-subcount,html.yt-stats-failed .yt12-stats,html.yt-stats-failed .yt12-live{display:none;}

/* ---------- TRAILER: Frutiger Aero (bright sky glass, god rays, bubbles, reflection) ---------- */
.trailer{
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(190,240,255,0.55), transparent 65%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(120,255,200,0.25), transparent 70%),
    linear-gradient(180deg, #0B4BB4 0%, #1C7FE0 42%, #0E56B8 72%, #072C78 100%);
}
.aero-rays{
  position:absolute;inset:-20% -10% 30%;z-index:0;pointer-events:none;opacity:0.5;
  background:repeating-conic-gradient(from 180deg at 50% 0%, rgba(255,255,255,0.22) 0deg 4deg, rgba(255,255,255,0) 4deg 13deg);
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 0%, #000 20%, transparent 75%);mask-image:radial-gradient(ellipse 60% 70% at 50% 0%, #000 20%, transparent 75%);
  animation:raysSway 16s ease-in-out infinite alternate;
}
@keyframes raysSway{from{transform:rotate(-4deg);}to{transform:rotate(4deg);}}
.aero-floor{
  position:absolute;left:10%;right:10%;bottom:4%;height:22%;z-index:0;pointer-events:none;border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%, rgba(170,240,255,0.45), rgba(170,240,255,0) 70%);filter:blur(10px);
}
.trailer .bubbles{z-index:1;}
.trailer .section-head p{color:rgba(235,246,255,0.9);}
.trailer .section-head p strong{color:#fff;}
.trailer .section-head p a{color:#FFFFFF;text-decoration-color:rgba(255,255,255,0.6);}
.trailer .label{background:linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.35) 50%, rgba(255,255,255,0.2) 51%, rgba(255,255,255,0.45));color:#0A3A8C;border-color:rgba(255,255,255,0.9);box-shadow:0 2px 10px rgba(0,40,120,0.35), inset 0 1px 0 #fff;}
/* Glass bezel around the player with a gloss highlight and a Vista-style reflection */
.trailer .frame{
  padding:10px;border:1px solid rgba(255,255,255,0.85);border-radius:26px;
  background:linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.22) 48%, rgba(255,255,255,0.1) 52%, rgba(255,255,255,0.3) 100%);
  box-shadow:0 0 0 1px rgba(10,60,160,0.35), 0 24px 60px rgba(0,30,90,0.45), 0 0 50px rgba(160,230,255,0.45), inset 0 1px 0 #fff;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.trailer .frame iframe{inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);border-radius:18px;}
.trailer .frame::after{
  content:'';position:absolute;left:10px;right:10px;top:10px;height:38%;border-radius:18px 18px 60% 60% / 18px 18px 30% 30%;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0));
}
.trailer .film{-webkit-box-reflect:below 14px linear-gradient(transparent 72%, rgba(255,255,255,0.22));}
html.scenes-on .trailer .film .frame{box-shadow:0 0 0 1px rgba(10,60,160,0.35), 0 24px 60px rgba(0,30,90,0.45), 0 0 calc(30px + var(--z,0) * 40px) rgba(160,230,255,0.55), inset 0 1px 0 #fff;}

/* ---------- Chrome fix: crisp, bright, fully opaque faces (no flat band across the whole title) ---------- */
.ct-face,.gloss{
  background-image:linear-gradient(176deg, #FFFFFF 0%, #FFFFFF 16%, #DCEAFF 32%, #93B6EE 46%, #F7FBFF 50%, #6F96DA 57%, #C4D9F8 74%, #FFFFFF 92%, #FFFFFF 100%);
  background-size:100% 100%;background-position:0 0;
  -webkit-text-stroke:0.6px rgba(255,255,255,0.9);
  filter:drop-shadow(0 0 1px rgba(255,255,255,0.9)) drop-shadow(0 2px 0 rgba(10,26,74,0.55)) drop-shadow(0 0 14px rgba(160,210,255,0.4));
  animation:none;
}
.gloss-gold{background-image:linear-gradient(176deg, #FFFDF2 0%, #FFF3C4 18%, #FFD75A 38%, #E09A00 48%, #FFF1B0 52%, #F2B100 60%, #FFE38A 78%, #FFFBEA 100%);}
.gloss-pink{background-image:linear-gradient(176deg, #FFF5FC 0%, #FFD0EE 18%, #FF8AD3 38%, #C23585 48%, #FFE0F4 52%, #FF6FC8 60%, #FFB6E4 78%, #FFF0FA 100%);}
.hero-title .title-word.gloss{animation:titleWordIn 1s var(--bounce) .15s both;}
.hero-title .title-word.title-accent.gloss{animation:titleWordIn 1s var(--bounce) .4s both;}
.hero-title .title-dot.gloss{animation:dotPop .7s var(--bounce) 1s both;}
/* Solid depth layer with a tight pink neon edge instead of a wide haze */
.ct-ex{color:#0D1A4A;}
@keyframes ctNeon{
  0%,100%{filter:drop-shadow(0 0 1.5px #FF6FD0) drop-shadow(0 0 8px rgba(255,90,200,0.6));}
  50%{filter:drop-shadow(0 0 2px #FF9BE0) drop-shadow(0 0 13px rgba(255,90,200,0.85));}
  52%{filter:drop-shadow(0 0 1px #FF6FD0) drop-shadow(0 0 5px rgba(255,90,200,0.4));}
  55%{filter:drop-shadow(0 0 2px #FF9BE0) drop-shadow(0 0 13px rgba(255,90,200,0.85));}
}
.ct-big::before{opacity:0.6;}

/* ---------- Scenes: short scroll-scrubbed pins, smoothed scrolling, GPU hints ---------- */
html.scenes-on .trailer .film,html.scenes-on .channel .yt12,html.scenes-on .cta h2,html.scenes-on .cta-art,html.scenes-on .about-art,html.scenes-on .gallery-track{will-change:translate,scale,opacity;}
html.scenes-on .gallery-track .video-card{width:clamp(260px,27vw,460px);}
html.scenes-on .gallery-track{margin:0 auto;}

/* ---------- No per-glyph outlines on chrome text: script letters overlap, so strokes drew seams inside words.
   The rim comes from a drop-shadow, which only traces the outer edge of the whole word. ---------- */
.ct-face,.gloss,.ct-face::after,.gloss::after{-webkit-text-stroke:0 !important;}
.ct-face,.gloss{filter:drop-shadow(0 0 0.7px rgba(255,255,255,0.95)) drop-shadow(0 2px 0 rgba(10,26,74,0.55)) drop-shadow(0 0 14px rgba(160,210,255,0.4));}
.gloss-gold{filter:drop-shadow(0 0 0.7px rgba(255,250,230,0.95)) drop-shadow(0 2px 0 rgba(90,50,0,0.45)) drop-shadow(0 0 16px rgba(255,201,60,0.5));}
.gloss-pink{filter:drop-shadow(0 0 0.7px rgba(255,235,248,0.95)) drop-shadow(0 0 14px rgba(255,111,200,0.65));}

/* ---------- Depth layer = the chrome's own steel side (not a dark hole), and a lighter face middle band ---------- */
.ct-ex,.groovy::before{
  color:transparent;
  background:linear-gradient(180deg, #8EA9DE 0%, #5574BE 38%, #34509C 62%, #1E3274 100%);
  -webkit-background-clip:text;background-clip:text;
}
.ct-face,.gloss{
  background-image:linear-gradient(176deg, #FFFFFF 0%, #FFFFFF 16%, #E3EEFF 32%, #AFC9F2 46%, #FAFCFF 50%, #8DADE6 57%, #CFE0F9 74%, #FFFFFF 92%, #FFFFFF 100%);
}

/* ---------- Unclipped chrome: give the clipped-to-text layers room, since swashes and the extrusion
   reach past each word's text box (background-clip:text only paints inside the box) ---------- */
.ct-ex{left:-0.45em;top:-0.35em;padding:0.35em 0.45em;}
.ct-face{margin:-0.25em -0.45em;padding:0.25em 0.45em;}
/* Keep the face's negative margin from collapsing into its wrapper (which slid the face below its 3D layer) */
.ct-float{display:flow-root;}
.ct-face::after{padding:0.25em 0.45em;}
.gloss{margin:-0.2em -0.4em;padding:0.2em 0.4em;}
.gloss::after{padding:0.2em 0.4em;box-sizing:border-box;}
.groovy::before{box-sizing:content-box;left:-0.45em;top:-0.35em;padding:0.35em 0.45em;}
/* More contrast so the chrome reads as polished, not faded */
.ct-face,.gloss{
  background-image:linear-gradient(176deg, #FFFFFF 0%, #FFFFFF 14%, #E6F0FF 28%, #9DBDF0 43%, #FFFFFF 49%, #4F7BD0 56%, #A9C5F2 72%, #F2F7FF 90%, #FFFFFF 100%);
}
.ct-ex,.groovy::before{background-image:linear-gradient(180deg, #6E8ED4 0%, #3D5FB0 40%, #233F8E 70%, #152660 100%);}

/* ---------- PREMIERE COUNTDOWN (plague-green glass flip tiles, pixel digits, Halloween touches) ---------- */
.premiere-badge svg{width:18px;height:18px;flex:none;filter:drop-shadow(0 0 6px rgba(255,138,31,0.8));animation:pumpkinGlow 2.4s ease-in-out infinite;}
@keyframes pumpkinGlow{0%,100%{filter:drop-shadow(0 0 4px rgba(255,138,31,0.6));}50%{filter:drop-shadow(0 0 10px rgba(255,138,31,1));}}
.slide-teaser .up-title{width:min(28vw,40vh);}
.countdown{display:flex;align-items:flex-start;gap:clamp(6px,1vw,14px);margin-top:20px;}
.cd-unit{display:flex;flex-direction:column;align-items:center;}
.cd-tile{
  position:relative;display:grid;place-items:center;overflow:hidden;perspective:500px;
  width:clamp(62px,6.2vw,98px);height:clamp(70px,7vw,110px);border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.06) 47%, rgba(0,0,0,0.28) 50%, rgba(255,255,255,0.05) 100%),
    radial-gradient(ellipse at 50% 120%, rgba(76,211,142,0.35), transparent 70%),
    rgba(6,24,18,0.72);
  border:1px solid rgba(140,255,190,0.5);
  box-shadow:0 0 24px rgba(76,211,142,0.35), inset 0 1px 0 rgba(255,255,255,0.4), 0 12px 30px rgba(0,0,0,0.45);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.cd-tile::after{content:'';position:absolute;left:6px;right:6px;top:50%;height:1px;background:rgba(0,0,0,0.5);box-shadow:0 1px 0 rgba(255,255,255,0.08);}
.cd-num{
  font-family:'Silkscreen','Zen Kaku Gothic New',monospace;font-weight:700;font-size:clamp(1.9rem,3.2vw,3.3rem);line-height:1;
  color:#EFFFF5;font-variant-numeric:tabular-nums;
  text-shadow:0 0 2px #fff, 0 0 12px rgba(76,211,142,0.95), 0 0 26px rgba(76,211,142,0.55);
}
.cd-label{margin-top:8px;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:700;font-size:0.72rem;letter-spacing:0.22em;text-transform:uppercase;color:rgba(200,255,222,0.8);}
.cd-sep{
  font-family:'Silkscreen',monospace;font-weight:700;font-size:clamp(1.6rem,2.6vw,2.6rem);line-height:clamp(70px,7vw,110px);
  color:#8DFFC0;text-shadow:0 0 10px rgba(76,211,142,0.9);animation:sepBlink 1s steps(1) infinite;
}
@keyframes sepBlink{50%{opacity:0.25;}}
/* Seconds tile glows a little warmer, like it's ticking hot */
.cd-unit:last-child .cd-tile{border-color:rgba(255,170,90,0.6);box-shadow:0 0 24px rgba(255,138,31,0.35), inset 0 1px 0 rgba(255,255,255,0.4), 0 12px 30px rgba(0,0,0,0.45);}
.cd-unit:last-child .cd-num{text-shadow:0 0 2px #fff, 0 0 12px rgba(255,150,60,0.95), 0 0 26px rgba(255,120,40,0.5);color:#FFF4E8;}
/* Flip when a digit changes */
.cd-tile.flip .cd-num{animation:cdFlip .55s cubic-bezier(.3,1.5,.5,1);}
@keyframes cdFlip{0%{transform:rotateX(-90deg) translateY(-10%);filter:brightness(2.2) blur(1.5px);}60%{filter:brightness(1.4);}100%{transform:none;filter:none;}}
/* Plague glitch each minute */
.countdown.glitch .cd-num{animation:cdGlitch .4s steps(2) 1;}
@keyframes cdGlitch{
  0%{transform:translate(-3px,1px);text-shadow:-3px 0 rgba(255,60,90,0.9), 3px 0 rgba(76,255,160,0.9);}
  50%{transform:translate(3px,-1px);text-shadow:3px 0 rgba(255,60,90,0.9), -3px 0 rgba(76,255,160,0.9);}
  100%{transform:none;}
}
/* Bats + pumpkin */
.deco.bat svg{animation:batFlap .18s ease-in-out infinite alternate;filter:drop-shadow(0 0 8px rgba(179,107,255,0.6));}
.deco.bat.d2 svg{animation-duration:.22s;}
.deco.bat.d3 svg{animation-duration:.2s;}
@keyframes batFlap{from{transform:scaleY(1) rotate(-4deg);}to{transform:scaleY(0.55) rotate(4deg);}}
.deco.pumpkin svg{filter:drop-shadow(0 0 14px rgba(255,138,31,0.75));}
/* Halloween warmth in the teaser sky */
.slide-teaser{background:
  radial-gradient(ellipse 40% 35% at 18% 92%, rgba(255,138,31,0.18), transparent 70%),
  radial-gradient(ellipse 45% 55% at 78% 55%, rgba(76,211,142,0.24), transparent 65%),
  radial-gradient(ellipse 40% 45% at 8% 100%, rgba(255,70,70,0.14), transparent 65%),
  radial-gradient(ellipse 60% 50% at 30% 0%, rgba(45,91,255,0.28), transparent 60%),
  linear-gradient(180deg, #04061A 0%, #0A0F2E 60%, #11174A 100%);}

/* Premiere chip on the first slide */
.premiere-chip{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;padding:7px 14px 7px 10px;border-radius:999px;
  font-family:'Zen Kaku Gothic New',sans-serif;font-weight:500;font-size:0.9rem;color:#EFFFF5;
  background:linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05)), rgba(6,24,18,0.55);
  border:1px solid rgba(140,255,190,0.55);box-shadow:0 0 18px rgba(76,211,142,0.35), inset 0 1px 0 rgba(255,255,255,0.35);
  transition:transform .25s var(--bounce), box-shadow .25s ease;
}
.premiere-chip:hover{transform:translateY(-2px);box-shadow:0 0 26px rgba(76,211,142,0.6), inset 0 1px 0 rgba(255,255,255,0.4);}
.premiere-chip svg{width:18px;height:18px;flex:none;animation:pumpkinGlow 2.4s ease-in-out infinite;}
.premiere-chip b{font-family:'Silkscreen',monospace;font-weight:700;color:#8DFFC0;text-shadow:0 0 8px rgba(76,211,142,0.8);font-variant-numeric:tabular-nums;}
.slide-studio .up-content > .premiere-chip{display:inline-flex;}
@media (max-width:600px){
  .cd-tile{width:58px;height:66px;border-radius:12px;}
  .cd-num{font-size:1.7rem;}
  .cd-sep{line-height:66px;font-size:1.4rem;}
  .countdown{gap:5px;}
}

/* ---------- Release day: html.released swaps the "upcoming" copy for the "out now" copy ---------- */
html:not(.released) .post-release{display:none !important;}
html.released .pre-release{display:none !important;}
html.released .slide-teaser .up-sonic,html.released .slide-teaser .deco.pumpkin,html.released .slide-teaser .deco.bat.d3{display:none;}
.release-thumb{
  position:absolute;right:clamp(16px,3vw,48px);top:50%;translate:0 -50%;width:min(46vw,720px);aspect-ratio:16/9;
  display:block;overflow:hidden;border-radius:18px;background:#000;
  border:1px solid rgba(255,255,255,0.3);
  box-shadow:0 0 44px rgba(76,211,142,0.4), 0 24px 50px rgba(0,0,0,0.6);
  transition:box-shadow .3s ease, scale .3s ease;
}
.release-thumb:hover{scale:1.02;box-shadow:0 0 60px rgba(76,211,142,0.6), 0 24px 50px rgba(0,0,0,0.6);}
.release-thumb img{width:100%;height:100%;object-fit:cover;}
.release-thumb .yt12-playbtn{scale:1.5;}
.release-thumb:hover .yt12-playbtn{background:#CC181E;}
html.released .slide-teaser .up-lede{max-width:min(42vw,560px);}
html.released .slide-teaser .up-title{width:min(36vw,48vh);}
@media (max-width:860px){
  .release-thumb{position:relative;right:auto;top:auto;translate:none;width:100%;margin:14px 0 4px;}
  html.released .slide-teaser .up-lede{display:none;}
  html.released .slide-teaser .up-title{width:min(56vw,24vh);}
}
@media (max-width:860px) and (max-height:720px){
  html.released .slide-teaser .btn-ghost,html.released .slide-teaser .label{display:none !important;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none!important;transition:none!important;}
  .bubble,.dust{display:none;}
  .slider-dot[aria-current="true"]::after{transform:scaleX(1);}
  .reveal,.reveal-stagger > *,.up-content > *,.hero-title .title-word,.hero-title .title-dot{opacity:1!important;transform:none!important;}
}