/* Horizon Hub V25 — full hero particles + seamless YouTube rail */

/* Full-banner particle field. Decorative only and always behind content. */
.v12-hero{position:relative;isolation:isolate;overflow:hidden!important}
.v12-hero>.shell,.v12-hero .v12-hero-grid{position:relative;z-index:2}
.v12-hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.9;
  background:
    radial-gradient(circle at 4% 18%,rgba(19,205,158,.28) 0 4px,transparent 5px),
    radial-gradient(circle at 11% 68%,rgba(46,132,255,.17) 0 3px,transparent 4px),
    radial-gradient(circle at 19% 36%,rgba(19,205,158,.16) 0 3px,transparent 4px),
    radial-gradient(circle at 27% 82%,rgba(46,132,255,.15) 0 4px,transparent 5px),
    radial-gradient(circle at 38% 12%,rgba(19,205,158,.19) 0 3px,transparent 4px),
    radial-gradient(circle at 48% 72%,rgba(46,132,255,.14) 0 3px,transparent 4px),
    radial-gradient(circle at 58% 22%,rgba(19,205,158,.22) 0 4px,transparent 5px),
    radial-gradient(circle at 66% 58%,rgba(46,132,255,.17) 0 3px,transparent 4px),
    radial-gradient(circle at 73% 10%,rgba(19,205,158,.27) 0 4px,transparent 5px),
    radial-gradient(circle at 80% 38%,rgba(46,132,255,.20) 0 4px,transparent 5px),
    radial-gradient(circle at 87% 72%,rgba(19,205,158,.25) 0 4px,transparent 5px),
    radial-gradient(circle at 94% 20%,rgba(46,132,255,.22) 0 5px,transparent 6px),
    radial-gradient(circle at 97% 52%,rgba(19,205,158,.25) 0 3px,transparent 4px),
    radial-gradient(circle at 7% 91%,rgba(46,132,255,.14) 0 3px,transparent 4px);
  animation:hhV25ParticleDrift 9s ease-in-out infinite alternate
}
.v12-hero::after{
  content:"";position:absolute;z-index:1;pointer-events:none;width:390px;height:390px;right:-115px;bottom:-115px;border-radius:50%;
  border:1px solid rgba(19,205,158,.15);box-shadow:0 0 0 55px rgba(19,205,158,.025),0 0 0 110px rgba(46,132,255,.018);
  animation:hhV25Orbit 20s linear infinite
}
@keyframes hhV25ParticleDrift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(12px,-12px,0) scale(1.025)}}
@keyframes hhV25Orbit{to{transform:rotate(360deg)}}

/* Seamless YouTube rail. JS duplicates the original cards and moves this track continuously. */
.v11-video-section{position:relative;max-width:100%!important;overflow:hidden!important}
.v11-video-section .video-marquee{position:relative!important;width:100%!important;max-width:100%!important;overflow:hidden!important;contain:paint!important}
.v11-video-section .video-marquee-track{display:flex!important;flex-wrap:nowrap!important;gap:16px!important;width:max-content!important;max-width:none!important;will-change:transform;transform:translate3d(0,0,0)!important;animation:none!important}
.v11-video-section .youtube-card{flex:0 0 clamp(245px,21vw,315px)!important;width:clamp(245px,21vw,315px)!important;max-width:none!important}
.v11-video-section .youtube-card.hh-loop-clone{pointer-events:auto}

/* Side-mounted modern controls: visible, usable, and do not create page width. */
.hh-v25-video-control{position:absolute;z-index:8;top:58%;transform:translateY(-50%);width:52px;height:76px;border:1px solid rgba(255,255,255,.72);background:rgba(7,31,49,.84);color:#fff;border-radius:0 26px 26px 0;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(7,31,49,.18);transition:background .2s ease,transform .2s ease,opacity .2s ease}
.hh-v25-video-control:hover{background:rgba(8,126,113,.94)}
.hh-v25-video-control:active{transform:translateY(-50%) scale(.94)}
.hh-v25-video-control.prev{left:0}
.hh-v25-video-control.next{right:0;border-radius:26px 0 0 26px}
.hh-v25-video-control svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.hh-video-controls{display:none!important}

@media(max-width:720px){
  .v12-hero::before{opacity:1;background:
    radial-gradient(circle at 4% 12%,rgba(19,205,158,.28) 0 3px,transparent 4px),radial-gradient(circle at 12% 48%,rgba(46,132,255,.18) 0 3px,transparent 4px),radial-gradient(circle at 7% 78%,rgba(19,205,158,.20) 0 3px,transparent 4px),radial-gradient(circle at 31% 7%,rgba(46,132,255,.16) 0 3px,transparent 4px),radial-gradient(circle at 46% 29%,rgba(19,205,158,.18) 0 3px,transparent 4px),radial-gradient(circle at 61% 8%,rgba(19,205,158,.28) 0 4px,transparent 5px),radial-gradient(circle at 70% 22%,rgba(46,132,255,.22) 0 4px,transparent 5px),radial-gradient(circle at 82% 8%,rgba(19,205,158,.34) 0 4px,transparent 5px),radial-gradient(circle at 93% 31%,rgba(46,132,255,.25) 0 4px,transparent 5px),radial-gradient(circle at 76% 51%,rgba(19,205,158,.25) 0 3px,transparent 4px),radial-gradient(circle at 95% 67%,rgba(19,205,158,.26) 0 3px,transparent 4px),radial-gradient(circle at 66% 82%,rgba(46,132,255,.18) 0 3px,transparent 4px),radial-gradient(circle at 24% 91%,rgba(19,205,158,.18) 0 3px,transparent 4px)!important}
  .v12-hero::after{width:250px;height:250px;right:-85px;bottom:35px!important}
  .v11-video-section .video-marquee-track{gap:12px!important}
  .v11-video-section .youtube-card{flex-basis:min(72vw,270px)!important;width:min(72vw,270px)!important}
  .hh-v25-video-control{width:42px;height:64px;top:60%;opacity:.94}
  .hh-v25-video-control svg{width:21px;height:21px}
}
@media(prefers-reduced-motion:reduce){.v12-hero::before,.v12-hero::after{animation:none!important}}