/* ═══════════════════════════════════════════════════════
   AIAIYOO Effects Library
   Netflix-style hover, glow, glass, carousel, scroll FX
   Extracted from ENGINNE's 9.8/10 frontend
   ═══════════════════════════════════════════════════════ */

/* ── NETFLIX HOVER SCALE ── */
.fx-hover{transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s ease}
.fx-hover:hover{transform:scale(1.03) translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.1)}

/* ── GLOW EFFECT (ecosystem-colored) ── */
.fx-glow{position:relative}
.fx-glow::after{content:'';position:absolute;inset:-1px;border-radius:inherit;opacity:0;transition:opacity .3s;pointer-events:none;background:linear-gradient(135deg,var(--glow-color,rgba(27,122,61,.3)),transparent 60%)}
.fx-glow:hover::after{opacity:1}
.fx-glow-enginne{--glow-color:rgba(27,122,61,.2)}
.fx-glow-doctorr{--glow-color:rgba(11,110,79,.2)}
.fx-glow-experrt{--glow-color:rgba(139,92,246,.2)}
.fx-glow-alliance{--glow-color:rgba(230,126,34,.2)}

/* ── GLASS MORPHISM ── */
.fx-glass{background:rgba(255,255,255,.06);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1)}
.fx-glass-strong{background:rgba(255,255,255,.1);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.15)}

/* ── FADE IN ON SCROLL (IntersectionObserver) ── */
.fx-reveal{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1)}
.fx-reveal.visible{opacity:1;transform:translateY(0)}
.fx-reveal-left{opacity:0;transform:translateX(-24px);transition:opacity .6s ease,transform .6s ease}
.fx-reveal-left.visible{opacity:1;transform:translateX(0)}
.fx-reveal-right{opacity:0;transform:translateX(24px);transition:opacity .6s ease,transform .6s ease}
.fx-reveal-right.visible{opacity:1;transform:translateX(0)}
.fx-reveal-scale{opacity:0;transform:scale(.92);transition:opacity .5s ease,transform .5s ease}
.fx-reveal-scale.visible{opacity:1;transform:scale(1)}

/* Stagger delays for grids */
.fx-stagger > :nth-child(1){transition-delay:.05s}
.fx-stagger > :nth-child(2){transition-delay:.1s}
.fx-stagger > :nth-child(3){transition-delay:.15s}
.fx-stagger > :nth-child(4){transition-delay:.2s}
.fx-stagger > :nth-child(5){transition-delay:.25s}
.fx-stagger > :nth-child(6){transition-delay:.3s}
.fx-stagger > :nth-child(7){transition-delay:.35s}
.fx-stagger > :nth-child(8){transition-delay:.4s}

/* ── AUTO-SCROLL CAROUSEL ── */
.fx-carousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-ms-overflow-style:none;scrollbar-width:none;padding:8px 0}
.fx-carousel::-webkit-scrollbar{display:none}
.fx-carousel > *{scroll-snap-align:start;flex-shrink:0}
.fx-carousel-auto{animation:carouselScroll 30s linear infinite}
.fx-carousel-auto:hover{animation-play-state:paused}
@keyframes carouselScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── GRADIENT BORDER ── */
.fx-gradient-border{position:relative;border-radius:var(--radius,10px);padding:1px}
.fx-gradient-border::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,var(--ac,#1b7a3d),var(--gold,#d4a843));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* ── PULSE DOT (status indicators) ── */
.fx-pulse{width:8px;height:8px;border-radius:50%;position:relative}
.fx-pulse::after{content:'';position:absolute;inset:-4px;border-radius:50%;background:inherit;opacity:.3;animation:pulseFx 2s infinite}
@keyframes pulseFx{0%,100%{transform:scale(1);opacity:.3}50%{transform:scale(1.8);opacity:0}}
.fx-pulse-green{background:#22c55e}
.fx-pulse-yellow{background:#eab308}
.fx-pulse-red{background:#ef4444}
.fx-pulse-blue{background:#3b82f6}

/* ── NUMBER COUNTER (animate on scroll) ── */
.fx-counter{font-variant-numeric:tabular-nums}

/* ── SHIMMER TEXT (loading state) ── */
.fx-shimmer-text{background:linear-gradient(90deg,var(--fg,#111) 0%,var(--ac,#1b7a3d) 50%,var(--fg,#111) 100%);background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmerText 3s linear infinite}
@keyframes shimmerText{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── TILT EFFECT (3D card tilt on hover) ── */
.fx-tilt{transition:transform .3s ease;transform-style:preserve-3d;perspective:1000px}

/* ── MARQUEE ── */
.fx-marquee{overflow:hidden;white-space:nowrap}
.fx-marquee-inner{display:inline-block;animation:marquee 20s linear infinite}
.fx-marquee:hover .fx-marquee-inner{animation-play-state:paused}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── SKELETON LOADING BARS ── */
.fx-skeleton{border-radius:6px;background:linear-gradient(90deg,var(--sf,#f5f3ee) 25%,var(--bd,#e8e5de) 50%,var(--sf,#f5f3ee) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}
.fx-skeleton-text{height:14px;width:80%;margin-bottom:8px}
.fx-skeleton-title{height:20px;width:60%;margin-bottom:12px}
.fx-skeleton-avatar{width:40px;height:40px;border-radius:50%}
.fx-skeleton-card{height:180px;width:100%}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── DARK MODE OVERRIDES ── */
@media(prefers-color-scheme:dark){
  .fx-glass{background:rgba(0,0,0,.3);border-color:rgba(255,255,255,.08)}
  .fx-glass-strong{background:rgba(0,0,0,.4);border-color:rgba(255,255,255,.1)}
}

/* ── NX-FADE (used by effects-enhancer.js IntersectionObserver) ──
   The JS applies inline opacity:0 then adds .nx-fade when the element
   scrolls into view. Without this rule, elements stay invisible forever. */
.nx-fade{opacity:1 !important;transform:translateY(0);transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1)}
.nx-d1{transition-delay:.05s}
.nx-d2{transition-delay:.10s}
.nx-d3{transition-delay:.15s}
.nx-d4{transition-delay:.20s}
.nx-d5{transition-delay:.25s}

/* Safety net: if JS fails to fire or IntersectionObserver is unsupported,
   reveal cards after 1.5s so content is never permanently invisible. */
@keyframes nxSafetyReveal{to{opacity:1}}
.card,.kpi,.show-card,.comp-card,.tier,.exam-card,.step,.flippa-card,.val-card,.role-card{animation:nxSafetyReveal 0s linear 1.5s forwards}