/* ==========================================================================
   Chepstow OMODA JAECOO – animations.css
   Scroll reveal, entrance animations, micro-interactions.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Scroll Reveal
   JS marks elements with .oj-reveal, then adds .oj-reveal--visible on entry.
   JS sets --oj-i on staggered children for sequential delays.
   -------------------------------------------------------------------------- */

.oj-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  transition-delay: calc(var(--oj-i, 0) * 0.09s);
}

.oj-reveal--visible {
  opacity: 1;
  transform: none;
}


/* --------------------------------------------------------------------------
   Mobile menu entrance
   -------------------------------------------------------------------------- */

@keyframes oj-menu-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.oj-header__nav.is-open {
  animation: oj-menu-slide-in 0.22s ease forwards;
}


/* --------------------------------------------------------------------------
   Hamburger → X morph
   Targets the three SVG lines via aria-expanded on the button.
   -------------------------------------------------------------------------- */

.oj-header__toggle svg line {
  transition: transform 0.28s ease, opacity 0.2s ease;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.oj-header__toggle[aria-expanded="true"] svg line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.oj-header__toggle[aria-expanded="true"] svg line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.oj-header__toggle[aria-expanded="true"] svg line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}


/* --------------------------------------------------------------------------
   Button micro-interactions
   -------------------------------------------------------------------------- */

.btn-oj-dark {
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.28s ease !important;
}

.btn-oj-dark:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(103, 179, 196, 0.25);
}

.btn-oj-dark:active {
  transform: translateY(0);
  box-shadow: none;
}


/* --------------------------------------------------------------------------
   Header: smooth shadow on scroll
   -------------------------------------------------------------------------- */

.oj-header {
  transition: box-shadow 0.3s ease;
}

.oj-header--scrolled {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.22);
}


/* --------------------------------------------------------------------------
   Spec items: subtle lift on hover
   -------------------------------------------------------------------------- */

.landing-vehicle__spec {
  transition: transform 0.2s ease;
}

.landing-vehicle__spec:hover {
  transform: translateY(-3px);
}


/* --------------------------------------------------------------------------
   Footer links: underline draw on hover
   -------------------------------------------------------------------------- */

.oj-footer a {
  position: relative;
}

.oj-footer a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--oj-blue);
  transition: width 0.25s ease;
}

.oj-footer a:hover::after {
  width: 100%;
}


/* --------------------------------------------------------------------------
   Respect prefers-reduced-motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .oj-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .oj-header__toggle svg line,
  .landing-vehicle__spec,
  .btn-oj-dark {
    transition: none !important;
  }

  .oj-header__nav.is-open {
    animation: none;
  }
}