/* ============================================================
   DEVATSTACK — EFFECTS & ANIMATIONS LAYER
   Standalone file. Safe to remove without breaking style.css.
   ============================================================ */

/* ─── Custom Easing ─────────────────────────────── */
:root {
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Reveal Variants ──────────────────────────── */
.fx-fade-up    { opacity: 0; transform: translateY(30px);   transition: opacity .7s var(--ease-expo), transform .7s var(--ease-expo); }
.fx-fade-left  { opacity: 0; transform: translateX(-30px);  transition: opacity .7s var(--ease-expo), transform .7s var(--ease-expo); }
.fx-fade-right { opacity: 0; transform: translateX(30px);   transition: opacity .7s var(--ease-expo), transform .7s var(--ease-expo); }
.fx-fade-scale { opacity: 0; transform: scale(0.92);        transition: opacity .6s var(--ease-expo), transform .6s var(--ease-expo); }
.fx-slide-up   { opacity: 0; transform: translateY(50px);   transition: opacity .8s var(--ease-expo), transform .8s var(--ease-expo); }

.fx-fade-up.fx-in, .fx-fade-left.fx-in, .fx-fade-right.fx-in,
.fx-fade-scale.fx-in, .fx-slide-up.fx-in {
  opacity: 1; transform: none;
}

/* Stagger delay helpers */
.fx-delay-1 { transition-delay: 0.08s; }
.fx-delay-2 { transition-delay: 0.16s; }
.fx-delay-3 { transition-delay: 0.24s; }
.fx-delay-4 { transition-delay: 0.32s; }
.fx-delay-5 { transition-delay: 0.40s; }

/* ─── Hero Text Gradient Shimmer ───────────────── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.fx-shimmer {
  background: linear-gradient(90deg, var(--mint) 20%, #a7f3d0 45%, var(--mint) 60%, var(--sage) 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* ─── Floating / Levitation ─────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}
.fx-float { animation: float 4s ease-in-out infinite; }
.fx-float-slow { animation: float 6s ease-in-out infinite; }

/* ─── Pulsing Glow ──────────────────────────────── */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(82, 183, 136, 0.4); }
  50%       { box-shadow: 0 0 20px 6px rgba(82, 183, 136, 0.15); }
}
.fx-glow { animation: glow-pulse 3s ease-in-out infinite; }

/* ─── Animated Gradient Border ──────────────────── */
@keyframes border-spin {
  to { --border-angle: 360deg; }
}
@property --border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.fx-gradient-border {
  border: 1.5px solid transparent;
  background:
    linear-gradient(white, white) padding-box,
    conic-gradient(from var(--border-angle), #40916c 0%, #52b788 30%, #f4a261 60%, #40916c 100%) border-box;
  animation: border-spin 4s linear infinite;
}

/* ─── Typewriter Cursor ──────────────────────────── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.fx-cursor::after {
  content: '|';
  animation: blink 1s step-end infinite;
  color: var(--mint);
  margin-left: 2px;
}

/* ─── Card Hover Lift ───────────────────────────── */
.fx-lift {
  transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-spring);
}
.fx-lift:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 24px 48px rgba(11, 35, 24, 0.12);
}

/* ─── Tilt on Hover (JS controlled) ────────────── */
.fx-tilt {
  transform-style: preserve-3d;
  transition: transform .15s ease;
  will-change: transform;
}

/* ─── Magnetic Button Wrapper ───────────────────── */
.fx-magnetic {
  display: inline-block;
  transition: transform .4s var(--ease-expo);
}

/* ─── Parallax Layer ────────────────────────────── */
.fx-parallax {
  will-change: transform;
  transition: transform .1s linear;
}

/* ─── Number Counter ────────────────────────────── */
.fx-counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ─── Stat Bar Fill ─────────────────────────────── */
@keyframes bar-fill {
  from { width: 0 !important; }
  to   { width: var(--target-width, 100%); }
}
.fx-bar {
  width: 0;
  animation: bar-fill 1.2s var(--ease-expo) forwards;
  animation-play-state: paused;
}
.fx-bar.fx-in {
  animation-play-state: running;
}

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

/* ─── Smooth Underline Link ──────────────────────── */
.fx-link {
  position: relative;
  text-decoration: none;
}
.fx-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: currentColor;
  transition: width .3s var(--ease-smooth);
}
.fx-link:hover::after { width: 100%; }

/* ─── Hero Background Radial Animation ─────────── */
@keyframes bg-breathe {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50%       { opacity: 0.35; transform: scale(1.08); }
}
.fx-bg-breathe {
  animation: bg-breathe 6s ease-in-out infinite;
}

/* ─── Scroll Progress Bar ───────────────────────── */
#fx-scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--leaf), var(--mint), var(--sage));
  z-index: 9999; transition: width .1s linear; border-radius: 0 2px 2px 0;
}

/* Custom cursor removed — mouse effects are applied to the background instead. */


/* ─── Sticky Nav Scroll Effect ──────────────────── */
nav.fx-scrolled {
  background: rgba(11,35,24,0.98) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}

/* Page transition disabled — removed to prevent preloader-like blocking */


/* ─── Animated Dots (loader / decorative) ───────── */
@keyframes dot-bounce {
  0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
  40%            { transform: scale(1); opacity: 1; }
}
.fx-dots span {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--mint);
  border-radius: 50%;
  margin: 0 2px;
  animation: dot-bounce 1.4s ease-in-out infinite both;
}
.fx-dots span:nth-child(2) { animation-delay: 0.16s; }
.fx-dots span:nth-child(3) { animation-delay: 0.32s; }

/* ─── Responsive: reduce motion ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}