/* Custom animations and styling for Little Kingdom School */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

:root {
  --font-heading: 'Fredoka', cursive, sans-serif;
  --font-body: 'Nunito', sans-serif;
}

html {
  font-family: var(--font-body);
  background-color: #f4f8ff;
  color: #2d3748;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  background-color: #f4f8ff;
  color: #2d3748;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: clip;
}

html.loading, body.loading {
  overflow: hidden !important;
}

*, *:before, *:after {
  box-sizing: inherit;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: var(--font-heading);
}

/* Unified Sticky Header (Ensures both bars stick on all devices) */
header.sticky {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

/* Floating animation for decorative icons */
@keyframes float {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(2deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes float-reverse {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(5px) rotate(-2deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes pulse-subtle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

.animate-float-delayed {
  animation: float-reverse 5s ease-in-out 1s infinite;
}

.animate-pulse-subtle {
  animation: pulse-subtle 3s ease-in-out infinite;
}

/* Custom Floating Side Decor Badges */
.side-decor-rocket {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 50%, #38bdf8 100%);
  box-shadow: 0 10px 25px -5px rgba(2, 132, 199, 0.35);
}

.side-decor-smiley {
  background: #059669;
  box-shadow: 0 10px 25px -5px rgba(5, 150, 105, 0.35);
}

.side-decor-star {
  background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
  box-shadow: 0 10px 20px -5px rgba(250, 204, 21, 0.35);
}

.side-decor-palette {
  background: linear-gradient(135deg, #0d9488 0%, #2563eb 100%);
  box-shadow: 0 10px 20px -5px rgba(13, 148, 136, 0.35);
}

/* Entrance Animations on Scroll */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.reveal-zoom {
  opacity: 0;
  transform: scale(0.92);
  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-zoom.active {
  opacity: 1;
  transform: scale(1);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #eef2ff;
}
::-webkit-scrollbar-thumb {
  background: #93c5fd;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #60a5fa;
}

/* Hide scrollbar utility for scroll containers */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Card Hover Effects */
.card-hover-pop {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.card-hover-pop:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 16px 24px -4px rgba(59, 130, 246, 0.12), 0 8px 8px -4px rgba(59, 130, 246, 0.04);
}

/* Glassmorphism */
.glass-card {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

/* Entrance Splash Loader (Vibrant Blue & Green Preschool Theme) */
#loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: radial-gradient(circle at 20% 20%, #dbeafe 0%, #ecfdf5 45%, #d1fae5 75%, #fef3c7 100%);
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 0.6s ease, visibility 0.6s ease, transform 0.6s ease;
}

#loader-overlay.hidden-loader {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.04);
  pointer-events: none;
}

#loader-bar-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(to right, #3b82f6, #2dd4bf, #10b981);
  border-radius: 9999px;
  transition: width 3s linear;
}

/* Ambient Floating Bubbles in Loader */
.loader-bubble {
  position: absolute;
  border-radius: 50%;
  filter: blur(45px);
  opacity: 0.55;
  animation: float 5s ease-in-out infinite alternate;
}

.bubble-1 {
  top: 10%;
  left: 10%;
  width: 200px;
  height: 200px;
  background: #60a5fa; /* Blue */
}

.bubble-2 {
  bottom: 12%;
  right: 12%;
  width: 240px;
  height: 240px;
  background: #34d399; /* Emerald Green */
}

.bubble-3 {
  top: 55%;
  left: 8%;
  width: 150px;
  height: 150px;
  background: #fde047; /* Sunny Yellow */
}

.bubble-4 {
  top: 15%;
  right: 15%;
  width: 170px;
  height: 170px;
  background: #a7f3d0; /* Mint */
}

/* Modal Scroll Lock */
body.modal-open {
  overflow: hidden;
}

/* Moving Design Infinite Carousel Ticker */
@keyframes continuous-slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-moving-ticker {
  display: flex;
  width: max-content;
  animation: continuous-slide 28s linear infinite;
}

.animate-moving-ticker:hover {
  animation-play-state: paused;
}

/* Auto-Scrollable Campus Infinite Loop Ticker */
@keyframes campus-ticker-loop {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-campus-ticker {
  display: flex;
  width: max-content;
  animation: campus-ticker-loop 18s linear infinite;
}

.animate-campus-ticker:hover,
.animate-campus-ticker:focus-within {
  animation-play-state: paused;
}

/* Social Media Card Glow */
.social-card-insta {
  background: linear-gradient(135deg, rgba(253, 224, 71, 0.08) 0%, rgba(236, 72, 153, 0.08) 50%, rgba(147, 51, 234, 0.08) 100%);
}

.social-card-fb {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(30, 64, 175, 0.08) 100%);
}

/* 3D Stacked Coverflow Card Carousel (Ref Image Style) */
.coverflow-perspective {
  perspective: 1200px;
  position: relative;
  width: 100%;
  max-width: 950px;
  min-height: 470px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.coverflow-card-item {
  position: absolute;
  width: 360px;
  max-width: 88vw;
  background: #ffffff;
  border-radius: 1.75rem; /* 28px outer radius */
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  cursor: pointer;
  user-select: none;
  overflow: hidden !important;
  box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.12);
}

.coverflow-card-item.pos-active {
  transform: translateX(0) translateZ(120px) rotateY(0deg) scale(1.04);
  z-index: 30;
  opacity: 1;
  box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.22);
}

.coverflow-card-item.pos-left {
  transform: translateX(-220px) translateZ(-40px) rotateY(18deg) scale(0.86);
  z-index: 20;
  opacity: 0.85;
}

.coverflow-card-item.pos-right {
  transform: translateX(220px) translateZ(-40px) rotateY(-18deg) scale(0.86);
  z-index: 20;
  opacity: 0.85;
}

.coverflow-card-item.pos-hidden {
  transform: translateX(0) translateZ(-200px) rotateY(0deg) scale(0.5);
  z-index: 5;
  opacity: 0;
  pointer-events: none;
}

/* Mobile Responsiveness for 3D Coverflow */
@media (max-width: 640px) {
  .coverflow-perspective {
    min-height: 450px;
  }
  .coverflow-card-item {
    width: 310px;
    max-width: 86vw;
  }
  .coverflow-card-item.pos-left {
    transform: translateX(-40px) translateZ(-50px) rotateY(20deg) scale(0.82);
    opacity: 0.6;
  }
  .coverflow-card-item.pos-right {
    transform: translateX(40px) translateZ(-50px) rotateY(-20deg) scale(0.82);
    opacity: 0.6;
  }
}

@media (max-width: 400px) {
  .coverflow-perspective {
    min-height: 440px;
  }
  .coverflow-card-item {
    width: 285px;
    max-width: 88vw;
  }
  .coverflow-card-item.pos-left {
    transform: translateX(-30px) translateZ(-60px) rotateY(22deg) scale(0.78);
    opacity: 0.45;
  }
  .coverflow-card-item.pos-right {
    transform: translateX(30px) translateZ(-60px) rotateY(-22deg) scale(0.78);
    opacity: 0.45;
  }
}

/* Full Screen Image Lightbox Modal Animation */
@keyframes popupScaleUp {
  0% { transform: scale(0.88); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

#image-modal #modal-img {
  animation: popupScaleUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Animated Section Heading Underline Bar (Left-to-Right Entrance + Infinite Oscillating Motion) */
@keyframes headingLineEntrance {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes headingLineOscillate {
  0% {
    transform: translateX(-16px) scaleX(0.92);
  }
  50% {
    transform: translateX(16px) scaleX(1.12);
  }
  100% {
    transform: translateX(-16px) scaleX(0.92);
  }
}

.animated-heading-line {
  display: block;
  transform-origin: left center;
  transition: opacity 0.3s ease;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

.reveal.active .animated-heading-line,
.active .animated-heading-line {
  animation: headingLineEntrance 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards,
             headingLineOscillate 3.2s ease-in-out 0.75s infinite;
}

/* Infinite Auto Marquee Scroll for Testimonial Cards */
@keyframes testimonialScrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes testimonialScrollRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.animate-testimonial-left {
  display: flex;
  width: max-content;
  animation: testimonialScrollLeft 38s linear infinite;
}

.animate-testimonial-right {
  display: flex;
  width: max-content;
  animation: testimonialScrollRight 42s linear infinite;
}

.animate-testimonial-left:hover,
.animate-testimonial-right:hover {
  animation-play-state: paused;
}

/* Gallery Filter Buttons Styling */
.gallery-filter-btn {
  background-color: #ffffff;
  color: #334155;
  border: 1px solid #cbd5e1;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.gallery-filter-btn:hover {
  background-color: #eff6ff;
  color: #2563eb;
  border-color: #93c5fd;
}

.gallery-filter-btn i {
  color: #059669;
  transition: color 0.2s ease-in-out;
}

.gallery-filter-btn:hover i {
  color: #2563eb;
}

.gallery-filter-btn.active,
.gallery-filter-btn.active:hover {
  background-color: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.gallery-filter-btn.active i,
.gallery-filter-btn.active:hover i {
  color: #ffffff !important;
}