/* ============================================================
   ASTTO Portal — Animations & Transitions
   ============================================================ */

/* ─── Keyframes ──────────────────────────────────────────── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

@keyframes pulse-green {
  0%, 100% { box-shadow: 0 6px 24px rgba(37,211,102,.4); }
  50%       { box-shadow: 0 6px 40px rgba(37,211,102,.65); }
}

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

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes shimmer {
  0%   { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

@keyframes countUp {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─── Reveal on scroll ───────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(.95);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* Staggered reveals for grids */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal-stagger > *.revealed {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger > *:nth-child(2) { transition-delay: .1s; }
.reveal-stagger > *:nth-child(3) { transition-delay: .2s; }
.reveal-stagger > *:nth-child(4) { transition-delay: .3s; }
.reveal-stagger > *:nth-child(5) { transition-delay: .4s; }
.reveal-stagger > *:nth-child(6) { transition-delay: .5s; }

/* ─── Hero animations ────────────────────────────────────── */
.hero-content > * { animation: fadeInUp .8s ease both; }
.hero-badge   { animation-delay: .1s; }
.hero-title   { animation-delay: .25s; }
.hero-typing  { animation-delay: .4s; }
.hero-desc    { animation-delay: .5s; }
.hero-btns    { animation-delay: .6s; }
.hero-stats   { animation-delay: .7s; }
.hero-image-wrap { animation: fadeInRight .9s .2s ease both; }

/* ─── Skeleton / Shimmer ─────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
  background-size: 1000px 100%;
  animation: shimmer 1.8s infinite linear;
  border-radius: var(--radius-sm);
}
.skeleton-text  { height: 14px; margin-bottom: .5rem; }
.skeleton-title { height: 22px; width: 70%; margin-bottom: .75rem; }
.skeleton-img   { height: 200px; width: 100%; border-radius: var(--radius); }

/* ─── Hover lift ─────────────────────────────────────────── */
.hover-lift { transition: transform .3s ease, box-shadow .3s ease; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(11,61,145,.15); }

/* ─── Smooth page transition ─────────────────────────────── */
.page-enter { animation: fadeIn .4s ease both; }

/* ─── Counter animation ──────────────────────────────────── */
.counter { animation: countUp .6s ease; }

/* ─── Typewriter cursor ──────────────────────────────────── */
.typed-text { display: inline; }
.typed-cursor { display: inline; animation: blink 1s step-end infinite; color: var(--gold); }

/* ─── Image lazy load fade ───────────────────────────────── */
img[data-src] { opacity: 0; transition: opacity .4s ease; }
img[data-src].loaded { opacity: 1; }

/* ─── Smooth scroll ──────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ─── Modal animations ───────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px); z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-box {
  background: var(--white); border-radius: var(--radius-xl);
  max-width: 90vw; max-height: 90vh; overflow-y: auto;
  padding: 2.5rem; box-shadow: var(--shadow-xl);
  transform: scale(.92); transition: transform .3s ease;
  position: relative;
}
.modal-overlay.open .modal-box { transform: scale(1); }
.modal-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--gray-100); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; transition: all var(--transition);
}
.modal-close:hover { background: var(--gray-200); }

/* ─── Lightbox ───────────────────────────────────────────── */
.lightbox-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.92);
  z-index: 10001; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.lightbox-overlay.open { opacity: 1; pointer-events: all; }
.lightbox-img { max-width: 90vw; max-height: 85vh; border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.5); animation: scaleIn .3s ease; }
.lightbox-close { position: absolute; top: 1.5rem; right: 1.5rem; color: var(--white); font-size: 1.5rem; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; }

/* ─── Preloader ──────────────────────────────────────────── */
#preloader {
  position: fixed; inset: 0; background: var(--white);
  z-index: 99999; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 1rem;
  transition: opacity .4s ease, visibility .4s;
}
#preloader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-logo { font-size: 2rem; color: var(--blue); animation: pulse 1s ease-in-out infinite; }
.preloader-bar { width: 200px; height: 3px; background: var(--gray-200); border-radius: 2px; overflow: hidden; }
.preloader-progress { height: 100%; background: linear-gradient(90deg, var(--blue), var(--gold)); border-radius: 2px; animation: progress-load 1.5s ease forwards; }
@keyframes progress-load { from { width: 0; } to { width: 100%; } }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }