/* CT Mobility — "product tour" block and side hero photo for the UAE landing pages.
   Markup: .ct-tour (tabs + stacked panels: browser frame with an operator-console screenshot,
   phone frame with an app screenshot, caption). Behaviour: /assets/js/ct-tour.js.
   Autoplay is driven by the CSS progress bar of the active tab (animationend -> next tab),
   so pausing is just animation-play-state. Text lives in the HTML (translated by i18n/). */

/* ---------- hero photo: a slow camera that "scans" the rows of cars ---------- */
.seo-hero-photo{margin:0;overflow:hidden;border-radius:18px;background:#e6edf9;
  box-shadow:0 18px 40px -24px rgba(9,30,66,.4);aspect-ratio:4/3;
  animation:ct-drive-in .9s cubic-bezier(.2,.7,.2,1) .15s both}
.seo-hero-photo img{width:100%;height:100%;object-fit:cover;display:block;will-change:transform;
  filter:saturate(.85) contrast(.88) brightness(1.1);transform:scale(1.16);
  animation:ct-scan 64s cubic-bezier(.37,0,.63,1) .9s infinite}
@keyframes ct-drive-in{from{opacity:0;transform:translateX(56px)}to{opacity:1;transform:none}}
[dir="rtl"] .seo-hero-photo{animation-name:ct-drive-in-rtl}
@keyframes ct-drive-in-rtl{from{opacity:0;transform:translateX(-56px)}to{opacity:1;transform:none}}
/* Slow pan + zoom + a hint of rotation, looping back to the start. Every keyframe keeps
   |translate| <= (scale - 1.05) / 2 so the frame never shows an edge, even when tilted ~1deg. */
@keyframes ct-scan{
  0%  {transform:translate(0,0)        scale(1.16) rotate(0)}
  18% {transform:translate(4.5%,2%)    scale(1.30) rotate(-.9deg)}
  36% {transform:translate(-5%,-3%)    scale(1.24) rotate(.7deg)}
  54% {transform:translate(-2%,4.5%)   scale(1.40) rotate(-.5deg)}
  72% {transform:translate(5%,-2.5%)   scale(1.20) rotate(1deg)}
  86% {transform:translate(-2.5%,1.5%) scale(1.32) rotate(-.4deg)}
  100%{transform:translate(0,0)        scale(1.16) rotate(0)}
}
@media (min-width:992px){
  /* desktop: the photo fills the whole other half of the hero, from under the navbar
     to the hero's bottom edge and out to the viewport edge; the text keeps the first half */
  .seo-hero:has(.has-photo){position:relative;overflow:hidden}
  .seo-hero:has(.has-photo) :is(.padding_global,.main-container,.blog-hero_component,.blog-hero-heading_wrapper){position:static}
  .seo-hero .blog-hero_component:has(.has-photo){grid-template-columns:minmax(0,1fr)}
  .seo-hero .has-photo .cta_component{max-width:calc(50% - 2.5rem)}
  .seo-hero .has-photo .cta-text_wrapper{width:auto;max-width:36rem}
  .seo-hero .has-photo .seo-hero-photo{position:absolute;top:5.5rem;bottom:0;inset-inline-end:0;
    inset-inline-start:calc(50% + 1.5rem);aspect-ratio:auto;border-radius:0;border-start-start-radius:28px;
    box-shadow:none}
}
@media (max-width:991px){
  .seo-hero-photo{aspect-ratio:16/7;margin-top:1.75rem;border-radius:14px}
}

/* ---------- product tour ---------- */
.ct-tour{--ct-tour-dur:7s;--ct-blue:#0047ff;margin:2.6rem 0 2.4rem;padding:clamp(1.25rem,3vw,2.25rem);
  border-radius:24px;background:radial-gradient(120% 90% at 85% 0%,#e8efff 0%,#f5f8fe 55%,#f7f9fc 100%);
  border:1px solid #e3e9f6;position:relative}
.seo-content .ct-tour h2{margin:.2rem 0 1.1rem}
.ct-tour__kicker{margin:0!important;font-size:.82rem!important;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ct-blue)!important}

.ct-tour__tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1.4rem}
.ct-tour__tab{position:relative;overflow:hidden;appearance:none;border:1px solid #d6dff0;background:#fff;
  color:#1f2933;font:inherit;font-weight:600;font-size:.95rem;line-height:1.2;padding:.62rem 1rem .72rem;
  border-radius:999px;cursor:pointer;transition:background .25s,color .25s,border-color .25s,box-shadow .25s}
.ct-tour__tab:hover{border-color:#9db6f5}
.ct-tour__tab:focus-visible{outline:3px solid #9db6f5;outline-offset:2px}
.ct-tour__tab.is-active{background:#0f1b3d;border-color:#0f1b3d;color:#fff;box-shadow:0 8px 20px -12px rgba(15,27,61,.7)}
.ct-tour__bar{position:absolute;inset-inline-start:0;bottom:0;height:3px;width:0;background:#5b8cff;border-radius:3px}
.ct-tour__tab.is-active .ct-tour__bar{animation:ct-bar var(--ct-tour-dur) linear forwards;animation-play-state:paused}
.ct-tour.is-playing:not(.is-paused) .ct-tour__tab.is-active .ct-tour__bar{animation-play-state:running}
@keyframes ct-bar{from{width:0}to{width:100%}}

.ct-tour__stage{display:grid;touch-action:pan-y}
.ct-tour__panel{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr);opacity:0;visibility:hidden;
  transform:translateY(14px) scale(.985);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.7,.2,1),visibility 0s linear .6s}
.ct-tour__panel.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .55s ease,transform .7s cubic-bezier(.2,.7,.2,1),visibility 0s}

.ct-tour__devices{position:relative;padding-inline-end:clamp(3.5rem,13%,7.5rem);padding-bottom:clamp(1.5rem,5%,2.5rem)}
.ct-tour__browser{margin:0;border-radius:14px;overflow:hidden;background:#fff;border:1px solid #dbe3f2;
  box-shadow:0 30px 60px -32px rgba(9,30,66,.55),0 2px 6px rgba(9,30,66,.06)}
.ct-tour__chrome{display:flex;gap:6px;align-items:center;height:28px;padding:0 12px;background:#eef2f9;border-bottom:1px solid #dfe6f3}
.ct-tour__chrome i{width:10px;height:10px;border-radius:50%;background:#cfd8ea;display:block}
.ct-tour__chrome i:nth-child(1){background:#ff6b5f}.ct-tour__chrome i:nth-child(2){background:#ffbd3f}.ct-tour__chrome i:nth-child(3){background:#2fcb53}
.ct-tour__screen{overflow:hidden;aspect-ratio:16/10;background:#f3f6fb}
.ct-tour__screen img,.ct-tour__phone img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;cursor:zoom-in}
.ct-tour__panel.is-active .ct-tour__screen img{animation:ct-kb 9s ease-out both;transform-origin:var(--kb,50% 40%)}
@keyframes ct-kb{from{transform:scale(1)}to{transform:scale(1.07)}}

.ct-tour__phone{position:absolute;inset-inline-end:0;bottom:0;width:clamp(118px,24%,210px);margin:0;
  aspect-ratio:390/844;border-radius:24px;overflow:hidden;background:#111;border:6px solid #111;
  box-shadow:0 26px 50px -20px rgba(9,30,66,.6)}
.ct-tour__panel.is-active .ct-tour__phone{animation:ct-phone .8s cubic-bezier(.2,.7,.2,1) .18s both}
@keyframes ct-phone{from{opacity:0;transform:translateY(34px) rotate(2deg)}to{opacity:1;transform:none}}

.ct-tour__caption{margin:1.1rem 0 0!important;max-width:46rem;font-size:1.02rem!important;color:#334155!important}
.ct-tour__caption strong{color:#0f1b3d}

/* lightbox */
.ct-tour__lightbox{border:0;padding:0;background:transparent;max-width:min(96vw,1600px);max-height:94vh;overflow:visible}
.ct-tour__lightbox::backdrop{background:rgba(8,15,35,.78);backdrop-filter:blur(2px)}
.ct-tour__lightbox img{display:block;max-width:min(96vw,1600px);max-height:90vh;width:auto;height:auto;border-radius:12px;cursor:zoom-out}
.ct-tour__close{position:absolute;top:-14px;inset-inline-end:-14px;width:36px;height:36px;border-radius:50%;border:0;
  background:#fff;color:#0f1b3d;font-size:22px;line-height:36px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.25)}

@media (max-width:640px){
  .ct-tour{border-radius:18px}
  .ct-tour__tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-.25rem;padding:0 .25rem .2rem}
  .ct-tour__tabs::-webkit-scrollbar{display:none}
  .ct-tour__tab{flex:0 0 auto;font-size:.9rem}
  .ct-tour__devices{padding-inline-end:22%}
  .ct-tour__phone{width:34%;border-width:4px;border-radius:18px}
}
@media (prefers-reduced-motion:reduce){
  .seo-hero-photo,.seo-hero-photo img,.ct-tour__panel.is-active .ct-tour__screen img,.ct-tour__panel.is-active .ct-tour__phone{animation:none}
  .seo-hero-photo img{transform:none;animation:none}
  .ct-tour__panel{transition:none}
}