
/* ==========================================================
   INDOVIENNAMOBILITY — CINEMATIC MOTION 2.0
   Distinct entrance directions: up / down / left / right / zoom.
   Only activated by JS and disabled for reduced motion.
   Animated elements remain fully present in HTML for SEO.
   ========================================================== */
:root{--iv-motion-duration:940ms;--iv-motion-ease:cubic-bezier(.18,.72,.19,1)}
/* Prevent unnecessary sideways scroll while preserving card transitions. */
body{overflow-x:clip}
.iv-motion{opacity:0;transform:translate3d(var(--iv-from-x,0px),var(--iv-from-y,84px),0) scale(var(--iv-from-scale,1));filter:blur(4px);transition:opacity 850ms ease,transform var(--iv-motion-duration) var(--iv-motion-ease),filter 900ms ease;transition-delay:var(--iv-delay,0ms);will-change:opacity,transform;}
.iv-motion.iv-visible{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0);will-change:auto}
.iv-from-left{--iv-from-x:-116px;--iv-from-y:12px}
.iv-from-right{--iv-from-x:116px;--iv-from-y:12px}
.iv-from-top{--iv-from-y:-96px}
.iv-from-bottom{--iv-from-y:104px}
.iv-from-zoom{--iv-from-y:35px;--iv-from-scale:.88}
.iv-from-gentle{--iv-from-y:48px}
/* Hero appears instantly in DOM; premium motion plays after first frame. */
.hero .eyebrow{animation:iv-hero-left .82s cubic-bezier(.2,.7,.2,1) both}
.hero h1{animation:iv-hero-right 1s .10s cubic-bezier(.2,.7,.2,1) both}
.hero-content p{animation:iv-hero-up 1.05s .25s cubic-bezier(.2,.7,.2,1) both}
.hero-actions{animation:iv-hero-up .95s .4s cubic-bezier(.2,.7,.2,1) both}
.hero .hero-img{animation:iv-hero-breathe 18s ease-in-out infinite alternate}
@keyframes iv-hero-left{from{opacity:.1;transform:translate3d(-100px,0,0)}to{opacity:1;transform:none}}
@keyframes iv-hero-right{from{opacity:.1;transform:translate3d(104px,-14px,0)}to{opacity:1;transform:none}}
@keyframes iv-hero-up{from{opacity:.1;transform:translate3d(0,85px,0)}to{opacity:1;transform:none}}
@keyframes iv-hero-breathe{from{transform:scale(1.015)}to{transform:scale(1.115)}}
/* Page banners: varying entry directions with decorative underline */
.page-hero h1{animation:iv-hero-left .86s cubic-bezier(.17,.7,.2,1) both}
.page-hero .eyebrow{animation:iv-hero-up .82s .10s cubic-bezier(.17,.7,.2,1) both}
.page-hero .lead,.page-hero p{animation:iv-hero-up .9s .20s cubic-bezier(.17,.7,.2,1) both}
.section-head h2::after,.brand-story h2::after{content:"";display:block;height:2px;width:48px;margin-top:16px;background:linear-gradient(90deg,#c9984f,#9b092b);transform-origin:left;transition:width .7s ease}
.section-head:hover h2::after,.brand-story:hover h2::after{width:112px}
/* Image masks, gentle reveals and tactile hover interactions */
.image-split .photo,.fleet-photo,.city-card{isolation:isolate;}
.image-split .photo{overflow:hidden}
.image-split .photo img,.fleet-photo img,.city-card img{transition:transform 1.15s cubic-bezier(.2,.6,.2,1),filter .6s ease}
.image-split .photo:hover img,.fleet-card:hover .fleet-photo img{transform:scale(1.065)}
.city-card:hover img{transform:scale(1.115)}
.service-card,.feature-box,.route-link,.fleet-card,.highlight-grid>div{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .3s ease}
.service-card.iv-motion.iv-visible:hover,.fleet-card.iv-motion.iv-visible:hover,.feature-box.iv-motion.iv-visible:hover,.route-link.iv-motion.iv-visible:hover,.highlight-grid>div.iv-motion.iv-visible:hover{transform:translateY(-9px);box-shadow:0 20px 48px rgba(8,27,51,.14);border-color:#c9984f}
.city-card.iv-motion.iv-visible:hover{transform:translateY(-7px)}
.btn{position:relative;isolation:isolate;overflow:hidden}
.btn::after{content:"";position:absolute;inset:-150% auto -150% -90%;width:58%;transform:rotate(24deg) translateX(-120%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);pointer-events:none;transition:transform .68s ease}
.btn:hover::after{transform:rotate(24deg) translateX(490%)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #c9984f;outline-offset:3px}
/* Feedback on longer pages; does not consume space or cover CTA. */
.site-header::after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#d09a4e,#a50025,#d09a4e);transform-origin:left;transform:scaleX(var(--iv-progress,0));will-change:transform;pointer-events:none}
.iv-back-top{position:fixed;right:21px;bottom:24px;z-index:58;width:46px;height:46px;background:#0d2038;color:#fff;border:1px solid #c9984f;border-radius:50%;box-shadow:0 10px 26px rgba(8,22,39,.26);display:grid;place-items:center;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .24s ease,transform .24s ease}
.iv-back-top.iv-on{opacity:1;transform:translateY(0);pointer-events:auto}
.iv-back-top:hover{background:#9b092b}
@media(max-width:880px){.iv-from-left{--iv-from-x:-65px}.iv-from-right{--iv-from-x:65px}.iv-from-top{--iv-from-y:-62px}.iv-from-bottom{--iv-from-y:75px}}
@media(max-width:620px){.iv-from-left{--iv-from-x:-38px;--iv-from-y:12px}.iv-from-right{--iv-from-x:38px;--iv-from-y:12px}.iv-from-top{--iv-from-y:-45px}.iv-from-bottom{--iv-from-y:55px}.iv-from-zoom{--iv-from-y:24px;--iv-from-scale:.94}.iv-motion{filter:none;transition-duration:690ms}.hero h1{animation-duration:.85s}.hero .hero-img{animation-duration:24s}.iv-back-top{right:16px;bottom:82px;width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){.iv-motion,.iv-motion.iv-visible{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}.hero .eyebrow,.hero h1,.hero-content p,.hero-actions,.hero .hero-img,.page-hero h1,.page-hero .eyebrow,.page-hero p{animation:none!important}.site-header::after{transition:none!important}.iv-back-top{transition:none!important}}

/* Clip offscreen directional entrance frames without sideways scrolling. */
html{overflow-x:clip;max-width:100%}
