/* ═══════════════════════════════════════════════════════════
   SchleppStop animated branch — LIGHT hero banner motion
   Same art as live: images/hero.webp (oldtimer · night · pyramids)
   No video, no starfields, no multi-layer effects (those lagged).
   ═══════════════════════════════════════════════════════════ */

/* Desktop: original hero art is the banner <img>, not a second CSS bg */
.hero.hero--live {
  position: relative;
  overflow: hidden;
  /* keep navy base; drop photo from style.css stack so we don't paint twice */
  background-color: #152740;
  background-image: none;
  isolation: isolate;
}

/* The classic banner — only this element moves (transform = GPU-cheap) */
.hero-banner {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  /* single slow drift — scale only, no filters */
  transform: scale(1.06) translate3d(0, 0, 0);
  animation: heroBannerDrift 24s ease-in-out infinite alternate;
  will-change: transform;
  backface-visibility: hidden;
}
@keyframes heroBannerDrift {
  0%   { transform: scale(1.06) translate3d(0%, 0%, 0); }
  100% { transform: scale(1.12) translate3d(-1.8%, 0.6%, 0); }
}

/* Same left-weighted scrim as original CSS gradient */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    95deg,
    rgba(13, 22, 38, 0.78) 0%,
    rgba(13, 22, 38, 0.42) 48%,
    rgba(13, 22, 38, 0.05) 78%
  );
}

/* Content above banner */
.hero.hero--live .hero-copy,
.hero.hero--live .hero-visual {
  position: relative;
  z-index: 2;
}

/* Soft amber kiss on the red bar (static gradient — no animation) */
.hero.hero--live::after {
  background: linear-gradient(90deg, #E82020 0%, #F0A020 55%, #E82020 100%);
}

/* Logo: very light (opacity only — cheap) */
.nav-logo .logo-eye-img {
  animation: logoEye 5s ease-in-out infinite;
}
.nav-logo .logo-art-img {
  animation: logoArt 6s ease-in-out infinite;
}
@keyframes logoEye {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; }
}
@keyframes logoArt {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; }
}

/* Mobile: keep proven split hero from style.css — hide desktop banner */
@media (max-width: 768px) {
  .hero.hero--live {
    /* style.css mobil-v6 already sets night gradient + padding */
    background-image: linear-gradient(165deg, #0d1626 0%, #18283A 42%, #22384F 72%, #2E4A66 100%);
  }
  .hero-banner,
  .hero-scrim {
    display: none !important;
  }
  /* Full uncropped hero strip under copy — tiny opacity fade only */
  .hero.hero--live .hero-visual img {
    animation: heroStripIn 1s ease both;
  }
  @keyframes heroStripIn {
    from { opacity: 0.85; }
    to { opacity: 1; }
  }
}

/* Respect system setting */
@media (prefers-reduced-motion: reduce) {
  .hero-banner-img {
    animation: none !important;
    transform: scale(1.06) !important;
  }
  .nav-logo .logo-eye-img,
  .nav-logo .logo-art-img,
  .hero.hero--live .hero-visual img {
    animation: none !important;
  }
}