/* =========================================================
   RADIANCE JUNIOR SCHOOL — Global Styles
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Aladin&family=Patrick+Hand&family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
  --red:     #E32726;
  --blue:    #2B3990;
  --yellow:  #FFD200;
  --sky:     #3AAEDE;
  --green:   #5BBF21;
  --purple:  #5B2D8E;
  --pink:    #E8367C;
  --orange:  #F7941D;
  --teal:    #00B4B0;
  --white:   #FFFFFF;
  --charcoal:#333333;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: 'Nunito', sans-serif;
  color: var(--charcoal);
  background: #fff;
}

/* ---- Keyframes ---- */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-12px) rotate(2deg); }
  66%       { transform: translateY(-6px) rotate(-1deg); }
}
@keyframes floatAlt {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-18px) rotate(-3deg); }
}
@keyframes blobPulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%       { transform: scale(1.06) rotate(5deg); }
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes bounce-gentle {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes starPop {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  70%  { transform: scale(1.2) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.animate-float      { animation: float 4s ease-in-out infinite; }
.animate-float-alt  { animation: floatAlt 5s ease-in-out infinite; }
.animate-blob-pulse { animation: blobPulse 6s ease-in-out infinite; }
.animate-bounce-g   { animation: bounce-gentle 2s ease-in-out infinite; }
.animate-spin-slow  { animation: spin-slow 12s linear infinite; }
.animate-fade-up    { animation: fadeUp 0.7s cubic-bezier(.22,1,.36,1) both; }
.animate-star-pop   { animation: starPop 0.5s cubic-bezier(.34,1.56,.64,1) both; }

/* ---- Rainbow Section Header ---- */
.rainbow-header span { display: inline-block; }
.rainbow-header span:nth-child(1)  { color: var(--red); }
.rainbow-header span:nth-child(2)  { color: var(--orange); }
.rainbow-header span:nth-child(3)  { color: var(--yellow); filter: brightness(0.85); }
.rainbow-header span:nth-child(4)  { color: var(--green); }
.rainbow-header span:nth-child(5)  { color: var(--blue); }
.rainbow-header span:nth-child(6)  { color: var(--purple); }
.rainbow-header span:nth-child(7)  { color: var(--pink); }
.rainbow-header span:nth-child(8)  { color: var(--teal); }

/* ---- Star Bullet ---- */
.star-bullet { list-style: none; padding-left: 0; }
.star-bullet li { position: relative; padding-left: 1.8rem; margin-bottom: 0.5rem; }
.star-bullet li::before { content: '★'; position: absolute; left: 0; color: var(--yellow); font-size: 1.1rem; }

/* ---- Section Title Bar ---- */
.section-title-bar {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  padding: 0.4rem 1.5rem;
  border-radius: 999px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* ---- Blob Shapes (CSS) ---- */
.blob-sky {
  background: var(--sky);
  border-radius: 70% 30% 60% 40% / 40% 60% 30% 70%;
  opacity: 0.18;
}
.blob-yellow {
  background: var(--yellow);
  border-radius: 40% 60% 30% 70% / 60% 40% 70% 30%;
  opacity: 0.22;
}
.blob-pink {
  background: var(--pink);
  border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
  opacity: 0.15;
}
.blob-green {
  background: var(--green);
  border-radius: 50% 50% 40% 60% / 40% 60% 50% 50%;
  opacity: 0.15;
}

/* ---- Tilted Photo Frame ---- */
.photo-frame {
  background: #fff;
  padding: 8px 8px 28px;
  box-shadow: 4px 4px 20px rgba(0,0,0,0.15), 0 2px 8px rgba(43,57,144,0.1);
  border-radius: 4px;
  transition: transform 0.3s cubic-bezier(.22,1,.36,1), box-shadow 0.3s ease;
}
.photo-frame:hover {
  transform: rotate(0deg) scale(1.04) !important;
  box-shadow: 8px 8px 32px rgba(0,0,0,0.2);
}

/* ---- Button Styles ---- */
.btn-primary {
  background: var(--red);
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  padding: 0.75rem 2rem;
  border-radius: 999px;
  text-decoration: none;
  display: inline-block;
  transition: transform 0.2s cubic-bezier(.22,1,.36,1), box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: 0 4px 16px rgba(227,39,38,0.35);
  border: none;
  cursor: pointer;
  font-size: 1rem;
}
.btn-primary:hover  { background: #c01f1f; transform: translateY(-3px); box-shadow: 0 8px 24px rgba(227,39,38,0.4); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.btn-whatsapp {
  background: #25D366;
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  padding: 0.75rem 2rem;
  border-radius: 999px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: transform 0.2s cubic-bezier(.22,1,.36,1), box-shadow 0.2s ease;
  box-shadow: 0 4px 16px rgba(37,211,102,0.4);
  font-size: 1rem;
}
.btn-whatsapp:hover  { background: #1da851; transform: translateY(-3px); box-shadow: 0 8px 24px rgba(37,211,102,0.5); }
.btn-whatsapp:active { transform: translateY(0); }
.btn-whatsapp:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* ---- Section Spacing ---- */
.section { padding: 5rem 1.5rem; }
.container { max-width: 1200px; margin: 0 auto; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--sky); border-radius: 4px; }

/* ---- WhatsApp Floating Button ---- */
.whatsapp-float {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9999;
  width: 60px;
  height: 60px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.5);
  text-decoration: none;
  transition: transform 0.2s cubic-bezier(.22,1,.36,1), box-shadow 0.2s ease;
  animation: bounce-gentle 2s ease-in-out infinite;
}
.whatsapp-float:hover  { transform: scale(1.12); box-shadow: 0 8px 32px rgba(37,211,102,0.6); }
.whatsapp-float:active { transform: scale(0.97); }
.whatsapp-float svg { width: 32px; height: 32px; fill: #fff; }

/* ---- Intersection Observer Animation ---- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(.22,1,.36,1), transform 0.7s cubic-bezier(.22,1,.36,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Fallback: if JS doesn't fire (file://, slow load), show content after 1s via animation */
@keyframes revealFallback {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal {
  animation: revealFallback 0.7s cubic-bezier(.22,1,.36,1) 1.2s forwards;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .section { padding: 3rem 1rem; }
}