/* ==========================================================================
   SKYVRONETWORKS — Enhancements Layer
   Adds: bigger logo, dark/light theme, global hover + motion effects,
   and an interactive touch/pointer-reactive Hero background.
   Loaded AFTER style.css so these rules can safely override it.
   ========================================================================== */

/* ---------------------------------- Logo (bigger) ------------------------ */
.site-header .logo img{ height:64px !important; transition:transform .3s var(--ease); }
.site-header .logo:hover img{ transform:scale(1.05); }
.site-footer .logo img{ height:60px !important; }

/* ---------------------------------- Logo (light/dark swap) --------------- */
/* logo.png is a light-colored wordmark made for dark backgrounds; it goes
   invisible on a white surface, so we swap in a dark-wordmark variant
   (logo-light.png) whenever the site is in light mode. */
.logo{ position:relative; display:inline-flex; align-items:center; }
.logo .logo-light{ display:none; }
html[data-theme="light"] .logo .logo-dark{ display:none !important; }
html[data-theme="light"] .logo .logo-light{ display:block !important; }

/* ---------------------------------- Light / Dark theme -------------------- */
html[data-theme="light"]{
  --bg:            #f6f6f9;
  --bg-raised:     #ffffff;
  --bg-elevated:   #ffffff;
  --surface:       rgba(10,10,20,0.035);
  --surface-hover: rgba(10,10,20,0.065);
  --border:        rgba(10,10,20,0.10);
  --border-strong: rgba(10,10,20,0.20);
  --text:          #101018;
  --text-dim:      #52525c;
  --text-faint:    #83838d;
  --shadow-card:   0 20px 55px -22px rgba(20,20,35,0.16);
}
html[data-theme="light"] body{
  background:
    radial-gradient(80% 60% at 15% -10%, rgba(255,43,69,0.07) 0%, transparent 55%),
    radial-gradient(60% 50% at 100% 0%, rgba(255,43,69,0.05) 0%, transparent 50%),
    var(--bg);
}
html[data-theme="light"] .site-header{ background:rgba(255,255,255,0.72); }
html[data-theme="light"] .mobile-nav{ background:rgba(255,255,255,0.98); }
html[data-theme="light"] .mobile-backdrop{ background:rgba(20,20,30,0.35); }
html[data-theme="light"] .final-cta{ background:linear-gradient(160deg, var(--bg-elevated), #fdeaec); }
html[data-theme="light"] .auth-visual{
  background:
    radial-gradient(70% 60% at 30% 20%, rgba(255,43,69,0.10), transparent 60%),
    linear-gradient(180deg, var(--bg-raised), var(--bg));
}
html[data-theme="light"] ::selection{ background:rgba(255,43,69,0.18); }
html{ transition:background-color .35s ease; }
body, .site-header, .mobile-nav, .channel-card, .cat-card, .feat-card, .service-card,
.testi-card, .terminal, .mini-dash, .search-card, .stat, .analytics-panel, .faq-item,
.blog-card, .dash-card, .dash-panel, .wizard-panel{
  transition: background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease, transform .3s var(--ease);
}

/* Theme toggle switch */
.theme-toggle{
  position:relative;
  width:52px; height:30px;
  border-radius:20px;
  border:1px solid var(--border);
  background:var(--surface);
  cursor:pointer;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  padding:3px;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.theme-toggle:hover{ border-color:var(--border-strong); }
.theme-toggle .tt-thumb{
  width:22px; height:22px;
  border-radius:50%;
  background:var(--red);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  transform:translateX(0);
  transition:transform .35s var(--ease), background .35s var(--ease);
  box-shadow:0 4px 10px -2px var(--red-glow);
}
html[data-theme="light"] .theme-toggle .tt-thumb{ transform:translateX(22px); background:var(--gold); box-shadow:0 4px 10px -2px rgba(232,178,77,0.5); }
.theme-toggle .tt-thumb svg{ width:13px; height:13px; }
.theme-toggle .tt-icon-sun, .theme-toggle .tt-icon-moon{
  position:absolute; top:50%; transform:translateY(-50%);
  color:var(--text-faint); pointer-events:none;
}
.theme-toggle .tt-icon-moon{ left:6px; }
.theme-toggle .tt-icon-sun{ right:6px; }
@media (max-width:980px){ .theme-toggle{ display:none; } }
.mobile-nav .theme-toggle-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; border-bottom:1px solid var(--border); margin-top:2px;
}
.mobile-nav .theme-toggle-row span{ font-family:var(--f-display); font-weight:700; font-size:15px; color:var(--text); }
.mobile-nav .theme-toggle{ display:inline-flex; }

/* ---------------------------------- Global entrance animation ------------- */
@keyframes fadeSlideUp{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:translateY(0); } }
@keyframes fadeSlideRight{ from{ opacity:0; transform:translateX(-24px); } to{ opacity:1; transform:translateX(0); } }
@keyframes softPop{ from{ opacity:0; transform:scale(.92); } to{ opacity:1; transform:scale(1); } }

.js-anim{ opacity:0; }
.hero .eyebrow.js-anim{ animation:fadeSlideUp .7s var(--ease) .05s forwards; }
.hero h1.js-anim{ animation:fadeSlideUp .8s var(--ease) .15s forwards; }
.hero .hero-sub.js-anim{ animation:fadeSlideUp .8s var(--ease) .28s forwards; }
.hero .hero-cta.js-anim{ animation:fadeSlideUp .8s var(--ease) .4s forwards; }
.hero .ticker-wrap.js-anim{ animation:fadeSlideUp .8s var(--ease) .5s forwards; }
.hero .terminal.js-anim{ animation:softPop .8s var(--ease) .3s forwards; }
.hero .floating-card.js-anim{ animation:softPop .7s var(--ease) forwards; }
.hero .fc-1.js-anim{ animation-delay:.6s; }
.hero .fc-2.js-anim{ animation-delay:.75s; }

/* ---------------------------------- Buttons: shine + magnetic glow -------- */
.btn{ position:relative; overflow:hidden; isolation:isolate; }
.btn::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.25), transparent 60%);
  opacity:0;
  transition:opacity .3s ease;
  z-index:0;
  pointer-events:none;
}
.btn:hover::before{ opacity:1; }
.btn > *{ position:relative; z-index:1; }
.btn-ghost::before{ background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%), var(--red-soft), transparent 60%); }
.btn-primary{ transition:transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease); }
.btn-primary:active{ transform:translateY(0) scale(.97); }
.btn-ghost:active{ transform:translateY(0) scale(.97); }
.icon-btn{ transition:transform .3s var(--ease), color .25s, border-color .25s, background .25s; }
.icon-btn:hover{ transform:translateY(-2px) rotate(-6deg); color:var(--red); }
.icon-btn:active{ transform:scale(.92); }

/* ---------------------------------- Nav link underline --------------------- */
.nav-main a{ padding-bottom:4px; }
.nav-main a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--red);
  border-radius:2px;
  transition:right .3s var(--ease);
}
.nav-main a:hover::after, .nav-main a.active-link::after{ right:0; }
.link-muted{ position:relative; transition:letter-spacing .25s ease; }
.link-muted:hover{ letter-spacing:.01em; }

/* ---------------------------------- Card hover polish ---------------------- */
.cat-card, .feat-card, .service-card, .testi-card, .stat, .faq-item, .dash-card{
  will-change:transform;
}
.feat-card, .testi-card, .dash-card{ transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); }
.feat-card:hover, .testi-card:hover{
  transform:translateY(-6px);
  border-color:var(--border-strong);
  box-shadow:0 24px 50px -26px rgba(0,0,0,.55);
}
.feat-icon, .cat-icon{ transition:transform .4s var(--ease), background .3s ease; }
.feat-card:hover .feat-icon, .cat-card:hover .cat-icon{ transform:scale(1.12) rotate(-6deg); background:var(--red); color:#fff; }
.service-card{ will-change:transform; }
.service-card:hover{ transform:translateY(-5px); }
.service-card:hover .feat-icon{ transform:scale(1.1) rotate(-6deg); background:var(--red); color:#fff; }
.service-link{ transition:gap .25s ease; }
.service-card:hover .service-link{ gap:10px; }
.stat{ transition:background .3s ease, transform .3s var(--ease); }
.stat:hover{ background:var(--surface-hover); transform:translateY(-3px); }
.stat .num{ transition:color .3s ease; }
.stat:hover .num{ color:var(--red); }
.dash-card:hover{ transform:translateY(-4px); border-color:var(--border-strong); box-shadow:0 18px 40px -22px rgba(0,0,0,.5); }
.blog-cat-tag, .cc-badge, .cc-fav{ transition:transform .3s var(--ease); }
.blog-card:hover .blog-cat-tag{ transform:translateY(-2px); }
.cc-fav:hover{ transform:scale(1.15); color:var(--red); border-color:var(--red); }

/* Terminal + mini-dash + floating cards: gentle hover lift/tilt */
.terminal, .mini-dash{ transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.terminal:hover{ transform:translateY(-4px); box-shadow:0 30px 70px -24px rgba(0,0,0,.7); }
.mini-dash:hover{ transform:translateY(-4px); }
.floating-card{ transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.floating-card:hover{ box-shadow:0 24px 50px -18px rgba(0,0,0,.6); }

/* FAQ chevron rotate polish */
.faq-item{ transition:border-color .3s ease; }
.faq-item:hover{ border-color:var(--border-strong); }
.faq-q{ transition:color .25s ease; }
.faq-q:hover{ color:var(--red); }

/* Live pill pulse ring */
.live-pill{ position:relative; }
.live-pill .dot{ position:relative; }
.live-pill .dot::after{
  content:"";
  position:absolute; inset:-4px;
  border-radius:50%;
  border:1px solid var(--up);
  animation:pingRing 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes pingRing{ 0%{ transform:scale(.6); opacity:.8;} 100%{ transform:scale(2.2); opacity:0;} }

/* Ticker items subtle hover pop */
.ticker-item{ transition:transform .25s var(--ease), color .25s ease; }
.ticker-item:hover{ transform:translateY(-2px); color:var(--text); }

/* ---------------------------------- Platform badge on listing cards ------- */
.cc-media .platform-badge{
  color:var(--platform-color, var(--up));
  border-color:rgba(255,255,255,0.14);
  font-weight:700;
}
.cc-media .platform-badge svg{ color:var(--platform-color, var(--up)); flex-shrink:0; }
.cc-name{ display:flex; align-items:center; gap:7px; }
.cc-name svg{ flex-shrink:0; }

/* ---------------------------------- Platforms — pill filter row (homepage) --
   "Filter By Platform"-style pill row: icon + name + count, one accent
   colour per platform, animated fill sweep + lift on hover, tactile press
   on click, and (for the very first "All Platforms" pill) a resting
   active/selected look identical to the hover state. */
.platform-grid{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}

/* Scroll-track: a thin progress bar under the row, only meaningful (and
   only shown) once the row actually scrolls — see platform-scroll-wrap
   below and the JS that sizes/positions the thumb. */
.platform-scroll-track{
  display:none;
  position:relative;
  height:4px;
  max-width:140px;
  margin:18px auto 0;
  border-radius:4px;
  background:var(--border);
  overflow:hidden;
}
.platform-scroll-thumb{
  position:absolute; top:0; left:0; height:100%;
  width:40%;
  border-radius:4px;
  background:var(--red);
  will-change:transform,width;
}

@media (max-width:820px){
  .platform-scroll-wrap{
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none;
    margin:0 -24px;
    padding:2px 24px 6px;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }
  .platform-scroll-wrap::-webkit-scrollbar{ display:none; }
  .platform-grid{
    flex-wrap:nowrap;
    gap:10px;
  }
  .platform-pill{
    flex-shrink:0;
    scroll-snap-align:start;
  }
  .platform-scroll-wrap{ scroll-snap-type:x proximity; }
  .platform-scroll-track{ display:block; }
}
@media (max-width:420px){
  .platform-scroll-wrap{ margin:0 -16px; padding:2px 16px 6px; }
}

.platform-pill{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:11px 20px 11px 12px;
  border-radius:999px;
  background:var(--bg-elevated);
  border:1px solid var(--border);
  isolation:isolate;
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .35s var(--ease), background .3s var(--ease);
}
/* Radial glow that blooms in on hover, tinted per-platform */
.platform-pill::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--platform-color) 32%, transparent), transparent 70%);
  opacity:0;
  transition:opacity .35s ease;
  z-index:-2;
}
/* Diagonal shine that sweeps left→right on hover */
.platform-pill::after{
  content:"";
  position:absolute; top:0; bottom:0; left:-60%;
  width:40%;
  background:linear-gradient(115deg, transparent, color-mix(in srgb, var(--platform-color) 45%, transparent), transparent);
  transform:skewX(-18deg);
  opacity:0;
  transition:transform .8s var(--ease), opacity .3s ease;
  z-index:-1;
  pointer-events:none;
}
.platform-pill:hover,
.platform-pill:focus-visible,
.platform-pill.active{
  transform:translateY(-3px);
  border-color:var(--platform-color);
  background:color-mix(in srgb, var(--platform-color) 10%, var(--bg-elevated));
  box-shadow:0 16px 34px -18px color-mix(in srgb, var(--platform-color) 65%, transparent), 0 0 0 1px color-mix(in srgb, var(--platform-color) 25%, transparent);
}
.platform-pill:hover::before,
.platform-pill.active::before{ opacity:1; }
.platform-pill:hover::after{ opacity:1; transform:translateX(260%) skewX(-18deg); }
.platform-pill:active{ transform:translateY(-1px) scale(.97); }

.platform-pill .pp-icon{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--platform-color) 18%, transparent);
  color:var(--platform-color);
  transition:transform .4s var(--ease), background .3s ease, color .3s ease;
  position:relative; z-index:1;
}
.platform-pill:hover .pp-icon,
.platform-pill.active .pp-icon{
  background:var(--platform-color);
  color:#0a0a0c;
  transform:scale(1.12) rotate(-8deg);
}
.platform-pill .pp-name{
  font-family:var(--f-display); font-weight:700; font-size:14.5px;
  position:relative; z-index:1; white-space:nowrap;
}
.platform-pill .pp-count{
  font-size:11.5px; color:var(--text-faint);
  background:var(--surface); border:1px solid var(--border);
  border-radius:20px; padding:2px 8px; margin-left:2px;
  position:relative; z-index:1;
  transition:color .3s ease, border-color .3s ease;
}
.platform-pill:hover .pp-count,
.platform-pill.active .pp-count{ color:var(--platform-color); border-color:color-mix(in srgb, var(--platform-color) 40%, transparent); }

@media (max-width:640px){
  .platform-grid{ gap:10px; }
  .platform-pill{ padding:9px 16px 9px 10px; }
  .platform-pill .pp-name{ font-size:13.5px; }
}

/* ---------------------------------- Search bar: extra Platform field ------ */
.search-card{ grid-template-columns:0.9fr 1.3fr 0.9fr 0.9fr 0.9fr auto; }
@media (max-width:1180px){
  .search-card{ grid-template-columns:1fr 1fr 1fr; }
}
@media (max-width:980px){
  .search-card{ grid-template-columns:1fr 1fr; }
  .search-card .btn{ grid-column:1 / -1; }
}
@media (max-width:480px){
  .search-card{ grid-template-columns:1fr; }
}

/* Platform filter chips (Buy Channels page) */
.chip-row{ flex-wrap:wrap; }
.platform-chip{ display:inline-flex; align-items:center; gap:6px; }
.platform-chip svg{ width:13px; height:13px; }

/* ---------------------------------- HERO: interactive touch background ---- */
.hero{ position:relative; isolation:isolate; }
.hero-touch-bg{
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(480px circle at var(--hx,50%) var(--hy,28%), rgba(255,43,69,0.22), transparent 62%),
    radial-gradient(320px circle at var(--hx,50%) var(--hy,28%), rgba(232,178,77,0.10), transparent 70%);
  transition:background .55s cubic-bezier(0.16,1,0.3,1);
}
.hero-dot-grid{
  position:absolute; inset:-10%;
  z-index:0;
  pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(60% 55% at 50% 30%, #000 0%, transparent 75%);
  mask-image:radial-gradient(60% 55% at 50% 30%, #000 0%, transparent 75%);
  transform:translate(calc(var(--hx,50%) * -0.04), calc(var(--hy,28%) * -0.04));
  transition:transform .5s cubic-bezier(0.16,1,0.3,1);
}
html[data-theme="light"] .hero-dot-grid{ background-image:radial-gradient(rgba(10,10,20,0.10) 1px, transparent 1px); }
.hero > .container{ position:relative; z-index:1; }

.hero-ripple{
  position:absolute;
  width:10px; height:10px;
  border-radius:50%;
  left:0; top:0;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,43,69,0.55), rgba(255,43,69,0) 70%);
  border:1px solid rgba(255,43,69,0.45);
  pointer-events:none;
  z-index:0;
  animation:heroRipple 1.1s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes heroRipple{
  0%{ width:10px; height:10px; opacity:.9; }
  100%{ width:460px; height:460px; opacity:0; }
}

/* subtle parallax tilt on hero visuals via inline transform vars set in JS */
.hero .terminal, .hero .floating-card{
  transform: translate3d(var(--px,0px), var(--py,0px), 0);
}

@media (prefers-reduced-motion: reduce){
  .hero-touch-bg, .hero-dot-grid, .hero-ripple, .js-anim{ animation:none !important; transition:none !important; }
  .js-anim{ opacity:1 !important; }
}
@media (max-width:980px){
  .hero-dot-grid{ display:none; }
}