/* =========================================================
   Roadeo Centered Premium Hero v2.8.1
   Keeps the original centered composition; only the wash assets
   and animation sequence are replaced.
========================================================= */
#roadeo-v9 .rd28-centered{
  --rd28-cycle: 15s;
  position:relative !important;
  min-height:790px !important;
  padding-top:38px !important;
  overflow:hidden !important;
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 78%,rgba(42,169,223,.20),transparent 36%),
    linear-gradient(180deg,#fff 0%,#f7fbff 53%,#eaf7fd 100%) !important;
}
#roadeo-v9 .rd28-centered::before{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:44%;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(12,80,134,.055));
}
#roadeo-v9 .rd28-centered .rd9-hero-inner{
  position:relative !important;
  min-height:750px !important;
  text-align:center !important;
  z-index:2;
}
#roadeo-v9 .rd28-centered .rd9-hero-copy{
  position:relative !important;
  z-index:80 !important;
  text-align:center !important;
}
#roadeo-v9 .rd28-centered .rd9-hero-copy h1,
#roadeo-v9 .rd28-centered .rd9-hero-copy p{
  margin-left:auto !important;
  margin-right:auto !important;
}
#roadeo-v9 .rd28-centered .rd9-hero-actions{
  justify-content:center !important;
}

/* centered scene — deliberately follows the original geometry */
#roadeo-v9 .rd28-centered .rd28-scene{
  position:absolute !important;
  z-index:10 !important;
  left:50% !important;
  right:auto !important;
  bottom:0 !important;
  top:auto !important;
  width:min(1120px,100vw) !important;
  height:410px !important;
  transform:translateX(-50%) !important;
  overflow:visible !important;
  pointer-events:none !important;
  perspective:1000px;
}
#roadeo-v9 .rd28-centered .rd28-asset{
  position:absolute !important;
  display:block !important;
  pointer-events:none !important;
  user-select:none !important;
  -webkit-user-drag:none !important;
  will-change:transform,opacity,filter;
}
#roadeo-v9 .rd28-centered .rd28-backglow{
  position:absolute;
  z-index:0;
  left:50%;
  bottom:8px;
  width:760px;
  height:300px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(42,169,223,.25),rgba(6,57,111,.08) 45%,transparent 72%);
  filter:blur(22px);
}

/* frame */
#roadeo-v9 .rd28-centered .rd28-frame{
  z-index:2 !important;
  left:50% !important;
  bottom:4px !important;
  width:min(900px,82vw) !important;
  height:auto !important;
  transform:translateX(-50%) scale(.94);
  opacity:.44;
  filter:drop-shadow(0 0 18px rgba(42,169,223,.18));
  animation:rd28-frame-cycle var(--rd28-cycle) linear infinite both !important;
}

/* overhead rain bar */
#roadeo-v9 .rd28-centered .rd28-rain{
  z-index:22 !important;
  left:50% !important;
  top:-60px !important;
  width:min(650px,64vw) !important;
  height:auto !important;
  transform:translateX(-50%) translateY(-35px) scale(.96);
  transform-origin:50% 0;
  opacity:0;
  filter:drop-shadow(0 12px 22px rgba(6,57,111,.16));
  animation:rd28-rain-cycle var(--rd28-cycle) ease-in-out infinite both !important;
}

/* soft cloth curtain */
#roadeo-v9 .rd28-centered .rd28-cloth{
  z-index:19 !important;
  left:50% !important;
  top:-20px !important;
  width:min(570px,56vw) !important;
  height:auto !important;
  transform:translateX(-50%) translateY(-35px) scale(.96);
  transform-origin:50% 0;
  opacity:0;
  animation:rd28-cloth-cycle var(--rd28-cycle) ease-in-out infinite both !important;
}

/* jets */
#roadeo-v9 .rd28-centered .rd28-jet{
  z-index:27 !important;
  top:75px !important;
  width:400px !important;
  height:auto !important;
  opacity:0;
  filter:drop-shadow(0 8px 16px rgba(42,169,223,.16));
}
#roadeo-v9 .rd28-centered .rd28-jet-left{
  left:-36px !important;
  transform:translateX(-70px) rotate(-2deg) scale(.88);
  transform-origin:0 50%;
  animation:rd28-jet-left-cycle var(--rd28-cycle) ease-in-out infinite both !important;
}
#roadeo-v9 .rd28-centered .rd28-jet-right{
  right:-36px !important;
  transform:translateX(70px) rotate(2deg) scale(.88);
  transform-origin:100% 50%;
  animation:rd28-jet-right-cycle var(--rd28-cycle) ease-in-out infinite both !important;
}

/* side brushes */
#roadeo-v9 .rd28-centered .rd28-brush{
  z-index:31 !important;
  top:40px !important;
  width:195px !important;
  height:330px !important;
  object-fit:contain !important;
  opacity:0;
  filter:drop-shadow(0 12px 22px rgba(6,57,111,.16));
}
#roadeo-v9 .rd28-centered .rd28-brush-left{
  left:32px !important;
  transform:translateX(-150px) rotate(-6deg) scale(.92);
  transform-origin:50% 50%;
  animation:rd28-brush-left-cycle var(--rd28-cycle) cubic-bezier(.4,0,.2,1) infinite both !important;
}
#roadeo-v9 .rd28-centered .rd28-brush-right{
  right:32px !important;
  transform:translateX(150px) rotate(6deg) scale(.92);
  transform-origin:50% 50%;
  animation:rd28-brush-right-cycle var(--rd28-cycle) cubic-bezier(.4,0,.2,1) infinite both !important;
}

/* foam cascade */
#roadeo-v9 .rd28-centered .rd28-foam{
  z-index:36 !important;
  left:50% !important;
  top:20px !important;
  width:min(540px,52vw) !important;
  height:235px !important;
  object-fit:contain !important;
  object-position:center top !important;
  transform:translateX(-50%) translateY(-22px) scale(.93);
  opacity:0;
  filter:drop-shadow(0 10px 20px rgba(255,255,255,.12));
  animation:rd28-foam-cycle var(--rd28-cycle) ease-in-out infinite both !important;
}

/* car stays centered like the original */
#roadeo-v9 .rd28-centered .rd28-car-shell{
  position:absolute !important;
  z-index:40 !important;
  left:50% !important;
  bottom:4px !important;
  width:min(810px,76vw) !important;
  height:305px !important;
  transform:translateX(-50%) translateY(8px) scale(.97) !important;
  transform-origin:50% 100%;
  opacity:1 !important;
  overflow:visible !important;
  animation:rd28-car-cycle var(--rd28-cycle) ease-in-out infinite both !important;
}
#roadeo-v9 .rd28-centered .rd28-car{
  position:absolute !important;
  z-index:2 !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center bottom !important;
  transform:none !important;
  filter:drop-shadow(0 26px 25px rgba(5,53,101,.22));
}
#roadeo-v9 .rd28-centered .rd28-car-glow{
  position:absolute;
  z-index:0;
  left:50%;
  bottom:14px;
  width:72%;
  height:82px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(42,169,223,.43),rgba(42,169,223,.06) 54%,transparent 74%);
  filter:blur(19px);
  animation:rd28-glow-cycle var(--rd28-cycle) ease-in-out infinite both !important;
}
#roadeo-v9 .rd28-centered .rd28-shine{
  position:absolute;
  z-index:4;
  inset:24px 80px 34px;
  opacity:0;
  background:linear-gradient(112deg,transparent 36%,rgba(255,255,255,.82) 48%,rgba(42,169,223,.26) 52%,transparent 63%);
  transform:translateX(-42%) skewX(-15deg);
  mix-blend-mode:screen;
  filter:blur(5px);
  animation:rd28-shine-cycle var(--rd28-cycle) ease-in-out infinite both !important;
}

/* foreground splash + mist */
#roadeo-v9 .rd28-centered .rd28-floor-splash{
  z-index:45 !important;
  left:50% !important;
  bottom:-26px !important;
  width:min(880px,86vw) !important;
  height:210px !important;
  object-fit:contain !important;
  transform:translateX(-50%) scale(.92);
  opacity:0;
  animation:rd28-splash-cycle var(--rd28-cycle) ease-in-out infinite both !important;
}
#roadeo-v9 .rd28-centered .rd28-mist{
  z-index:42 !important;
  left:50% !important;
  bottom:-6px !important;
  width:min(760px,78vw) !important;
  height:175px !important;
  object-fit:contain !important;
  transform:translateX(-50%) scale(.94);
  opacity:0;
  filter:blur(1px);
  animation:rd28-mist-cycle var(--rd28-cycle) ease-in-out infinite both !important;
}
#roadeo-v9 .rd28-centered .rd28-floor-reflection{
  position:absolute;
  z-index:1;
  left:50%;
  bottom:-18px;
  width:min(760px,78vw);
  height:110px;
  transform:translateX(-50%);
  border-radius:50%;
  background:
    linear-gradient(90deg,transparent,rgba(42,169,223,.28) 24%,rgba(255,255,255,.18) 50%,rgba(245,50,56,.22) 76%,transparent),
    radial-gradient(ellipse,rgba(42,169,223,.18),transparent 70%);
  filter:blur(12px);
  opacity:.58;
}

/* price badges remain in the same centered hero style */
#roadeo-v9 .rd28-centered .rd9-hero-price{z-index:70 !important}
#roadeo-v9 .rd28-centered .rd9-hero-price-left{left:4% !important;bottom:126px !important}
#roadeo-v9 .rd28-centered .rd9-hero-price-right{right:4% !important;bottom:198px !important}

/* choreography: everything is CSS-driven so it runs even if JS is delayed */
@keyframes rd28-frame-cycle{
  0%,100%{opacity:.34;transform:translateX(-50%) scale(.93);filter:brightness(.9)}
  8%,86%{opacity:.54;transform:translateX(-50%) scale(.96);filter:brightness(1.03)}
  90%,98%{opacity:.72;transform:translateX(-50%) scale(.975);filter:brightness(1.13)}
}
@keyframes rd28-rain-cycle{
  0%,5%,28%,100%{opacity:0;transform:translateX(-50%) translateY(-38px) scale(.96)}
  8%,22%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
  25%{opacity:.36}
  68%,76%{opacity:.9;transform:translateX(-50%) translateY(0) scale(1)}
  80%{opacity:0}
}
@keyframes rd28-foam-cycle{
  0%,20%,48%,100%{opacity:0;transform:translateX(-50%) translateY(-26px) scale(.93)}
  25%,40%{opacity:.93;transform:translateX(-50%) translateY(2px) scale(1)}
  44%{opacity:.26}
}
@keyframes rd28-cloth-cycle{
  0%,36%,66%,100%{opacity:0;transform:translateX(-50%) translateY(-36px) scale(.96)}
  42%,58%{opacity:.96;transform:translateX(-50%) translateY(6px) scale(1)}
  50%{transform:translateX(-50%) translateY(10px) scale(1.02)}
  63%{opacity:.18}
}
@keyframes rd28-jet-left-cycle{
  0%,4%,30%,64%,100%{opacity:0;transform:translateX(-78px) rotate(-2deg) scale(.88)}
  8%,22%{opacity:.95;transform:translateX(0) rotate(0) scale(1)}
  26%{opacity:.20}
  68%,78%{opacity:.92;transform:translateX(0) rotate(0) scale(1)}
  82%{opacity:0;transform:translateX(-28px) scale(.94)}
}
@keyframes rd28-jet-right-cycle{
  0%,4%,30%,64%,100%{opacity:0;transform:translateX(78px) rotate(2deg) scale(.88)}
  8%,22%{opacity:.95;transform:translateX(0) rotate(0) scale(1)}
  26%{opacity:.20}
  68%,78%{opacity:.92;transform:translateX(0) rotate(0) scale(1)}
  82%{opacity:0;transform:translateX(28px) scale(.94)}
}
@keyframes rd28-brush-left-cycle{
  0%,43%,72%,100%{opacity:0;transform:translateX(-150px) rotate(-7deg) scale(.92)}
  48%{opacity:.88;transform:translateX(-38px) rotate(-3deg) scale(1)}
  54%,62%{opacity:1;transform:translateX(14px) rotate(4deg) scale(1.035)}
  58%,66%{transform:translateX(-4px) rotate(-4deg) scale(1.015)}
  70%{opacity:.18;transform:translateX(-85px) rotate(-6deg) scale(.95)}
}
@keyframes rd28-brush-right-cycle{
  0%,43%,72%,100%{opacity:0;transform:translateX(150px) rotate(7deg) scale(.92)}
  48%{opacity:.88;transform:translateX(38px) rotate(3deg) scale(1)}
  54%,62%{opacity:1;transform:translateX(-14px) rotate(-4deg) scale(1.035)}
  58%,66%{transform:translateX(4px) rotate(4deg) scale(1.015)}
  70%{opacity:.18;transform:translateX(85px) rotate(6deg) scale(.95)}
}
@keyframes rd28-car-cycle{
  0%,100%{transform:translateX(-50%) translateY(10px) scale(.965)}
  8%{transform:translateX(-50%) translateY(3px) scale(.985)}
  22%,78%{transform:translateX(-50%) translateY(0) scale(1)}
  50%{transform:translateX(-50%) translateY(-2px) scale(1.005)}
  88%,96%{transform:translateX(-50%) translateY(-5px) scale(1.018)}
}
@keyframes rd28-glow-cycle{
  0%,100%{opacity:.30;transform:translateX(-50%) scale(.92)}
  20%,75%{opacity:.56;transform:translateX(-50%) scale(1)}
  88%,96%{opacity:.88;transform:translateX(-50%) scale(1.08)}
}
@keyframes rd28-splash-cycle{
  0%,6%,26%,62%,100%{opacity:0;transform:translateX(-50%) scale(.90)}
  10%,20%{opacity:.54;transform:translateX(-50%) scale(1)}
  66%,79%{opacity:.78;transform:translateX(-50%) scale(1.035)}
  84%{opacity:.12;transform:translateX(-50%) scale(1.06)}
}
@keyframes rd28-mist-cycle{
  0%,18%,36%,100%{opacity:0;transform:translateX(-50%) scale(.92)}
  24%,31%{opacity:.38;transform:translateX(-50%) scale(1)}
  46%,75%{opacity:.30;transform:translateX(-50%) scale(1.02)}
  82%{opacity:.08}
}
@keyframes rd28-shine-cycle{
  0%,82%,100%{opacity:0;transform:translateX(-52%) skewX(-15deg)}
  87%{opacity:.92;transform:translateX(-14%) skewX(-15deg)}
  92%{opacity:.68;transform:translateX(30%) skewX(-15deg)}
  97%{opacity:0;transform:translateX(62%) skewX(-15deg)}
}

/* Force-run class: explicit because optimization plugins sometimes pause animations. */
#roadeo-v9 .rd28-centered.rd28-force-run .rd28-asset,
#roadeo-v9 .rd28-centered.rd28-force-run .rd28-car-shell,
#roadeo-v9 .rd28-centered.rd28-force-run .rd28-car-glow,
#roadeo-v9 .rd28-centered.rd28-force-run .rd28-shine{
  animation-play-state:running !important;
}

@media (max-width:1100px){
  #roadeo-v9 .rd28-centered{min-height:760px !important}
  #roadeo-v9 .rd28-centered .rd9-hero-inner{min-height:720px !important}
  #roadeo-v9 .rd28-centered .rd28-scene{width:min(980px,100vw) !important;height:385px !important}
  #roadeo-v9 .rd28-centered .rd28-rain{width:min(600px,68vw) !important;top:-48px !important}
  #roadeo-v9 .rd28-centered .rd28-cloth{width:min(520px,60vw) !important}
  #roadeo-v9 .rd28-centered .rd28-jet{width:350px !important}
  #roadeo-v9 .rd28-centered .rd28-brush{width:165px !important;height:300px !important}
  #roadeo-v9 .rd28-centered .rd28-brush-left{left:18px !important}
  #roadeo-v9 .rd28-centered .rd28-brush-right{right:18px !important}
  #roadeo-v9 .rd28-centered .rd28-car-shell{width:min(750px,78vw) !important;height:285px !important}
}

@media (max-width:767px){
  #roadeo-v9 .rd28-centered{min-height:690px !important;padding-top:27px !important}
  #roadeo-v9 .rd28-centered .rd9-hero-inner{min-height:650px !important}
  #roadeo-v9 .rd28-centered .rd28-scene{height:270px !important;bottom:12px !important}
  #roadeo-v9 .rd28-centered .rd28-frame{width:96vw !important;bottom:0 !important}
  #roadeo-v9 .rd28-centered .rd28-rain{width:82vw !important;top:-22px !important}
  #roadeo-v9 .rd28-centered .rd28-cloth{width:70vw !important;top:-6px !important}
  #roadeo-v9 .rd28-centered .rd28-foam{width:68vw !important;height:155px !important;top:12px !important}
  #roadeo-v9 .rd28-centered .rd28-jet{width:205px !important;top:72px !important}
  #roadeo-v9 .rd28-centered .rd28-jet-left{left:-54px !important}
  #roadeo-v9 .rd28-centered .rd28-jet-right{right:-54px !important}
  #roadeo-v9 .rd28-centered .rd28-brush{width:92px !important;height:188px !important;top:54px !important}
  #roadeo-v9 .rd28-centered .rd28-brush-left{left:-4px !important}
  #roadeo-v9 .rd28-centered .rd28-brush-right{right:-4px !important}
  #roadeo-v9 .rd28-centered .rd28-car-shell{width:94vw !important;height:200px !important;bottom:2px !important}
  #roadeo-v9 .rd28-centered .rd28-floor-splash{width:96vw !important;height:130px !important;bottom:-20px !important}
  #roadeo-v9 .rd28-centered .rd28-mist{width:88vw !important;height:110px !important;bottom:-4px !important}
  #roadeo-v9 .rd28-centered .rd28-shine{inset:26px 40px 32px}
  #roadeo-v9 .rd28-centered .rd9-hero-price-left{left:0 !important;bottom:58px !important}
  #roadeo-v9 .rd28-centered .rd9-hero-price-right{right:0 !important;bottom:118px !important}
}

@media (prefers-reduced-motion:reduce){
  #roadeo-v9 .rd28-centered .rd28-asset,
  #roadeo-v9 .rd28-centered .rd28-car-shell,
  #roadeo-v9 .rd28-centered .rd28-car-glow,
  #roadeo-v9 .rd28-centered .rd28-shine{animation-duration:22s !important}
}
