/* INTEGRA — Animations & Micro-interactions */

/* ── Fade & slide in (scroll-triggered via JS IntersectionObserver) ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(.22,.68,0,1.2),
              transform 0.6s cubic-bezier(.22,.68,0,1.2);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left  { transform: translateX(-32px); }
.reveal-right { transform: translateX(32px); }
.reveal-left.visible, .reveal-right.visible { transform: translateX(0); }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }
.reveal-delay-5 { transition-delay: .40s; }

/* ── Page transition overlay ── */
.page-transition {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--color-primary-green);
  transform: scaleY(1);
  transform-origin: top;
  animation: page-out 0.45s cubic-bezier(.76,0,.24,1) forwards;
}
@keyframes page-out {
  0%   { transform: scaleY(1); transform-origin: top; }
  100% { transform: scaleY(0); transform-origin: top; }
}
.page-transition--exit {
  transform: scaleY(0);
  animation: page-in 0.4s cubic-bezier(.76,0,.24,1) forwards;
}
@keyframes page-in {
  0%   { transform: scaleY(0); transform-origin: bottom; }
  100% { transform: scaleY(1); transform-origin: bottom; }
}

/* ── Hero text shimmer ── */
.hero-shimmer {
  background: linear-gradient(90deg,
    var(--color-primary-green) 0%,
    var(--color-primary-purple) 50%,
    var(--color-primary-green) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ── Floating badge pulse ── */
.pulse-dot {
  width: 8px; height: 8px;
  background: var(--color-primary-green);
  border-radius: 50%;
  display: inline-block;
  position: relative;
}
.pulse-dot::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  background: var(--color-primary-green);
  opacity: .4;
  animation: pulse-ring 1.8s ease-out infinite;
}
@keyframes pulse-ring {
  0%   { transform: scale(.6); opacity: .6; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* ── Card hover lift (enhanced) ── */
.card-lift {
  transition: box-shadow .28s cubic-bezier(.4,0,.2,1),
              transform .28s cubic-bezier(.4,0,.2,1);
}
.card-lift:hover {
  box-shadow: 0 12px 32px rgba(0,128,0,.12), 0 4px 8px rgba(0,0,0,.06);
  transform: translateY(-4px);
}

/* ── Button ripple ── */
.btn { position: relative; overflow: hidden; }
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  transform: scale(0);
  animation: ripple-anim .5s linear;
  pointer-events: none;
}
@keyframes ripple-anim {
  to { transform: scale(4); opacity: 0; }
}

/* ── Skeleton loader ── */
.skeleton {
  background: linear-gradient(90deg, var(--color-surface) 25%, var(--color-border) 50%, var(--color-surface) 75%);
  background-size: 200% 100%;
  animation: skeleton-shine 1.4s infinite;
  border-radius: var(--radius-md);
}
@keyframes skeleton-shine {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Counter number animation (JS-driven) ── */
.count-up { font-variant-numeric: tabular-nums; }

/* ── Typing cursor ── */
.typing-cursor::after {
  content: '|';
  animation: blink .8s step-end infinite;
  color: var(--color-primary-green);
}
@keyframes blink { 50% { opacity: 0; } }

/* ── Notification toast ── */
.toast {
  position: fixed; bottom: var(--space-xl); right: var(--space-xl);
  z-index: var(--z-toast);
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-md) var(--space-xl);
  background: var(--color-text);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  font-size: var(--font-size-sm);
  max-width: 380px;
  transform: translateY(120px);
  opacity: 0;
  transition: transform .35s cubic-bezier(.22,.68,0,1.2), opacity .3s ease;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast--success .toast__icon { color: #4ade80; }
.toast--error   .toast__icon { color: #f87171; }
.toast--info    .toast__icon { color: #60a5fa; }

/* ── Stats counter card ── */
.stat-counter {
  display: inline-block;
  transition: transform .2s;
}
.stat-counter.bump { animation: bump .3s cubic-bezier(.22,.68,0,1.5); }
@keyframes bump {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ── Smooth section divider wave ── */
.wave-divider {
  width: 100%;
  overflow: hidden;
  line-height: 0;
  margin-bottom: -1px;
}
.wave-divider svg { display: block; width: 100%; }

/* ── Modal backdrop ── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .25s ease;
}
.modal-backdrop.open { opacity: 1; }
.modal {
  position: fixed; z-index: var(--z-modal);
  top: 50%; left: 50%;
  transform: translate(-50%, -46%) scale(.95);
  opacity: 0;
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--space-2xl);
  width: min(520px, 94vw);
  transition: transform .3s cubic-bezier(.22,.68,0,1.2), opacity .25s ease;
  max-height: 90vh;
  overflow-y: auto;
}
.modal.open { transform: translate(-50%,-50%) scale(1); opacity: 1; }

/* ── Professional online indicator ── */
.online-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--font-size-xs);
  color: var(--color-success);
}

/* ── Glassmorphism stat card (admin) ── */
.glass-card {
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.8);
}

/* ── Progress bar ── */
.progress-bar {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  overflow: hidden;
}
.progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary-green), var(--color-primary-purple));
  border-radius: var(--radius-full);
  transition: width 1s cubic-bezier(.22,.68,0,1);
}

/* ── Hover underline link ── */
.hover-underline {
  position: relative; text-decoration: none;
}
.hover-underline::after {
  content: '';
  position: absolute; bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: var(--color-primary-green);
  transition: width .3s ease;
}
.hover-underline:hover::after { width: 100%; }

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .reveal, .page-transition, .hero-shimmer, .pulse-dot::after,
  .skeleton, .toast, .modal, .modal-backdrop,
  .btn .ripple, .stat-counter { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}