/* =========================================================================
   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 TOY illustration (random, interactive) ----------------- */
/* The toy <img> fades in (0.4s), idle-floats, jumps on click and glows on hover
   in its own colour (--toy-glow, set per toy in js/hero-toy.js). The float lives
   on a wrapper so it never fights the img's scale transform. All motion here is
   auto-disabled by the prefers-reduced-motion rule in section 16.            */
.hero-toy {
  display: block;
  opacity: 0;
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
  --toy-glow: #3DA9FC;
  filter: drop-shadow(0 14px 14px rgba(27, 42, 74, 0.18));
  transition: opacity 0.4s ease, transform 0.25s cubic-bezier(.34, 1.56, .64, 1), filter 0.25s ease;
}
.hero-toy.is-loaded { opacity: 1; }
@media (hover: hover) {
  .hero-toy:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 26px var(--toy-glow)) drop-shadow(0 14px 14px rgba(27, 42, 74, 0.18));
  }
}
.hero-toy.jump { animation: toyJump 0.55s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes toyJump {
  0%   { transform: scale(1); }
  28%  { transform: scale(1.15); }
  52%  { transform: scale(0.96); }
  74%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}
/* gentle idle float (on the wrapper — separate element, no transform clash) */
.hero-toy-float { animation: toyFloat 3s ease-in-out infinite; }
@keyframes toyFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---- 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-toy-float,.hero-toy.jump { animation:none !important; }
}