/* =====================================================================
   RAINBOW SCHOOL COMPLEX — animations.css
   Starfield canvas backgrounds, layered image depth effects, and
   section entrance animations. Loaded after theme-2026.css on every page.
   ===================================================================== */


/* -----------------------------------------------------------------------
   1. STARFIELD CANVAS BACKGROUNDS
   Used in: footer, dark hero sections, CTA panel.
   The <canvas class="starfield-canvas"> is injected by animations.js.
   ---------------------------------------------------------------------- */
.starfield-host {
  position: relative;
  overflow: hidden;
}
.starfield-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.65;
  border-radius: inherit; /* respect parent border-radius */
}
/* Push all direct children above the canvas */
.starfield-host > *:not(.starfield-canvas) {
  position: relative;
  z-index: 1;
}
/* Partnership section: ensure its children stack above canvas */
.partnership-hero-section.starfield-host > .container {
  position: relative;
  z-index: 1;
}


/* -----------------------------------------------------------------------
   2. FOOTER STARFIELD
   ---------------------------------------------------------------------- */
.site-footer.starfield-host {
  background: var(--brand-dark);
}
.site-footer .starfield-canvas {
  opacity: 0.55;
}


/* -----------------------------------------------------------------------
   3. CTA PANEL STARFIELD — dark gradient background
   ---------------------------------------------------------------------- */
.cta-panel.starfield-host .starfield-canvas {
  opacity: 0.30;
}

/* -----------------------------------------------------------------------
   4. HERO STARFIELD — dark because of background-image overlay
   ---------------------------------------------------------------------- */
.school-hero.starfield-host .starfield-canvas,
.page-hero.starfield-host .starfield-canvas {
  opacity: 0.40;
}

/* -----------------------------------------------------------------------
   5. PARTNERSHIP HERO — light-blue gradient background: very subtle
   ---------------------------------------------------------------------- */
.partnership-hero-section.starfield-host .starfield-canvas {
  opacity: 0.18;
}
/* Stars should be blue-tinted on the partnership section */

/* -----------------------------------------------------------------------
   6. BOARDING ACCENT — navy background sections on school pages
   ---------------------------------------------------------------------- */
.boarding-accent.starfield-host .starfield-canvas {
  opacity: 0.35;
}

/* -----------------------------------------------------------------------
   7. MAIN HOMEPAGE HERO — full-screen carousel with dark image overlays
   ---------------------------------------------------------------------- */
header.hero.starfield-host .starfield-canvas {
  opacity: 0.28;
  z-index: 1; /* below carousel controls (z-index 10) but above images */
}

/* -----------------------------------------------------------------------
   8. INTERNAL LINKS STRIP — brand-soft background, very subtle
   ---------------------------------------------------------------------- */
.internal-links-strip.starfield-host .starfield-canvas {
  opacity: 0.12;
}

/* -----------------------------------------------------------------------
   9. SOFT PARTICLE OVERLAY — brand-blue dots on light sections
      The canvas uses fillStyle rgba(15,90,137,…) so no color override needed.
   ---------------------------------------------------------------------- */
.soft-particle-host {
  position: relative;
  overflow: hidden;
}
.soft-particle-canvas {
  opacity: 1; /* opacity is baked into each dot's rgba alpha */
}
/* Ensure section children sit above the dot canvas */
.soft-particle-host > *:not(.starfield-canvas):not(.soft-particle-canvas) {
  position: relative;
  z-index: 1;
}


/* -----------------------------------------------------------------------
   10. LAYERED IMAGE DEPTH EFFECTS
   Images that softly merge into their section background — no hard edges.
   Apply .depth-image to any <img> or image container.
   ---------------------------------------------------------------------- */

/* Base depth image: rounded corners + a soft shadow halo */
.depth-image {
  border-radius: var(--radius-lg);
  box-shadow:
    0 0 0 1px rgba(15, 90, 137, 0.06),
    0 24px 60px rgba(12, 40, 64, 0.18),
    0 4px 12px rgba(12, 40, 64, 0.10);
  display: block;
  width: 100%;
  height: auto;
}

/* Immersive: image edges fade into the page — great for hero/about images */
.depth-image-immersive {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.depth-image-immersive img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Soft vignette that bleeds into the surrounding background */
.depth-image-immersive::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  box-shadow:
    inset 0 0 40px 20px var(--paper),
    inset 0 -50px 60px 10px var(--paper);
  pointer-events: none;
}
/* On dark sections use dark bleed */
.bg-dark .depth-image-immersive::after,
.site-footer .depth-image-immersive::after {
  box-shadow:
    inset 0 0 40px 20px var(--brand-dark),
    inset 0 -50px 60px 10px var(--brand-dark);
}

/* Floating card: image appears to float above the page with a layered shadow */
.depth-image-float {
  border-radius: var(--radius-lg);
  box-shadow:
    0 2px 0 0 rgba(15,90,137,.06),
    0 8px 0 4px rgba(15,90,137,.04),
    0 24px 48px rgba(12,40,64,.20);
  transform: perspective(800px) rotateY(-2deg) rotateX(1deg);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  display: block;
  width: 100%;
}
.depth-image-float:hover {
  transform: perspective(800px) rotateY(0deg) rotateX(0deg) translateY(-4px);
  box-shadow:
    0 2px 0 0 rgba(15,90,137,.08),
    0 12px 0 6px rgba(15,90,137,.06),
    0 40px 80px rgba(12,40,64,.24);
}


/* -----------------------------------------------------------------------
   5. HERO SECTION LAYERED BACKGROUND EFFECT
   Adds a subtle animated gradient pulse behind hero content to give
   depth — like the page breathes.
   ---------------------------------------------------------------------- */
@keyframes pulse-glow {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%       { opacity: 0.80; transform: scale(1.06); }
}

.hero-glow-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
  animation: pulse-glow 7s ease-in-out infinite;
}
.hero-glow-orb.orb-blue {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(15,90,137,0.35) 0%, transparent 70%);
  animation-delay: 0s;
}
.hero-glow-orb.orb-gold {
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(241,160,5,0.20) 0%, transparent 70%);
  animation-delay: 3.5s;
}
.hero-glow-orb.orb-green {
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(18,155,78,0.15) 0%, transparent 70%);
  animation-delay: 1.8s;
}


/* -----------------------------------------------------------------------
   6. SCROLL ENTRANCE ANIMATIONS (upgrade from plain reveal class)
   ---------------------------------------------------------------------- */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slide-left {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger siblings inside reveal-group */
.reveal-group > *:nth-child(1) { transition-delay: 0s; }
.reveal-group > *:nth-child(2) { transition-delay: 0.10s; }
.reveal-group > *:nth-child(3) { transition-delay: 0.20s; }
.reveal-group > *:nth-child(4) { transition-delay: 0.30s; }
.reveal-group > *:nth-child(5) { transition-delay: 0.40s; }


/* -----------------------------------------------------------------------
   7. FLOATING ELEMENTS — subtle hover levitation on cards
   ---------------------------------------------------------------------- */
.levitate {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.levitate:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

/* Partner cards, stat cards, campus cards already get levitate via JS */
.partner-card,
.stat-card,
.about-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.partner-card:hover,
.stat-card:hover,
.about-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}


/* -----------------------------------------------------------------------
   8. RAINBOW ACCENT UNDERLINE — animated brand flourish on headings
   ---------------------------------------------------------------------- */
@keyframes rainbow-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.rainbow-underline {
  position: relative;
  display: inline-block;
}
.rainbow-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 3px;
  background: var(--rainbow);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
  animation: rainbow-grow 0.8s ease 0.5s forwards;
}


/* -----------------------------------------------------------------------
   9. PARTNERS SECTION FEATURED PANEL — entry animation
   ---------------------------------------------------------------------- */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

.partner-featured {
  position: relative;
  overflow: hidden;
}
.partner-featured::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.18) 50%,
    transparent 60%
  );
  background-size: 200% 100%;
  animation: shimmer 4s ease-in-out infinite;
  pointer-events: none;
}


/* -----------------------------------------------------------------------
   10. REDUCE MOTION — respect user preferences
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .starfield-canvas { display: none; }
  .depth-image-float { transform: none; }
}