/* VehicleRent · motion layer. Pairs with static/js/motion.js (GSAP + ScrollTrigger).
   Everything here degrades to a static page: hidden-until-animated states only apply
   while <html> has the .motion class, which motion.js removes if GSAP never loads. */

:root { --spring: cubic-bezier(.34, 1.56, .64, 1); --expo: cubic-bezier(.16, 1, .3, 1); --olive: #33450d; --olive-deep: #1f2e00; --lime: #d4eca2; }

/* pre-animation states (only while motion is armed) */
.motion [data-intro] { opacity: 0; }

/* ---------- scroll progress ---------- */
.m-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--olive-deep), #9cb36f, var(--lime)); pointer-events: none; }

/* ---------- nav ---------- */
.m-nav { transition: background-color .4s, box-shadow .4s; }
.m-nav.is-solid { box-shadow: 0 12px 40px -24px rgba(31,46,0,.35); }
.m-nav .m-link { position: relative; }
.m-nav .m-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .45s var(--expo); }
.m-nav .m-link:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

/* ---------- split headings ---------- */
.m-line { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .08em .02em .14em; margin: -.08em -.02em -.14em; }
.m-word { display: inline-block; will-change: transform; }

/* ---------- buttons: arrow nudge, shine ---------- */
main a.rounded-full .material-symbols-outlined, .m-btn .material-symbols-outlined { transition: transform .45s var(--spring); }
main a.rounded-full:hover .material-symbols-outlined, .m-btn:hover .material-symbols-outlined { transform: translateX(4px); }
main a.rounded-full:hover .material-symbols-outlined:is([data-icon="favorite"]) { transform: scale(1.25); }
.m-shine { position: relative; overflow: hidden; isolation: isolate; }
.m-shine::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translateX(-120%); transition: transform .9s var(--expo); }
.m-shine:hover::before { transform: translateX(120%); }

/* ---------- flip label (rolls to a second line on hover) ---------- */
.m-flip { display: inline-block; height: 1.25em; line-height: 1.25em; overflow: hidden; vertical-align: middle; }
.m-flip > span { display: block; transition: transform .55s var(--spring); white-space: nowrap; }
.group:hover .m-flip > span, .m-flip-host:hover .m-flip > span, a:focus-visible .m-flip > span { transform: translateY(-100%); }

/* ---------- tilt + glare ---------- */
.m-tilt { transform-style: preserve-3d; will-change: transform; }
.m-glare { position: relative; isolation: isolate; }
.m-glare::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(45% 40% at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.45), transparent 70%); }
.m-glare:hover::after { opacity: 1; }

/* ---------- slot digits ---------- */
.slot { display: inline-flex; vertical-align: baseline; font-variant-numeric: tabular-nums; }
.slot .sc { display: inline-block; height: 1.1em; line-height: 1.1; overflow: hidden; vertical-align: top; }
.slot .ss { display: flex; flex-direction: column; will-change: transform; }
.slot .ss > span { display: block; height: 1.1em; line-height: 1.1; text-align: center; }
.slot .sx { display: inline-block; height: 1.1em; line-height: 1.1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- word reel ---------- */
.m-reel { display: inline-grid; overflow: hidden; vertical-align: bottom; padding: .06em 0 .16em; margin: -.06em 0 -.16em; }
.m-reel > span { grid-area: 1 / 1; white-space: nowrap; }

/* ---------- marquee ---------- */
.m-marquee { display: flex; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.m-marquee-track { display: flex; flex: none; gap: 3rem; padding-right: 3rem; animation: m-marquee var(--dur, 40s) linear infinite; }
.m-marquee[data-dir="-1"] .m-marquee-track { animation-direction: reverse; }
.m-marquee:hover .m-marquee-track { animation-play-state: paused; }
@keyframes m-marquee { to { transform: translateX(-100%); } }

/* ---------- category tiles: colour floods up from the bottom ---------- */
.m-tile { position: relative; overflow: hidden; isolation: isolate; transition: color .45s, transform .5s var(--spring), box-shadow .5s; }
.m-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--olive); transform: translateY(101%); border-radius: inherit; transition: transform .55s var(--expo); }
.m-tile:hover { color: #fff; transform: translateY(-6px); box-shadow: 0 24px 40px -24px rgba(31,46,0,.6); }
.m-tile:hover::before { transform: translateY(0); }
.m-tile .material-symbols-outlined { transition: transform .6s var(--spring); }
.m-tile:hover .material-symbols-outlined { transform: translateY(-4px) rotate(-8deg) scale(1.15); }
.m-tile .m-count { font: 700 10px/1 Manrope, sans-serif; letter-spacing: .12em; opacity: .55; }

/* ---------- hero ---------- */
.m-hero-media { position: relative; overflow: hidden; border-radius: 1.5rem; will-change: clip-path, transform; }
.m-hero-media img { transform-origin: 50% 60%; will-change: transform; }
.m-float { animation: m-bob 6s ease-in-out infinite; }
.m-float.d2 { animation-delay: -3s; }
@keyframes m-bob { 50% { transform: translateY(-10px); } }
.m-scrollcue { display: inline-flex; align-items: center; gap: .75rem; }
.m-scrollcue i { width: 1px; height: 42px; background: currentColor; opacity: .25; position: relative; overflow: hidden; }
.m-scrollcue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--olive); animation: m-cue 1.8s var(--expo) infinite; }
@keyframes m-cue { to { top: 110%; } }

/* hero fallback when no hero image is set: a showroom of the fleet in running columns */
.m-runway { position: absolute; inset: -10% -6%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; rotate: -8deg; }
.m-runway-col { display: flex; flex-direction: column; gap: 14px; animation: m-run 38s linear infinite; }
.m-runway-col:nth-child(2) { animation-direction: reverse; animation-duration: 46s; }
.m-runway-col:nth-child(3) { animation-duration: 52s; }
.m-runway-tile { aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: radial-gradient(90% 70% at 50% 35%, #efeee6, #c5c8b8); display: grid; place-items: center; color: #75786b; }
.m-runway-tile:nth-child(3n+2) { background: radial-gradient(90% 70% at 50% 35%, #d4eca2, #9cb36f); color: #1f2e00; }
.m-runway-tile:nth-child(4n+3) { background: radial-gradient(90% 70% at 50% 35%, #4b5e22, #1f2e00); color: #d4eca2; }
.m-runway-tile img { width: 100%; height: 100%; object-fit: cover; }
@keyframes m-run { to { transform: translateY(-50%); } }

/* ---------- orbit (why section) ---------- */
.m-orbit-ring { animation: m-spin 40s linear infinite; transform-origin: 50% 50%; }
.m-orbit-ring.rev { animation-direction: reverse; animation-duration: 60s; }
@keyframes m-spin { to { transform: rotate(360deg); } }

/* ---------- scrubbed text (testimonial) ---------- */
.m-scrub-word { display: inline-block; opacity: .14; transition: none; }

/* ---------- horizontal pinned track ---------- */
.m-htrack { will-change: transform; }

/* ---------- reduced motion: static, fully visible ---------- */
@media (prefers-reduced-motion: reduce) {
  .motion [data-intro] { opacity: 1 !important; }
  .m-marquee-track, .m-runway-col, .m-orbit-ring, .m-float, .m-scrollcue i::after { animation: none !important; }
  .m-scrub-word { opacity: 1 !important; }
  .m-tile:hover, .m-tile:hover .material-symbols-outlined { transform: none; }
}