/* Restrained optical surfaces, extending the original Nass Next palette. */
.hero { --hero-x:0; --hero-y:0; padding:56px 24px 0; overflow:hidden; isolation:isolate; }
.hero-layout { max-width:1132px; margin:0 auto 36px; display:grid; grid-template-columns:1.35fr 0.85fr; gap:52px; align-items:center; text-align:left; }
.hero-copy { position:relative; z-index:2; transform:translate3d(calc(var(--hero-x)*-2px),calc(var(--hero-y)*-2px),0); }
.hero-copy .channel-avatar { width:58px; height:58px; margin:0 0 20px; border-radius:17px; }
.hero-copy h1 { font-size:clamp(42px,4.5vw,65px); letter-spacing:-2px; margin:23px 0; }
.hero-copy .intro { margin:0; max-width:570px; }
.hero-copy .actions { justify-content:flex-start; margin:28px 0 0; flex-wrap:wrap; }
.hero .metrics { max-width:1132px; position:relative; z-index:2; background:linear-gradient(130deg,#ffffff06,#ffffff01),var(--card); box-shadow:inset 0 1px 0 #ffffff08; }
.avatar-stage { position:relative; width:100%; max-width:365px; margin:auto; perspective:1100px; }
.avatar-entrance { position:relative; animation:host-entrance 1s cubic-bezier(.22,1,.36,1) both; }
.avatar-parallax { transform:translate3d(calc(var(--hero-x)*5px),calc(var(--hero-y)*3px),0) rotateX(calc(var(--hero-y)*-1.3deg)) rotateY(calc(var(--hero-x)*2deg)); transform-origin:50% 65%; }
.avatar-idle { position:relative; border-radius:46% 46% 28px 28px; overflow:hidden; background:#dfe3ee; border:1px solid #cadfff38; box-shadow:0 20px 65px #0003,0 0 0 7px #ffffff02; animation:host-breathe 8s ease-in-out 1s infinite; animation-play-state:paused; }
.hero-visible .avatar-idle { animation-play-state:running; }
.host-portrait { display:block; width:100%; height:auto; aspect-ratio:1143/2048; object-fit:cover; }
.portrait-reflection { position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,#b8d8ff00 20%,#cfE5ff20 42%,#fff0 65%); transform:translate3d(calc(var(--hero-x)*22px),0,0); mix-blend-mode:soft-light; }
.glass-halo { position:absolute; pointer-events:none; border:1px solid #bad5ff22; border-radius:50%; background:linear-gradient(135deg,#c4ddff0a,#639bff02 60%); box-shadow:inset 0 1px 0 #eff7ff1c; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
.halo-one { inset:10% -12% 11%; transform:translate3d(calc(var(--hero-x)*-5px),calc(var(--hero-y)*-4px),0) rotate(-20deg); }
.halo-two { inset:21% -19% 24%; transform:translate3d(calc(var(--hero-x)*-8px),calc(var(--hero-y)*-6px),0) rotate(22deg); border-color:#bedaff12; }
.avatar-stage:before { content:''; position:absolute; inset:8% -18%; border-radius:50%; background:radial-gradient(ellipse,#609aff1a,transparent 70%); pointer-events:none; }
@keyframes host-entrance { from {opacity:0;transform:translate3d(0,16px,0) scale(.94)} to {opacity:1;transform:translate3d(0,0,0) scale(1)} }
@keyframes host-breathe {0%,100% {transform:translate3d(0,0,0) scale(1)}50% {transform:translate3d(0,-1.5px,0) scale(1.003)}}
.liquid-cursor { position:fixed; left:0; top:0; width:64px; height:64px; border-radius:50%; pointer-events:none; z-index:9999; opacity:0; visibility:hidden; contain:layout style; will-change:transform; background:radial-gradient(circle at var(--light-x,45%) var(--light-y,25%),#ffffff12,transparent 53%),linear-gradient(145deg,#dceeff06,#b2cfff02); border:1px solid #e4efff4a; box-shadow:inset 0 1px 3px #ffffff3b,inset 0 -2px 5px #c0d9ff13,1px 0 0 #ffb5cb30,-1px 0 0 #82d9ff40,0 4px 18px #00000012; backdrop-filter:blur(1.5px) saturate(1.16) contrast(1.025); -webkit-backdrop-filter:blur(1.5px) saturate(1.16) contrast(1.025); transition:opacity .25s,visibility .25s,border-radius .65s cubic-bezier(.22,1,.36,1); }
.liquid-cursor.is-enabled.is-visible {opacity:1;visibility:visible}
.liquid-cursor.is-hovering {border-radius:45% 55% 51% 49% / 52% 44% 56% 48%;backdrop-filter:blur(2px) saturate(1.2) contrast(1.04);-webkit-backdrop-filter:blur(2px) saturate(1.2) contrast(1.04)}
.liquid-cursor span {position:absolute;pointer-events:none}
.lens-highlight {inset:4px;border-radius:inherit;background:radial-gradient(ellipse at var(--light-x,45%) var(--light-y,25%),#ffffff2c,transparent 34%);opacity:.6}
.lens-rim {inset:0;border-radius:inherit;border:3px solid #ffffff03;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);mask:radial-gradient(closest-side,transparent 83%,#000 95%);-webkit-mask:radial-gradient(closest-side,transparent 83%,#000 95%)}
.button {position:relative;isolation:isolate;--mag-x:0px;--mag-y:0px;transform:translate3d(var(--mag-x),var(--mag-y),0);transition:transform .35s cubic-bezier(.22,1,.36,1),background .25s,box-shadow .25s;box-shadow:inset 0 1px 0 #ffffff25}
.button:before {content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(ellipse at var(--shine-x,50%) 0%,#fff5,transparent 65%);transition:opacity .25s}
.button:hover {transform:translate3d(var(--mag-x),var(--mag-y),0) scale(1.018);box-shadow:inset 0 1px 0 #ffffff50,0 6px 20px #569aff12}
.button:hover:before {opacity:.65}
.button:active {transform:translate3d(var(--mag-x),var(--mag-y),0) scale(.975);transition-duration:.1s}
.reveal-ready {opacity:0;transform:translate3d(0,12px,0);filter:blur(2px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1),filter .55s,border-color .2s}
.reveal-ready.is-revealed {opacity:1;transform:translate3d(0,0,0);filter:blur(0)}
.card.reveal-ready.is-revealed:hover {transform:translate3d(0,-4px,0)}
.motion-paused .avatar-idle {animation-play-state:paused}
.light .liquid-cursor {border-color:#386ab53d;box-shadow:inset 0 1px 3px #ffffff90,1px 0 0 #dd879b25,-1px 0 0 #559dce40,0 3px 14px #0a306011}
@media(max-width:1050px) {.hero-layout{gap:28px;grid-template-columns:1.2fr .8fr}.hero-copy h1{font-size:clamp(40px,5vw,58px)}.avatar-stage{max-width:300px}}
@media(max-width:899px),(hover:none),(pointer:coarse) {.liquid-cursor{display:none!important}.hero-copy,.avatar-parallax,.glass-halo,.portrait-reflection{transform:none!important}.glass-halo{backdrop-filter:none;-webkit-backdrop-filter:none}.button:hover{transform:none}.button:active{transform:scale(.98)}}
@media(max-width:720px) {.hero{padding:40px 20px 0}.hero-layout{grid-template-columns:1fr;text-align:center;gap:32px;margin-bottom:30px}.hero-copy .channel-avatar{margin:0 auto 20px}.hero-copy h1{font-size:clamp(40px,8vw,58px);letter-spacing:-1.5px}.hero-copy .intro{margin:auto}.hero-copy .actions{justify-content:center}.avatar-stage{max-width:240px}.avatar-idle{border-radius:46% 46% 22px 22px}.halo-two{display:none}.host-portrait{max-height:400px;object-position:center 28%}.hero .metrics{margin-top:8px}}
@media(prefers-reduced-motion:reduce) {html{scroll-behavior:auto!important}.avatar-entrance,.avatar-idle{animation:none!important}.hero-copy,.avatar-parallax,.glass-halo,.portrait-reflection{transform:none!important}.liquid-cursor{display:none!important}.reveal-ready{opacity:1!important;transform:none!important;filter:none!important}.button,.card{transform:none!important}*,*::before,*::after{transition:none!important}}
@media(min-width:721px){.avatar-stage{max-width:310px}.host-portrait{max-height:540px;object-position:center 32%}}
@supports (backdrop-filter:url("#nass-optical-lens")) {
 .liquid-cursor {backdrop-filter:url("#nass-optical-lens") blur(1px) saturate(1.16)}
 .liquid-cursor.is-hovering {backdrop-filter:url("#nass-optical-lens") blur(1.5px) saturate(1.2)}
}