/**
 * Tech Sutro — Hero Section Styles
 * Bold Tech / Dark Glass — immersive video/poster background,
 * animated SVG vector system, aurora copy glow, bold display
 * typography and glass CTAs.
 */

/* ==================================================================
   HERO BASE
   ================================================================== */

.hero {
  position: relative;
  min-height: 90vh;

  display: flex;
  align-items: center;

  overflow: hidden;

  padding-top: 72px;

  isolation: isolate;
}

/* Soft bottom fade so the hero melts into the page canvas. */
.hero::after {
  content: '';

  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: clamp(80px, 14vh, 180px);

  z-index: 1;

  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--bg-page) 100%
  );

  opacity: 0.9;
  pointer-events: none;
}

/* ==================================================================
   MEDIA — VIDEO / POSTER
   ================================================================== */

.hero-media {
  position: absolute;
  inset: 0;

  z-index: 0;

  overflow: hidden;

  animation: heroMediaDrift 26s ease-in-out infinite alternate;
}

.hero-video,
.hero-poster {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  /*
   * Theme-independent media treatment so light and dark render the
   * footage identically.
   */
  filter: saturate(1.05) contrast(1.05) brightness(0.95);
}

@keyframes heroMediaDrift {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.06);
  }
}

/*
 * Overlay disabled by request — the footage shows through untouched
 * in both themes. The element is kept in the markup but neutralised.
 */
.hero-overlay {
  display: none;
}

/* ==================================================================
   ANIMATED VECTOR SYSTEM
   ================================================================== */

.hero-vectors {
  position: absolute;
  inset: 0;

  z-index: 1;

  pointer-events: none;

  overflow: hidden;

  opacity: 0.85;

  /*
   * Theme-independent blend so light and dark composite the vector
   * system identically.
   */
  mix-blend-mode: screen;
}

.vector-grid {
  width: 100%;
  height: 100%;

  display: block;

  overflow: visible;
}

/* ==================================================================
   GRID LINES
   ================================================================== */

.grid-lines {
  opacity: 0.55;
}

/* ==================================================================
   ORBIT RINGS
   ================================================================== */

.orbit-rings {
  transform-origin: 500px 300px;

  /*
   * Small opacity animation is handled by CSS.
   * Rotation itself is handled by SVG <animateTransform>.
   */
  animation: orbitOpacity 6s ease-in-out infinite;
}

@keyframes orbitOpacity {
  0%,
  100% {
    opacity: 0.72;
  }

  50% {
    opacity: 1;
  }
}

/* ==================================================================
   NODES
   ================================================================== */

.nodes {
  transform-origin: 500px 300px;

  animation: nodesFloat 5s ease-in-out infinite;
}

@keyframes nodesFloat {
  0%,
  100% {
    opacity: 0.72;
  }

  50% {
    opacity: 1;
  }
}

/* ==================================================================
   VECTOR GLOW
   ================================================================== */

.hero-vectors::after {
  content: '';

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 50%,
      color-mix(
        in oklab,
        var(--accent-primary),
        transparent 93%
      ) 0%,
      transparent 45%
    ),
    radial-gradient(
      ellipse 45% 40% at 78% 22%,
      color-mix(
        in oklab,
        var(--accent-secondary),
        transparent 95%
      ) 0%,
      transparent 70%
    );

  opacity: 0.8;
}

/* ==================================================================
   HERO CONTENT
   ================================================================== */

.hero-content {
  position: relative;

  z-index: 2;

  width: 100%;
  max-width: 980px;

  padding-inline: clamp(
    1.25rem,
    4vw,
    2.5rem
  );
}

/*
 * Aurora glow fields sitting behind the copy — the "bold tech"
 * ambience layer, scoped to the hero so it never bleeds elsewhere.
 */
.hero-content::before {
  content: '';

  position: absolute;
  inset: -14% -18% -22% -12%;

  z-index: -1;

  background:
    radial-gradient(
      42% 55% at 20% 46%,
      var(--aurora-1) 0%,
      transparent 70%
    ),
    radial-gradient(
      38% 48% at 62% 28%,
      var(--aurora-2) 0%,
      transparent 72%
    ),
    radial-gradient(
      46% 52% at 42% 78%,
      var(--aurora-3) 0%,
      transparent 70%
    );

  filter: blur(46px);
  opacity: 0.75;

  pointer-events: none;
}

/* ==================================================================
   EYEBROW — accent gradient glass label
   ================================================================== */

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;

  padding: 0.4rem 0.95rem;

  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);

  background: var(--glass-bg-soft);

  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);

  font-size: var(--text-xs);

  font-weight: 700;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--accent-primary);

  margin-bottom: var(--space-5);

  opacity: 0;

  transform: translateY(10px);

  animation:
    heroFadeUp
    0.9s
    ease-out
    0.15s
    forwards;
}

/* Gradient status dot. */
.hero-eyebrow::before {
  content: '';

  width: 7px;
  height: 7px;
  flex-shrink: 0;

  border-radius: var(--radius-full);

  background: var(--accent-gradient);
  box-shadow: 0 0 10px var(--accent-glow);
}

/* ==================================================================
   HERO TITLE — bold display with gradient emphasis
   ================================================================== */

.hero-title {
  font-family: var(--font-display);

  font-size: clamp(
    2.3rem,
    5vw,
    4.5rem);
  font-weight: 800;

  line-height: 1.04;

  letter-spacing: -0.03em;

  background: var(--accent-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: var(--text-primary);
  -webkit-text-fill-color: transparent;

  margin-bottom: 0;

  max-width: 900px;

  text-wrap: balance;

  opacity: 0;

  transform: translateY(14px);

  animation:
    heroFadeUp
    0.9s
    ease-out
    0.25s
    forwards;
}

/* ==================================================================
   HERO DESCRIPTION
   ================================================================== */

.hero-description {
  font-size: clamp(
    1rem,
    1.6vw,
    1.18rem
  );

  line-height: var(--leading-loose);

  color: var(--text-secondary);

  max-width: 720px;

  margin-bottom: 0;

  opacity: 0;

  transform: translateY(14px);

  animation:
    heroFadeUp
    0.9s
    ease-out
    0.35s
    forwards;
}

/* Text background wrapper for readability */
.hero-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);

  margin-bottom: var(--space-8);

  padding: clamp(1rem, 2vw, 1.6rem) clamp(1.1rem, 3vw, 2.2rem);

  max-width: min(820px, 100%);
  width: fit-content;

  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);

  background: color-mix(in oklab, var(--bg-page) 72%, transparent);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);

  box-shadow: 0 30px 70px -40px var(--accent-glow);

  opacity: 0;
  transform: translateY(14px);
  animation: heroFadeUp 0.9s ease-out 0.25s forwards;
}

/* ==================================================================
   HERO ACTIONS
   ================================================================== */

.hero-actions {
  display: flex;

  flex-wrap: wrap;
  align-items: center;

  gap: var(--space-4);

  opacity: 0;

  transform: translateY(14px);

  animation:
    heroFadeUp
    0.9s
    ease-out
    0.45s
    forwards;
}

/* ==================================================================
   HERO CONTENT ANIMATION
   ================================================================== */

@keyframes heroFadeUp {

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

/* ==================================================================
   BUTTON — scoped hero CTA sizing
   ================================================================== */

.hero-actions .btn {
  position: relative;

  z-index: 2;

  min-height: 54px;

  padding-inline: 1.8rem;

  font-size: var(--text-md);
}

.hero-actions .btn:hover {
  box-shadow: 0 22px 52px -14px var(--accent-glow);
}

/* ==================================================================
   REDUCED MOTION
   ================================================================== */

@media (prefers-reduced-motion: reduce) {

  .orbit-rings,
  .nodes,
  .hero-media {
    animation: none;
  }

  .hero-vectors {
    opacity: 0.65;
  }

  .hero-eyebrow,
  .hero-title,
  .hero-description,
  .hero-actions {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ==================================================================
   RESPONSIVE — TABLET / MOBILE
   ================================================================== */

@media (max-width: 768px) {

  .hero {
    min-height: auto;

    padding-top: 88px;

    padding-bottom: 4rem;
  }

  .hero-content {
    width: 100%;

    padding-inline: 1.25rem;
  }

  .hero-content::before {
    inset: -8% -10% -14% -8%;

    filter: blur(34px);
    opacity: 0.65;
  }

  .hero-title {
    font-size: clamp(
      2.25rem,
      10vw,
      3.25rem
    );

    line-height: 1.05;

    letter-spacing: -0.035em;

    margin-bottom: 0;
  }

  .hero-description {
    max-width: 620px;

    font-size: 1.05rem;

    line-height: 1.65;

    margin-bottom: 0;
  }

  .hero-text {
    width: 100%;
    max-width: 100%;
    padding: 1rem 1.1rem;
    border-radius: var(--radius-md);
  }

  .hero-actions {
    flex-direction: column;

    align-items: stretch;

    gap: 0.75rem;

    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;

    min-height: 52px;

    padding-inline: 1.35rem;

    font-size: 1rem;
  }

  /*
   * Slightly reduce vector intensity on smaller screens.
   */
  .hero-vectors {
    opacity: 0.55;
  }
}

/* ==================================================================
   SMALL MOBILE
   ================================================================== */

@media (max-width: 640px) {

  .hero {
    padding-top: 82px;

    padding-bottom: 4.5rem;
  }

  .hero-content {
    padding-inline: 1rem;
  }

  .hero-title {
    font-size: clamp(
      2.35rem,
      11vw,
      3rem
    );

    line-height: 1.04;

    letter-spacing: -0.04em;
  }

  .hero-description {
    font-size: 1rem;

    line-height: 1.65;
  }

  .hero-eyebrow {
    padding: 0.35rem 0.8rem;

    letter-spacing: 0.12em;
  }

  /*
   * Keep vector graphics subtle on phones.
   */
  .hero-vectors {
    opacity: 0.4;
  }
}

/* ==================================================================
   EXTRA SMALL PHONES
   ================================================================== */

@media (max-width: 400px) {

  .hero {
    padding-top: 78px;
  }

  .hero-title {
    font-size: 2.2rem;
  }

  .hero-description {
    font-size: 0.98rem;
  }
}