/* ==========================================================================
   Maximilian Kindergarten — shared static styles
   Regular CSS only. The Tailwind utility classes are compiled at runtime by
   the Tailwind browser script (see each page's <head>); the colour palette
   remap lives in the <style type="text/tailwindcss"> block there.
   This file holds the few things Tailwind doesn't give us: scroll-reveal
   animation, the gentle floating decorations, and a no-JS fallback.
   ========================================================================== */

html { font-size: 16px; }

body {
  font-family: "Urbanist", ui-sans-serif, system-ui, sans-serif;
  /* Avoid a flash of unstyled huge content before Tailwind compiles. */
  -webkit-font-smoothing: antialiased;
}

/* --- Scroll reveal -------------------------------------------------------
   Mirrors the framer-motion "fade + slide up" entrances from the React app.
   Elements tagged with .reveal start hidden and animate in when they enter
   the viewport (handled by site.js). Optional inline style="--reveal-delay:.2s"
   reproduces the staggered delays. */
/* Only hide reveal elements when JS is available (the inline <head> script
   adds `js` to <html> before first paint). With no JS the content just shows. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { transition: none; opacity: 1; transform: none; }
}

/* --- Floating decorations ------------------------------------------------
   The little blurred blobs/squares that bob up and down in the React hero
   and page headers (motion `animate={{ y: [...] }}`). */
@keyframes floatY {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(5deg); }
}
@keyframes floatYAlt {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(12px) rotate(-5deg); }
}
@keyframes pulseScale {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}
.float-1 { animation: floatY 3s ease-in-out infinite; }
.float-2 { animation: floatYAlt 4s ease-in-out infinite; }
.float-3 { animation: pulseScale 3s ease-in-out infinite; }
.float-4 { animation: pulseScale 4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .float-1, .float-2, .float-3, .float-4 { animation: none; }
}

/* --- Enroll modal --------------------------------------------------------
   Simple show/hide for the dialog (replaces the Radix Dialog from React). */
.modal { display: none; }
.modal.is-open { display: flex; }
body.modal-locked { overflow: hidden; }
