/* ============================================
   WORKFACILIT v2 — Animations & Effects
   Scroll-driven, parallax, reveals, 3D tilts
   ============================================ */

/* ── Scroll Reveal ── */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 0.7s var(--wf-ease), transform 0.7s var(--wf-ease)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal--left{transform:translateX(-40px)}
.reveal--left.is-visible{transform:translateX(0)}
.reveal--right{transform:translateX(40px)}
.reveal--right.is-visible{transform:translateX(0)}
.reveal--scale{transform:scale(0.92);transform-origin:center}
.reveal--scale.is-visible{transform:scale(1)}

/* Stagger delays */
[data-delay="1"]{transition-delay:0.08s}
[data-delay="2"]{transition-delay:0.16s}
[data-delay="3"]{transition-delay:0.24s}
[data-delay="4"]{transition-delay:0.32s}
[data-delay="5"]{transition-delay:0.4s}
[data-delay="6"]{transition-delay:0.48s}
[data-delay="7"]{transition-delay:0.56s}
[data-delay="8"]{transition-delay:0.64s}

/* ── Text Split Reveal ── */
.text-reveal{overflow:hidden;display:inline-block}
.text-reveal__inner{display:inline-block;transform:translateY(110%);
  transition:transform 0.8s var(--wf-ease)}
.text-reveal.is-visible .text-reveal__inner{transform:translateY(0)}

/* ── Line Draw ── */
.line-draw{width:0;height:2px;background:var(--wf-grad-hero);
  transition:width 1.2s var(--wf-ease)}
.line-draw.is-visible{width:100%}

/* ── Glow Pulse ── */
@keyframes glowPulse{
  0%,100%{opacity:0.4;transform:scale(1)}
  50%{opacity:0.7;transform:scale(1.05)}
}

/* ── Float ── */
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-16px)}
}

/* ── Orbit ── */
@keyframes orbit{
  0%{transform:rotate(0deg) translateX(var(--orbit-r,120px)) rotate(0deg)}
  100%{transform:rotate(360deg) translateX(var(--orbit-r,120px)) rotate(-360deg)}
}

/* ── Spin slow ── */
@keyframes spin-slow{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}

/* ── Morph Blob ── */
@keyframes morph{
  0%,100%{border-radius:60% 40% 30% 70% / 60% 30% 70% 40%}
  25%{border-radius:30% 60% 70% 40% / 50% 60% 30% 60%}
  50%{border-radius:50% 60% 30% 60% / 40% 70% 60% 30%}
  75%{border-radius:40% 70% 60% 30% / 60% 40% 30% 70%}
}

/* ── Gradient Sweep (for borders) ── */
@keyframes gradSweep{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* ── Marquee ── */
@keyframes marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* ── Typewriter cursor ── */
@keyframes blink{
  0%,100%{opacity:1}
  50%{opacity:0}
}
.cursor{display:inline-block;width:3px;height:1em;background:var(--wf-primary-light);
  margin-left:4px;animation:blink 0.8s step-end infinite;vertical-align:middle}

/* ── Hero Noise Overlay ── */
.noise{position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:256px 256px;z-index:1}

/* ── Aurora BG ── */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  animation:aurora-shift 25s ease-in-out infinite}
@keyframes aurora-shift{
  0%{filter:hue-rotate(0deg) brightness(1)}
  25%{filter:hue-rotate(30deg) brightness(1.05)}
  50%{filter:hue-rotate(-20deg) brightness(0.95)}
  75%{filter:hue-rotate(15deg) brightness(1.08)}
  100%{filter:hue-rotate(0deg) brightness(1)}
}
.aurora__blob{position:absolute;border-radius:50%;filter:blur(120px);opacity:0.4;
  will-change:transform,opacity}
.aurora__blob--1{width:700px;height:700px;background:var(--wf-primary);
  top:-20%;left:-10%;animation:aurora-drift-1 18s ease-in-out infinite}
.aurora__blob--2{width:600px;height:600px;background:var(--wf-cyan);
  top:5%;right:-15%;animation:aurora-drift-2 22s ease-in-out infinite 2s}
.aurora__blob--3{width:500px;height:500px;background:var(--wf-emerald);
  bottom:-15%;left:25%;opacity:0.25;animation:aurora-drift-3 20s ease-in-out infinite 5s}
.aurora__blob--4{width:450px;height:450px;background:var(--wf-rose);
  bottom:15%;right:10%;opacity:0.15;animation:aurora-drift-4 16s ease-in-out infinite 3s}

@keyframes aurora-drift-1{
  0%{transform:translate(0,0) scale(1);opacity:0.4}
  25%{transform:translate(15vw,8vh) scale(1.2);opacity:0.5}
  50%{transform:translate(25vw,15vh) scale(0.9);opacity:0.35}
  75%{transform:translate(10vw,-5vh) scale(1.1);opacity:0.45}
  100%{transform:translate(0,0) scale(1);opacity:0.4}
}
@keyframes aurora-drift-2{
  0%{transform:translate(0,0) scale(1);opacity:0.35}
  30%{transform:translate(-20vw,12vh) scale(1.3);opacity:0.45}
  60%{transform:translate(-10vw,20vh) scale(0.8);opacity:0.3}
  100%{transform:translate(0,0) scale(1);opacity:0.35}
}
@keyframes aurora-drift-3{
  0%{transform:translate(0,0) scale(1);opacity:0.25}
  35%{transform:translate(20vw,-10vh) scale(1.15);opacity:0.35}
  65%{transform:translate(-15vw,-5vh) scale(1.05);opacity:0.2}
  100%{transform:translate(0,0) scale(1);opacity:0.25}
}
@keyframes aurora-drift-4{
  0%{transform:translate(0,0) scale(1);opacity:0.15}
  40%{transform:translate(-25vw,-15vh) scale(1.25);opacity:0.28}
  70%{transform:translate(-5vw,10vh) scale(0.9);opacity:0.12}
  100%{transform:translate(0,0) scale(1);opacity:0.15}
}

/* ── 3D Card Tilt ── */
.tilt{transform-style:preserve-3d;perspective:1000px;transition:transform 300ms var(--wf-ease)}

/* ── Magnetic Hover ── */
.magnetic{transition:transform 300ms var(--wf-ease)}

/* ── Count Up ── */
.count-up{font-variant-numeric:tabular-nums}

/* ── Horizontal Scroll ── */
.h-scroll{display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:1rem 0;-ms-overflow-style:none;scrollbar-width:none}
.h-scroll::-webkit-scrollbar{display:none}
.h-scroll>*{scroll-snap-align:start;flex-shrink:0}

/* ── Glass Morphism Card ── */
.glass{background:rgba(255,255,255,0.03);backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.06)}

/* ── Animated border gradient ── */
.glow-border{position:relative}
.glow-border::before{content:'';position:absolute;inset:-1px;border-radius:inherit;
  padding:1px;background:linear-gradient(135deg,var(--wf-primary),var(--wf-cyan),var(--wf-emerald),var(--wf-primary));
  background-size:300% 300%;animation:gradSweep 4s ease infinite;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:0;transition:opacity 400ms}
.glow-border:hover::before{opacity:1}

/* ── Responsive Motion Preference ── */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
  .reveal{opacity:1;transform:none}
}