/* ============================================================================
   KAYSON STEEL — MOTION SYSTEM (premium industrial/steel)
   A coherent, intentional motion language. Loaded after style.css.
   Built for: smooth reveals, ambient life, scroll choreography,
   magnetic buttons, blur/scale entrances, count-ups, calculator drama.
   Reduced-motion is intentionally NOT used to disable the experience
   (per project requirement) — only the most extreme infinite loops soften.
   ============================================================================ */

/* ---------- 1. GLOBAL PAGE / NAV ENTRANCE ---------- */
@keyframes pageIn { from { opacity:0; } to { opacity:1; } }
body { animation: pageIn .6s var(--ease-out) both; }

@keyframes navDrop { from { transform:translateY(-100%); } to { transform:translateY(0); } }
.js .nav { transform:translateY(-100%); }
body.is-ready .nav { animation:navDrop .65s var(--ease-out) .08s forwards; }
.nav { transition:background var(--dur-2), box-shadow var(--dur-2), transform .45s var(--ease-out); }

/* ---------- 2. SCROLL PROGRESS ---------- */
.scroll-progress { position:fixed; top:0; inset-inline:0; height:3px; z-index:200; pointer-events:none;
  background:linear-gradient(90deg,var(--brand),var(--ember)); transform:scaleX(0); transform-origin:inline-start;
  transition:transform .12s linear; box-shadow:0 0 14px rgba(226,100,31,.55); }

/* ---------- 3. AMBIENT BACKGROUND (always alive) ---------- */
/* floating orbs that drift forever, independently */
.hero__orb { position:absolute; border-radius:50%; filter:blur(48px); opacity:.6; pointer-events:none; z-index:0; will-change:transform;
  background:radial-gradient(circle, rgba(10,30,63,.55), transparent 70%); }
.hero__orb.a { width:380px; height:380px; inset-inline-start:-100px; bottom:-140px; animation:floatA 16s var(--ease-in-out) infinite; }
.hero__orb.b { width:300px; height:300px; inset-inline-end:6%; top:-80px; background:radial-gradient(circle, rgba(212,175,55,.34), transparent 70%); animation:floatB 20s var(--ease-in-out) infinite; }
.hero__orb.c { width:200px; height:200px; inset-inline-start:40%; top:26%; background:radial-gradient(circle, rgba(212,175,55,.30), transparent 70%); animation:floatC 24s var(--ease-in-out) infinite; }
@keyframes floatA { 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(40px,-34px) scale(1.08); } }
@keyframes floatB { 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-30px,30px) scale(1.05); } }
@keyframes floatC { 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(20px,26px) scale(1.1); } }

/* slowly shifting background gradient on hero + dark sections */
.hero__glow, .section--dark::before, .market::before { animation:glowPulse 9s ease-in-out infinite; }
@keyframes glowPulse { 0%,100%{ opacity:.5; } 50%{ opacity:.95; } }

/* gradient sheen that slowly travels across hero seam */
.hero__seam, .seam { background-size:200% 100%; animation:seamFlow 8s linear infinite; }
@keyframes seamFlow { 0%{ background-position:0% 0; } 100%{ background-position:200% 0; } }

/* extremely subtle particles layer (added by motion.js) */
.particles { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.particles span { position:absolute; width:4px; height:4px; border-radius:50%; background:rgba(212,175,55,.5);
  animation:drift linear infinite; }
@keyframes drift { 0%{ transform:translateY(20px); opacity:0; } 10%{ opacity:.7; } 90%{ opacity:.7; } 100%{ transform:translateY(-120px); opacity:0; } }

/* ---------- 4. HERO TEXT CHOREOGRAPHY ---------- */
.js .hero__copy > * { opacity:0; }
.js .hero.is-loaded .hero__copy > * { animation:heroRise .9s var(--ease-out) forwards; }
.js .hero.is-loaded .hero__copy > *:nth-child(1){ animation-delay:.05s }
.js .hero.is-loaded .hero__copy > *:nth-child(2){ animation-delay:.18s }
.js .hero.is-loaded .hero__copy > *:nth-child(3){ animation-delay:.32s }
.js .hero.is-loaded .hero__copy > *:nth-child(4){ animation-delay:.46s }
.js .hero.is-loaded .hero__copy > *:nth-child(5){ animation-delay:.60s }
.js .hero.is-loaded .hero__copy > *:nth-child(6){ animation-delay:.74s }
@keyframes heroRise { from{ opacity:0; transform:translateY(38px) scale(.96); filter:blur(8px); } to{ opacity:1; transform:none; filter:blur(0); } }

/* word-by-word reveal for the H1 */
.js .hero__copy h1 { display:block; }
.js .hero.is-loaded .word { display:inline-block; opacity:0; transform:translateY(42px) rotate(4deg); filter:blur(10px);
  animation:wordIn .8s var(--ease-out) forwards; }
@keyframes wordIn { to{ opacity:1; transform:none; filter:blur(0); } }

/* hero visual: scale + blur in, then gentle parallax float (scoped to .hero) */
.js .hero .hero__visual { opacity:0; transform:translateY(46px) scale(.92); }
.js .hero.is-loaded .hero .hero__visual { animation:heroVisual 1.1s var(--ease-out) .35s forwards; }
@keyframes heroVisual { from{ opacity:0; transform:translateY(46px) scale(.92); filter:blur(12px);} to{ opacity:1; transform:none; filter:blur(0);} }
.hero__visual { will-change:transform; }

/* ---------- 5. SCROLL REVEAL CHOREOGRAPHY ---------- */
/* base hidden state (gated by .js so no-JS = visible) */
.js [data-anim] { opacity:0; will-change:transform, opacity, filter; }

/* A — fade + upward */
.js [data-anim="up"].in { animation:revealUp .8s var(--ease-out) forwards; }
@keyframes revealUp { from{ opacity:0; transform:translateY(48px); } to{ opacity:1; transform:none; } }

/* B — staggered children (cards). The parent itself must also become visible:
   opacity is inherited, so leaving the [data-anim="stagger"] parent at opacity:0
   (from the base .js [data-anim] rule) hides the children even after they animate. */
.js [data-anim="stagger"].in { opacity:1; }
.js [data-anim="stagger"].in > * { animation:revealUp .7s var(--ease-out) forwards; }
.js [data-anim="stagger"] > *:nth-child(1){ animation-delay:0s }
.js [data-anim="stagger"] > *:nth-child(2){ animation-delay:.08s }
.js [data-anim="stagger"] > *:nth-child(3){ animation-delay:.16s }
.js [data-anim="stagger"] > *:nth-child(4){ animation-delay:.24s }
.js [data-anim="stagger"] > *:nth-child(5){ animation-delay:.32s }
.js [data-anim="stagger"] > *:nth-child(6){ animation-delay:.40s }
.js [data-anim="stagger"] > *:nth-child(7){ animation-delay:.48s }
.js [data-anim="stagger"] > *:nth-child(8){ animation-delay:.56s }

/* C — image parallax + text reveal (handled: image via data-parallax, text via up) */

/* D — blur-to-sharp scale */
.js [data-anim="blur"].in { animation:revealBlur .9s var(--ease-out) forwards; }
@keyframes revealBlur { from{ opacity:0; transform:scale(.9); filter:blur(14px); } to{ opacity:1; transform:none; filter:blur(0); } }

/* E — horizontal slide (RTL: from inline-start) */
.js [data-anim="left"].in { animation:revealLeft .8s var(--ease-out) forwards; }
.js [data-anim="right"].in { animation:revealRight .8s var(--ease-out) forwards; }
@keyframes revealLeft { from{ opacity:0; transform:translateX(64px); } to{ opacity:1; transform:none; } }
@keyframes revealRight { from{ opacity:0; transform:translateX(-64px); } to{ opacity:1; transform:none; } }

/* F — scale reveal */
.js [data-anim="scale"].in { animation:revealScale .8s var(--ease-back) forwards; }
@keyframes revealScale { from{ opacity:0; transform:scale(.82); } to{ opacity:1; transform:none; } }

/* G — diagonal */
.js [data-anim="diag"].in { animation:revealDiag .85s var(--ease-out) forwards; }
@keyframes revealDiag { from{ opacity:0; transform:translate(-40px,40px); } to{ opacity:1; transform:none; } }

/* ---------- 6. CARDS: depth + pointer glow + animated border ---------- */
.card, .kpi, .panel, .cat, .stat, .news, .product, .service, .adv { position:relative; }
.card::after, .kpi::after, .panel::after, .news::after, .stat::after, .adv::after,
.product::after, .service::after, .cat::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%), rgba(212,175,55,.12), transparent 60%);
  transition:opacity var(--dur-2); }
.card:hover::after, .kpi:hover::after, .panel:hover::after, .news:hover::after, .stat:hover::after,
.adv:hover::after, .product:hover::after, .service:hover::after, .cat:hover::after { opacity:1; }

/* animated gradient border on hover for premium cards */
.card, .kpi, .panel, .service, .adv, .stat {
  transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2), border-color var(--dur-2);
}
.card:hover, .kpi:hover, .panel:hover, .service:hover, .adv:hover, .stat:hover,
.product:hover, .news:hover { transform:translateY(-10px) scale(1.015); box-shadow:var(--sh-3); }
.cat { transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2); }
.cat:hover { transform:translateY(-8px); box-shadow:var(--sh-3); }

/* animated sweeping sheen on category cards */
.cat::before { content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);
  transform:translateX(-130%); transition:transform .9s var(--ease-out); }
.cat:hover::before { transform:translateX(130%); }

/* ---------- 7. BUTTONS: magnetic feel + press + loading + animated border ---------- */
.btn { position:relative; overflow:hidden; transition:transform var(--dur-1) var(--ease-out), background var(--dur-1), box-shadow var(--dur-1), filter var(--dur-1); }
.btn:hover { filter:brightness(1.05); }
.btn:active { transform:translateY(1px) scale(.96); }
.btn::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; opacity:0; transition:opacity var(--dur-2);
  background:linear-gradient(120deg,var(--brand),var(--ember),var(--brand)); background-size:200% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.btn:hover::before { opacity:1; animation:borderFlow 2.5s linear infinite; }
@keyframes borderFlow { to { background-position:200% 0; } }
.btn.is-loading { pointer-events:none; }
.btn.is-loading::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:translateX(-100%); animation:btnShimmer .9s infinite; }
@keyframes btnShimmer { to { transform:translateX(100%); } }

/* ---------- 8. INPUTS: focus lift + glow ---------- */
.input, .select, .textarea { transition:border-color var(--dur-1), box-shadow var(--dur-1), background var(--dur-1), transform var(--dur-1); }
.input:focus, .select:focus, .textarea:focus { outline:none; border-color:var(--brand); box-shadow:var(--glow-brand); transform:translateY(-1px); }
.field.invalid-shake { animation:shake .4s var(--ease-in-out); }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-8px)} 40%,80%{transform:translateX(8px)} }

/* ---------- 9. TOAST SPRING ---------- */
.toast { transition:transform .5s var(--ease-back), opacity .3s ease; }
.toast.is-shown { animation:toastIn .55s var(--ease-back); }
@keyframes toastIn { from{ transform:translateY(150%); opacity:0; } to{ transform:translateY(0); opacity:1; } }

/* ---------- 10. DRAWER / MOBILE MENU ---------- */
.drawer__panel { transition:transform .45s var(--ease-out); }
.drawer__scrim { transition:opacity .45s var(--ease-out); }
body.nav-open .drawer__panel { animation:drawerIn .45s var(--ease-out); }
@keyframes drawerIn { from{ transform:translateX(100%); } to{ transform:translateX(0); } }
/* drawer links stagger */
body.nav-open .drawer__panel .nav__link { animation:drawerLink .5s var(--ease-out) forwards; opacity:0; }
body.nav-open .drawer__panel .nav__link:nth-child(1){ animation-delay:.10s }
body.nav-open .drawer__panel .nav__link:nth-child(2){ animation-delay:.16s }
body.nav-open .drawer__panel .nav__link:nth-child(3){ animation-delay:.22s }
body.nav-open .drawer__panel .nav__link:nth-child(4){ animation-delay:.28s }
body.nav-open .drawer__panel .nav__link:nth-child(5){ animation-delay:.34s }
body.nav-open .drawer__panel .nav__link:nth-child(6){ animation-delay:.40s }
body.nav-open .drawer__panel .nav__link:nth-child(7){ animation-delay:.46s }
@keyframes drawerLink { from{ opacity:0; transform:translateX(30px); } to{ opacity:1; transform:none; } }

/* ---------- 11. MODAL / PANEL / AUTH CARD ---------- */
.modal, .auth__card, .calc-panel.is-active { animation:modalIn .5s var(--ease-back); }
@keyframes modalIn { from{ opacity:0; transform:translateY(24px) scale(.96); } to{ opacity:1; transform:none; } }
.auth__card[data-panel] { animation:authIn .6s var(--ease-out); }
@keyframes authIn { from{ opacity:0; transform:translateY(30px) scale(.97); filter:blur(8px); } to{ opacity:1; transform:none; filter:blur(0); } }
.modal-scrim { transition:opacity var(--dur-2); }
.modal-scrim.is-open { opacity:1; visibility:visible; }

/* ---------- 12. ADMIN SIDEBAR + CHARTS ---------- */
.sidebar { transition:transform .4s var(--ease-out); }
.kpi::before, .panel::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; opacity:0;
  background:linear-gradient(120deg,var(--brand),var(--ember)); background-size:200% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  transition:opacity var(--dur-2); }
.kpi:hover::before, .panel:hover::before { opacity:.9; animation:borderFlow 3s linear infinite; }

/* table row entrance */
.data tbody tr { animation:rowIn .5s var(--ease-out) both; }
.data tbody tr:nth-child(1){ animation-delay:.02s } .data tbody tr:nth-child(2){ animation-delay:.06s }
.data tbody tr:nth-child(3){ animation-delay:.10s } .data tbody tr:nth-child(4){ animation-delay:.14s }
.data tbody tr:nth-child(5){ animation-delay:.18s } .data tbody tr:nth-child(6){ animation-delay:.22s }
@keyframes rowIn { from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* loading skeleton shimmer */
.sk { background:linear-gradient(90deg, var(--bg-soft) 25%, #fff 37%, var(--bg-soft) 63%); background-size:400% 100%;
  animation:skel 1.4s ease infinite; border-radius:6px; }
@keyframes skel { 0%{ background-position:100% 0; } 100%{ background-position:-100% 0; } }

/* ---------- 13. CALCULATOR RESULT CHOREOGRAPHY ---------- */
.calc-result { transition:box-shadow var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.calc-result.is-filled { animation:resultReveal .7s var(--ease-out) both; }
@keyframes resultReveal {
  0%   { opacity:0; transform:translateY(18px) scale(.97); filter:blur(4px); }
  60%  { filter:blur(0); }
  85%  { transform:translateY(-2px) scale(1.01); } /* subtle settle */
  100% { opacity:1; transform:none; }
}
/* number count-up: the .rv is animated in JS (countUp). Keep it inline-block
   and DO NOT apply a competing transform here — the JS owns the number motion. */
.calc-result .rv { display:inline-block; }
/* tasteful gold glow on the filled result card (finite, fades to resting shadow) */
.calc-result.is-filled { box-shadow:0 22px 54px rgba(10,30,63,.30), 0 0 0 1px rgba(212,175,55,.32); }
.calc-result { box-shadow:var(--sh-3); }

/* calc tabs active indicator slide */
.calc-tab { position:relative; transition:all var(--dur-2) var(--ease-out); }
.calc-tab:hover { transform:translateY(-2px); }

/* ---------- 14. STAT COUNT-UP already driven in JS; add a subtle pop ---------- */
.stat__v, .kpi__v { display:inline-block; }

/* ---------- 15. SECTION ENTRANCE ACCENT SEAM ---------- */
.section--soft::after, .section--bg::after { content:""; display:block; height:2px; width:0; margin:0 auto;
  background:linear-gradient(90deg,transparent,var(--ember),transparent); transition:width 1.1s var(--ease-out); }
.section--soft.in::after, .section--bg.in::after { width:100%; }

/* parallax targets */
[data-parallax] { will-change:transform; }

/* extremely soft reduced handling: only soften the heaviest loops, NEVER hide content */
@media (prefers-reduced-motion:reduce) {
  .hero__orb, .hero__glow, .seam, .hero__seam, .particles span { animation-duration:40s !important; }
  .btn:hover::before, .kpi:hover::before, .panel:hover::before { animation:none !important; }
}