/* ==========================================================================
   YOUTUBE CHANNEL PAGE — glassmorphism + scroll-driven 3D
   ========================================================================== */

.yt-body{overflow-x:hidden;}

.yt-nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-2) var(--space-3);
}
.yt-nav a{
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cream-dim);transition:color .3s var(--ease);
}
.yt-nav a:hover{color:var(--emerald-bright);}
.yt-nav__cta{
  background:rgba(232,138,62,.14);
  border:1px solid rgba(255,122,41,.4);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:.6em 1em;
  color:var(--emerald-bright) !important;
}

/* ---- shared: glass card ---- */
.yt-card{
  position:relative;
  width:min(360px, 78vw);
  aspect-ratio:3/4;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.7);
  transform-style:preserve-3d;
}
.yt-card img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;}
.yt-card__glass{
  position:absolute;left:10px;right:10px;bottom:10px;
  padding:.9em 1.1em;
  border-radius:12px;
  background:rgba(20,15,10,.38);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  display:flex;flex-direction:column;gap:.15em;
}
.yt-card__brand{
  font-family:var(--font-display);
  font-size:1rem;letter-spacing:.03em;
  color:#fff;
}
.yt-card__sub{
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--emerald-bright);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.yt-hero{
  min-height:100svh;
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  perspective:1400px;
  padding-block:calc(var(--space-6) + 2rem) var(--space-5);
  text-align:center;
  overflow:hidden;
}
.yt-hero__glow{
  position:absolute;inset:-10%;
  background:radial-gradient(ellipse 50% 40% at 50% 30%, rgba(255,122,41,.16), transparent 65%);
  pointer-events:none;
}
.yt-scene{
  position:relative;z-index:2;
  margin-bottom:var(--space-4);
}
.yt-card--hero{
  transform:rotateY(0deg) rotateX(0deg);
  transition:transform .1s linear;
}
.yt-hero__content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;}
.yt-hero__title{
  font-family:var(--font-display);
  font-size:clamp(2.6rem,9vw,6rem);
  color:var(--cream);
  line-height:.92;
  margin-block:var(--space-2);
}
.yt-hero__tag{color:var(--cream-dim);max-width:36ch;margin-bottom:var(--space-3);}
.yt-scroll-hint{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream-faint);
  z-index:2;
}

/* ==========================================================================
   3D SCROLL STACK
   ========================================================================== */
.yt-stack{padding-block:var(--space-5);}
.yt-panel{
  min-height:90vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--space-5);
  padding-block:var(--space-5);
  perspective:1400px;
}
@media (min-width:900px){
  .yt-panel{flex-direction:row;text-align:left;}
  .yt-panel--reverse{flex-direction:row-reverse;}
}
.yt-panel__scene{flex-shrink:0;}
.yt-panel__text{max-width:440px;text-align:center;}
@media (min-width:900px){ .yt-panel__text{text-align:left;} }

.yt-card--panel{
  transform:rotateY(24deg) rotateX(2deg) scale(.92);
  opacity:.35;
  transition:transform .1s linear, opacity .3s var(--ease);
}
.yt-panel--reverse .yt-card--panel{transform:rotateY(-24deg) rotateX(2deg) scale(.92);}
.yt-panel.is-active .yt-card--panel{
  transform:rotateY(0deg) rotateX(0deg) scale(1);
  opacity:1;
}

/* ==========================================================================
   FINALE
   ========================================================================== */
.yt-finale{
  padding-block:var(--space-6);
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.yt-finale::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 60% at 50% 50%, rgba(255,122,41,.12), transparent 65%);
  pointer-events:none;
}
.yt-finale__glass{
  position:relative;z-index:2;
  width:min(720px, 88vw);
  padding:var(--space-5) var(--space-4);
  border-radius:24px;
  text-align:center;
  background:rgba(20,15,10,.32);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}
.yt-finale h2{font-size:clamp(2.2rem,7vw,4rem);color:var(--cream);}

@media (prefers-reduced-motion:reduce){
  .yt-card--hero, .yt-card--panel{transition:none;}
}