/* GlassHosting network hero, DRAFT 2026-10-07.
   Self-contained: loads after styles.css and only styles .gh-* plus the hero it wraps.
   Palette pulled from the Founder WooCommerce / KVM / LXC covers, CTAs stay Molten. */
:root {
  --gh-violet: #A855F7;
  --gh-indigo: #6366F1;
  --gh-blue: #38BDF8;
  --gh-teal: #2DD4BF;
  --gh-night: #04060D;
}

.gh-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: min(880px, calc(100svh - 72px));
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(2.5rem, 5vw, 4rem);
  background:
    radial-gradient(60% 70% at 72% 42%, rgba(49, 46, 129, 0.45), transparent 70%),
    radial-gradient(40% 50% at 92% 8%, rgba(88, 28, 135, 0.28), transparent 70%),
    linear-gradient(180deg, #020309 0%, var(--gh-night) 55%, var(--obsidian-base, #070B10) 100%);
  border-bottom: 1px solid rgba(56, 189, 248, 0.12);
}

.gh-hero > .container { position: relative; z-index: 2; width: min(calc(100% - 2rem), var(--max, 1180px)); }

/* two equal columns: copy left, network stage right */
.gh-hero .hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 2rem;
}

.gh-hero .hero-copy { position: relative; }
.gh-hero h1 {
  text-shadow: 0 2px 30px rgba(3, 5, 7, 0.85);
}
.gh-hero h1 .gh-glow {
  background: linear-gradient(92deg, #7DD3FC 0%, #818CF8 52%, #C084FC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gh-hero p.lead { color: #A9B6C8; }

.gh-hero__stage {
  position: relative;
  min-height: clamp(480px, 64vh, 660px);
  pointer-events: none;
}

/* ---------- decorative network layer ---------- */
.gh-net {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  contain: strict;
  --gh-px: 0;
  --gh-py: 0;
}

.gh-net__globe {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.gh-net__canvas,
.gh-net__base {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.gh-net.is-ready .gh-net__canvas,
.gh-net.is-ready .gh-net__base { opacity: 1; }

/* glass sheen sweeping across the globe: compositor-only transform animation */
.gh-net__sheen {
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}
.gh-net__sheen::before {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 55%;
  background: linear-gradient(105deg, transparent 0%, rgba(165, 180, 252, 0.10) 50%, transparent 100%);
  transform: translate3d(-120%, 0, 0);
  animation: gh-sheen 9s linear infinite;
}
@keyframes gh-sheen {
  to { transform: translate3d(300%, 0, 0); }
}

.gh-net__glow {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  translate: calc(var(--gh-px) * -36px) calc(var(--gh-py) * -24px);
  animation: gh-drift 22s ease-in-out infinite alternate;
}
.gh-net__glow--violet {
  width: 46vw; height: 46vw; max-width: 720px; max-height: 720px;
  right: -8vw; top: -14vw;
  background: radial-gradient(closest-side, rgba(147, 51, 234, 0.30), transparent);
}
.gh-net__glow--blue {
  width: 40vw; height: 40vw; max-width: 640px; max-height: 640px;
  right: 14vw; top: 18%;
  background: radial-gradient(closest-side, rgba(37, 99, 235, 0.26), transparent);
  animation-duration: 28s; animation-delay: -9s;
}
.gh-net__glow--teal {
  width: 30vw; height: 30vw; max-width: 480px; max-height: 480px;
  right: 34vw; bottom: -10vw;
  background: radial-gradient(closest-side, rgba(20, 184, 166, 0.18), transparent);
  animation-duration: 25s; animation-delay: -4s;
}
.gh-net__glow--ember {
  width: 36vw; height: 36vw; max-width: 560px; max-height: 560px;
  left: -12vw; bottom: -18vw;
  background: radial-gradient(closest-side, rgba(255, 106, 26, 0.13), transparent);
  animation-duration: 31s;
}

@keyframes gh-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-3%, 4%, 0) scale(1.08); }
}

/* glossy perspective floor (static, compositor friendly) */
.gh-net__floor {
  position: absolute;
  left: -25%; right: -25%; bottom: -2%;
  height: 46%;
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.10) 1px, transparent 1px);
  background-size: 72px 72px;
  transform: perspective(520px) rotateX(70deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent 75%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent 75%);
  opacity: 0.55;
}

/* readability veil behind the copy column */
.gh-net__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 3, 9, 0.88) 0%, rgba(2, 3, 9, 0.62) 32%, rgba(2, 3, 9, 0) 54%),
    linear-gradient(180deg, transparent 78%, var(--obsidian-base, #070B10) 100%);
}

/* ---------- snapshot band (the former right column, unchanged content) ---------- */
.gh-snapshot {
  position: relative;
  z-index: 3;
  padding-top: 0;
  margin-top: -2.25rem;
}
.gh-snapshot .hero-panel-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: none;
  justify-self: auto;
  align-items: stretch;
}
.gh-snapshot .hero-panel-stack > .server-window { height: 100%; }

/* ---------- tablet and phone ---------- */
@media (max-width: 900px) {
  .gh-hero { min-height: 0; align-items: flex-start; padding-top: 0.5rem; }
  .gh-hero .hero-grid { grid-template-columns: 1fr; gap: 0.5rem; }
  .gh-hero__stage { order: -1; min-height: 0; height: clamp(340px, 88vw, 480px); }
  .gh-net__veil {
    background:
      linear-gradient(180deg, rgba(2, 3, 9, 0) 0%, rgba(2, 3, 9, 0) 34%, rgba(2, 3, 9, 0.78) 52%, rgba(2, 3, 9, 0.9) 100%);
  }
  .gh-net__floor { height: 30%; opacity: 0.35; }
  .gh-net__glow--violet { width: 90vw; height: 90vw; right: -30vw; top: -20vw; }
  .gh-net__glow--blue { width: 80vw; height: 80vw; right: 10vw; top: 2%; }
  .gh-net__glow--teal, .gh-net__glow--ember { display: none; }
  .gh-snapshot { margin-top: 0; }
  .gh-snapshot .hero-panel-stack { grid-template-columns: 1fr; }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .gh-net__glow { animation: none; translate: none; }
  .gh-net__canvas, .gh-net__base { transition: none; }
  .gh-net__sheen { display: none; }
}