/* ==========================================================================
   ChennaiTrips — Motion System
   Subtle, expensive-feeling motion only. Everything eases with a slow,
   confident curve — nothing bounces, nothing spins.
   ========================================================================== */

:root {
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 220ms;
  --dur-med: 480ms;
  --dur-slow: 900ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

html { scroll-behavior: smooth; }

/* Scroll-reveal: JS toggles .in-view on elements carrying [data-reveal] */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-premium),
              transform var(--dur-slow) var(--ease-premium);
}
[data-reveal].in-view {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="fade"] { transform: none; }
[data-reveal="zoom"] { transform: scale(1.04); }
[data-reveal="zoom"].in-view { transform: scale(1); }

/* Staggered children — JS sets --stagger-index per child */
[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-med) var(--ease-premium),
              transform var(--dur-med) var(--ease-premium);
  transition-delay: calc(var(--stagger-index, 0) * 90ms);
}
[data-reveal-group].in-view > * {
  opacity: 1;
  transform: translateY(0);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes ripple {
  to { transform: scale(3.2); opacity: 0; }
}

/* Image zoom-on-hover — used inside .media-frame */
.media-frame img,
.media-frame .ph-svg {
  transition: transform var(--dur-slow) var(--ease-premium);
}
.media-hover:hover .media-frame img,
.media-hover:hover .media-frame .ph-svg,
.media-hover:focus-within .media-frame img {
  transform: scale(1.06);
}

/* Vehicle-card tilt */
.tilt {
  transition: transform var(--dur-med) var(--ease-soft), box-shadow var(--dur-med) var(--ease-soft);
  will-change: transform;
}

/* Button ripple */
.btn {
  position: relative;
  overflow: hidden;
}
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255,255,255,0.45);
  pointer-events: none;
  animation: ripple 620ms var(--ease-soft);
}
/* Per-variant ripple color overrides live in components.css, next to the
   button variants themselves. */

/* Navbar shrink */
.navbar {
  transition: background-color var(--dur-med) var(--ease-soft),
              box-shadow var(--dur-med) var(--ease-soft),
              padding var(--dur-med) var(--ease-soft);
}

/* Marquee-style auto-scroll (testimonials) */
@keyframes scrollX {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.autoscroll-track {
  animation: scrollX 42s linear infinite;
}
.autoscroll-track:hover { animation-play-state: paused; }

/* Fade-in page transition.
   Opacity only — animating `transform` on <body> would make it a containing
   block for every `position: fixed` descendant (navbar, mobile drawer,
   floating actions) for the animation's duration, breaking their positioning
   relative to the viewport. */
@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }
body.page-ready { animation: pageFadeIn var(--dur-slow) var(--ease-soft); }