/* Motion and carousel upgrade for the Car Tire Service homepage. */
.brand-mark{background:#fff url('/assets/brand/car-tire-service-mark.svg') center/contain no-repeat!important;box-shadow:0 8px 24px rgba(8,39,94,.13)}
.brand-mark>svg,.brand-mark>span,.brand-mark:after{display:none!important}
.brand-marquee{position:relative;margin-top:30px;padding:8px 0;overflow:hidden;isolation:isolate;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.brand-marquee-track{display:flex;width:max-content;will-change:transform;animation:brand-marquee 42s linear infinite}
.brand-marquee:hover .brand-marquee-track,.brand-marquee:focus-within .brand-marquee-track{animation-play-state:paused}
.vehicle-marquee .brand-marquee-track{animation-direction:reverse;animation-duration:36s}
.vehicle-marquee .vehicle-logo-card{background:linear-gradient(145deg,#fff,#f4f8ff)!important}
.vehicle-marquee .vehicle-logo-card img{max-width:122px!important;max-height:44px!important}
.vehicle-brands{position:relative;overflow:hidden}
.vehicle-brands:before{content:"";position:absolute;width:360px;height:360px;right:-170px;top:-170px;border-radius:50%;background:radial-gradient(circle,rgba(20,104,255,.11),transparent 70%);animation:orbit-drift 12s ease-in-out infinite;pointer-events:none}
.brand-marquee-group{display:flex;align-items:stretch;gap:12px;padding-right:12px}
.brand-marquee .brand-logo-card{display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 136px!important;width:136px!important;min-width:136px!important;height:78px!important;min-height:78px!important;padding:12px 14px!important;overflow:hidden!important;border:1px solid #dce6f3!important;border-radius:16px!important;background:linear-gradient(145deg,#fff,#f8fbff)!important;box-shadow:0 10px 28px rgba(7,26,58,.07)!important;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.brand-marquee .brand-logo-card:hover{transform:translateY(-4px);border-color:#bdd3f2!important;box-shadow:0 16px 36px rgba(7,26,58,.13)!important}
.brand-marquee .brand-logo-card img{display:block!important;width:auto!important;max-width:112px!important;height:auto!important;max-height:36px!important;object-fit:contain!important}
.brand-marquee .brand-option-card{display:flex!important;flex-direction:column!important;gap:5px!important;text-align:center!important;color:#08275e!important}
.brand-marquee .brand-option-card strong{font-size:.73rem!important;line-height:1.15!important;white-space:nowrap!important}
.brand-marquee .brand-option-mark{display:grid!important;place-items:center!important;width:27px!important;height:27px!important;min-width:27px!important;min-height:27px!important;padding:0!important;border:0!important;border-radius:50%!important;background:#e6f0ff!important;color:#1468ff!important;box-shadow:none!important;font-size:.8rem!important}
.tyre-range-pills{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:18px}
.tyre-range-pills span{display:inline-flex;align-items:center;min-height:30px;padding:7px 12px;border:1px solid #dce6f3;border-radius:999px;background:#fff;color:#40526e;font-size:.72rem;font-weight:800;box-shadow:0 6px 18px rgba(7,26,58,.045)}

.emergency-bar{position:relative;overflow:hidden;background:linear-gradient(105deg,#04142f,#0a3472,#04142f);background-size:220% 100%;animation:emergency-flow 8s linear infinite}
.emergency-bar:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.13) 49%,transparent 60%);transform:translateX(-120%);animation:emergency-shine 5s ease-in-out infinite}
.status-dot{animation:status-pulse 1.55s ease-out infinite}
.premium-eta-front{position:relative;overflow:hidden;border-color:rgba(20,104,255,.35)!important;background:linear-gradient(112deg,#fff,#edf5ff 48%,#fff)!important;background-size:220% 100%!important;animation:eta-background 5.5s ease-in-out infinite,eta-lift 2.6s ease-in-out infinite!important;box-shadow:0 14px 38px rgba(20,104,255,.16)!important}
.premium-eta-front:after{content:"";position:absolute;top:-100%;left:-45%;width:28%;height:300%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);transform:rotate(18deg);animation:eta-flash 3.5s ease-in-out infinite}
.premium-eta-front .premium-eta-badge{position:relative;z-index:1;box-shadow:0 0 0 0 rgba(246,160,0,.42);animation:eta-pulse 1.8s ease-out infinite}
.premium-eta-front .premium-eta-copy,.premium-eta-front .premium-eta-motion{position:relative;z-index:1}
.hero-orbit-one{animation:orbit-drift 12s ease-in-out infinite}
.hero-orbit-two{animation:orbit-drift 9s ease-in-out infinite reverse}
.floating-card-top{animation:card-float 4.3s ease-in-out infinite}
.floating-card-bottom{animation:card-float 4.8s ease-in-out infinite reverse}
.hero-image-wrap:before{content:"";position:absolute;inset:-50% -70%;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.18) 50%,transparent 58%);transform:translateX(-65%) rotate(8deg);animation:image-glint 7.5s ease-in-out infinite}
.button-blue,.button-whatsapp{background-size:180% 100%;animation:button-energy 4.6s ease-in-out infinite}

.motion-ready .section,.motion-ready .quick-help{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.motion-ready .section.is-revealed,.motion-ready .quick-help.is-revealed{opacity:1;transform:none}

@keyframes brand-marquee{to{transform:translateX(-50%)}}
@keyframes emergency-flow{to{background-position:220% 0}}
@keyframes emergency-shine{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
@keyframes status-pulse{0%{box-shadow:0 0 0 0 rgba(246,160,0,.52)}70%{box-shadow:0 0 0 9px rgba(246,160,0,0)}100%{box-shadow:0 0 0 0 rgba(246,160,0,0)}}
@keyframes eta-background{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@keyframes eta-lift{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes eta-flash{0%,48%{transform:translateX(-180%) rotate(18deg)}78%,100%{transform:translateX(560%) rotate(18deg)}}
@keyframes eta-pulse{0%{box-shadow:0 0 0 0 rgba(246,160,0,.45)}70%{box-shadow:0 0 0 12px rgba(246,160,0,0)}100%{box-shadow:0 0 0 0 rgba(246,160,0,0)}}
@keyframes orbit-drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-14px,12px,0) scale(1.04)}}
@keyframes card-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes image-glint{0%,55%{transform:translateX(-65%) rotate(8deg)}85%,100%{transform:translateX(65%) rotate(8deg)}}
@keyframes button-energy{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}

@media(min-width:1100px){.brand-marquee .brand-logo-card{flex-basis:145px!important;width:145px!important;min-width:145px!important}.brand-marquee .brand-logo-card img{max-width:122px!important}}
@media(max-width:760px){
  .brand-marquee{width:calc(100% + 30px);margin-left:-15px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .brand-marquee-track{animation-duration:28s}
  .vehicle-marquee .brand-marquee-track{animation-duration:24s}
  .brand-marquee .brand-logo-card{flex-basis:116px!important;width:116px!important;min-width:116px!important;height:68px!important;min-height:68px!important;padding:10px!important;border-radius:14px!important}
  .brand-marquee .brand-logo-card img{max-width:98px!important;max-height:30px!important}
  .vehicle-marquee .vehicle-logo-card img{max-width:101px!important;max-height:38px!important}
  .brand-marquee .brand-option-card strong{font-size:.68rem!important}
  [data-auto-carousel]{display:flex!important;grid-template-columns:none!important;gap:13px!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:3px 16% 12px 2px!important;margin-right:-24px!important}
  [data-auto-carousel]::-webkit-scrollbar{display:none}
  [data-auto-carousel]>*{flex:0 0 84%!important;width:84%!important;max-width:none!important;scroll-snap-align:start;scroll-snap-stop:always}
  .guide-teasers[data-auto-carousel]>*{flex-basis:78%!important;width:78%!important}
  .gallery-grid[data-auto-carousel]{margin-top:24px!important}
  .gallery-grid[data-auto-carousel]>a{flex-basis:78%!important;width:78%!important;height:310px!important;min-height:310px!important;border-radius:18px!important;overflow:hidden!important}
  .gallery-grid[data-auto-carousel]>a img{width:100%!important;height:100%!important;aspect-ratio:auto!important;object-fit:cover!important}
  .gallery-grid[data-auto-carousel]>.gallery-label{flex-basis:72%!important;width:72%!important;min-height:180px!important;scroll-snap-align:start}
  .service-card{min-height:310px}
  .premium-eta-front{animation:eta-background 5.5s ease-in-out infinite!important}
}
@media(prefers-reduced-motion:reduce){
  .brand-marquee-track,.vehicle-brands:before,.emergency-bar,.emergency-bar:after,.status-dot,.premium-eta-front,.premium-eta-front:after,.premium-eta-front .premium-eta-badge,.hero-orbit,.floating-card,.hero-image-wrap:before,.button-blue,.button-whatsapp{animation:none!important}
  .motion-ready .section,.motion-ready .quick-help{opacity:1!important;transform:none!important;transition:none!important}
  [data-auto-carousel]{scroll-behavior:auto!important}
}