/* ==========================================================================
   FX — extra motion layer, loaded on every page.
   Uses the individual `translate` / `rotate` / `scale` properties so it never
   fights the transforms GSAP or the page CSS already set. Everything is off
   under prefers-reduced-motion, and nothing here ever hides content.
   ========================================================================== */
.fx-progress{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#00a8f0,#07d078);z-index:1000;pointer-events:none}

/* page fade between pages */
html.fx-ready body{animation:fxIn .7s cubic-bezier(.22,1,.36,1) both}
html.fx-leave body{opacity:0;transition:opacity .28s ease}
@keyframes fxIn{from{opacity:0}to{opacity:1}}

/* buttons: magnetic pull (via --mx/--my) + light sweep */
.btn,.arrow,.card-more{position:relative;overflow:hidden;translate:var(--mx,0) var(--my,0);transition:translate .35s cubic-bezier(.22,1,.36,1),background .3s,color .3s}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.btn:hover::after{transform:translateX(120%);transition:transform .8s cubic-bezier(.22,1,.36,1)}

/* link underline sweep */
.more,.foot-nav a,.tile-go{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s cubic-bezier(.22,1,.36,1)}
.more:hover,.foot-nav a:hover{background-size:100% 1px}

/* idle float for product imagery */
@keyframes fxFloat{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -14px;rotate:.8deg}}
.pr-stage img,.tile-img img,.ph-roll{animation:fxFloat 7s ease-in-out infinite}
.card-roller{animation:fxFloat 8s ease-in-out infinite}
.cards .card:nth-child(2n) .card-roller{animation-delay:-2s}
.cards .card:nth-child(3n) .card-roller{animation-delay:-4s}
.cards .card:nth-child(4n) .card-roller{animation-delay:-6s}
.card.is-on .card-roller{animation-play-state:paused}

/* masthead heading: words rise in */
.fx-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.fx-w>i{display:inline-block;font-style:normal;transform:translateY(110%);animation:fxRise 1s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(var(--i)*70ms + 150ms)}
@keyframes fxRise{to{transform:none}}

/* cursor spotlight on dark bands */
.fx-spot{position:relative}
.fx-spot::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(420px circle at var(--sx,70%) var(--sy,30%),rgba(0,168,240,.16),transparent 60%);opacity:0;transition:opacity .5s}
.fx-spot:hover::before{opacity:1}

/* tilt cards on interior pages */
.fx-tilt{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .4s;will-change:transform}
.fx-tilt.is-tilting{transition:transform .08s linear}

/* tick lists: items slide in one after another */
.js-reveal .ticks li,.ticks li{transition:opacity .7s ease,translate .8s cubic-bezier(.22,1,.36,1)}
.ticks.fx-hide li{opacity:0;translate:-18px 0}
.ticks.fx-hide.fx-in li{opacity:1;translate:0 0;transition-delay:calc(var(--i)*90ms)}

/* section hairlines draw in */
.sec-head,.range-head,.caps-head{position:relative}

/* marquee pauses on hover, tiles lift */
.marquee:hover .mq-row{animation-play-state:paused}
.tile{transition:translate .5s cubic-bezier(.22,1,.36,1),background .4s}
.tile:hover{translate:0 -8px}

@media(prefers-reduced-motion:reduce){
  .pr-stage img,.tile-img img,.ph-roll,.card-roller{animation:none}
  .fx-w>i{animation:none;transform:none}
  html.fx-ready body{animation:none}
  .fx-progress{display:none}
}
@media(hover:none){.fx-spot::before{display:none}}

/* responsive polish */
.sys>div{position:relative;z-index:2}
img,video{max-width:100%}
@media(max-width:700px){
  .hslide{max-width:78%}
  .hslide p{font-size:12.5px}
  .btn{min-height:46px}
  .fx-progress{height:2px}
}
@media(max-width:380px){.hslide h1{font-size:.95rem}}

/* about: the showcase image fills the right-hand column */
.about-showcase{margin:0;overflow:hidden;border-radius:20px;align-self:center}
.about-showcase img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:20px;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.about-showcase:hover img{transform:scale(1.04)}
@media(min-width:901px){.about-showcase{max-width:640px;justify-self:end;width:100%}}

/* contact: the logo film sits in the empty right-hand side */
@media(min-width:1000px){
  .contact-inner>.brand-mark{position:absolute;right:0;top:clamp(0px,2vh,24px);margin:0;width:min(46%,600px);height:auto;aspect-ratio:900/314;justify-self:auto}
  .contact-inner>.brand-mark img,.contact-inner>.brand-mark video{width:100%;height:100%;object-fit:contain}
}
@media(max-width:999px){
  .contact-inner>.brand-mark img,.contact-inner>.brand-mark video{height:auto;width:min(78vw,420px)}
}

/* every page's closing block: logo film sits in the right-hand space */
.cta{position:relative;overflow:hidden}
@media(min-width:1000px){
  .cta>.brand-mark{position:absolute;right:var(--pad);top:clamp(30px,6vh,70px);margin:0;width:min(42%,560px);height:auto;aspect-ratio:900/314}
  .cta>.brand-mark img,.cta>.brand-mark video{width:100%;height:100%;object-fit:contain}
}
@media(max-width:999px){.cta>.brand-mark img,.cta>.brand-mark video{height:auto;width:min(78vw,420px)}}