/* ==========================================================
   Blessings Play School — animations.css
   UNIQUE animations per section — no repetition!
   ========================================================== */

/* ─────────────────────────────────────────────────────────
   SECTION 1 · HERO — Cinematic video with typewriter title
   ───────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: var(--ink);
}
.hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(160deg,
    rgba(53,41,74,.78) 0%,
    rgba(53,41,74,.42) 55%,
    rgba(53,41,74,.70) 100%);
}
.hero .wrap.hero-grid {
  position: relative;
  z-index: 2;
  padding: 7rem 0 6rem;
  align-items: center;
}
.hero h1        { color:#fff; }
.hero h1 .pop   { background:var(--yellow); color:var(--ink); display:inline-block; }
.hero .kicker   {
  background:rgba(255,255,255,.14);
  color:#fff;
  border-color:rgba(255,255,255,.35);
  backdrop-filter:blur(6px);
}
.hero p.lead { color:rgba(255,255,255,.9); }
.hero .float { z-index:3; text-shadow:0 2px 8px rgba(0,0,0,.35); }

/* Hero entrance — each element has a DIFFERENT motion */
.hero-anim-kicker {
  animation: heroSlideLeft .65s cubic-bezier(.22,1,.36,1) .15s both;
}
.hero-anim-h1 {
  animation: heroZoomBlur .9s cubic-bezier(.22,1,.36,1) .35s both;
}
.hero-anim-lead {
  animation: heroFadeUp .8s cubic-bezier(.22,1,.36,1) .6s both;
}
.hero-anim-btns {
  animation: heroBounceIn .7s cubic-bezier(.34,1.56,.64,1) .85s both;
}
.hero-anim-art {
  animation: heroSwingIn 1s cubic-bezier(.22,1,.36,1) .45s both;
}

@keyframes heroSlideLeft {
  from { opacity:0; transform:translateX(-40px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes heroZoomBlur {
  from { opacity:0; transform:scale(.88); filter:blur(6px); }
  to   { opacity:1; transform:scale(1);  filter:blur(0); }
}
@keyframes heroFadeUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes heroBounceIn {
  from { opacity:0; transform:scale(.7) translateY(14px); }
  80%  { opacity:1; transform:scale(1.05) translateY(-3px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
@keyframes heroSwingIn {
  from { opacity:0; transform:rotate(-8deg) translateX(50px); }
  to   { opacity:1; transform:rotate(0) translateX(0); }
}

/* Scroll hint chevron */
.hero-scroll-hint {
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  z-index:3; display:flex; flex-direction:column; align-items:center;
  gap:.4rem; color:rgba(255,255,255,.72); font-size:.8rem;
  font-family:var(--font-display); pointer-events:none;
  animation:hintFade 1s 1.6s both, hintBob 2.4s 2.6s ease-in-out infinite;
}
.hero-scroll-hint svg {
  width:26px; height:26px; stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round;
}
@keyframes hintFade { from{opacity:0} to{opacity:1} }
@keyframes hintBob {
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(9px)}
}


/* ─────────────────────────────────────────────────────────
   SECTION 2 · ABOUT — Images slide from left, text from right
   ───────────────────────────────────────────────────────── */
[data-section="about"] .collage.reveal {
  opacity:0; transform:translateX(-50px) rotate(-2deg);
  transition: opacity .8s cubic-bezier(.22,1,.36,1),
              transform .8s cubic-bezier(.22,1,.36,1);
}
[data-section="about"] .collage.reveal.in {
  opacity:1; transform:translateX(0) rotate(0deg);
}
[data-section="about"] > .wrap > .reveal:last-child {
  opacity:0; transform:translateX(50px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1) .18s,
              transform .8s cubic-bezier(.22,1,.36,1) .18s;
}
[data-section="about"] > .wrap > .reveal:last-child.in {
  opacity:1; transform:translateX(0);
}
/* Tick list items — cascade in one by one */
[data-section="about"] .ticks li {
  opacity:0; transform:translateX(20px);
  transition: opacity .5s ease, transform .5s ease;
}
[data-section="about"] .reveal.in ~ * .ticks li,
[data-section="about"] .reveal.in .ticks li {
  opacity:1; transform:none;
}
[data-section="about"] .ticks li:nth-child(1){transition-delay:.1s}
[data-section="about"] .ticks li:nth-child(2){transition-delay:.22s}
[data-section="about"] .ticks li:nth-child(3){transition-delay:.34s}
[data-section="about"] .ticks li:nth-child(4){transition-delay:.46s}


/* ─────────────────────────────────────────────────────────
   SECTION 3 · PROGRAMS — Cards flip in from bottom with pop
   ───────────────────────────────────────────────────────── */
[data-section="programs"] .card.reveal {
  opacity:0;
  transform:translateY(60px) scale(.92);
  transition: opacity .6s cubic-bezier(.22,1,.36,1),
              transform .6s cubic-bezier(.34,1.4,.64,1);
}
[data-section="programs"] .card.reveal.in {
  opacity:1; transform:translateY(0) scale(1);
}
/* Stagger */
[data-section="programs"] .card.reveal:nth-child(1){transition-delay:.04s}
[data-section="programs"] .card.reveal:nth-child(2){transition-delay:.13s}
[data-section="programs"] .card.reveal:nth-child(3){transition-delay:.22s}
[data-section="programs"] .card.reveal:nth-child(4){transition-delay:.31s}
[data-section="programs"] .card.reveal:nth-child(5){transition-delay:.40s}

/* Hover: tilt + big shadow */
[data-section="programs"] .card:hover {
  transform:translateY(-10px) rotate(1.5deg) scale(1.03);
  box-shadow:8px 10px 0 var(--ink), 0 24px 48px -10px rgba(53,41,74,.28);
}
/* Thumb image zoom on hover */
[data-section="programs"] .card .thumb img { transition:transform .5s ease; }
[data-section="programs"] .card:hover .thumb img { transform:scale(1.12); }


/* ─────────────────────────────────────────────────────────
   SECTION 4 · WHY PLAY MATTERS — Icons spin-drop in
   ───────────────────────────────────────────────────────── */
[data-section="philosophy"] .card.reveal {
  opacity:0;
  transform:rotate(-12deg) scale(.6);
  transition: opacity .55s cubic-bezier(.22,1,.36,1),
              transform .55s cubic-bezier(.34,1.56,.64,1);
}
[data-section="philosophy"] .card.reveal.in {
  opacity:1; transform:rotate(0) scale(1);
}
[data-section="philosophy"] .card.reveal:nth-child(1){transition-delay:.05s}
[data-section="philosophy"] .card.reveal:nth-child(2){transition-delay:.14s}
[data-section="philosophy"] .card.reveal:nth-child(3){transition-delay:.23s}
[data-section="philosophy"] .card.reveal:nth-child(4){transition-delay:.32s}
[data-section="philosophy"] .card.reveal:nth-child(5){transition-delay:.41s}

/* Hover: icon spins on philosophy cards */
[data-section="philosophy"] .card:hover {
  transform:translateY(-7px) scale(1.04);
  box-shadow:6px 8px 0 var(--ink), 0 18px 36px -8px rgba(53,41,74,.22);
}
[data-section="philosophy"] .card:hover .icon {
  animation:iconSpin .6s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes iconSpin {
  0%   { transform:rotate(0)  scale(1); }
  40%  { transform:rotate(180deg) scale(1.3); }
  100% { transform:rotate(360deg) scale(1); }
}


/* ─────────────────────────────────────────────────────────
   SECTION 5 · FACILITIES — Cards ripple in from center
   ───────────────────────────────────────────────────────── */
[data-section="facilities"] .card.reveal {
  opacity:0;
  transform:scale(.7);
  filter:blur(4px);
  transition: opacity .5s ease,
              transform .5s cubic-bezier(.22,1,.36,1),
              filter .5s ease;
}
[data-section="facilities"] .card.reveal.in {
  opacity:1; transform:scale(1); filter:blur(0);
}
[data-section="facilities"] .card.reveal:nth-child(1){transition-delay:.03s}
[data-section="facilities"] .card.reveal:nth-child(2){transition-delay:.10s}
[data-section="facilities"] .card.reveal:nth-child(3){transition-delay:.17s}
[data-section="facilities"] .card.reveal:nth-child(4){transition-delay:.24s}
[data-section="facilities"] .card.reveal:nth-child(5){transition-delay:.31s}
[data-section="facilities"] .card.reveal:nth-child(6){transition-delay:.38s}
[data-section="facilities"] .card.reveal:nth-child(7){transition-delay:.45s}
[data-section="facilities"] .card.reveal:nth-child(8){transition-delay:.52s}

/* Hover: icon bounce + card glow */
[data-section="facilities"] .card:hover {
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 0 0 3px var(--yellow), 6px 8px 0 var(--ink), 0 20px 40px -10px rgba(53,41,74,.25);
}
[data-section="facilities"] .card:hover .icon {
  animation:iconBounce .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes iconBounce {
  0%  { transform:scale(1) translateY(0); }
  40% { transform:scale(1.3) translateY(-8px); }
  70% { transform:scale(.95) translateY(2px); }
  100%{ transform:scale(1) translateY(0); }
}


/* ─────────────────────────────────────────────────────────
   SECTION 6 · ACTIVITIES TILES — Cascade + tilt in from sides
   ───────────────────────────────────────────────────────── */
[data-section="activities"] .tile.reveal {
  opacity:0;
  transition: opacity .55s ease,
              transform .55s cubic-bezier(.22,1,.36,1);
}
/* Odd tiles come from left, even from right */
[data-section="activities"] .tile.reveal:nth-child(odd)  { transform:translateX(-40px) rotate(-3deg); }
[data-section="activities"] .tile.reveal:nth-child(even) { transform:translateX(40px)  rotate(3deg); }
[data-section="activities"] .tile.reveal.in {
  opacity:1; transform:translateX(0) rotate(0);
}
[data-section="activities"] .tile.reveal:nth-child(1){transition-delay:.04s}
[data-section="activities"] .tile.reveal:nth-child(2){transition-delay:.12s}
[data-section="activities"] .tile.reveal:nth-child(3){transition-delay:.20s}
[data-section="activities"] .tile.reveal:nth-child(4){transition-delay:.28s}
[data-section="activities"] .tile.reveal:nth-child(5){transition-delay:.36s}
[data-section="activities"] .tile.reveal:nth-child(6){transition-delay:.44s}

/* Hover: overlay caption slides up */
[data-section="activities"] .tile .cap {
  transition: bottom .3s cubic-bezier(.22,1,.36,1),
              background .3s;
}
[data-section="activities"] .tile:hover .cap {
  bottom:18px;
  background:var(--yellow);
}
[data-section="activities"] .tile img { transition:transform .5s ease; }
[data-section="activities"] .tile:hover img { transform:scale(1.1); }


/* ─────────────────────────────────────────────────────────
   SECTION 7 · WHY CHOOSE US — Cards drop with rubber-band
   ───────────────────────────────────────────────────────── */
[data-section="whychoose"] .card.reveal {
  opacity:0;
  transform:translateY(-40px) scaleY(.8);
  transform-origin: top center;
  transition: opacity .55s ease,
              transform .55s cubic-bezier(.34,1.56,.64,1);
}
[data-section="whychoose"] .card.reveal.in {
  opacity:1; transform:translateY(0) scaleY(1);
}
[data-section="whychoose"] .card.reveal:nth-child(1){transition-delay:.05s}
[data-section="whychoose"] .card.reveal:nth-child(2){transition-delay:.14s}
[data-section="whychoose"] .card.reveal:nth-child(3){transition-delay:.23s}
[data-section="whychoose"] .card.reveal:nth-child(4){transition-delay:.32s}
[data-section="whychoose"] .card.reveal:nth-child(5){transition-delay:.41s}
[data-section="whychoose"] .card.reveal:nth-child(6){transition-delay:.50s}

/* Hover: icon wobble */
[data-section="whychoose"] .card:hover {
  transform:translateY(-8px) scale(1.025);
  box-shadow:7px 9px 0 var(--ink), 0 22px 44px -10px rgba(53,41,74,.24);
}
[data-section="whychoose"] .card:hover .icon {
  animation:iconWobble .6s ease;
}
@keyframes iconWobble {
  0%  { transform:rotate(0); }
  20% { transform:rotate(-12deg); }
  40% { transform:rotate(10deg); }
  60% { transform:rotate(-7deg); }
  80% { transform:rotate(5deg); }
  100%{ transform:rotate(0); }
}


/* ─────────────────────────────────────────────────────────
   SECTION 8 · GALLERY TILES — Zoom in from centre + scatter
   ───────────────────────────────────────────────────────── */
[data-section="gallery"] .tile.reveal {
  opacity:0;
  transform:scale(.5) rotate(var(--rng-rot, 4deg));
  transition: opacity .5s ease,
              transform .55s cubic-bezier(.34,1.4,.64,1);
}
[data-section="gallery"] .tile.reveal:nth-child(1){transition-delay:.04s; --rng-rot:-5deg}
[data-section="gallery"] .tile.reveal:nth-child(2){transition-delay:.11s; --rng-rot: 4deg}
[data-section="gallery"] .tile.reveal:nth-child(3){transition-delay:.18s; --rng-rot:-3deg}
[data-section="gallery"] .tile.reveal:nth-child(4){transition-delay:.25s; --rng-rot: 6deg}
[data-section="gallery"] .tile.reveal:nth-child(5){transition-delay:.32s; --rng-rot:-4deg}
[data-section="gallery"] .tile.reveal:nth-child(6){transition-delay:.39s; --rng-rot: 3deg}
[data-section="gallery"] .tile.reveal.in {
  opacity:1; transform:scale(1) rotate(0deg);
}

/* Hover: lift + border glow + image zoom */
[data-section="gallery"] .tile:hover {
  transform:translateY(-6px) scale(1.04);
  box-shadow:0 0 0 4px var(--coral), 5px 7px 0 var(--ink);
  z-index:2; position:relative;
}
[data-section="gallery"] .tile img { transition:transform .5s ease; }
[data-section="gallery"] .tile:hover img { transform:scale(1.1); }


/* ─────────────────────────────────────────────────────────
   SECTION 9 · TESTIMONIALS — Slide in from bottom with fade
   ───────────────────────────────────────────────────────── */
[data-section="testimonials"] .section-head.reveal {
  opacity:0; transform:translateY(30px);
  transition:opacity .65s ease, transform .65s cubic-bezier(.22,1,.36,1);
}
[data-section="testimonials"] .section-head.reveal.in {
  opacity:1; transform:translateY(0);
}
/* Carousel: each slide fades+scales */
.slide { transform-origin:center; }
.slide.active { animation:slideIn .55s cubic-bezier(.22,1,.36,1); }
@keyframes slideIn {
  from { opacity:0; transform:scale(.96) translateY(12px); }
  to   { opacity:1; transform:scale(1)   translateY(0); }
}
/* Arrow buttons pulse on hover */
.car-ctrl .arrow {
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), background .2s;
}
.car-ctrl .arrow:hover {
  transform:scale(1.2);
  background:var(--coral);
  color:#fff;
}


/* ─────────────────────────────────────────────────────────
   SECTION 10 · FAQ — Items slide in from left, alternating
   ───────────────────────────────────────────────────────── */
[data-section="faq"] .faq.reveal {
  opacity:0; transform:translateX(-30px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
[data-section="faq"] .faq.reveal.in {
  opacity:1; transform:translateX(0);
}
/* FAQ question hover */
.faq-q {
  transition: background .25s, padding-left .25s;
}
.faq-q:hover {
  background: var(--yellow);
  padding-left: 1.8rem;
}
.faq-q[aria-expanded="true"] {
  background: var(--peach);
}


/* ─────────────────────────────────────────────────────────
   SECTION 11 · CTA BANNER — Zoom + rotating blobs
   ───────────────────────────────────────────────────────── */
.cta .wrap.reveal {
  opacity:0; transform:scale(.9);
  transition:opacity .7s ease, transform .7s cubic-bezier(.34,1.3,.64,1);
}
.cta .wrap.reveal.in {
  opacity:1; transform:scale(1);
}
.cta::before { animation:ctaBlob1 8s ease-in-out infinite; }
.cta::after  { animation:ctaBlob2 10s ease-in-out infinite; }
@keyframes ctaBlob1 {
  0%,100%{ transform:translate(0,0)   rotate(0deg); }
  33%    { transform:translate(25px,15px) rotate(120deg); }
  66%    { transform:translate(-10px,25px) rotate(240deg); }
}
@keyframes ctaBlob2 {
  0%,100%{ transform:translate(0,0)     rotate(0deg); }
  33%    { transform:translate(-20px,-15px) rotate(-120deg); }
  66%    { transform:translate(15px,-25px)  rotate(-240deg); }
}


/* ─────────────────────────────────────────────────────────
   SECTION 12 · CONTACT + MAP — Split reveal: text fades left, map fades right
   ───────────────────────────────────────────────────────── */
[data-section="contact"] .split.reveal {
  opacity:0;
  transition: opacity .8s ease;
}
[data-section="contact"] .split.reveal.in {
  opacity:1;
}
[data-section="contact"] .split.reveal > div:first-child {
  transform:translateX(-40px);
  transition:transform .8s cubic-bezier(.22,1,.36,1) .1s;
}
[data-section="contact"] .split.reveal.in > div:first-child {
  transform:translateX(0);
}
[data-section="contact"] .split.reveal > .map {
  transform:translateX(40px);
  transition:transform .8s cubic-bezier(.22,1,.36,1) .2s;
}
[data-section="contact"] .split.reveal.in > .map {
  transform:translateX(0);
}
/* Map border shimmer on appear */
[data-section="contact"] .map {
  transition: box-shadow .5s ease .8s;
}
[data-section="contact"] .split.reveal.in + * .map,
[data-section="contact"] .split.reveal.in .map {
  box-shadow: 0 0 0 4px var(--yellow), 6px 6px 0 var(--ink);
}


/* ─────────────────────────────────────────────────────────
   GLOBAL — Button enhancements (work everywhere)
   ───────────────────────────────────────────────────────── */
.btn {
  transition: transform .22s cubic-bezier(.22,1,.36,1),
              box-shadow .22s cubic-bezier(.22,1,.36,1),
              background .18s;
  position: relative;
  overflow: hidden;
}
/* Shimmer sweep on hover */
.btn::after {
  content:'';
  position:absolute;
  top:0; left:-120%; width:80%; height:100%;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.35) 50%,transparent 100%);
  transform:skewX(-20deg);
  transition:left .45s ease;
}
.btn:hover::after { left:140%; }


/* ─────────────────────────────────────────────────────────
   GLOBAL — Section headings: underline wipe
   ───────────────────────────────────────────────────────── */
.section-head h2 {
  position:relative;
  display:inline-block;
}
.section-head h2::after {
  content:'';
  position:absolute;
  left:0; bottom:-6px;
  width:0; height:4px;
  background:var(--coral);
  border-radius:99px;
  transition:width .7s cubic-bezier(.22,1,.36,1) .3s;
}
.section-head.in h2::after,
.section-head.reveal.in h2::after {
  width:100%;
}
.section-head.center h2::after {
  left:50%; transform:translateX(-50%);
}


/* ─────────────────────────────────────────────────────────
   COLLAGE (About section images)
   ───────────────────────────────────────────────────────── */
.collage .arch {
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s;
}
.collage .arch:hover {
  transform: scale(1.04) rotate(-1deg);
  box-shadow: 0 20px 40px -10px rgba(53,41,74,.35);
}


/* ─────────────────────────────────────────────────────────
   STRIP announcement bar — shimmer
   ───────────────────────────────────────────────────────── */
.strip {
  position: relative;
  overflow: hidden;
}
.strip::after {
  content:'';
  position:absolute;
  top:0; left:-200%;
  width:80%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  animation:stripShimmer 4s linear infinite;
}
@keyframes stripShimmer {
  to { left:220%; }
}


/* ─────────────────────────────────────────────────────────
   NAV LINK — animated underline
   ───────────────────────────────────────────────────────── */
.main-nav a:not(.btn) {
  position:relative;
}
.main-nav a:not(.btn)::after {
  content:'';
  position:absolute;
  bottom:4px; left:.8rem; right:.8rem;
  height:3px; border-radius:99px;
  background:var(--coral);
  transform:scaleX(0);
  transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.main-nav a:not(.btn):hover::after,
.main-nav a:not(.btn)[aria-current="page"]::after {
  transform:scaleX(1);
}


/* ─────────────────────────────────────────────────────────
   PREFERS-REDUCED-MOTION — disable everything
   ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    transition-duration:.001ms !important;
  }
  .hero-anim-kicker, .hero-anim-h1, .hero-anim-lead,
  .hero-anim-btns, .hero-anim-art {
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
  .hero-scroll-hint { opacity:1; transform:translateX(-50%); }
  .section-head h2::after { width:100% !important; transition:none; }
}


/* ─────────────────────────────────────────────────────────
   UNIQUE SECTION ANIMATIONS (Blessings Play School Enhanced)
   ───────────────────────────────────────────────────────── */

/* 1. Facilities Slider Cards & Icons */
.facility-card {
  transition: transform .35s cubic-bezier(.34,1.4,.64,1),
              box-shadow .35s ease,
              border-color .3s ease;
}
.facility-card:hover {
  transform: translateY(-8px) scale(1.025) rotate(-0.5deg);
  box-shadow: 0 16px 32px rgba(53,41,74,.18), 0 0 0 3px var(--coral);
}
.facility-card .facility-thumb img {
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.facility-card:hover .facility-thumb img {
  transform: scale(1.08);
}
.facility-card:hover .facility-icon-circle {
  animation: facilityIconWiggle .6s cubic-bezier(.34,1.56,.64,1);
}
.facility-card:hover .facility-pill-num {
  animation: facilityPillHop .4s ease;
  background: var(--yellow);
  color: var(--ink);
}
@keyframes facilityIconWiggle {
  0%   { transform: scale(1) rotate(0deg); }
  25%  { transform: scale(1.25) rotate(-18deg); }
  50%  { transform: scale(1.25) rotate(18deg); }
  75%  { transform: scale(1.1) rotate(-8deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes facilityPillHop {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px) scale(1.15); }
}

/* 2. About Photo Wrapper & Floating Sticker Badges */
.about-photo-wrapper {
  position: relative;
  display: block;
  max-width: 480px;
  width: 100%;
  margin-inline: auto;
}
.sticker-badge {
  position: absolute;
  z-index: 5;
  font-size: 1.8rem;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 3px 3px 0 var(--ink);
  pointer-events: none;
  user-select: none;
}
.sticker-badge.s1 { top: -16px; left: -16px; animation: stickerFloat1 3.2s ease-in-out infinite; }
.sticker-badge.s2 { top: 20px; right: -20px; font-size: 1.6rem; animation: stickerFloat2 4.1s ease-in-out infinite; }
.sticker-badge.s3 { bottom: -12px; right: 24px; animation: stickerFloat3 3.6s ease-in-out infinite; }
.sticker-badge.s4 { bottom: 30px; left: -22px; font-size: 1.7rem; animation: stickerFloat4 4.5s ease-in-out infinite; }

@keyframes stickerFloat1 {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-12px) rotate(8deg); }
}
@keyframes stickerFloat2 {
  0%, 100% { transform: translateY(0) rotate(10deg); }
  50%      { transform: translateY(-16px) rotate(-12deg); }
}
@keyframes stickerFloat3 {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-10px) rotate(6deg); }
}
@keyframes stickerFloat4 {
  0%, 100% { transform: translateY(0) rotate(8deg); }
  50%      { transform: translateY(-14px) rotate(-6deg); }
}

/* 3. Program Cards & Interactive Mascot Buddy */
.program-card {
  transition: transform .35s cubic-bezier(.34,1.4,.64,1),
              box-shadow .35s ease,
              border-color .3s ease;
  cursor: pointer;
  position: relative;
}
.program-card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 8px 12px 0 var(--ink), 0 24px 44px -10px rgba(53,41,74,.25);
  border-color: var(--ink);
}
.program-card:nth-child(odd):hover {
  transform: translateY(-10px) rotate(-1.5deg) scale(1.03);
}
.program-card:nth-child(even):hover {
  transform: translateY(-10px) rotate(1.5deg) scale(1.03);
}
.program-card .program-thumb img {
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.program-card:hover .program-thumb img {
  transform: scale(1.09);
}
.program-card .program-age-tag {
  transition: transform .25s ease, background .25s ease;
}
.program-card:hover .program-age-tag {
  background: var(--coral);
  color: #fff;
  transform: scale(1.08);
}

/* Mascot Buddy interactive gestures */
.mascot-avatar {
  transition: transform .3s ease;
  animation: mascotWiggle 3.5s ease-in-out infinite;
}
@keyframes mascotWiggle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-8deg) scale(1.05); }
  75%      { transform: rotate(8deg) scale(1.05); }
}
.mascot-celebrate {
  animation: mascotHopCelebrate .65s cubic-bezier(.34,1.56,.64,1) !important;
}
@keyframes mascotHopCelebrate {
  0%, 100% { transform: translateY(0) scale(1); }
  40%      { transform: translateY(-18px) scale(1.3) rotate(-12deg); }
  70%      { transform: translateY(-8px) scale(1.15) rotate(12deg); }
}

/* Confetti Sparkles on Card Click */
.confetti-particle {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  font-size: 1.6rem;
  animation: confettiBurst .85s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes confettiBurst {
  0%   { opacity: 1; transform: translate(0, 0) scale(0.5); }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.3) rotate(var(--rot)); }
}

/* 4. Why Choose Us: Corkscrew icon spin & soft pulse */
[data-section="whychoose"] .card {
  transition: transform .3s cubic-bezier(.34,1.4,.64,1),
              box-shadow .3s ease,
              background .3s ease;
}
[data-section="whychoose"] .card:hover {
  transform: translateY(-8px) scale(1.04);
  box-shadow: 6px 8px 0 var(--ink), 0 20px 40px -8px rgba(53,41,74,.2);
}
[data-section="whychoose"] .card:hover .icon {
  animation: iconCorkscrew .65s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes iconCorkscrew {
  0%   { transform: scale(1) rotate(0deg); }
  45%  { transform: scale(1.4) rotate(190deg); }
  80%  { transform: scale(0.9) rotate(350deg); }
  100% { transform: scale(1.1) rotate(360deg); }
}

/* 5. Nutrition Cards: Organic Squish & Heartbeat Pulse */
.nutrition-card {
  transition: transform .35s cubic-bezier(.34,1.5,.64,1),
              box-shadow .35s ease,
              background .3s;
  position: relative;
  overflow: hidden;
}
.nutrition-card:hover {
  transform: translateY(-8px) scale(1.03, 1.02);
  box-shadow: 6px 8px 0 var(--ink), 0 18px 36px rgba(46,204,113,.2);
  background: #FFFDF9;
}
.nutrition-card:hover .nutrition-icon {
  animation: nutritionPulse .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes nutritionPulse {
  0%, 100% { transform: scale(1); }
  30%      { transform: scale(1.35) rotate(-10deg); }
  60%      { transform: scale(1.2) rotate(10deg); }
}
.food-policy-notice {
  transition: transform .3s ease, box-shadow .3s ease;
}
.food-policy-notice:hover {
  transform: translateY(-3px);
  box-shadow: 5px 5px 0 var(--ink), 0 12px 24px rgba(255,107,107,.15);
}
.food-notice-icon {
  animation: noticeRing 4s ease-in-out infinite;
}
@keyframes noticeRing {
  0%, 90%, 100% { transform: rotate(0); }
  92%           { transform: rotate(-15deg); }
  94%           { transform: rotate(15deg); }
  96%           { transform: rotate(-10deg); }
  98%           { transform: rotate(10deg); }
}

/* 6. Learning Approach Cards */
.learning-card {
  transition: transform .35s cubic-bezier(.22,1,.36,1),
              box-shadow .35s ease,
              border-color .3s;
  position: relative;
}
.learning-card:hover {
  transform: translateY(-6px) rotate(1deg);
  box-shadow: 6px 8px 0 var(--ink), 0 16px 32px rgba(100,149,237,.18);
  border-color: var(--ink);
}
.learning-card:hover .icon {
  animation: discoveryGlow .55s ease forwards;
}
@keyframes discoveryGlow {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3) rotate(20deg); }
  100% { transform: scale(1.15) rotate(0deg); }
}

/* 7. Testimonials: Star twinkle & avatar tilt */
.testimonial-card {
  transition: transform .4s cubic-bezier(.34,1.3,.64,1),
              box-shadow .4s ease;
}
.testimonial-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 8px 10px 0 var(--ink), 0 20px 40px rgba(53,41,74,.2);
}
.testimonial-card:hover .rating-stars {
  animation: starTwinkle .7s ease;
  letter-spacing: 4px;
}
@keyframes starTwinkle {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); color: #FF8F00; text-shadow: 0 0 12px #FFD700; }
}
.testimonial-card .parent-avatar {
  transition: transform .4s ease;
}
.testimonial-card:hover .parent-avatar {
  transform: scale(1.1) rotate(-4deg);
}

/* 8. FAQs Accordion item interaction */
.faq-item {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.faq-item:hover {
  transform: translateX(4px);
  border-color: var(--coral);
}
.faq-question {
  transition: background .2s ease;
}
.faq-question:hover {
  background: var(--cream);
}
.faq-toggle-icon {
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.faq-item.active .faq-toggle-icon {
  transform: rotate(45deg);
  background: var(--coral);
  color: #fff;
}
.faq-item.active {
  border-color: var(--coral);
  box-shadow: 4px 4px 0 var(--coral);
}

/* 9. Location & Contact */
.location-card {
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.location-card:hover {
  transform: translateY(-6px);
  box-shadow: 6px 8px 0 var(--ink), 0 20px 40px rgba(53,41,74,.2);
}

/* ─────────────────────────────────────────────────────────
   RESPONSIVE — Hero padding
   ───────────────────────────────────────────────────────── */
@media (max-width:1000px) {
  .hero .wrap.hero-grid { padding:5.5rem 0 4.5rem; }
}
@media (max-width:768px) {
  .hero { min-height:100svh; }
  .hero .wrap.hero-grid { padding:5rem 0 4rem; }
}
@media (max-width:480px) {
  .hero .wrap.hero-grid { padding:4.5rem 0 3.5rem; }
}