/* ════════════════════════════════════════════════════════════════
   CLIENDER · HERO FLUID — shared styles for every vertical hero that
   uses the interactive fluid mass (assets/js/hero-fluid.js).
   Keyed on .hero--fluid so it works on tech / sales / media.
═══════════════════════════════════════════════════════════════ */
.hero--fluid { 
  min-height: clamp(560px, 88vh, 920px); 
  justify-content: center;
  padding-top: clamp(2rem, 64px + 2vw, 5rem);
}
/* Account for fixed 64px topbar when there's no breadcrumb above the hero */
.hero--has-video.hero--inner {
  padding-top: calc(64px + clamp(1.5rem, 1rem + 2vw, 3rem));
}
.hero--fluid .hero__scene { z-index: var(--z-canvas); }
/* don't paint the scene solid dark — the global `.hero__scene{background:#0B0E13}`
   would turn into a black box in light mode. Let the page background show
   through in both themes; the fluid mass floats over it. */
.hero--fluid .hero__scene { background: transparent !important; }

.hero__fluid {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.hero__fluid-canvas { 
  width: 100%; 
  height: 100%; 
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}
/* override global `.hero__scene canvas { display:none }` (higher specificity) */
.hero--fluid .hero__scene .hero__fluid-canvas { display: block; }

/* shader supplies the glow → hide ambient blobs unless WebGL failed */
.hero--fluid .hero__scene::before,
.hero--fluid .hero__scene::after,
.hero--fluid .hero__bg-cyan--fallback { opacity: 0 !important; }
.hero__fluid.no-webgl ~ .hero__bg-cyan--fallback { opacity: 0.5 !important; }
.hero__fluid.no-webgl { display: none; }

/* keep copy readable over the mass */
.hero--fluid .hero__inner { 
  position: relative;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  padding-top: clamp(3rem, 5vw, 8rem);
}
/* Container inside hero--fluid should also be full-width to match animation */
.hero--fluid .container {
  width: 100%;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  margin-left: 0;
  margin-right: 0;
}
[data-theme="dark"] .hero--fluid .hero__inner::before {
  content: '';
  position: absolute;
  inset: -12% 0 -16% 0;
  z-index: -1;
  background:
    radial-gradient(120% 75% at 16% 38%, rgba(11,14,19,0.74) 0%, rgba(11,14,19,0.36) 44%, transparent 70%),
    linear-gradient(to bottom, transparent 38%, rgba(11,14,19,0.55) 100%);
  pointer-events: none;
}
[data-theme="light"] .hero--fluid .hero__inner::before {
  content: '';
  position: absolute;
  inset: -12% 0 -16% 0;
  z-index: -1;
  background:
    radial-gradient(120% 75% at 16% 38%, rgba(250,250,247,0.82) 0%, rgba(250,250,247,0.42) 44%, transparent 70%),
    linear-gradient(to bottom, transparent 40%, rgba(250,250,247,0.60) 100%);
  pointer-events: none;
}

/* When a hero has a real video, kill the WebGL fluid + grid so only the video shows */
.hero--has-video .hero__fluid,
.hero--has-video .hero__grid { display: none !important; }

/* Fix: tf-word overflow clips large hero title at scale */
.hero--fluid .hero__title .tf-word {
  overflow: visible;
}

/* Title in a solid theme color (not the gradient) so the headline doesn't
   pick up the colorful fluid background. White in dark, dark in light. */
.hero--fluid .hero__title,
.hero--fluid .hero__title em.grad,
.hero--fluid .hero__title em.grad .tf-char {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--fg) !important;
  color: var(--fg) !important;
}

/* ── Hero background video ── */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 3;
}
.hero__video-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    linear-gradient(to right, rgba(11,14,19,0.80) 0%, rgba(11,14,19,0.50) 55%, rgba(11,14,19,0.25) 100%),
    linear-gradient(to bottom, transparent 50%, rgba(11,14,19,0.60) 100%);
}
/* Video hero: always dark overlay + white text regardless of theme */
.hero--has-video .hero__video-overlay {
  background:
    linear-gradient(to right, rgba(11,14,19,0.82) 0%, rgba(11,14,19,0.52) 55%, rgba(11,14,19,0.25) 100%),
    linear-gradient(to bottom, transparent 50%, rgba(11,14,19,0.65) 100%);
}
[data-theme="light"] .hero--has-video .hero__inner::before {
  background:
    radial-gradient(120% 75% at 16% 38%, rgba(11,14,19,0.55) 0%, rgba(11,14,19,0.20) 44%, transparent 70%),
    linear-gradient(to bottom, transparent 38%, rgba(11,14,19,0.40) 100%);
}
.hero--has-video .hero__title,
.hero--has-video .hero__title em.grad,
.hero--has-video .hero__title em.grad .tf-char {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.hero--has-video .hero__sub,
.hero--has-video .hero__head,
.hero--has-video .hero__stats .stat__num,
.hero--has-video .hero__stats .stat__label {
  color: rgba(255,255,255,0.90) !important;
}

/* Entrance: copy rises as the mass settles */
@media (prefers-reduced-motion: no-preference) {
  .hero--fluid .th-rise {
    opacity: 0;
    transform: translateY(18px);
    animation: thRise 0.9s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) forwards;
    animation-delay: var(--rise-d, 0s);
  }
  @keyframes thRise {
    to { opacity: 1; transform: none; }
  }
}