/* FIBOVO FX layer — 2026-10-21 "de-template" pass.
   Concept sources: Anime.js (staggered hero text reveal), Motion (spring-like
   cubic-bezier easing on page elements), Kokonut UI (button sheen + card lift),
   React Bits (ambient animated hero background). Implemented in native CSS.
   Safety: every pre-animation hidden state is gated behind html.fx, a class
   that fx.js adds only when JS runs and reduced-motion is NOT requested.
   With JS off or reduced motion on, all content is simply visible. */
:root{--fx-ease:cubic-bezier(.22,1,.36,1)}

/* ---------- ambient hero background (React Bits style, pure CSS) ---------- */
.cat-hero{position:relative}
.cat-hero::before{content:"";position:absolute;inset:-16% -6%;z-index:0;pointer-events:none;
  background:
    radial-gradient(430px 300px at 16% 28%,rgba(98,223,203,.13),transparent 65%),
    radial-gradient(540px 380px at 84% 10%,rgba(241,138,85,.12),transparent 65%),
    radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.6px);
  background-size:auto,auto,26px 26px;
  animation:fx-drift 26s ease-in-out infinite alternate}
.cat-hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.05) 48%,transparent 62%);
  background-size:280% 100%;background-position:120% 0;
  animation:fx-sweep 11s ease-in-out infinite}
.cat-hero-inner{position:relative;z-index:1}
@keyframes fx-drift{from{transform:translate3d(-1.6%,-1%,0)}to{transform:translate3d(1.6%,1.4%,0)}}
@keyframes fx-sweep{0%,55%{background-position:120% 0}92%,100%{background-position:-40% 0}}

/* ---------- hero title line reveal (Anime.js style stagger) ---------- */
html.fx .cat-hero h1 .fx-line{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
html.fx .cat-hero h1 .fx-line-in{display:block;transform:translateY(115%);transition:transform 1s var(--fx-ease)}
html.fx .cat-hero.fx-hero-in h1 .fx-line-in{transform:translateY(0)}
html.fx .cat-hero.fx-hero-in h1 .fx-line:nth-child(2) .fx-line-in{transition-delay:.14s}
html.fx .cat-hero .fx-fade{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s var(--fx-ease)}
html.fx .cat-hero.fx-hero-in .fx-fade{opacity:1;transform:none}

/* ---------- scroll reveal (Motion style easing) ---------- */
html.fx [data-fx]{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s var(--fx-ease)}
html.fx [data-fx].fx-in{opacity:1;transform:none}

/* ---------- buttons & cards micro-interactions (Kokonut UI style) ---------- */
.cat-button{transition:transform .35s var(--fx-ease),background .25s ease,border-color .25s ease,box-shadow .35s var(--fx-ease)}
.cat-button:hover{transform:translateY(-2px);box-shadow:0 14px 26px -12px rgba(0,0,0,.45)}
.cat-header-cta{transition:transform .35s var(--fx-ease),background .25s ease,box-shadow .35s var(--fx-ease)}
.cat-header-cta:hover{transform:translateY(-2px);box-shadow:0 12px 22px -10px rgba(190,83,42,.55)}
.cat-button,.cat-header-cta,.btn.primary,a.detail-cta{position:relative;overflow:hidden;isolation:isolate}
.cat-button::after,.cat-header-cta::after,.btn.primary::after,a.detail-cta::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:55%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:translateX(-230%) skewX(-18deg);transition:transform .8s var(--fx-ease)}
.cat-button:hover::after,.cat-header-cta:hover::after,.btn.primary:hover::after,a.detail-cta:hover::after{
  transform:translateX(330%) skewX(-18deg)}
.cat-product{transition:transform .5s var(--fx-ease),box-shadow .5s var(--fx-ease),border-color .3s ease}
.cat-product:hover{transform:translateY(-6px);box-shadow:0 24px 44px -18px rgba(13,45,58,.28)}
.cat-product-art img{transition:transform .8s var(--fx-ease)}
.cat-product:hover .cat-product-art img{transform:scale(1.1)}
.cat-product.is-featured:hover .cat-product-art img{transform:scale(1.18)}
.cat-hero-square img{transition:transform .8s var(--fx-ease)}
.cat-hero-square:hover img{transform:scale(1.16)}
.cat-hero-square.cat-square-lead:hover img{transform:scale(1.16)}
.detail-related a{transition:transform .4s var(--fx-ease),box-shadow .4s var(--fx-ease),background .3s ease}
.detail-related a:hover{transform:translateY(-3px);box-shadow:0 14px 28px -14px rgba(13,45,58,.25);background:#eaf2f3}
.cat-rfq-add{transition:color .25s ease,letter-spacing .3s ease}
.inquiry-form .btn.primary{transition:transform .35s var(--fx-ease),background .25s ease,box-shadow .35s var(--fx-ease)}
.inquiry-form .btn.primary:hover{box-shadow:0 14px 26px -12px rgba(8,43,54,.5)}

/* ---------- product detail pages ---------- */
html.fx .detail-main h1{animation:fx-fade-up .85s var(--fx-ease) both}
html.fx .detail-hero figure{animation:fx-fade-up .85s var(--fx-ease) .12s both}
@keyframes fx-fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- reduced motion: everything off, content untouched ---------- */
@media (prefers-reduced-motion:reduce){
  .cat-hero::before,.cat-hero::after{animation:none}
  .cat-product,.cat-product-art img,.cat-hero-square img,.cat-button,.cat-header-cta,.detail-related a{transition:none}
  .cat-button::after,.cat-header-cta::after,.btn.primary::after,a.detail-cta::after{display:none}
  html.fx [data-fx]{opacity:1;transform:none;transition:none}
  html.fx .cat-hero h1 .fx-line-in{transform:none;transition:none}
  html.fx .cat-hero .fx-fade{opacity:1;transform:none;transition:none}
  html.fx .detail-main h1,html.fx .detail-hero figure{animation:none}
}