/* ============================================================================
   Hero Section — Visual Design Focus
   Full viewport display with responsive logo composition
   ============================================================================ */

.hero {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  position: relative;
  /* Dark base behind the WebGL tubes canvas — also the fallback when the
     effect is skipped (prefers-reduced-motion) or fails to load. */
  background: var(--color-dark);
  overflow: hidden;
}

/* WebGL "tubes" cursor effect canvas — fills the hero, sits behind the logo */
.hero__fx {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: var(--z-base);
  pointer-events: none;
}

/* Soft glow that lifts the light logo card off the dark tube field */
.hero__logo-wrapper::after {
  content: '';
  position: absolute;
  inset: -8%;
  background: radial-gradient(circle, rgba(252, 76, 2, 0.18) 0%, transparent 65%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}

.hero__container {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-32);
}

.hero__logo-wrapper {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__logo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: 400px;
  max-height: 400px;
  filter:
    drop-shadow(0 30px 60px rgba(0, 0, 0, 0.65))
    drop-shadow(0 0 40px rgba(252, 76, 2, 0.18));
  animation: heroLogoFloat 6s ease-in-out infinite;
  will-change: transform;
}

/* Subtle floating animation */
@keyframes heroLogoFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* ============================================================================
   Responsive Behavior
   ============================================================================ */

/* Tablet: 768px and below */
@media (max-width: 768px) {
  .hero {
    min-height: 80vh;
  }

  .hero__container {
    padding: var(--space-24);
  }

  .hero__logo {
    max-width: 320px;
    max-height: 320px;
    filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.5));
  }
}

/* Mobile: 480px and below */
@media (max-width: 480px) {
  .hero {
    min-height: 75vh;
  }

  .hero__container {
    padding: var(--space-16);
  }

  .hero__logo {
    max-width: 240px;
    max-height: 240px;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.45));
  }

  @keyframes heroLogoFloat {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }
}

/* Small mobile: 360px and below */
@media (max-width: 360px) {
  .hero {
    min-height: 70vh;
  }

  .hero__logo {
    max-width: 200px;
    max-height: 200px;
  }
}

/* Landscape orientation optimization */
@media (max-height: 600px) {
  .hero {
    min-height: 100vh;
  }

  .hero__logo {
    max-width: 300px;
    max-height: 300px;
  }
}

/* ============================================================================
   Theme
   ============================================================================ */

/* The hero is a deliberate dark WebGL showcase (tubes effect). The rest of
   the site stays on the fixed light theme; this dark band is by design, not
   a system-driven dark mode. */

/* ============================================================================
   Reduced Motion
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .hero__logo {
    animation: none;
  }
}

/* ============================================================================
   Print Styles
   ============================================================================ */

@media print {
  .hero {
    min-height: 100mm;
    page-break-inside: avoid;
    background: #FFFFFF;
  }

  .hero__fx,
  .hero__logo-wrapper::after {
    display: none;
  }
}