/* ANIMATIONS.CSS - Central Motion Design System for Sanskruti Girls Hostel Website */

/* ==========================================================================
   0. Animation Easing & Duration Tokens
   ========================================================================== */
:root {
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);     /* Signature smooth ease-out */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* Easing for looping animations */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Easing for playful bounce/spring moments */
  
  --duration-fast: 250ms;
  --duration-mid: 500ms;
  --duration-slow: 900ms;
}

/* ==========================================================================
   1. Reveal Animation Utilities (Triggered via JS scroll observer)
   ========================================================================== */
.reveal-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-slow) var(--ease-soft), transform var(--duration-slow) var(--ease-soft);
}

.reveal-fade-up.active {
  opacity: 1;
  transform: translateY(0);
}

/* Scroll reveals from left/right (used in About/Safety columns) */
.reveal-fade-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--duration-slow) var(--ease-soft), transform var(--duration-slow) var(--ease-soft);
}

.reveal-fade-left.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-fade-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--duration-slow) var(--ease-soft), transform var(--duration-slow) var(--ease-soft);
}

.reveal-fade-right.active {
  opacity: 1;
  transform: translateX(0);
}

/* Staggered Delay Chains */
.delay-50 { transition-delay: 50ms; }
.delay-100 { transition-delay: 100ms; }
.delay-150 { transition-delay: 150ms; }
.delay-200 { transition-delay: 200ms; }
.delay-250 { transition-delay: 250ms; }
.delay-300 { transition-delay: 300ms; }
.delay-350 { transition-delay: 350ms; }
.delay-400 { transition-delay: 400ms; }

/* ==========================================================================
   2. Keyframe Definition Loops
   ========================================================================== */

/* Hero Ken Burns Effect */
@keyframes ken-burns {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.08);
  }
}

.hero-bg-img {
  animation: ken-burns 20s linear infinite alternate;
}

/* Gentle bounce for Hero indicator and map pins */
@keyframes bobbing {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}

.scroll-chevron {
  animation: bobbing 1.8s ease-in-out infinite;
}

@keyframes map-pin-drop {
  0% {
    transform: translate(-50%, -200%);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -90%);
    opacity: 1;
  }
  80% {
    transform: translate(-50%, -105%);
  }
  100% {
    transform: translate(-50%, -100%);
  }
}

.map-marker-pin.active {
  animation: map-pin-drop 0.8s var(--ease-spring) forwards;
}

/* Map Ring Pulse */
@keyframes radar-ping {
  0% {
    transform: translateX(-50%) scale(1);
    opacity: 0.6;
  }
  100% {
    transform: translateX(-50%) scale(2.8);
    opacity: 0;
  }
}

.map-ping-ring {
  animation: radar-ping 2s var(--ease-in-out) infinite;
}

/* Persistent Pulse Glow for Call-to-actions */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(201, 112, 79, 0.4), var(--shadow-glow);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(201, 112, 79, 0), var(--shadow-glow);
  }
}

.btn-pulse-glow {
  animation: pulse-glow 2.5s var(--ease-in-out) infinite;
}

/* Floating WhatsApp Gentle pulse */
@keyframes float-pulse-glow {
  0%, 100% {
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3);
  }
  50% {
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3), 0 0 0 12px rgba(37, 211, 102, 0);
  }
}

.floating-whatsapp-btn {
  animation: float-pulse-glow 2.5s var(--ease-in-out) infinite;
}

/* Since Stamp pressed-badge spring reveal */
@keyframes badge-stamp {
  0% {
    transform: scale(0) rotate(-15deg);
    opacity: 0;
  }
  70% {
    transform: scale(1.1) rotate(5deg);
  }
  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}

.since-badge {
  transform: scale(0);
}

.reveal-fade-up.active .since-badge {
  animation: badge-stamp 0.6s var(--ease-spring) forwards;
  animation-delay: 400ms;
}

/* Form validation shake effect */
@keyframes gentle-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.form-group.shake-error {
  animation: gentle-shake 250ms ease-in-out 2;
}

/* Organic Background blob drift */
@keyframes drift {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(12px, -8px) rotate(4deg);
  }
  66% {
    transform: translate(-6px, 12px) rotate(-3deg);
  }
}

.blob-decorator {
  animation: drift 10s ease-in-out infinite alternate;
}

/* ==========================================================================
   3. Micro-Interaction Animations for Hover states
   ========================================================================== */

/* Simple lift utility */
.btn-hover-lift {
  transition: transform var(--duration-fast) var(--ease-soft), box-shadow var(--duration-fast) var(--ease-soft), background-color var(--duration-fast) var(--ease-soft);
}

.btn-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 30px rgba(201, 112, 79, 0.35);
}

.contact-info-card, .college-card {
  transition: transform var(--duration-fast) var(--ease-soft), box-shadow var(--duration-fast) var(--ease-soft);
}

/* SVG Line Drawing animations (Safety section icons) */
@keyframes draw-path {
  to {
    stroke-dashoffset: 0;
  }
}

.safety-draw-svg path,
.safety-draw-svg circle,
.safety-draw-svg rect,
.safety-draw-svg polyline {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1s ease-in-out;
}

.reveal-fade-up.active .safety-draw-svg path,
.reveal-fade-up.active .safety-draw-svg circle,
.reveal-fade-up.active .safety-draw-svg rect,
.reveal-fade-up.active .safety-draw-svg polyline {
  stroke-dashoffset: 0;
}

/* Individual micro hover loops for Amenity cards */

/* WiFi signal bars animate up */
@keyframes wifi-connect {
  0% { opacity: 0.3; }
  50% { opacity: 1; }
  100% { opacity: 0.3; }
}

.amenity-card:hover .wifi-bar-1 {
  animation: wifi-connect 0.8s infinite 0.1s;
}

.amenity-card:hover .wifi-bar-2 {
  animation: wifi-connect 0.8s infinite 0.2s;
}

.amenity-card:hover .wifi-bar-3 {
  animation: wifi-connect 0.8s infinite 0.3s;
}

/* Water drop falls and fades */
@keyframes water-fall {
  0% { transform: translateY(-5px); opacity: 0; }
  50% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(5px); opacity: 0; }
}

.amenity-card:hover .water-drop {
  animation: water-fall 1s ease-in-out infinite;
}

/* Power bolt glows */
@keyframes bolt-glow {
  0%, 100% { filter: drop-shadow(0 0 1px var(--color-primary)); }
  50% { filter: drop-shadow(0 0 8px #FFC107); color: #FFC107; }
}

.amenity-card:hover .power-bolt {
  animation: bolt-glow 1s ease-in-out infinite;
}

/* Shield line scans */
@keyframes shield-scan {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.amenity-card:hover .shield-outline {
  animation: shield-scan 1.2s ease-in-out infinite;
}

/* Warden checkmark draws */
@keyframes warden-affirm {
  0% { stroke-dashoffset: 20; }
  100% { stroke-dashoffset: 0; }
}

.amenity-card .warden-check {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
}

.amenity-card:hover .warden-check {
  animation: warden-affirm 0.5s ease-out forwards;
}

/* Laundry machine spinner */
@keyframes machine-spin {
  100% { transform: rotate(360deg); }
}

.amenity-card:hover .machine-door {
  transform-origin: 12px 13px;
  animation: machine-spin 2s linear infinite;
}

/* Utensils floating */
@keyframes utensil-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.amenity-card:hover .utensils-curl {
  animation: utensil-bob 1s ease-in-out infinite;
}

/* Study lamp shines */
@keyframes lamp-shine {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; stroke: #FFC107; }
}

.amenity-card:hover .table-lamp {
  animation: lamp-shine 0.8s ease-in-out infinite;
}


/* ==========================================================================
   4. Accessibility & Reduced Motion Support
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-delay: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
  
  .reveal-fade-up,
  .reveal-fade-left,
  .reveal-fade-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  
  .hero-bg-img {
    animation: none !important;
    transform: none !important;
  }
  
  .scroll-chevron,
  .map-ping-ring,
  .btn-pulse-glow,
  .floating-whatsapp-btn,
  .blob-decorator {
    animation: none !important;
  }
}