/* ============================================================
   InfyTech — v1.1 Premium Motion & Interaction Layer
   Additive only. Targets existing classes. No markup/content changes.
   GPU-only (transform/opacity/filter). Subtle, Linear/Stripe/Vercel-grade.
   Full prefers-reduced-motion kill switch at the bottom.
   ============================================================ */
:root{
  --ease-premium: cubic-bezier(0.16,1,0.3,1);
  --ease-soft: cubic-bezier(0.22,1,0.36,1);
  --mo-fast: 0.18s;
  --mo-med: 0.32s;
  --mo-slow: 0.55s;
}

/* ---------- Page enter (opacity fade) — extends existing page-ready. No transform on body (keeps fixed nav stable). ---------- */
body{transition: opacity var(--mo-slow) var(--ease-premium);}
/* Page leave (quick fade) — set by motion.js on internal navigation */
body.pt-leaving{opacity:0 !important; transition: opacity 0.24s ease !important;}

/* ---------- Buttons: glow, depth, press, magnetic-ready ---------- */
.btn{transition: transform var(--mo-fast) var(--ease-premium), box-shadow var(--mo-med) var(--ease-premium), background-color var(--mo-med), border-color var(--mo-med), filter var(--mo-med); will-change: transform;}
.btn-primary{position:relative;}
.btn-primary::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(0,174,239,0.0);transition:box-shadow var(--mo-med) var(--ease-premium);pointer-events:none;}
.btn-primary:hover{transform: translateY(-2px);}
.btn-primary:hover::after{box-shadow:0 10px 30px rgba(0,174,239,0.38), 0 0 22px rgba(123,97,255,0.25);}
.btn-primary:active{transform: translateY(0) scale(0.972); transition-duration:0.08s;}
.btn-ghost{position:relative;}
.btn-ghost:hover{transform: translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,0.28); border-color: rgba(0,174,239,0.4);}
.btn-ghost:active{transform: translateY(0) scale(0.98); transition-duration:0.08s;}
.btn.is-magnetic{will-change: transform;}

/* ---------- Cards: lift, gradient border, cursor-follow light, 3D-tilt-ready ---------- */
.card,.portfolio-card,.case-card,.pricing-card,.ind{
  transition: transform var(--mo-med) var(--ease-premium), box-shadow var(--mo-med) var(--ease-premium), border-color var(--mo-med);
  transform-style: preserve-3d; will-change: transform; position:relative;
}
/* hover lift (JS overrides with tilt+lift on fine pointers; this is the fallback/baseline) */
.card:hover,.ind:hover,.pricing-card:hover{transform: translateY(-4px); box-shadow:0 20px 44px rgba(0,0,0,0.32);}
.portfolio-card:hover,.case-card:hover{box-shadow:0 22px 50px rgba(0,0,0,0.34);}
/* gradient border on hover (mask trick — no markup) */
.card::after,.ind::after,.portfolio-card::after,.pricing-card::after,.case-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg, rgba(0,174,239,0.65), rgba(123,97,255,0.55) 60%, transparent);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition: opacity var(--mo-med) var(--ease-premium); pointer-events:none; z-index:2;
}
.card:hover::after,.ind:hover::after,.portfolio-card:hover::after,.pricing-card:hover::after,.case-card:hover::after{opacity:1;}
/* soft cursor-follow light (JS sets --mx/--my) */
.card::before,.ind::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(0,174,239,0.10), transparent 60%);
  opacity:0; transition: opacity var(--mo-med); pointer-events:none; z-index:1;
}
.card:hover::before,.ind:hover::before{opacity:1;}
.card>*,.ind>*{position:relative; z-index:1;}

/* ---------- Card icons: micro lift on card hover ---------- */
.card .card-icon{transition: transform var(--mo-med) var(--ease-premium), color var(--mo-med);}
.card:hover .card-icon{transform: translateY(-2px) scale(1.06);}

/* ---------- Navigation: alive on scroll ---------- */
.nav{transition: background-color var(--mo-med) var(--ease-premium), backdrop-filter var(--mo-med), box-shadow var(--mo-med) var(--ease-premium), border-color var(--mo-med); will-change: background-color;}
.nav.scrolled{background-color: rgba(5,15,30,0.82); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow:0 8px 34px rgba(0,0,0,0.34); border-bottom-color: rgba(255,255,255,0.08);}
/* nav link underline grow */
.nav .nav-links a,.nav a.nav-link{position:relative; transition: color var(--mo-fast);}
.nav .nav-links a::after,.nav a.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1.5px;border-radius:2px;background:linear-gradient(90deg,#00aeef,#7b61ff);transform: scaleX(0); transform-origin:left; transition: transform var(--mo-med) var(--ease-premium);}
.nav .nav-links a:hover::after,.nav a.nav-link:hover::after{transform: scaleX(1);}

/* ---------- Links (inline + card-link) ---------- */
.card-link{transition: transform var(--mo-fast) var(--ease-premium), gap var(--mo-fast);}
.card:hover .card-link{transform: translateX(3px);}
.portfolio-btn,.btn-ghost{transition: transform var(--mo-fast) var(--ease-premium), box-shadow var(--mo-med), border-color var(--mo-med), background-color var(--mo-med);}

/* ---------- Scroll reveal choreography (enhances existing .scroll-reveal / .stagger-children) ---------- */
.scroll-reveal{opacity:0; transform: translateY(22px); transition: opacity 0.7s var(--ease-premium), transform 0.7s var(--ease-premium); will-change: transform, opacity;}
.scroll-reveal.in-view{opacity:1; transform:none;}
.stagger-children > *{opacity:0; transform: translateY(18px); transition: opacity 0.6s var(--ease-premium), transform 0.6s var(--ease-premium);}
.stagger-children.stagger-in > *{opacity:1; transform:none;}
.stagger-children.stagger-in > *:nth-child(1){transition-delay:0.04s}
.stagger-children.stagger-in > *:nth-child(2){transition-delay:0.10s}
.stagger-children.stagger-in > *:nth-child(3){transition-delay:0.16s}
.stagger-children.stagger-in > *:nth-child(4){transition-delay:0.22s}
.stagger-children.stagger-in > *:nth-child(5){transition-delay:0.28s}
.stagger-children.stagger-in > *:nth-child(6){transition-delay:0.34s}
.stagger-children.stagger-in > *:nth-child(7){transition-delay:0.40s}
.stagger-children.stagger-in > *:nth-child(8){transition-delay:0.46s}

/* ---------- Hero: very subtle animated background (injected .hero-fx) ---------- */
.hero,.page-head{position:relative;}
.hero > .container,.page-head > .container{position:relative; z-index:1;}
.hero-fx{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.hero-fx::before{content:""; position:absolute; inset:-40%;
  background:radial-gradient(closest-side at 28% 30%, rgba(0,174,239,0.10), transparent 70%),
             radial-gradient(closest-side at 74% 64%, rgba(123,97,255,0.09), transparent 72%);
  animation: hero-drift 26s ease-in-out infinite alternate;}
.hero-fx::after{content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask:radial-gradient(ellipse 80% 70% at 50% 40%, #000 35%, transparent 78%);
  mask:radial-gradient(ellipse 80% 70% at 50% 40%, #000 35%, transparent 78%);
  animation: hero-grid 34s linear infinite;}
@keyframes hero-drift{to{transform: translate(4%, 3%) scale(1.08);}}
@keyframes hero-grid{to{background-position:46px 46px, 46px 46px;}}

/* ---------- Dashboards: live pulse + reveal-grow charts + hover ---------- */
@keyframes live-pulse{0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(52,211,153,0.55);} 50%{opacity:0.65; box-shadow:0 0 0 7px rgba(52,211,153,0);}}
.db-bar .meta i{animation: live-pulse 2.4s var(--ease-premium) infinite;}
.db,.pc,.fd{transition: transform var(--mo-med) var(--ease-premium), box-shadow var(--mo-med) var(--ease-premium);}
.db:hover,.pc:hover,.fd:hover{transform: translateY(-3px); box-shadow:0 36px 90px rgba(0,174,239,0.22);}
/* progress/chart fills animate width on reveal (motion.js toggles .chart-armed -> .chart-go) */
.fill,.lf,.pc-fill,.of{transition: width 1.15s var(--ease-soft);}
.chart-armed .fill,.chart-armed .lf,.chart-armed .pc-fill,.chart-armed .of{width:0 !important;}
.chart-go .fill,.chart-go .lf,.chart-go .pc-fill,.chart-go .of{/* width restored inline by JS */}
/* dashboard row hover micro-interaction */
.hc-appt,.mf-line,.fn-row,.lg-ship,.rt-p,.hs-bk,.re-l,.td-j,.pc-proj{transition: background-color var(--mo-fast), transform var(--mo-fast) var(--ease-premium), border-color var(--mo-fast);}
.hc-appt:hover,.mf-line:hover,.fn-row:hover,.lg-ship:hover,.rt-p:hover,.hs-bk:hover,.re-l:hover,.td-j:hover,.pc-proj:hover{transform: translateX(3px); border-color: rgba(0,174,239,0.35);}

/* ---------- Forms: focus glow + states ---------- */
.popup-form input,.popup-form textarea{transition: border-color var(--mo-fast) var(--ease-premium), box-shadow var(--mo-med) var(--ease-premium), background-color var(--mo-fast); will-change: box-shadow;}
.popup-form input:focus,.popup-form textarea:focus{border-color: var(--blue, #00aeef); box-shadow:0 0 0 3px rgba(0,174,239,0.16); outline:none;}
/* loading spinner + success (motion.js drives .is-loading / .is-success on the submit button) */
.popup-form button[type="submit"]{position:relative; transition: transform var(--mo-fast) var(--ease-premium), background-color var(--mo-med), opacity var(--mo-med);}
.popup-form button.is-loading{color: transparent !important; pointer-events:none;}
.popup-form button.is-loading::after{content:""; position:absolute; top:50%; left:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border:2px solid rgba(255,255,255,0.35); border-top-color:#fff; border-radius:50%; animation: btn-spin 0.7s linear infinite;}
@keyframes btn-spin{to{transform: rotate(360deg);}}
.popup-form button.is-success{background:linear-gradient(135deg,#16a34a,#22c55e) !important; color:#fff !important; pointer-events:none;}
.popup-form .form-success-msg{margin-top:12px; font-size:13px; color:#34d399; text-align:center; opacity:0; transform: translateY(4px); transition: opacity var(--mo-med), transform var(--mo-med);}
.popup-form .form-success-msg.show{opacity:1; transform:none;}

/* ---------- Cursor glow (fine pointers only; injected .cursor-glow) ---------- */
.cursor-glow{position:fixed; top:0; left:0; width:460px; height:460px; border-radius:50%; transform: translate3d(-50%,-50%,0); pointer-events:none; z-index:60; opacity:0; transition: opacity 0.4s ease; mix-blend-mode:screen; background:radial-gradient(circle, rgba(0,174,239,0.07), rgba(123,97,255,0.04) 40%, transparent 62%);}
.cursor-glow.on{opacity:1;}

/* ---------- Floating action button: gentle attention ---------- */
.fab-stack,.fab,.float-cta{transition: transform var(--mo-med) var(--ease-premium), box-shadow var(--mo-med) var(--ease-premium);}
.fab-stack:hover,.fab:hover,.float-cta:hover{transform: translateY(-3px) scale(1.03);}

/* ============================================================
   ACCESSIBILITY — prefers-reduced-motion: full kill switch
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .hero-fx,.cursor-glow{display:none !important;}
  .scroll-reveal,.stagger-children > *{opacity:1 !important; transform:none !important;}
  body:not(.page-ready){transform:none !important;}
  .btn:hover,.card:hover,.ind:hover,.db:hover,.pc:hover,.fd:hover,.pricing-card:hover,.fab-stack:hover{transform:none !important;}
}