/* ===== Motion layer: slider, reveals, floaters, tilt, page transitions ===== */

/* Cross-page transitions (Chrome/Edge/Safari 18+), graceful elsewhere */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .28s ease both}
::view-transition-new(root){animation:vt-in .38s cubic-bezier(.2,.7,.2,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(18px)}}
main{animation:page-in .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes page-in{from{opacity:0;transform:translateY(14px)}}

/* Scroll progress + back to top */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;background:linear-gradient(90deg,var(--emerald),var(--mint));transform-origin:0 50%;transform:scaleX(var(--p,0));z-index:100}
.to-top{position:fixed;right:22px;bottom:90px;width:46px;height:46px;border-radius:50%;border:0;background:var(--deep);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow);opacity:0;transform:translateY(16px) scale(.8);pointer-events:none;transition:opacity .25s,transform .25s;z-index:49}
.to-top.is-on{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--emerald)}

/* ---------- Hero slider ---------- */
.slider{position:relative;height:clamp(560px,86vh,780px);background:var(--deep);overflow:hidden;color:#D3E6E1}
.slider__track,.slide{position:absolute;inset:0}
.slide{opacity:0;visibility:hidden;transition:opacity .9s ease,visibility .9s}
.slide.is-active{opacity:1;visibility:visible;z-index:1}
.slide__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 7s linear}
.slide.is-active .slide__bg{transform:scale(1)}
.slide__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,42,42,.94) 0%,rgba(11,42,42,.78) 42%,rgba(11,42,42,.15) 75%)}
.slide__in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;max-width:1200px}
.slide__title{color:#fff;font-size:clamp(2.1rem,4.8vw,3.6rem);max-width:15ch;margin-bottom:.5em}
.slide__lead{font-size:1.15rem;max-width:50ch}
.slide__rotate{margin-top:.6rem;font-weight:500}
.slide__anim{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(.25s + var(--i) * .12s)}
.slide.is-active .slide__anim{opacity:1;transform:none}
.rotator{display:inline-block;color:var(--mint);font-weight:700;border-right:2px solid var(--mint);padding-right:3px;white-space:nowrap;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{border-color:transparent}}
.slider__arrow{position:absolute;top:50%;z-index:5;width:52px;height:52px;margin-top:-26px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);background:rgba(11,42,42,.35);color:#fff;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(6px);transition:background .2s,border-color .2s,transform .2s}
.slider__arrow svg{width:22px;height:22px}
.slider__arrow:hover{background:var(--emerald);border-color:var(--emerald);transform:scale(1.06)}
.slider__arrow--prev{left:18px}.slider__arrow--next{right:18px}
.slider__dots{position:absolute;z-index:5;left:50%;bottom:64px;transform:translateX(-50%);display:flex;gap:10px}
.slider__dots button{width:46px;height:5px;padding:0;border:0;border-radius:4px;background:rgba(255,255,255,.25);cursor:pointer;overflow:hidden}
.slider__dots span{display:block;height:100%;width:0;background:var(--mint)}
.slider__dots [aria-selected=true] span{animation:dot var(--dur,6s) linear forwards}
.slider.is-paused .slider__dots [aria-selected=true] span{animation-play-state:paused}
@keyframes dot{to{width:100%}}
@media (max-width:700px){.slider__arrow{display:none}.slide__shade{background:linear-gradient(180deg,rgba(11,42,42,.6),rgba(11,42,42,.95) 60%)}.slide__in{justify-content:flex-end;padding-bottom:110px}}

/* ---------- Floating, mouse-reactive pixel objects ---------- */
.floaters{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.floaters i{position:absolute;display:block;width:var(--s);height:var(--s);border-radius:calc(var(--s) / 4);background:var(--c);opacity:var(--o);
  transform:translate3d(var(--mx,0),var(--my,0),0) rotate(var(--r,0deg));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.floaters i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:inherit;animation:bob var(--t) ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(-22px) rotate(18deg)}}
.phead{isolation:isolate}

/* ---------- Scroll reveal (appear AND disappear) ---------- */
[data-reveal]{opacity:0;transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
[data-reveal=up]{transform:translateY(42px)}
[data-reveal=left]{transform:translateX(-56px)}
[data-reveal=right]{transform:translateX(56px)}
[data-reveal=zoom]{transform:scale(.88)}
[data-reveal=flip]{transform:perspective(900px) rotateX(18deg) translateY(30px);transform-origin:50% 100%}
[data-reveal].is-in{opacity:1;transform:none}

/* ---------- Tilt cards + glare ---------- */
.tilt{transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .2s,border-color .15s;will-change:transform;position:relative;overflow:hidden}
.tilt::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(124,227,200,.28),transparent 55%);opacity:0;transition:opacity .25s}
.tilt:hover::before{opacity:1}
a.card.tilt:hover{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-4px)}
.card__ico,.why__ico{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.card:hover .card__ico{transform:translateZ(30px) rotate(-8deg) scale(1.08)}
.why>div:hover .why__ico{transform:rotate(360deg)}
.why>div{transition:transform .25s,box-shadow .25s}.why>div:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.process li{transition:transform .25s,border-color .25s}.process li:hover{transform:translateY(-6px);border-color:var(--emerald)}

/* Magnetic buttons */
.magnetic{transition:transform .25s cubic-bezier(.2,.7,.2,1)}

/* Button shine sweep */
.btn--primary{position:relative;overflow:hidden}
.btn--primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg)}
.btn--primary:hover::after{animation:shine .8s ease}
@keyframes shine{to{left:130%}}

/* Technology marquee */
.marquee{overflow:hidden;margin-top:1.2rem;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;width:max-content;animation:marquee 30s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee .chips{flex-wrap:nowrap;margin:0;padding-right:.5rem}
.marquee .chips li{white-space:nowrap}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Feature image float */
.feature__art img,.about__art{animation:floaty 6s ease-in-out infinite alternate}
@keyframes floaty{to{transform:translateY(-12px)}}

/* Strip counters pop */
.strip strong{display:inline-block}

/* Reduced motion: keep it calm */
@media (prefers-reduced-motion:reduce){
  [data-reveal],.slide__anim{opacity:1!important;transform:none!important}
  .slide__bg{transition:none;transform:none}
  .floaters,.scroll-progress{display:none}
  .marquee__track{animation:none;flex-wrap:wrap}
  main{animation:none}
}