.index-page .hero-carousel{position:relative;margin:0 0 24px;isolation:isolate;touch-action:pan-y;overflow:hidden}
.hero-carousel-stage{display:grid;perspective:1400px;align-items:center;padding:8px 0;}
.hero-slide{grid-area:1/1;min-width:0;width:100%;justify-self:center;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(108%) rotateY(-18deg);transition:transform .7s cubic-bezier(.22,.7,.22,1),opacity .6s,visibility .7s;transform-style:preserve-3d;}
.hero-slide.is-prev{transform:translateX(-108%) rotateY(18deg)}
.hero-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(0) rotateY(0);z-index:3}
.index-page .hero-carousel .hero-banner{margin:0;height:100%;width:100%}
.hero-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;display:grid;place-items:center;width:38px;height:48px;padding:0;border:1px solid #ffffff50;border-radius:10px;background:#171511bc;color:#fff;font:32px/1 sans-serif;cursor:pointer;backdrop-filter:blur(8px)}
.hero-carousel-prev{left:10px}.hero-carousel-next{right:10px}
.hero-carousel-arrow:hover{background:#634f30e0}.hero-carousel button:focus-visible{outline:2px solid #e7d0ac;outline-offset:3px}
@media(min-width:901px){
 .has-depth .hero-carousel-stage{padding:2px 0;min-height:310px}
 .has-depth .hero-slide{width:62%;max-width:1100px;transform:translateX(0) translateZ(-250px) scale(.6)}
 /* Render foreground text at layout resolution instead of scaling a 3D texture. */
 .has-depth .hero-slide.is-active{width:57.04%;zoom:.92;transform:none;transform-style:flat;}
 .has-depth .hero-slide.is-prev{opacity:.6;visibility:visible;transform:translateX(-40%) translateZ(-140px) rotateY(25deg) scale(.82);z-index:1}
 .has-depth .hero-slide.is-next{opacity:.6;visibility:visible;transform:translateX(40%) translateZ(-140px) rotateY(-25deg) scale(.82);z-index:1}
 .index-page .has-depth .hero-banner-content{padding:32px 36px}
 .index-page .has-depth .hero-title{font-size:clamp(22px,2vw,32px)}
 .index-page .has-depth .hero-desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
}
@media(max-width:900px){
 .index-page .hero-carousel{margin-bottom:28px}
 .hero-carousel-stage{padding:0;perspective:1000px}
 .index-page .hero-carousel .hero-banner{height:100%;margin:0}
 .hero-carousel-arrow{width:27px;height:36px;font-size:26px;top:50%;bottom:auto;transform:translateY(-50%);border-radius:7px}
 .hero-carousel-prev{left:5px}.hero-carousel-next{right:5px}
}
@media(prefers-reduced-motion:reduce){.hero-slide{transition:none!important}}

@media(max-width:900px){:is(.hero-carousel,.reels-list-shell) .hero-carousel-arrow{display:none;}}

@media(min-width:901px){
 :is(.hero-carousel,.reels-list-shell) .hero-carousel-arrow,
 :is(.hero-carousel,.reels-list-shell) .hero-carousel-arrow:hover,
 :is(.hero-carousel,.reels-list-shell) .hero-carousel-arrow:active {
  width:40px;height:40px;border-radius:50%;background:none;backdrop-filter:none;
 }
}

:is(.hero-carousel,.reels-list-shell) .hero-carousel-arrow { display:flex;align-items:center;justify-content:center;padding:0; }
.hero-carousel-arrow svg { display:block; flex:none; width:18px; height:18px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; }
@media(max-width:900px){:is(.hero-carousel,.reels-list-shell) .hero-carousel-arrow{display:none;}}

.hero-carousel-prev svg { transform:translateX(-2px); }
.hero-carousel-next svg { transform:translateX(2px); }

@media(min-width:901px){
 :is(.hero-carousel,.reels-list-shell) .hero-carousel-prev { left:-20px; }
 :is(.hero-carousel,.reels-list-shell) .hero-carousel-next { right:-20px; }
}

@media(min-width:901px){
 .index-page .hero-carousel { overflow:visible; }
 .hero-carousel-stage { overflow:hidden; }
}

:root[data-theme="light"] :is(.hero-carousel,.reels-list-shell) .hero-carousel-arrow { color:var(--theme-text,#28221b);border-color:var(--theme-muted,#746755); }

:is(.hero-carousel,.reels-list-shell) .hero-carousel-arrow { border:none; }
.hero-carousel-arrow svg { stroke-width:3; }

@media(min-width:901px){
 .has-depth .hero-slide:is(.is-prev,.is-next):not(.is-active){pointer-events:auto;cursor:pointer;}
 .index-page .has-depth .hero-slide:not(.is-active) .hero-banner-content{visibility:hidden;}
}

/* Size the content against the available lobby width, including expanded navigation. */
.hero-carousel { container-type:inline-size; }
@media(min-width:901px){
 @container(max-width:950px){
  .index-page .has-depth .hero-banner-content{flex-basis:85%;padding:24px 20px;}
  .index-page .has-depth .hero-title{font-size:22px;}
 }
}

/* Glass layers sit above the image (0), below the readable content (2). */
@media(min-width:901px){
 .index-page .has-depth .hero-banner {
  box-shadow:0 0 0 1px #ffffff1c,.5px 1px 0 #454039,1px 2px 0 #2b2720,1.5px 3px 5px #0005;
  transition:box-shadow .6s ease;
 }
 .index-page .has-depth .is-active .hero-banner {
  box-shadow:0 0 0 1px #ffffff30,.5px 1px 0 #534e47,1px 2px 0 #37322b,1.5px 3px 0 #23201b,0 6px 9px #0005;
 }
 .index-page .has-depth .is-active .hero-banner::after {
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(125deg,rgba(255,255,255,.1),transparent 36%,transparent 78%,rgba(255,255,255,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 0 0 1px rgba(255,255,255,.14);
 }
 .index-page .has-depth .is-active .hero-banner::before {
  content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:28%;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.035) 25%,rgba(255,255,255,.24) 48%,rgba(255,255,255,.09) 56%,transparent 82%);
  transform:translateX(-220%) skewX(-22deg);
  animation:hero-glass-shine 5s ease-in-out infinite;
 }
 :root[data-theme="light"] .index-page .has-depth .hero-banner {box-shadow:0 0 0 1px #ffffff9c,.5px 1px 0 #d9d5ce,1px 2px 0 #bbb6ad,1.5px 3px 5px #2d271d26;}
 :root[data-theme="light"] .index-page .has-depth .is-active .hero-banner {box-shadow:0 0 0 1px #ffffffb3,.5px 1px 0 #e3dfd9,1px 2px 0 #c9c3b9,1.5px 3px 0 #afa99e,0 6px 9px #2d271d30;}
}

@keyframes hero-glass-shine {
  0%,16% { transform:translateX(-220%) skewX(-22deg);opacity:0; }
  22% { opacity:1; }
  58% { transform:translateX(520%) skewX(-22deg);opacity:1; }
  64%,100% { transform:translateX(520%) skewX(-22deg);opacity:0; }
}
@media(prefers-reduced-motion:reduce){
 .index-page .has-depth .is-active .hero-banner::before{animation:none;opacity:0;}
}

/* All PC cards inherit the original default-banner typography and spacing. */
@media(min-width:901px){
 .index-page .hero-carousel .hero-banner { height:auto;min-height:0;aspect-ratio:3/1; }
 .index-page .hero-carousel .hero-banner .hero-banner-preview { background-size:cover;background-position:center; }
 .index-page .hero-carousel .hero-slide.is-active .hero-banner-preview { background-position:right center; }
}
/* Mobile retains its original overlaid card and uploaded artwork. */
@media(max-width:900px){
 .index-page .hero-carousel .hero-banner-preview { --hero-preview-image:var(--hero-original-image); }
}

/* Keep the original overlaid desktop card at narrower lobby widths. */
@media(min-width:901px){
 @container(max-width:1400px){
  .index-page .hero-carousel .hero-banner { aspect-ratio:auto;min-height:330px; }
 }
}

/* One-card desktop layouts (one or two rotating slides) stay compact on wide monitors. */
@media(min-width:901px){
 .index-page .hero-carousel:not(.has-depth) .hero-banner {
  aspect-ratio:auto;min-height:360px;height:auto;
 }
 .index-page .hero-carousel:not(.has-depth) .hero-banner-content {
  box-sizing:border-box;flex:0 1 68%;min-height:clamp(360px,22vw,400px);
  padding:24px clamp(28px,3vw,52px);
 }
 .index-page .hero-carousel .hero-slide:only-child .hero-title {
  font-size:clamp(34px,2.8vw,44px);line-height:1.25;margin:0 0 10px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
 }
 .index-page .hero-carousel .hero-slide:only-child .hero-desc {
  font-size:18px;line-height:1.55;color:#dedee5;margin:0 0 16px;
 }
 .index-page .hero-carousel .hero-slide:only-child .hero-live-pill {font-size:20px;margin-bottom:12px;}
 .index-page .hero-carousel .hero-slide:only-child .hero-streamer-info {margin-bottom:16px;}
 .index-page .hero-carousel .hero-slide:only-child .hero-avatar {width:52px;height:52px;flex-shrink:0;}
 .index-page .hero-carousel .hero-slide:only-child .hero-nick {font-size:24px;}
 .index-page .hero-carousel .hero-slide:only-child .hero-streamer-info>div>span {font-size:15px!important;}
 .index-page .hero-carousel .hero-slide:only-child .btn-hero-watch {font-size:18px;padding:12px 32px;}
}

/* Mobile nickname stays on one line; only overflowing names glide end to end. */
@media(max-width:900px){
 .index-page .hero-carousel .hero-streamer-info>div { flex:1;min-width:0; }
 .index-page .hero-carousel .hero-nick { white-space:nowrap;overflow-wrap:normal; }
 .index-page .hero-carousel .hero-nick-window { display:block;min-width:0;flex:1;overflow:hidden; }
 .index-page .hero-carousel .hero-nick-text { display:block;width:max-content;white-space:nowrap; }
 .index-page .hero-carousel .hero-nick-window.is-overflowing .hero-nick-text { animation:hero-nickname-glide var(--nick-duration) ease-in-out infinite; }
}
@keyframes hero-nickname-glide {
 0%,15%,100% { transform:translateX(0); }
 45%,65% { transform:translateX(var(--nick-travel)); }
}
@media(prefers-reduced-motion:reduce){
 .index-page .hero-carousel .hero-nick-window.is-overflowing .hero-nick-text { animation:none; }
 .index-page .hero-carousel .hero-nick-window { overflow-x:auto;scrollbar-width:none; }
 .index-page .hero-carousel .hero-nick-window::-webkit-scrollbar { display:none; }
}