/* ===== Hero Smart Parking Animation (Light · Centered Overlay) ===== */

.hero.hero--centered {
  position: relative;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(88px, 12vh, 132px) 0 88px;
  background: #ffffff;
  overflow: hidden;
}

.hero-animation {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-parking-scene {
  position: absolute;
  inset: -8% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 116%;
}

.hero-parking-scene svg {
  width: 128vw;
  min-width: 1280px;
  max-width: 1800px;
  height: auto;
  max-height: 92vh;
  display: block;
}

.hero-bg-fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 34% 36% at 50% 38%, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.86) 50%, rgba(255, 255, 255, 0.35) 75%, transparent 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.hero-content {
  max-width: 680px;
  margin: 0 auto;
}

.hero--centered .hero-tag {
  color: #111111;
  border-bottom-color: rgba(0, 0, 0, 0.18);
}

.hero.hero--centered h1,
.hero.hero--centered .hero-content h1 {
  color: #0a0a0a;
}

.hero.hero--centered h1 .sub,
.hero.hero--centered .hero-content h1 .sub {
  color: #1a1a1a;
}

.hero.hero--centered p,
.hero.hero--centered .hero-content p {
  color: #222222;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.hero--centered .hero-buttons {
  justify-content: center;
}

.hero--centered .btn-outline {
  color: #111111;
  border-color: rgba(0, 0, 0, 0.28);
  background: rgba(255, 255, 255, 0.88);
}

.hero--centered .btn-outline:hover {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

.hero--centered .scroll-indicator {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--gray-600);
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-indicator__arrow {
    animation: none !important;
    opacity: 0.75;
  }
}

/* ===== Hero scene motion — one 8s timeline ===== */
/* 0–24% car arrives · 28–54% LPR scan · 50–88% HUD result · 66–86% gate opens · 70–90% car exits */
.hero-animation .hero-car {
  animation: heroCar 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.hero-animation .hero-lane-dash { animation: heroLaneDash 8s linear infinite; }
.hero-animation .hero-headlight { animation: heroPulse 2.4s ease-in-out infinite; }
.hero-animation .hero-beam { animation: heroBeam 8s ease-in-out infinite; }
.hero-animation .hero-scanline { animation: heroScan 8s ease-in-out infinite; }

.hero-animation .hero-bracket {
  transform-box: fill-box;
  transform-origin: center;
  animation: heroBracket 8s ease-out infinite;
}

.hero-animation .hero-arm {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: heroArm 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.hero-animation .hero-gate-light {
  fill: #ef4444;
  animation: heroGateLight 8s steps(1) infinite;
}

.hero-animation .hero-hud-idle { animation: heroHudIdle 8s ease-in-out infinite; }
.hero-animation .hero-hud-result { animation: heroHudResult 8s ease-out infinite; }

.hero-animation .hero-hud-gauge {
  transform-box: fill-box;
  transform-origin: left center;
  animation: heroHudGauge 8s ease-out infinite;
}

.hero-animation .hero-hud-status { animation: heroHudStatus 8s ease-out infinite; }

.hero-animation .hero-count--a { animation: heroCountA 8s steps(1) infinite; }
.hero-animation .hero-count--b { animation: heroCountB 8s steps(1) infinite; }

/* Ambient loops */
.hero-animation .hero-float { animation: heroFloat 6s ease-in-out infinite; }
.hero-animation .hero-float--alt { animation-duration: 7s; animation-delay: -2s; }
.hero-animation .hero-pulse { animation: heroPulse 1.6s ease-in-out infinite; }
.hero-animation .hero-blink { animation: heroPulse 1.1s ease-in-out infinite; }

.hero-animation .hero-flow {
  stroke-dasharray: 4 5;
  animation: heroFlow 1.2s linear infinite;
}

.hero-animation .hero-chev { animation: heroChev 1.8s ease-in-out infinite; }
.hero-animation .hero-chev--2 { animation-delay: 0.2s; }
.hero-animation .hero-chev--3 { animation-delay: 0.4s; }

.hero-animation .hero-bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: heroBar 3.2s ease-in-out infinite;
}
.hero-animation .hero-bar--2 { animation-delay: -0.5s; }
.hero-animation .hero-bar--3 { animation-delay: -1.1s; }
.hero-animation .hero-bar--4 { animation-delay: -1.6s; }
.hero-animation .hero-bar--5 { animation-delay: -2.2s; }
.hero-animation .hero-bar--6 { animation-delay: -2.7s; }

.hero-animation .hero-bay-led { animation: heroPulse 2s ease-in-out infinite; }
.hero-animation .hero-bay-led--a { fill: #22C55E; }
.hero-animation .hero-bay-led--b { fill: #ef4444; animation-delay: -0.7s; }
.hero-animation .hero-bay-led--c { fill: #facc15; animation-delay: -1.4s; }

@keyframes heroCar {
  0% { transform: translateX(-300px); opacity: 0; }
  6% { opacity: 1; }
  24%, 70% { transform: translateX(0); opacity: 1; }
  90% { transform: translateX(430px); opacity: 1; }
  91%, 100% { transform: translateX(430px); opacity: 0; }
}

@keyframes heroLaneDash {
  0% { stroke-dashoffset: 0; }
  24%, 70% { stroke-dashoffset: 52; }
  90%, 100% { stroke-dashoffset: 104; }
}

@keyframes heroBeam {
  0%, 26% { opacity: 0; }
  32%, 50% { opacity: 1; }
  58%, 100% { opacity: 0; }
}

@keyframes heroScan {
  0%, 30% { transform: translateY(0); opacity: 0; }
  32% { transform: translateY(0); opacity: 1; }
  48% { transform: translateY(38px); opacity: 1; }
  52%, 100% { transform: translateY(38px); opacity: 0; }
}

@keyframes heroBracket {
  0%, 44% { transform: scale(1.35); opacity: 0; }
  50%, 70% { transform: scale(1); opacity: 1; }
  76%, 100% { transform: scale(1); opacity: 0; }
}

@keyframes heroArm {
  0%, 64% { transform: rotate(0deg); }
  74%, 86% { transform: rotate(-80deg); }
  96%, 100% { transform: rotate(0deg); }
}

@keyframes heroGateLight {
  0% { fill: #ef4444; }
  64% { fill: #22C55E; }
  90% { fill: #ef4444; }
}

@keyframes heroHudIdle {
  0%, 10% { opacity: 0.35; }
  20%, 40% { opacity: 1; }
  30% { opacity: 0.45; }
  48%, 92% { opacity: 0; }
  100% { opacity: 0.35; }
}

@keyframes heroHudResult {
  0%, 50% { transform: translateY(6px); opacity: 0; }
  56%, 88% { transform: translateY(0); opacity: 1; }
  95%, 100% { transform: translateY(0); opacity: 0; }
}

@keyframes heroHudGauge {
  0%, 54% { transform: scaleX(0); }
  68%, 88% { transform: scaleX(1); }
  96%, 100% { transform: scaleX(0); }
}

@keyframes heroHudStatus {
  0%, 62% { opacity: 0; }
  66%, 88% { opacity: 1; }
  95%, 100% { opacity: 0; }
}

@keyframes heroCountA {
  0% { opacity: 1; }
  74% { opacity: 0; }
}

@keyframes heroCountB {
  0% { opacity: 0; }
  74% { opacity: 1; }
}

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

@keyframes heroPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@keyframes heroFlow { to { stroke-dashoffset: -18; } }

@keyframes heroChev {
  0%, 100% { opacity: 0.2; }
  40% { opacity: 1; }
}

@keyframes heroBar {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.6); }
}

@media (max-width: 768px) {
  .hero.hero--centered {
    padding: 92px 0 72px;
  }

  .hero-parking-scene svg {
    width: 160vw;
    min-width: 980px;
    max-height: 78vh;
  }

  .hero-bg-fade {
    background:
      radial-gradient(ellipse 70% 50% at 50% 40%, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.78) 45%, rgba(255, 255, 255, 0.2) 100%);
  }
}

/* Reduced motion: freeze on the "matched" frame */
@media (prefers-reduced-motion: reduce) {
  .hero-animation * {
    animation: none !important;
  }

  .hero-animation .hero-beam,
  .hero-animation .hero-scanline,
  .hero-animation .hero-hud-idle,
  .hero-animation .hero-count--b {
    opacity: 0;
  }

  .hero-animation .hero-gate-light { fill: #22C55E; }
}