/* ============================================================
   HASMAN ENTERPRISE SOLUTIONS — assets/css/animations.css
   All keyframes, preloader, AOS overrides, scroll animations
   ============================================================ */

/* ── Preloader ──────────────────────────────────────────────── */
#preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  background: var(--color-navy-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s var(--ease-in), opacity 0.4s var(--ease-in);
}
#preloader.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
}
.preloader__logo {
  width: 160px;
  height: auto;
  animation: preloaderLogoIn 0.8s var(--ease-spring) 0.1s both;
}
@keyframes preloaderLogoIn {
  from { transform: scale(0.6) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.preloader__bar {
  width: 200px;
  height: 3px;
  background: rgba(255,255,255,0.12);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.preloader__fill {
  display: block;
  height: 100%;
  background: var(--grad-sky);
  border-radius: var(--radius-full);
  width: 0%;
  animation: preloaderFill 2s var(--ease-out) 0.3s forwards;
}
@keyframes preloaderFill {
  0%   { width: 0%; }
  40%  { width: 55%; }
  80%  { width: 85%; }
  100% { width: 100%; }
}

/* SVG arc draw (Hasman logo) */
.logo-arc {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: arcDraw 1.2s var(--ease-out) 0.2s forwards;
}
@keyframes arcDraw {
  to { stroke-dashoffset: 0; }
}

/* ── Keyframe Library ───────────────────────────────────────── */

/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Fade up */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade down */
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade left */
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Fade right */
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Scale in */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* Slide up (off-screen) */
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* Float (hero graphic loop) */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}

/* Pulse ring */
@keyframes pulseRing {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Spin */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Marquee scroll (competency strip) */
@keyframes marqueeLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Progress bar fill */
@keyframes barFill {
  from { width: 0 !important; }
}

/* SVG circle draw */
@keyframes circleDraw {
  from { stroke-dashoffset: var(--dash-total, 440); }
  to   { stroke-dashoffset: var(--dash-gap, 0); }
}

/* Timeline line draw */
@keyframes timelineGrow {
  from { height: 0; }
  to   { height: 100%; }
}

/* Word stagger (hero h1) */
@keyframes wordReveal {
  from { opacity: 0; transform: translateY(40px) rotateX(30deg); }
  to   { opacity: 1; transform: translateY(0) rotateX(0); }
}

/* Badge pop */
@keyframes badgePop {
  from { opacity: 0; transform: scale(0.5) translateY(-10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Scroll indicator bounce */
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0) translateX(-50%); opacity: 1; }
  50%       { transform: translateY(10px) translateX(-50%); opacity: 0.5; }
}

/* Shake (form error) */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

/* Countdown digit flip */
@keyframes digitFlip {
  0%   { transform: rotateX(0deg); }
  50%  { transform: rotateX(90deg); }
  100% { transform: rotateX(0deg); }
}

/* ── Utility Animation Classes ──────────────────────────────── */
.animate-fade-in   { animation: fadeIn  0.6s var(--ease-out) both; }
.animate-fade-up   { animation: fadeUp  0.7s var(--ease-out) both; }
.animate-fade-left { animation: fadeLeft 0.7s var(--ease-out) both; }
.animate-fade-right{ animation: fadeRight 0.7s var(--ease-out) both; }
.animate-scale-in  { animation: scaleIn 0.6s var(--ease-spring) both; }
.animate-float     { animation: float 3s ease-in-out infinite; }
.animate-spin      { animation: spin 1s linear infinite; }

/* Delay helpers */
.delay-100  { animation-delay: 100ms; }
.delay-200  { animation-delay: 200ms; }
.delay-300  { animation-delay: 300ms; }
.delay-400  { animation-delay: 400ms; }
.delay-500  { animation-delay: 500ms; }
.delay-600  { animation-delay: 600ms; }
.delay-800  { animation-delay: 800ms; }
.delay-1000 { animation-delay: 1000ms; }

/* ── AOS custom overrides ───────────────────────────────────── */
[data-aos] {
  pointer-events: none;
}
[data-aos].aos-animate {
  pointer-events: auto;
}

/* Custom AOS duration shorthand (use data-aos-duration on element) */

/* ── Hero elements ──────────────────────────────────────────── */
.hero__badge {
  animation: badgePop 0.6s var(--ease-spring) 0.3s both;
}
.hero__title .word {
  display: inline-block;
  overflow: hidden;
}
.hero__title .word-inner {
  display: inline-block;
  animation: wordReveal 0.8s var(--ease-out) both;
}

/* ── Marquee strip ──────────────────────────────────────────── */
.marquee {
  overflow: hidden;
  white-space: nowrap;
}
.marquee__track {
  display: inline-flex;
  gap: var(--sp-10);
  animation: marqueeLeft 28s linear infinite;
}
.marquee__track:hover { animation-play-state: paused; }

/* ── Particle canvas ────────────────────────────────────────── */
#particles-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ── Proficiency bar ────────────────────────────────────────── */
.proficiency-bar {
  height: 5px;
  background: rgba(0, 32, 96, 0.1);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: var(--sp-3);
}
.proficiency-bar__fill {
  height: 100%;
  background: var(--grad-sky);
  border-radius: var(--radius-full);
  width: 0%;
  transition: width 1.2s var(--ease-out);
}
.proficiency-bar__fill.is-filled {
  width: var(--bar-width, 80%);
}

/* ── Timeline line ──────────────────────────────────────────── */
.timeline__line-fill {
  width: 2px;
  height: 0;
  background: var(--grad-sky);
  transition: height 1.5s var(--ease-out);
}
.timeline__line-fill.is-drawn {
  height: 100%;
}

/* ── Scroll-reveal classes (JS toggled) ─────────────────────── */
.is-revealed {
  opacity: 1 !important;
  transform: none !important;
}

/* ── SVG Progress Ring ──────────────────────────────────────── */
.progress-ring__circle {
  stroke-dasharray: 440 440;
  stroke-dashoffset: 440;
  transition: stroke-dashoffset 1.8s var(--ease-out);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.progress-ring__circle.is-drawn {
  stroke-dashoffset: var(--ring-offset, 88); /* 80% filled = 440*0.2 */
}

/* ── Card lift transition ───────────────────────────────────── */
.card-lift {
  transition:
    transform   var(--duration-base) var(--ease-out),
    box-shadow  var(--duration-base) var(--ease-out);
}
.card-lift:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

/* ── Glow on hover ──────────────────────────────────────────── */
.glow-hover {
  transition: box-shadow var(--duration-base) var(--ease-out);
}
.glow-hover:hover {
  box-shadow: 0 0 0 3px rgba(0, 176, 240, 0.25), var(--shadow-sky);
}

/* ── Stat counter pulse ─────────────────────────────────────── */
.counter__number.is-counting {
  animation: none;
}

/* ── Form field shake ───────────────────────────────────────── */
.field-error { animation: shake 0.4s var(--ease-out); }

/* ── Success card slide ─────────────────────────────────────── */
.form-success {
  animation: scaleIn 0.5s var(--ease-spring) both;
}

/* ── 3D card flip (competencies) ───────────────────────────── */
.flip-card {
  perspective: 1000px;
}
.flip-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease-out);
}
.flip-card:hover .flip-card__inner {
  transform: rotateY(180deg);
}
.flip-card__front,
.flip-card__back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip-card__back {
  transform: rotateY(180deg);
}

/* ── Modal ──────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 46, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity     var(--duration-slow) var(--ease-out),
    visibility  var(--duration-slow);
}
.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.modal-overlay.is-open .modal {
  transform: scale(1);
  opacity: 1;
}
.modal {
  width: 95vw;
  max-width: 1100px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  transform: scale(0.85);
  opacity: 0;
  transition:
    transform  var(--duration-slow) var(--ease-spring),
    opacity    var(--duration-slow) var(--ease-out);
}

/* ── Scroll-to-top pulse ring ───────────────────────────────── */
.scroll-top::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  background: var(--accent);
  animation: pulseRing 2s ease-out infinite;
}

/* ── Nav dropdown chevron ───────────────────────────────────── */
.nav__dropdown > .nav__link svg {
  transition: transform var(--duration-fast) var(--ease-out);
}
.nav__dropdown:hover > .nav__link svg {
  transform: rotate(180deg);
}

/* ── Hero scroll indicator ──────────────────────────────────── */
.hero__scroll-indicator {
  position: absolute;
  bottom: var(--sp-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  color: rgba(255,255,255,0.5);
  font-size: var(--text-xs);
  font-family: var(--font-heading);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: scrollBounce 2s ease-in-out infinite 1.5s;
}
.hero__scroll-indicator svg {
  animation: none;
}