/* ================================================
   PLANCURE ANIMATION SYSTEM
   Scroll-triggered animations + background effects
   Production-ready, accessible, performant
   ================================================ */

/* ========== ANIMATION DEFINITIONS ========== */

/* Fade In - Simple entrance, subtle opacity change */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Fade Up - Slide up while fading (heading, text) */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade Down - Slide down while fading (subtle) */
@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide Left - Enter from left (images, sections) */
@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide Right - Enter from right (images, sections) */
@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale Up - Subtle scale entrance (cards, containers) */
@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Scale In - Slightly larger entrance */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Subtle Floating - Gentle up/down motion (continuous) */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Gentle Glow - Subtle color pulse (CTAs, highlights) */
@keyframes gentleGlow {
  0%, 100% {
    box-shadow: 0 14px 40px rgba(15, 59, 114, 0.12);
  }
  50% {
    box-shadow: 0 14px 40px rgba(47, 125, 208, 0.18);
  }
}

/* Subtle Shimmer - Light wave effect (premium feel) */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* ========== ANIMATION UTILITIES (Apply via classes) ========== */

/* FADE ANIMATIONS */
.animate-fade {
  animation: fadeIn 0.7s ease-out forwards;
  opacity: 0;
}

.animate-fade-up {
  animation: fadeUp 0.7s ease-out forwards;
  opacity: 0;
  transform: translateY(24px);
}

.animate-fade-down {
  animation: fadeDown 0.6s ease-out forwards;
  opacity: 0;
  transform: translateY(-16px);
}

/* SLIDE ANIMATIONS */
.animate-slide-left {
  animation: slideLeft 0.8s ease-out forwards;
  opacity: 0;
  transform: translateX(-32px);
}

.animate-slide-right {
  animation: slideRight 0.8s ease-out forwards;
  opacity: 0;
  transform: translateX(32px);
}

/* SCALE ANIMATIONS */
.animate-scale-up {
  animation: scaleUp 0.6s ease-out forwards;
  opacity: 0;
  transform: scale(0.96);
}

.animate-scale-in {
  animation: scaleIn 0.7s ease-out forwards;
  opacity: 0;
  transform: scale(0.94);
}

/* ========== STAGGERED DELAYS (For sequential animations) ========== */

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }

/* ========== ACTIVE STATE (Applied by JS when in viewport) ========== */

/* When animation should play, JS adds 'is-visible' class */
.animate-fade.is-visible,
.animate-fade-up.is-visible,
.animate-fade-down.is-visible,
.animate-slide-left.is-visible,
.animate-slide-right.is-visible,
.animate-scale-up.is-visible,
.animate-scale-in.is-visible {
  animation-play-state: running;
}

/* ========== HOVER ANIMATIONS (Cards, buttons, links) ========== */

/* Card hover lift with glow - Premium feel */
.card {
  transition: var(--transition);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(15, 59, 114, 0.18);
}

/* Button hover depth */
.btn {
  transition: var(--transition);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn--primary:hover {
  box-shadow: 0 18px 48px rgba(15, 59, 114, 0.22);
}

/* Link underline animation */
a:not(.btn, .brand) {
  position: relative;
}

a:not(.btn, .brand)::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--blue-500);
  transition: width 0.3s ease;
}

a:not(.btn, .brand):hover::after {
  width: 100%;
}

/* ========== BACKGROUND ANIMATIONS ========== */

/* Floating shapes animation (existing) - keep as is */
.floating-shape {
  animation: floaty 16s ease-in-out infinite alternate;
}

/* Subtle background shift on hero (continuous, subtle) */
.hero {
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(47, 125, 208, 0.08) 0%,
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* Shimmer effect on premium elements (optional, subtle) */
.shimmer-effect {
  position: relative;
  overflow: hidden;
}

.shimmer-effect::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  background-size: 200% 100%;
  animation: shimmer 3s infinite;
  pointer-events: none;
}

/* ========== SCROLL-BASED EFFECTS ========== */

/* Parallax-lite (subtle, not intrusive) */
.parallax-shallow {
  transition: transform 0.5s ease-out;
}

/* Section fade in on viewport entry */
section {
  opacity: 1;
}

section.animate-on-scroll {
  animation: fadeUp 0.8s ease-out forwards;
}

/* ========== REDUCED MOTION SUPPORT (Accessibility) ========== */

@media (prefers-reduced-motion: reduce) {
  /* Disable all animations if user prefers reduced motion */
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Keep essential styles but no animation */
  .card:hover {
    transform: none;
  }

  .btn:hover {
    transform: none;
  }

  a:not(.btn, .brand)::after {
    display: none;
  }

  .floating-shape {
    animation: none;
  }
}

/* ========== ANIMATION TIMING VARIANTS ========== */

/* Fast animations (UI elements) */
.animate-fast {
  animation-duration: 0.4s;
}

/* Standard animations (most elements) */
.animate-normal {
  animation-duration: 0.7s;
}

/* Slow animations (large sections, hero) */
.animate-slow {
  animation-duration: 1s;
}

/* ========== STAGGER GROUPS (For child elements) ========== */

/* Apply to container, animation to children */
.stagger-children > * {
  animation-play-state: paused;
}

.stagger-children.is-visible > * {
  animation-play-state: running;
}

.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }

/* ========== PRELOAD ANIMATION (Before scroll trigger) ========== */

/* Hide animated elements before JS initializes */
.no-js .animate-fade,
.no-js .animate-fade-up,
.no-js .animate-fade-down,
.no-js .animate-slide-left,
.no-js .animate-slide-right,
.no-js .animate-scale-up,
.no-js .animate-scale-in {
  opacity: 1;
  transform: none;
  animation: none;
}

/* Elements visible when JS isn't available (graceful degradation) */
noscript {
  display: none;
}

/* ========== SMOOTH SCROLL (Optional, premium feel) ========== */

html {
  scroll-behavior: smooth;
}

/* ========== WILL-CHANGE OPTIMIZATION (Performance) ========== */

/* Apply to elements that will animate */
.animate-fade,
.animate-fade-up,
.animate-fade-down,
.animate-slide-left,
.animate-slide-right,
.animate-scale-up,
.animate-scale-in {
  will-change: opacity, transform;
}

/* Remove will-change after animation completes */
.animate-fade.is-visible,
.animate-fade-up.is-visible,
.animate-fade-down.is-visible,
.animate-slide-left.is-visible,
.animate-slide-right.is-visible,
.animate-scale-up.is-visible,
.animate-scale-in.is-visible {
  will-change: auto;
}

/* ========== LOADING STATE ========== */

.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* ========== PRINT STYLES ========== */

@media print {
  .animate-fade,
  .animate-fade-up,
  .animate-fade-down,
  .animate-slide-left,
  .animate-slide-right,
  .animate-scale-up,
  .animate-scale-in {
    animation: none;
    opacity: 1;
    transform: none;
  }
}