/* =========================================================================
   Tadika Kreatif Mesra — VIBRANT KIDS REBUILD · custom styles
   Pairs with Tailwind (CDN) utilities used in the page markup. Holds the
   design tokens, organic blobs, chunky buttons/cards, scribbles, animations,
   the injected header/footer styling, 3D-hero fallback, gallery + map.

   Reveal/scroll motion is driven by GSAP in script.js (it sets the initial
   hidden state itself) so that with JS or GSAP unavailable, ALL content stays
   visible. Nothing here hides content permanently.
   ========================================================================= */

/* ---- 1. Design tokens (crayon-box palette) ----------------------------- */
:root {
  --cream:     #FFFDF5; /* page background        */
  --navy:      #1B2A4A; /* body text              */
  --sunshine:  #FFD23F;
  --sky:       #3DA9FC;
  --grass:     #3FD06A;
  --coral:     #1A6FBC; /* PRIMARY deep blue (white text); legacy name */
  --sky-press: #17608F; /* darker blue for hover / active / pressed    */
  --grape:     #A66CFF;
  --bubblegum: #FF8FD0;
  --tangerine: #FF9F43;
  --whatsapp:  #25D366;
  --header-h: 4.75rem;
}

/* ---- 2. Base ----------------------------------------------------------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Lenis sets its own smooth scroll; disable native when it's active */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background-color: var(--cream);
  color: var(--navy);
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1,h2,h3,h4,.font-display {
  font-family: "Fredoka", "Baloo 2", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}
section[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }
img { max-width: 100%; height: auto; }

/* ---- 3. Accessibility -------------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  border-radius: 0.6rem;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--navy); color: #fff; padding: 0.6rem 1rem;
  border-radius: 0 0 0.9rem 0.9rem; font-weight: 800;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---- 4. Buttons (chunky, bouncy) -------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  font-family:"Fredoka", system-ui, sans-serif; font-weight:600; line-height:1;
  border-radius:9999px; padding:0.9rem 1.6rem; cursor:pointer; text-decoration:none;
  border:3px solid var(--navy);
  box-shadow: 0 5px 0 0 rgba(27,42,74,0.85);
  transition: transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease, background-color .15s ease;
}
.btn:hover  { transform: translateY(-3px); box-shadow: 0 8px 0 0 rgba(27,42,74,0.85); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 0 rgba(27,42,74,0.85); }
.btn-lg     { padding: 1.05rem 2rem; font-size: 1.15rem; }
.btn-coral     { background: var(--coral);     color: #fff; }        /* PRIMARY blue */
.btn-whatsapp  { background: var(--coral);     color: #fff; }        /* PRIMARY blue (WhatsApp CTA) */
.btn-sky       { background: var(--sky);       color: var(--navy); } /* secondary light blue */
.btn-sunshine  { background: var(--sunshine);  color: var(--navy); } /* occasional accent */
.btn-coral:hover, .btn-coral:active,
.btn-whatsapp:hover, .btn-whatsapp:active { background: var(--sky-press); }
.btn-cream     { background: var(--cream);     color: var(--navy); }

/* ---- 5. Cards (thick friendly outline + hard shadow) ------------------ */
.card {
  border: 3px solid var(--navy);
  border-radius: 1.75rem;
  box-shadow: 0 7px 0 0 rgba(27,42,74,0.85);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
  background: #fff;
}
.card:hover { transform: translateY(-6px) rotate(-1.2deg); box-shadow: 0 13px 0 0 rgba(27,42,74,0.85); }
.card:nth-child(even):hover { transform: translateY(-6px) rotate(1.2deg); }

/* ---- 6. Organic blob image masks -------------------------------------- */
.mask-blob   { border-radius: 62% 38% 41% 59% / 56% 53% 47% 44%; }
.mask-blob-2 { border-radius: 38% 62% 63% 37% / 49% 41% 59% 51%; }
.mask-blob-3 { border-radius: 50% 50% 47% 53% / 60% 56% 44% 40%; }
.mask-blob.animate { animation: blobMorph 14s ease-in-out infinite; }
@keyframes blobMorph {
  0%,100% { border-radius: 62% 38% 41% 59% / 56% 53% 47% 44%; }
  33%     { border-radius: 45% 55% 62% 38% / 48% 62% 38% 52%; }
  66%     { border-radius: 56% 44% 35% 65% / 64% 41% 59% 36%; }
}

/* ---- 7. Decorations: blobs, confetti, scribble ------------------------ */
.blob { position:absolute; z-index:0; pointer-events:none; }
.confetti { position:absolute; z-index:0; pointer-events:none; border-radius:4px; }
.scribble { display:block; color: var(--coral); }
.scribble path { stroke: currentColor; fill:none; }
/* If GSAP draws it, JS sets the dash; this is just the at-rest look. */

/* ---- 8. Playful animations -------------------------------------------- */
.float       { animation: float 6s ease-in-out infinite; }
.float-slow  { animation: float 9s ease-in-out infinite; }
.float-delay { animation-delay: -3s; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }
.spin-slow { animation: spin 18s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.wiggle:hover { animation: wiggle .5s ease-in-out; }
@keyframes wiggle { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-10deg)} 75%{transform:rotate(10deg)} }
.bob { animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

/* ---- 9. Header / nav (injected by js/components.js) ------------------- */
.site-header { position:fixed; top:0; left:0; right:0; z-index:50;
  transition: background-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease; }
.site-header.scrolled {
  background-color: rgba(255,253,245,0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 0 0 rgba(27,42,74,0.08);
}
.nav-link { position:relative; font-family:"Fredoka",sans-serif; font-weight:500; color:var(--navy); text-decoration:none; }
.nav-link::after { content:""; position:absolute; left:0; bottom:-5px; height:3px; width:0;
  background:var(--coral); border-radius:99px; transition:width .25s ease; }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { width:100%; }
.nav-link[aria-current="page"] { color: var(--coral); }

.hamburger-line { transition: transform .3s ease, opacity .2s ease; transform-origin:center; }
.hamburger[aria-expanded="true"] .line-1 { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] .line-2 { opacity:0; }
.hamburger[aria-expanded="true"] .line-3 { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { max-height:0; overflow:hidden; opacity:0; transition:max-height .35s ease, opacity .3s ease; }
.mobile-menu.open { max-height:30rem; opacity:1; }

/* ---- 10. WhatsApp floating button ------------------------------------ */
.wa-fab { position:fixed; right:1rem; bottom:1rem; z-index:60; width:3.6rem; height:3.6rem;
  border-radius:9999px; background:var(--coral); color:#fff;
  border:3px solid var(--navy); box-shadow:0 5px 0 0 rgba(27,42,74,0.85);
  display:flex; align-items:center; justify-content:center; transition:transform .2s ease; }
.wa-fab:hover { transform:scale(1.08) translateY(-2px); }
.wa-fab::before { content:""; position:absolute; inset:-3px; border-radius:inherit;
  background:var(--coral); opacity:.5; z-index:-1; animation:waPulse 2.4s ease-out infinite; }
@keyframes waPulse { 0%{transform:scale(1);opacity:.5} 70%{transform:scale(1.6);opacity:0} 100%{opacity:0} }

/* ---- 11. Gallery masonry + hover zoom -------------------------------- */
.masonry { column-gap: 1.25rem; }
.masonry > * { break-inside: avoid; margin-bottom: 1.25rem; }
.zoom-card { overflow:hidden; }
.zoom-card img { transition: transform .35s ease; display:block; width:100%; }
.zoom-card:hover img { transform: scale(1.07); }

/* ---- 12. Hero rotating CHARACTER mascots + speech bubbles ------------- */
/* One #hero-char image + one #hero-bubble swap together every 5s (js/hero-
   characters.js). The character idle-floats; on each swap both briefly fade +
   pop (cross-fade) so they change in sync. The bubble is pure HTML/CSS so the
   greeting text stays crisp & editable. All motion is auto-disabled by the
   prefers-reduced-motion rule in section 16 (JS also stops the rotation then). */
.hero-characters { position: relative; display: inline-flex; align-items: center;
  justify-content: center; width: 100%; }
/* gentle idle float on a wrapper so it never fights the swap scale transform */
.hero-char-float { animation: charFloat 3.4s ease-in-out infinite; }
@keyframes charFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.hero-char {
  display: block;
  -webkit-user-select: none; user-select: none;
  filter: drop-shadow(0 14px 16px rgba(27, 42, 74, 0.18));
  transition: opacity .38s ease, transform .38s cubic-bezier(.34, 1.56, .64, 1);
}
/* mid-swap state: fade out + shrink a touch, then pop back in */
.hero-char.is-swapping { opacity: 0; transform: scale(.82); }

/* colourful speech bubble — blobby rounded, thick navy outline, soft shadow.
   --bubble-fill (and inline color) are set per character in js/hero-characters.js. */
.hero-bubble {
  position: absolute; top: 4%; left: 58%; z-index: 3;
  background: var(--bubble-fill, #3DA9FC);
  border: 3px solid var(--navy);
  border-radius: 42% 42% 42% 14px / 54% 54% 54% 22px;
  padding: .5rem 1.15rem;
  font-family: "Fredoka", "Baloo 2", "Noto Sans SC", "PingFang SC", "Microsoft YaHei",
    "Noto Sans Tamil", "Nirmala UI", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.05rem, 1rem + 1.1vw, 1.6rem);
  line-height: 1.15; white-space: nowrap;
  box-shadow: 0 6px 0 rgba(27, 42, 74, .16);
  transition: opacity .38s ease, transform .38s cubic-bezier(.34, 1.56, .64, 1),
    background-color .38s ease;
}
/* little tail pointing down toward the character (outlined navy on two edges) */
.hero-bubble::after {
  content: ""; position: absolute; left: 22px; bottom: -10px;
  width: 18px; height: 18px;
  background: var(--bubble-fill, #3DA9FC);
  border-right: 3px solid var(--navy); border-bottom: 3px solid var(--navy);
  border-bottom-right-radius: 4px;
  transform: rotate(52deg);
}
.hero-bubble.is-swapping { opacity: 0; transform: scale(.82); }
@media (max-width: 768px) {
  .hero-bubble { top: 1%; left: 54%; padding: .4rem .85rem; }
}

/* ---- Hero crayon-doodle background (decorative) ---------------------- */
/* Soft scattered child's-doodle layer behind the hero content. Each doodle is a
   positioned .doodle wrapper (which DRIFTS — translate) holding a .doodle-img
   (which SPINS/WOBBLES — rotate). Splitting the two transforms across two
   elements lets them run independently. Timings/tilt are set per doodle inline
   (--ddur/--ddelay drift, --sdur/--sdelay spin, --rot base tilt). All motion is
   clipped by the overflow:hidden layer so it can never create a scrollbar, and
   it's switched off under prefers-reduced-motion (see section 16). */
.hero-doodles { position: absolute; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none; opacity: 0.22; }
/* Same doodle system reused on inner pages (about/programs/gallery/reviews/
   contact/404). Drop a .doodle-layer into any `relative overflow-hidden`
   section and give the section's content `relative z-10`. Lower opacity so it
   stays a soft background; add .faint on text-heavy pages (about, contact). */
.doodle-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none; opacity: 0.18; }
.doodle-layer.faint { opacity: 0.14; }
.doodle { position: absolute; will-change: transform;
  animation: doodleDrift var(--ddur, 9s) ease-in-out infinite;
  animation-delay: var(--ddelay, 0s); }
.doodle.alt { animation-name: doodleDrift2; }
.doodle-img { display: block; height: auto; will-change: transform;
  transform: rotate(var(--rot, 0deg));
  animation: doodleWobble var(--sdur, 8s) ease-in-out infinite;
  animation-delay: var(--sdelay, 0s); }
.doodle-img.spin { animation-name: doodleSpin; animation-timing-function: linear; }
@keyframes doodleDrift {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(10px, -15px); }
  50%      { transform: translate(-9px, -26px); }
  75%      { transform: translate(-15px, -11px); }
}
@keyframes doodleDrift2 {
  0%, 100% { transform: translate(0, 0); }
  33%      { transform: translate(16px, 9px); }
  66%      { transform: translate(21px, -15px); }
}
@keyframes doodleWobble {
  0%, 100% { transform: rotate(calc(var(--rot, 0deg) - 7deg)); }
  50%      { transform: rotate(calc(var(--rot, 0deg) + 7deg)); }
}
@keyframes doodleSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ---- 13. Leaflet map ------------------------------------------------- */
#map { width:100%; height:100%; min-height:20rem; border-radius:1.5rem; z-index:0; }
.leaflet-container { font-family:"Nunito",sans-serif; border-radius:1.5rem; }

/* ---- 14. Form fields ------------------------------------------------- */
.field { width:100%; border-radius:1rem; border:3px solid var(--navy);
  background:#fff; padding:0.8rem 1rem; font:inherit; color:var(--navy);
  transition:border-color .2s ease, box-shadow .2s ease; }
.field:focus { outline:none; border-color:var(--coral); box-shadow:0 0 0 4px rgba(26,111,188,0.30); }

/* ---- 15. Misc -------------------------------------------------------- */
.dot-sep::before { content:"•"; margin:0 .5rem; color:var(--coral); }
.eyebrow { display:inline-flex; align-items:center; gap:.5rem; border-radius:9999px;
  padding:.4rem 1rem; font-family:"Fredoka",sans-serif; font-weight:600; font-size:.9rem;
  border:2px solid var(--navy); }
/* Lottie: hide the fallback once the animation has rendered */
[data-lottie].lottie-ready > .lottie-fallback { display:none; }
/* Rotating hero tagline — fade in 0.4s (gated behind .js so no-JS shows it instantly) */
.js .hero-tagline { opacity: 0; transition: opacity 0.4s ease; }
.hero-tagline.is-shown { opacity: 1; }

/* ---- 16. Reduced motion: turn OFF all motion ------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .float,.float-slow,.spin-slow,.bob,.mask-blob.animate,.wa-fab::before,
  .hero-char-float,.doodle,.doodle-img { animation:none !important; }
}