/* Home intro: a copy of kind.kids page C's intro (itself after en.manayerbamate.com), in DreamsComeTrue colours.
   0.8s   letters pop in, .07s apart (elastic scale .8 → 1) while flashing orange → violet → pink → sky → yellow → mint → ink
   2.0s   9 stars and sparkles fly up 200px, spinning
   3.4s   a yellow blob, then a night-purple one, grow from the bottom and fill the screen
   4.3s   site.js fades the intro out and the hero comes in. Esc skips. */
:root{ --e-letter:linear(0.000 0.0%, 0.055 0.2%, 0.163 0.6%, 0.306 1.1%, 0.472 1.8%, 0.653 2.5%, 0.840 3.4%, 1.025 4.3%, 1.201 5.3%, 1.360 6.4%, 1.495 7.6%, 1.603 8.9%, 1.678 10.2%, 1.719 11.6%, 1.727 13.0%, 1.703 14.6%, 1.651 16.2%, 1.577 17.8%, 1.485 19.5%, 1.384 21.3%, 1.279 23.1%, 1.179 25.0%, 1.088 26.9%, 1.010 28.9%, 0.949 30.9%, 0.906 33.0%, 0.881 35.1%, 0.871 37.3%, 0.876 39.5%, 0.890 41.8%, 0.911 44.2%, 0.935 46.5%, 0.959 49.0%, 0.981 51.4%, 0.999 54.0%, 1.012 56.5%, 1.019 59.1%, 1.023 61.8%, 1.022 64.5%, 1.019 67.2%, 1.014 70.0%, 1.009 72.8%, 1.005 75.7%, 1.001 78.6%, 0.998 81.5%, 0.996 84.5%, 0.996 87.5%, 0.996 90.6%, 0.997 93.7%, 0.998 96.8%, 1.000 100.0%);
  --e-star:linear(0.000 0.0%, 0.014 0.2%, 0.043 0.6%, 0.086 1.1%, 0.143 1.8%, 0.214 2.5%, 0.299 3.4%, 0.395 4.3%, 0.501 5.3%, 0.614 6.4%, 0.729 7.6%, 0.842 8.9%, 0.947 10.2%, 1.042 11.6%, 1.121 13.0%, 1.181 14.6%, 1.222 16.2%, 1.243 17.8%, 1.244 19.5%, 1.228 21.3%, 1.199 23.1%, 1.160 25.0%, 1.117 26.9%, 1.073 28.9%, 1.032 30.9%, 0.997 33.0%, 0.971 35.1%, 0.955 37.3%, 0.947 39.5%, 0.947 41.8%, 0.953 44.2%, 0.963 46.5%, 0.975 49.0%, 0.987 51.4%, 0.997 54.0%, 1.005 56.5%, 1.010 59.1%, 1.012 61.8%, 1.011 64.5%, 1.009 67.2%, 1.006 70.0%, 1.003 72.8%, 1.001 75.7%, 0.999 78.6%, 0.998 81.5%, 0.997 84.5%, 0.998 87.5%, 0.998 90.6%, 0.999 93.7%, 1.000 96.8%, 1.000 100.0%); }
.loader:has(.intro){ background:#fef3e0; display:block; overflow:hidden; }
.intro,.intro__inner{ position:absolute; inset:0; }
.intro__inner{ display:flex; align-items:center; justify-content:center; }
/* everything waits (paused at its start) until site.js adds .is-playing */
.loader:not(.is-playing) .intro *{ animation-play-state:paused !important; }
.intro__title{ margin:0; width:95vw; text-align:center; text-transform:uppercase; color:var(--ink);
  font:700 calc(min(10.5vw,22vh) * .9)/.85 Champ,"Fredoka",Arial,sans-serif; letter-spacing:-.01em; }
.intro__title .ln{ display:block; }
.intro__title .lt{ display:inline-block; opacity:0; transform:scale(.8);
  animation:intro-flash .42s step-end var(--d) both, intro-pop .6s var(--e-letter) var(--d) both; }
@keyframes intro-flash{ 0%{opacity:0} 0.1%{opacity:1;color:#f7941d} 16.67%{opacity:1;color:#3b2f8f} 33.33%{opacity:1;color:#ff5fa2} 50%{opacity:1;color:#5cc8ff} 66.67%{opacity:1;color:#ffd54f} 83.33%{opacity:1;color:#3fd6a0} 100%{opacity:1;color:#1d1640} }
@keyframes intro-pop{ from{transform:scale(.8)} to{transform:scale(1)} }
.intro__star{ position:absolute; width:2.8vw; min-width:22px; max-width:54px; height:auto; overflow:visible; opacity:0; left:var(--x); top:var(--y);
  transform:translate(-50%,-50%) translateY(200px) rotate(var(--r)) scale(.5); animation:intro-star 1.5s var(--e-star) var(--d) both; }
@keyframes intro-star{ to{ opacity:1; transform:translate(-50%,-50%) rotate(0) scale(var(--s)); } }
.intro__blob{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.intro__blob i{ position:absolute; left:50%; top:88%; width:40vmax; height:40vmax; background:var(--c); border-radius:42% 58% 70% 30% / 45% 45% 55% 55%;
  transform:translate(-50%,-50%) scale(0) rotate(0); animation:intro-blob .8s cubic-bezier(.6,0,.35,1) var(--d) both; }
@keyframes intro-blob{ to{ transform:translate(-50%,-50%) scale(6.5) rotate(140deg); border-radius:60% 40% 30% 70% / 60% 30% 70% 40%; } }
@media (prefers-reduced-motion:reduce){ .loader:has(.intro){ display:none; } }