/* =========================================================
   Roadeo Motion Layer v2.2
   - deterministic hero timeline (JS state machine + CSS fallback)
   - scroll entrance motion
   - accessible mobile hamburger navigation
   Loaded AFTER home.css so it can safely neutralize legacy hero rules.
========================================================= */

/* ---------- Mobile navigation trigger ---------- */
#roadeo-v9 .rd11-menu-toggle{
  display:none;
  width:52px;
  height:52px;
  padding:0;
  border:1px solid rgba(6,57,111,.16);
  border-radius:16px;
  background:#fff;
  color:var(--rd-navy,#06396f);
  box-shadow:0 9px 24px rgba(4,42,79,.10);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  position:relative;
  z-index:120;
  transition:transform .22s ease,background-color .22s ease,color .22s ease,box-shadow .22s ease;
}
#roadeo-v9 .rd11-menu-toggle:hover,
#roadeo-v9 .rd11-menu-toggle:focus-visible{
  transform:translateY(-2px);
  background:var(--rd-navy,#06396f);
  color:#fff;
  box-shadow:0 14px 30px rgba(6,57,111,.18);
  outline:none;
}
#roadeo-v9 .rd11-menu-toggle-line{
  display:block;
  width:23px;
  height:2px;
  border-radius:999px;
  background:currentColor;
  transform-origin:center;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s ease;
}
#roadeo-v9 .rd9-header.is-menu-open .rd11-menu-toggle-line:nth-child(1){transform:translateY(7px) rotate(45deg)}
#roadeo-v9 .rd9-header.is-menu-open .rd11-menu-toggle-line:nth-child(2){opacity:0;transform:scaleX(.25)}
#roadeo-v9 .rd9-header.is-menu-open .rd11-menu-toggle-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:900px){
  #roadeo-v9 .rd9-header{position:relative;z-index:1000}
  #roadeo-v9 .rd9-header .rd9-wrap{width:min(calc(100% - 22px),760px) !important}
  #roadeo-v9 .rd9-header-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:10px 14px !important;
    min-height:82px !important;
    padding:10px 0 !important;
  }
  #roadeo-v9 .rd9-logo{justify-content:flex-start !important;min-width:0}
  #roadeo-v9 .rd9-logo img{width:min(260px,66vw) !important;max-height:66px !important;object-position:left center !important}
  #roadeo-v9 .rd11-menu-toggle{display:flex}
  #roadeo-v9 .rd11-primary-nav{
    grid-column:1 / -1;
    width:100%;
    max-height:0;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-10px) scale(.985);
    transform-origin:top center;
    transition:max-height .38s cubic-bezier(.2,.8,.2,1),opacity .24s ease,transform .32s cubic-bezier(.2,.8,.2,1),visibility .24s step-end;
  }
  #roadeo-v9 .rd9-header.is-menu-open .rd11-primary-nav{
    max-height:620px;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0) scale(1);
    transition:max-height .42s cubic-bezier(.2,.8,.2,1),opacity .24s ease,transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s step-start;
  }
  #roadeo-v9 .rd11-primary-nav .rd9-nav{
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:none !important;
    width:100% !important;
    gap:8px !important;
    margin:0 !important;
    padding:12px !important;
    border:1px solid rgba(6,57,111,.11);
    border-radius:18px;
    background:rgba(255,255,255,.98);
    box-shadow:0 22px 48px rgba(4,42,79,.14);
    backdrop-filter:blur(14px);
  }
  #roadeo-v9 .rd11-primary-nav .rd9-nav li{width:100% !important;margin:0 !important}
  #roadeo-v9 .rd11-primary-nav .rd9-nav a{
    width:100% !important;
    min-height:48px !important;
    padding:0 17px !important;
    justify-content:flex-start !important;
    text-align:left !important;
    font-size:19px !important;
    border-radius:13px !important;
  }
  #roadeo-v9 .rd9-header-actions{display:none !important}
}
@media(max-width:480px){
  #roadeo-v9 .rd9-logo img{width:min(230px,64vw) !important}
  #roadeo-v9 .rd11-menu-toggle{width:48px;height:48px;border-radius:14px}
}
@media(max-width:900px){
  /* The dropdown owns its transform/opacity on mobile; do not let the one-time
     header entrance animation pin the menu in an open-looking visual state. */
  #roadeo-v9 .rd9-header.rd11-header-ready .rd11-primary-nav{animation:none !important}
}

/* ---------- Hero: deterministic force-run timeline ----------
   JS adds .rd11-js and changes data-rd11-phase. These selectors use
   transitions rather than relying on the older data-scene animation.
   Without JS, the existing rd10 CSS keyframe sequence remains the fallback.
---------------------------------------------------------------- */
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js .rd10-top-unit,
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js .rd10-bottom-unit,
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js .rd10-brush-unit,
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js .rd10-foam,
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js .rd10-shine{
  animation:none !important;
  animation-play-state:running !important;
}
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js .rd9-hero-car-shell{
  transition:transform .95s cubic-bezier(.16,.84,.19,1),opacity .55s ease,filter .55s ease !important;
  will-change:transform,opacity,filter;
}
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js .rd10-top-unit,
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js .rd10-bottom-unit{
  transition:transform .85s cubic-bezier(.16,.84,.19,1),opacity .48s ease,filter .45s ease !important;
}
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js .rd10-brush-unit{
  transition:transform .72s cubic-bezier(.14,.86,.16,1),opacity .34s ease,filter .28s ease !important;
}
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js .rd10-foam{
  transition:opacity .55s ease,transform .72s ease,filter .55s ease !important;
}
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js .rd10-shine{
  transition:opacity .3s ease,transform 1.35s cubic-bezier(.16,.82,.18,1) !important;
}

/* Initial / reset pose */
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js .rd10-top-unit{
  opacity:0 !important;
  transform:translateX(-50%) translateY(-92px) scale(.98) !important;
}
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js .rd10-bottom-unit{
  opacity:0 !important;
  transform:translateX(-50%) translateY(92px) scale(.96) !important;
}
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js .rd10-brush-left{
  opacity:.94 !important;
  transform:translateX(0) rotate(-4deg) scale(.98) !important;
}
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js .rd10-brush-right{
  opacity:.94 !important;
  transform:translateX(0) rotate(4deg) scale(.98) !important;
}
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js .rd10-foam{opacity:0 !important;transform:scale(.94) !important}
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js .rd10-shine{opacity:0 !important;transform:translateX(-124%) skewX(-14deg) !important}

#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="boot"] .rd9-hero-car-shell{
  opacity:0 !important;
  filter:blur(3px) !important;
  transform:translateX(-50%) translateY(34px) scale(.93) !important;
}
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="intro"] .rd9-hero-car-shell,
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="rinse"] .rd9-hero-car-shell,
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="under"] .rd9-hero-car-shell,
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="scrub"] .rd9-hero-car-shell,
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="shine"] .rd9-hero-car-shell{
  opacity:1 !important;
  filter:blur(0) !important;
  transform:translateX(-50%) translateY(0) scale(1) !important;
}
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="rinse"] .rd10-top-unit{
  opacity:1 !important;
  transform:translateX(-50%) translateY(0) scale(1) !important;
  filter:drop-shadow(0 16px 28px rgba(4,42,79,.20)) !important;
}
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="under"] .rd10-top-unit{
  opacity:.42 !important;
  transform:translateX(-50%) translateY(-12px) scale(.995) !important;
}
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="under"] .rd10-bottom-unit{
  opacity:1 !important;
  transform:translateX(-50%) translateY(0) scale(1) !important;
}
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="scrub"] .rd10-top-unit{
  opacity:.62 !important;
  transform:translateX(-50%) translateY(-8px) scale(1) !important;
}
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="scrub"] .rd10-bottom-unit{
  opacity:.46 !important;
  transform:translateX(-50%) translateY(8px) scale(.99) !important;
}
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="scrub"] .rd10-brush-left{
  opacity:1 !important;
  transform:translateX(var(--rd10-travel-left)) rotate(-2deg) scale(1.07) !important;
  filter:drop-shadow(0 20px 34px rgba(4,42,79,.28)) saturate(1.08) !important;
}
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="scrub"] .rd10-brush-right{
  opacity:1 !important;
  transform:translateX(var(--rd10-travel-right)) rotate(2deg) scale(1.07) !important;
  filter:drop-shadow(0 20px 34px rgba(4,42,79,.28)) saturate(1.08) !important;
}
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="scrub"] .rd10-foam{
  opacity:.62 !important;
  transform:scale(1.025) !important;
  filter:blur(12px) !important;
}
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="shine"] .rd10-top-unit{
  opacity:0 !important;
  transform:translateX(-50%) translateY(-92px) scale(.98) !important;
}
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="shine"] .rd10-bottom-unit{
  opacity:0 !important;
  transform:translateX(-50%) translateY(88px) scale(.96) !important;
}
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="shine"] .rd10-brush-left{
  opacity:.35 !important;
  transform:translateX(0) rotate(-4deg) scale(.96) !important;
}
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="shine"] .rd10-brush-right{
  opacity:.35 !important;
  transform:translateX(0) rotate(4deg) scale(.96) !important;
}
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="shine"] .rd10-foam{opacity:0 !important;transform:scale(1.06) !important}
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="shine"] .rd10-shine{
  opacity:.96 !important;
  transform:translateX(128%) skewX(-14deg) !important;
}
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="shine"] .rd9-hero-car{
  filter:drop-shadow(0 36px 44px rgba(4,37,74,.34)) brightness(1.045) contrast(1.025) saturate(1.06) !important;
}

/* Slight mechanical pulse while the brushes are in contact; uses filter so it
   cannot fight with the wrapper's deterministic transform. */
#roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="scrub"] .rd10-brush-unit .rd9-hero-wash{
  animation:rd11BrushPulse .46s ease-in-out infinite alternate !important;
}
@keyframes rd11BrushPulse{
  from{filter:drop-shadow(0 18px 28px rgba(4,42,79,.22)) saturate(1.02) brightness(.98)}
  to{filter:drop-shadow(0 23px 34px rgba(4,42,79,.30)) saturate(1.12) brightness(1.05)}
}

/* The hero is deliberately kept active even on operating systems that globally
   request reduced motion because the client requested the wash sequence to run.
   Other page entrance effects still respect reduced motion below. */
@media(prefers-reduced-motion:reduce){
  #roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js .rd9-hero-car-shell,
  #roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js .rd10-top-unit,
  #roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js .rd10-bottom-unit,
  #roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js .rd10-brush-unit,
  #roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js .rd10-foam,
  #roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js .rd10-shine{
    transition-duration:.72s !important;
    transition-property:transform,opacity,filter !important;
  }
  #roadeo-v9 .rd9-hero.rd10-cinematic.rd11-js[data-rd11-phase="scrub"] .rd10-brush-unit .rd9-hero-wash{
    animation:rd11BrushPulse .7s ease-in-out infinite alternate !important;
  }
}

/* ---------- Entrance animations ---------- */
#roadeo-v9 .rd11-reveal{
  --rd11-reveal-x:0px;
  --rd11-reveal-y:42px;
  --rd11-reveal-scale:.985;
  opacity:0;
  transform:translate3d(var(--rd11-reveal-x),var(--rd11-reveal-y),0) scale(var(--rd11-reveal-scale));
  transition:opacity .72s ease,transform .82s cubic-bezier(.16,.84,.19,1);
  will-change:transform,opacity;
}
#roadeo-v9 .rd11-reveal[data-rd11-effect="left"]{--rd11-reveal-x:-48px;--rd11-reveal-y:0px}
#roadeo-v9 .rd11-reveal[data-rd11-effect="right"]{--rd11-reveal-x:48px;--rd11-reveal-y:0px}
#roadeo-v9 .rd11-reveal[data-rd11-effect="zoom"]{--rd11-reveal-y:18px;--rd11-reveal-scale:.95}
#roadeo-v9 .rd11-reveal.is-inview{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}
#roadeo-v9 .rd11-reveal-item{
  opacity:0;
  transform:translate3d(0,28px,0) scale(.985);
  transition:opacity .58s ease,transform .68s cubic-bezier(.16,.84,.19,1);
  transition-delay:var(--rd11-delay,0ms);
  will-change:transform,opacity;
}
#roadeo-v9 .rd11-reveal.is-inview .rd11-reveal-item{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}
#roadeo-v9 .rd11-reveal.is-inview .rd11-reveal-item:hover{will-change:auto}

/* Header itself receives a quick polished entrance without waiting for scroll. */
#roadeo-v9 .rd9-header.rd11-header-ready .rd9-logo,
#roadeo-v9 .rd9-header.rd11-header-ready .rd11-primary-nav,
#roadeo-v9 .rd9-header.rd11-header-ready .rd9-header-actions,
#roadeo-v9 .rd9-header.rd11-header-ready .rd11-menu-toggle{
  animation:rd11HeaderIn .62s cubic-bezier(.16,.84,.19,1) both;
}
#roadeo-v9 .rd9-header.rd11-header-ready .rd11-primary-nav{animation-delay:.08s}
#roadeo-v9 .rd9-header.rd11-header-ready .rd9-header-actions{animation-delay:.15s}
@keyframes rd11HeaderIn{
  from{opacity:0;transform:translateY(-14px)}
  to{opacity:1;transform:translateY(0)}
}

@media(prefers-reduced-motion:reduce){
  #roadeo-v9 .rd11-reveal,
  #roadeo-v9 .rd11-reveal-item{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  #roadeo-v9 .rd9-header.rd11-header-ready .rd9-logo,
  #roadeo-v9 .rd9-header.rd11-header-ready .rd11-primary-nav,
  #roadeo-v9 .rd9-header.rd11-header-ready .rd9-header-actions,
  #roadeo-v9 .rd9-header.rd11-header-ready .rd11-menu-toggle{animation:none !important}
}