/* ==========================================================================
   AL MASAR AL AWAL — Motion System
   Purposeful, restrained motion: entrances, scroll reveals, technical
   line-drawing, micro-interactions and page transitions.
   Everything is gated behind `.js` and fully disabled for reduced motion.
   ========================================================================== */

:root {
    --ease-out: cubic-bezier(.16, 1, .3, 1);      /* expo-out: confident settle */
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --dur-1: .45s;
    --dur-2: .8s;
    --dur-3: 1.1s;
}

/* ---------- Keyframes ---------- */
@keyframes m-rise      { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes m-fade      { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-line-up   { from { transform: translateY(108%); } to { transform: none; } }
@keyframes m-visual-in { from { opacity: 0; transform: translateX(48px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes m-tag-pop   { from { opacity: 0; transform: translateY(10px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes m-float     { from { translate: 0 0; } to { translate: 0 -6px; } }
@keyframes m-grid-48   { to { background-position: 48px 48px, 48px 48px; } }
@keyframes m-grid-40   { to { background-position: 40px 40px, 40px 40px; } }
@keyframes m-scan      { from { background-position: -60% 0; } to { background-position: 160% 0; } }
@keyframes m-road      { to { stroke-dashoffset: -8; } }
@keyframes m-pulse     { 0% { box-shadow: 0 0 0 0 rgba(11,92,255,.55); } 100% { box-shadow: 0 0 0 14px rgba(11,92,255,0); } }
@keyframes m-failsafe  { to { opacity: 1; } }

/* ---------- Page transitions (cross-document View Transitions) ---------- */
@view-transition { navigation: auto; }
.navbar { view-transition-name: site-nav; }
::view-transition-old(root) { animation: .22s ease-in both m-vt-out; }
::view-transition-new(root) { animation: .5s var(--ease-out) both m-vt-in; }
@keyframes m-vt-out { to { opacity: 0; } }
@keyframes m-vt-in  { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Scroll progress ---------- */
.scroll-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; pointer-events: none;
    background: linear-gradient(90deg, var(--blue), #6ea0ff);
    transform: scaleX(var(--progress, 0)); transform-origin: 0 50%;
    will-change: transform;
}

/* ---------- Hero entrance choreography ---------- */
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hero h1 .line > span { display: inline-block; }

.js .hero__content > * { animation: m-rise var(--dur-2) var(--ease-out) both; }
.js .hero__content > :nth-child(1) { animation-delay: .1s; }
.js .hero__content > h1 { animation: none; }
.js .hero h1 .line > span { animation: m-line-up var(--dur-3) var(--ease-out) both; }
.js .hero h1 .line:nth-child(1) > span { animation-delay: .22s; }
.js .hero h1 .line:nth-child(2) > span { animation-delay: .34s; }
.js .hero__content > :nth-child(3) { animation-delay: .5s; }
.js .hero__content > :nth-child(4) { animation-delay: .62s; }
.js .hero__content > :nth-child(5) { animation-delay: .74s; }

.js .hero__visual { animation: m-visual-in 1.3s var(--ease-out) .3s both; }
.js .hero .blueprint__tag--a { animation: m-float 4s ease-in-out 2.4s infinite alternate; }
.js .hero .blueprint__tag--b { animation: m-float 4.6s ease-in-out 2.6s infinite alternate-reverse; }

/* Hero slider: slides cross-fade with a directional drift, tags pop in after the drawing */
.hero-slide {
    opacity: 0; visibility: hidden; transform: translateX(32px);
    transition: opacity .5s var(--ease-out), transform .8s var(--ease-out), visibility 0s linear .8s;
}
.hero-slider.is-reverse .hero-slide:not(.is-active) { transform: translateX(-32px); }
.hero-slide.is-leaving { transform: translateX(-32px); }
.hero-slider.is-reverse .hero-slide.is-leaving { transform: translateX(32px); }
.hero-slide.is-active {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .7s var(--ease-out) .12s, transform .9s var(--ease-out) .12s, visibility 0s;
}
.hero-slide .blueprint__tag { opacity: 0; scale: .94; transition: opacity .35s, scale .5s var(--ease-out); }
.hero-slide.is-active .blueprint__tag { opacity: 1; scale: 1; }
.hero-slide.is-active .blueprint__tag--a { transition-delay: 1s; }
.hero-slide.is-active .blueprint__tag--b { transition-delay: 1.15s; }

@keyframes m-title-in { from { opacity: 0; transform: translateY(10px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
.hero-slider__name.is-changing { animation: m-title-in .7s var(--ease-out) .15s both; }

@keyframes slider-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero-slider.is-autoplay .hero-slider__seg.is-active span::after { animation: slider-fill var(--slide-ms, 6s) linear both; }
.hero-slider.is-paused .hero-slider__seg.is-active span::after { animation-play-state: paused; }

/* Live blueprint: drifting grid, scanning beam, rolling road */
.hero__grid-bg { animation: m-grid-48 40s linear infinite; will-change: background-position; }
.blueprint__tag { z-index: 2; }
.blueprint:not(.blueprint--light)::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(127,169,255,.18) 50%, transparent) no-repeat;
    background-size: 22% 100%;
    animation: m-scan 7s var(--ease-in-out) 2.4s infinite both;
}
.hero .blueprint .trailer-art .ground { animation: m-road 1.1s linear infinite; }

/* Page header entrance (inner pages) */
.js .page-header__inner > * { animation: m-rise var(--dur-2) var(--ease-out) both; }
.js .page-header__inner > :nth-child(1) { animation-delay: .05s; }
.js .page-header__inner > :nth-child(2) { animation-delay: .14s; }
.js .page-header__inner > :nth-child(3) { animation-delay: .22s; }
.js .page-header__inner > :nth-child(4) { animation-delay: .32s; }

.cta::before { animation: m-grid-40 50s linear infinite; }

/* ---------- Scroll reveal engine ----------
   JS sets --d (batch stagger) on each .reveal, adds .is-visible, then removes
   both classes once settled so components fall back to their own transitions. */
.js .reveal {
    opacity: 0; transform: translateY(32px);
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
    transition-delay: var(--d, 0s);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal[data-reveal="left"]  { transform: translateX(-40px); }
.js .reveal[data-reveal="right"] { transform: translateX(40px); }
.js .reveal[data-reveal="scale"] { transform: translateY(24px) scale(.96); }
.js .reveal[data-reveal="left"].is-visible,
.js .reveal[data-reveal="right"].is-visible,
.js .reveal[data-reveal="scale"].is-visible { transform: none; }

/* Sequenced content: the block stays put, its children rise one by one */
.js .reveal[data-reveal="seq"] { opacity: 1; transform: none; }
.js .reveal[data-reveal="seq"] > * {
    opacity: 0; transform: translateY(22px);
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
    transition-delay: calc(var(--d, 0s) + var(--i, 0) * 90ms);
}
.js .reveal[data-reveal="seq"].is-visible > * { opacity: 1; transform: none; }

/* Staggered lists inside any revealing block */
.js .reveal [data-stagger] > *,
.js .reveal[data-stagger] > * {
    opacity: 0; transform: translateY(14px);
    transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
    transition-delay: calc(var(--d, 0s) + 250ms + var(--i, 0) * 60ms);
}
.js .reveal.is-visible [data-stagger] > *,
.js .reveal[data-stagger].is-visible > * { opacity: 1; transform: none; }

/* Process: connector draws across, numbers lock in with their offset shadow */
.js .process__step.reveal::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s var(--ease-in-out) calc(var(--d, 0s) + .35s); }
.js .process__step.reveal.is-visible::before { transform: none; }
.js .process__step.reveal .process__num { box-shadow: 0 0 0 var(--blue); transition: box-shadow .6s var(--ease-out) calc(var(--d, 0s) + .25s); }
.js .process__step.reveal.is-visible .process__num { box-shadow: 6px 6px 0 var(--blue); }
.process__num { transition: box-shadow .35s var(--ease-out), background .3s, transform .35s var(--ease-out); }
.process__step:hover .process__num { background: var(--blue); box-shadow: 6px 6px 0 var(--black); transform: translate(-2px, -2px); }

/* Portfolio rows: drawing slides in from its side, copy follows */
.js .portfolio-row.reveal { opacity: 1; transform: none; }
.js .portfolio-row.reveal .portfolio-row__art,
.js .portfolio-row.reveal .portfolio-row__body {
    opacity: 0; transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.js .portfolio-row.reveal .portfolio-row__art { transform: translateX(-56px); }
.js .portfolio-row--flip.reveal .portfolio-row__art { transform: translateX(56px); }
.js .portfolio-row.reveal .portfolio-row__body { transform: translateY(28px); transition-delay: .18s; }
.js .portfolio-row.reveal.is-visible .portfolio-row__art,
.js .portfolio-row.reveal.is-visible .portfolio-row__body { opacity: 1; transform: none; }

/* Certificate: blue curtain sweeps across, image settles underneath, badge drops in.
   (A curtain overlay rather than clip-path: a fully clipped target never
   intersects, so IntersectionObserver would never reveal it.) */
@keyframes m-curtain {
    0%     { transform: scaleX(0); transform-origin: 0 50%; }
    48%    { transform: scaleX(1); transform-origin: 0 50%; }
    52%    { transform: scaleX(1); transform-origin: 100% 50%; }
    100%   { transform: scaleX(0); transform-origin: 100% 50%; }
}
.js .cert__frame.reveal { transform: none; transition: opacity .4s var(--d, 0s); }
.js .cert__frame.reveal::after {
    content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
    background: var(--blue); transform: scaleX(0);
}
.js .cert__frame.reveal.is-visible::after { animation: m-curtain 1.3s var(--ease-in-out) var(--d, 0s) both; }
.js .cert__frame.reveal .cert__image,
.js .cert__frame.reveal figcaption { opacity: 0; transition: opacity .01s calc(var(--d, 0s) + .62s); }
.js .cert__frame.reveal.is-visible .cert__image,
.js .cert__frame.reveal.is-visible figcaption { opacity: 1; }
.js .cert__frame.reveal:not(.is-visible) .cert__image img { transform: scale(1.12); }
.js .cert__frame.reveal .cert__image img { transition: transform 1.6s var(--ease-out) calc(var(--d, 0s) + .6s); }
.js .cert__frame.reveal .cert__badge { opacity: 0; transform: translateY(-10px); transition: opacity .5s, transform .6s var(--ease-out); transition-delay: calc(var(--d, 0s) + 1.1s); }
.js .cert__frame.reveal.is-visible .cert__badge { opacity: 1; transform: none; }
.cert__badge { animation: m-pulse 2.4s ease-out 2s 2; }

/* ---------- Technical line-drawing ---------- */
/* Hidden until JS arms the drawing; failsafe shows it if JS never runs. */
.js .trailer-art { opacity: 0; animation: m-failsafe 0s 2.5s forwards; }
.js .trailer-art.is-armed { opacity: 1; animation: none; }
.trailer-art .ghost, .trailer-art .ground, .trailer-art .hub { transition: opacity .8s var(--ease-out); }

/* Drive on hover: the road rolls under the trailer */
.product-card .trailer-art,
.portfolio-row__art .trailer-art { transition: transform .6s var(--ease-out); }
.product-card:hover .trailer-art,
.portfolio-row__art:hover .trailer-art { transform: translateX(-4px); }
.product-card:hover .trailer-art .ground,
.project-card:hover .trailer-art .ground,
.portfolio-row__art:hover .trailer-art .ground,
.mega__item:hover .trailer-art .ground { animation: m-road .45s linear infinite; }
.portfolio-row__art { transition: box-shadow .5s var(--ease-out), transform .5s var(--ease-out); }
.portfolio-row__art:hover { transform: translate(-3px, -3px); box-shadow: 16px 16px 0 var(--blue); }
.portfolio-row--flip .portfolio-row__art:hover { transform: translate(3px, -3px); box-shadow: -16px 16px 0 var(--blue); }

/* ---------- Cursor spotlight on cards ---------- */
.product-card { position: relative; }
.service-card::after, .product-card::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(11,92,255,.10), transparent 45%);
    opacity: 0; transition: opacity .4s;
}
.product-card::after, .service-card--blue::after, .service-card--dark::after {
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(127,169,255,.20), transparent 45%);
}
.service-card .service-card__num { transition: color .4s, transform .5s var(--ease-out); }
.service-card__icon { transition: transform .5s var(--ease-out); }
@media (hover: hover) {
    .service-card:hover::after, .product-card:hover::after { opacity: 1; }
    .service-card:hover .service-card__icon { transform: translateY(-3px); }
    .service-card:hover .service-card__num { transform: translateY(-4px); }
    .service-card:not(.service-card--blue):not(.service-card--dark):hover .service-card__num { color: var(--blue-50); }
}
.link-arrow .icon { transition: transform .3s var(--ease-out); }
.product-card:hover .link-arrow .icon { transform: translateX(5px); }

/* ---------- Buttons ---------- */
.btn--blue, .nav__cta { position: relative; overflow: hidden; isolation: isolate; }
.btn--blue::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
    transform: translateX(-110%); transition: transform .8s var(--ease-out);
}
.btn--blue:hover::after { transform: translateX(110%); }
.btn:active { transform: translateY(0) scale(.98); }

/* Sliding fill for outlined buttons */
.btn.btn--outline {
    background: linear-gradient(var(--black), var(--black)) no-repeat 0 0 / 0% 100%;
    transition: background-size .45s var(--ease-out), color .3s, border-color .3s, transform .2s;
}
.btn.btn--outline:hover { background: linear-gradient(var(--black), var(--black)) no-repeat 0 0 / 100% 100%; }
.btn.btn--ghost-light {
    background: linear-gradient(var(--white), var(--white)) no-repeat 0 0 / 0% 100%, rgba(255,255,255,.04);
    transition: background-size .45s var(--ease-out), color .3s, border-color .3s, transform .2s;
}
.btn.btn--ghost-light:hover { background: linear-gradient(var(--white), var(--white)) no-repeat 0 0 / 100% 100%, rgba(255,255,255,.04); }

/* ---------- Navigation ---------- */
@keyframes m-menu-item { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.nav__dropdown.is-open .mega__grid > li { animation: m-menu-item .45s var(--ease-out) both; animation-delay: calc(60ms + var(--i, 0) * 35ms); }
@media (hover: hover) and (min-width: 1025px) {
    .nav__dropdown:hover .mega__grid > li { animation: m-menu-item .45s var(--ease-out) both; animation-delay: calc(60ms + var(--i, 0) * 35ms); }
}
.mega__art { transition: color .2s, transform .4s var(--ease-out); }
.mega__item:hover .mega__art { transform: translateX(-3px); }
@media (max-width: 1024px) {
    .nav-open .nav__list > li { animation: m-menu-item .5s var(--ease-out) both; }
    .nav-open .nav__list > li:nth-child(1) { animation-delay: .12s; }
    .nav-open .nav__list > li:nth-child(2) { animation-delay: .18s; }
    .nav-open .nav__list > li:nth-child(3) { animation-delay: .24s; }
    .nav-open .nav__list > li:nth-child(4) { animation-delay: .30s; }
    .nav-open .nav__list > li:nth-child(5) { animation-delay: .36s; }
    .nav-open .navbar__toggle .icon-close { animation: m-fade .3s both; }
}

/* ---------- Stats & misc ---------- */
.stat strong { font-variant-numeric: tabular-nums; }
.stat { transition: background .3s; }
.stat:not(:first-child):hover { background: var(--steel-50); }
.jumpbar__list a { transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease-out); }
.jumpbar__list a:hover { transform: translateY(-1px); }
.spec-table tbody tr { transition: background .2s; }
.spec-table tbody tr:hover { background: var(--blue-50); }
.footer__links a { display: inline-block; transition: color .2s, transform .3s var(--ease-out); }
.footer__links a:hover { transform: translateX(4px); }

/* FAQ answer animates via JS; keep its content clipped while it moves */
.faq__a { overflow: hidden; }
.faq__item { transition: border-color .3s, box-shadow .4s var(--ease-out); }

/* Project filter: cards glide to their new positions */
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: var(--ease-out); }
.project-card .trailer-art { transition: transform .6s var(--ease-out); }
.project-card:hover .trailer-art { transform: translateX(-4px); }

/* WhatsApp float: glides in after load, pulses a few times to draw the eye */
@keyframes m-wa-in { from { opacity: 0; transform: translateY(24px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes m-wa-ring { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(1.65); } }
.js .wa-float { animation: m-wa-in .7s var(--ease-out) 1.2s both; }
.wa-float__btn::before { animation: m-wa-ring 2.2s ease-out 2.4s 3; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    .js .reveal, .js .reveal *, .js .reveal::before,
    .js .hero__content > *, .js .hero h1 .line > span, .js .hero__visual,
    .js .page-header__inner > *, .js .trailer-art {
        opacity: 1 !important; transform: none !important;
    }
    .js .process__step.reveal::before { transform: none !important; }
    *, *::before, *::after { animation-delay: 0s !important; transition-delay: 0s !important; animation-iteration-count: 1 !important; }
    .scroll-progress { display: none; }
}