/* ============================================================
   SACCN Website — Animations Stylesheet v2 (FIXED)
   Powered with ❤️ by Blaxium (blaxium.com)
   ============================================================ */

/* ── IMPORTANT: Custom AOS CSS overrides have been REMOVED.
   The CDN aos.css handles all [data-aos] visibility correctly.
   Previously defined [data-aos="fade-up"] { opacity:0 } here
   could conflict and leave elements permanently hidden when
   the reduce-motion disable() function fired unexpectedly.    ── */

/* Reduced-motion safety: reveal everything instantly */
@media (prefers-reduced-motion: reduce) {
  [data-aos]             { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-aos].aos-animate { opacity: 1 !important; transform: none !important; }
}
.reduce-motion [data-aos]             { opacity: 1 !important; transform: none !important; transition: none !important; }
.reduce-motion [data-aos].aos-animate { opacity: 1 !important; transform: none !important; }

/* === LEAF DECORATIVE ELEMENTS === */
.deco-leaf { position: absolute; pointer-events: none; opacity: .06; z-index: 0; }
.deco-leaf-tl { top: -5%; left: -3%; width: 280px; transform: rotate(-25deg); }
.deco-leaf-br { bottom: -8%; right: -2%; width: 240px; transform: rotate(15deg) scaleX(-1); }

@keyframes leafFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  33%      { transform: translateY(-12px) rotate(3deg); }
  66%      { transform: translateY(-6px) rotate(-2deg); }
}

/* === HOVER UTILITIES === */
.hover-lift { transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease; will-change: transform; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }

.hover-underline { position: relative; padding-bottom: 2px; }
.hover-underline::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 0;
  height: 2px; background: var(--orange); transition: width .3s ease;
}
.hover-underline:hover::after { width: 100%; }

/* === GRADIENT BORDER === */
.gradient-border { position: relative; border-radius: var(--radius); }
.gradient-border::before {
  content: ''; position: absolute; inset: -2px;
  background: linear-gradient(135deg, var(--green-dark), var(--green-light), var(--orange), var(--green-light));
  background-size: 300% 300%; border-radius: calc(var(--radius) + 2px);
  z-index: -1; animation: borderGlow 4s ease infinite;
}
@keyframes borderGlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* === SHIMMER === */
.shimmer { position: relative; overflow: hidden; }
.shimmer::after {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  animation: shimmerMove 2.5s infinite;
}
@keyframes shimmerMove { to { left: 150%; } }

/* === TYPED CURSOR === */
.typed-cursor {
  display: inline-block; width: 3px; height: 1em;
  background: var(--orange); margin-left: 2px;
  animation: typedBlink .8s step-end infinite; vertical-align: text-bottom;
}
@keyframes typedBlink { 50% { opacity: 0; } }

/* === CSS FALLBACK PARTICLES (Three.js unavailable) === */
.hero-particles-fallback { position: absolute; inset: 0; overflow: hidden; }
.hero-particle {
  position: absolute; border-radius: 50%;
  animation: particleFloat linear infinite;
}
@keyframes particleFloat {
  from { transform: translateY(110vh) rotate(0deg);   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: .6; }
  to   { transform: translateY(-10vh) rotate(720deg); opacity: 0; }
}

/* === PROGRESS BAR FILL === */
.prog-bar  { height: 8px; border-radius: 4px; background: var(--border-color); overflow: hidden; margin-top: .5rem; }
.prog-fill { height: 100%; background: var(--gradient-cta); border-radius: 4px; width: 0; transition: width 1.5s cubic-bezier(.4,0,.2,1); }
.prog-fill.animate { width: var(--prog-width, 70%); }

/* === DEPTH CARD HOVER === */
.depth-card { transition: transform .4s ease, box-shadow .4s ease; will-change: transform; }
.depth-card:hover {
  transform: perspective(800px) rotateY(2deg) translateY(-4px);
  box-shadow: var(--shadow-hover);
}

/* === PULSE RING === */
.pulse-ring { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.pulse-ring::before {
  content: ''; position: absolute; width: 120%; height: 120%;
  border-radius: 50%; border: 2px solid var(--green-light);
  animation: pulseRing 2s ease-in-out infinite;
}
@keyframes pulseRing {
  0%   { transform: scale(1); opacity: .6; }
  100% { transform: scale(1.4); opacity: 0; }
}