/* Effects shared by the admin dashboard and the public registration form.
 *
 * Part 1 is the dashboard's own effect CSS, moved here unchanged so both pages
 * draw the same sun / owl states, chick, balloons, stars, bat, lights and
 * storm flash (the markup comes from public/js/fx-art.mjs, the behaviour from
 * public/js/fx-*.mjs). The dashboard links this file BEFORE
 * admin-dashboard.css, which keeps its own sizes, positions, phone and
 * reduced-motion rules.
 *
 * Part 2 is the registration form only (`.fx-*` classes, rendered by
 * src/views/form-fx.js). The form is the product, so every effect there is
 * behind the content (z-index -1 under the in-flow page), low-contrast,
 * pointer-events: none, adds no box to the layout and cannot widen the page.
 * The only things that ever pass over the content are momentary: the chick
 * while it hops onto a hovered panel, and the confetti / balloons once a
 * registration went through. */

/* ======================================================= 1. shared pieces */

.zk-buddy-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.zk-sun { filter: drop-shadow(0 6px 10px rgba(242, 184, 75, 0.55)); }
.zk-owl { filter: drop-shadow(0 6px 10px rgba(110, 90, 170, 0.35)); }
.sun-rays { transform-origin: 32px 32px; transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.zk-buddy:hover .sun-rays { transform: rotate(45deg) scale(1.06); }
.zk-buddy .pupil { transition: opacity 0.12s; }
.zk-buddy .lid { fill: none; stroke: #A9552F; stroke-width: 2; stroke-linecap: round; opacity: 0; }
.zk-buddy .yawn { opacity: 0; transform-box: fill-box; transform-origin: center; }
.zk-buddy.is-wink .eye-r .pupil { opacity: 0; }
.zk-buddy.is-wink .eye-r .lid { opacity: 1; }
.zk-buddy.is-sleepy .zk-sun .pupil { opacity: 0; }
.zk-buddy.is-sleepy .zk-sun .lid { opacity: 1; }
.zk-buddy.is-sleepy .mouth { opacity: 0; }
.zk-buddy.is-sleepy .yawn { opacity: 1; animation: zk-yawn 4s ease-in-out infinite; }
@keyframes zk-yawn { 0%, 100% { transform: scale(0.55); } 35%, 60% { transform: scale(1.1, 1.25); } }
.owl-lid { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); animation: zk-blink 5.5s infinite; }
.owl-lid + .owl-lid { animation-delay: 0.02s; }
@keyframes zk-blink { 0%, 93%, 100% { transform: scaleY(0); } 96% { transform: scaleY(1); } }
.zk-buddy.is-wink .owl-lid { animation: none; transform: scaleY(1); }
.zk-buddy.is-sleepy .owl-lid { animation: none; transform: scaleY(0.9); }
.zk-zz { position: absolute; top: -4px; right: -6px; display: none; font-family: var(--num, 'Nunito', system-ui, sans-serif); font-weight: 600; color: var(--ink-soft, #5B6186); }
.zk-zz i { position: absolute; font-style: normal; opacity: 0; animation: zk-zz 3s ease-out infinite; }
.zk-zz i + i { animation-delay: 1.5s; font-size: 0.8em; }
.zk-buddy.is-sleepy .zk-zz { display: block; }
@keyframes zk-zz { 0% { opacity: 0; transform: translate(0, 8px) scale(0.7); } 25% { opacity: 0.9; } 100% { opacity: 0; transform: translate(14px, -18px) scale(1.2); } }

.zk-star {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #FFF7D6;
  box-shadow: 0 0 6px 2px rgba(255, 247, 214, 0.8);
  animation: zk-twinkle 3.2s ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes zk-twinkle { 50% { opacity: 0.25; transform: scale(0.6); } }

@keyframes zk-fade-in { from { opacity: 0; transform: translateY(10px); } }

.zk-bulb { animation: zk-bulb 2.4s ease-in-out infinite; animation-delay: var(--d); }
@keyframes zk-bulb { 50% { opacity: 0.45; } }

.zk-bat {
  position: absolute;
  top: 18%;
  left: 0;
  width: 46px;
  height: auto;
  opacity: 0;
  animation: zk-bat 28s linear infinite 4s;
}
@keyframes zk-bat {
  0% { opacity: 0; transform: translate(-60px, 10px); }
  3% { opacity: 0.9; }
  12% { transform: translate(28vw, -8px) rotate(-6deg); }
  22% { transform: translate(56vw, 14px) rotate(5deg); }
  32% { opacity: 0.9; transform: translate(88vw, -4px); }
  36%, 100% { opacity: 0; transform: translate(100vw, 0); }
}

.zk-chick {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  width: 34px;
  height: 34px;
  pointer-events: none;
  transform: translate(-100px, -100px);
  will-change: transform;
}
.zk-chick.is-hopping { transition: transform 0.6s cubic-bezier(0.45, 0, 0.3, 1); }
.zk-chick svg { display: block; width: 100%; height: 100%; overflow: visible; }
.zk-chick.is-left svg { transform: scaleX(-1); }
.zk-chick.is-hopping .zk-chick-hop { animation: zk-hop 0.6s ease-in-out; }
@keyframes zk-hop { 50% { transform: translateY(-26px); } }
.zk-chick.is-perched .zk-chick-hop { animation: zk-bob 1.6s ease-in-out infinite; }
@keyframes zk-bob { 50% { transform: translateY(-3px) rotate(-4deg); } }
.zk-chick.is-walking .ck-leg-a { animation: zk-step 0.36s ease-in-out infinite alternate; }
.zk-chick.is-walking .ck-leg-b { animation: zk-step 0.36s ease-in-out infinite alternate-reverse; }
.zk-chick.is-walking .zk-chick-hop { animation: zk-waddle 0.72s ease-in-out infinite; }
.ck-leg { transform-box: fill-box; transform-origin: 50% 0; }
@keyframes zk-step { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@keyframes zk-waddle { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }

.zk-balloon {
  position: fixed;
  bottom: -120px;
  z-index: 45;
  width: 46px;
  pointer-events: none;
  animation: zk-rise var(--t, 7s) cubic-bezier(0.4, 0, 0.6, 1) forwards;
  animation-delay: var(--delay, 0s);
}
.zk-balloon svg { display: block; width: 100%; height: auto; animation: zk-sway 2.2s ease-in-out infinite alternate; }
@keyframes zk-rise { to { transform: translateY(calc(-100vh - 160px)); } }
@keyframes zk-sway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }

.zk-flash {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.55), rgba(230, 230, 255, 0.15) 60%, transparent);
  opacity: 0;
}
.zk-flash.is-on { animation: zk-flash 1.1s ease-out; }
@keyframes zk-flash { 0% { opacity: 0; } 8% { opacity: 0.5; } 16% { opacity: 0.15; } 24% { opacity: 0.4; } 100% { opacity: 0; } }

/* ============================================= 2. the registration form */

/* The backdrop: a fixed full-viewport layer painted just above the page's
   own ground (the body background) and under every block of the form. */
.fx-root {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.fx-root .fx-weather { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.7; }
.fx-root .zk-flash { position: absolute; }

/* Night (Brussels 20:00–07:00): a soft dusk over the sunny ground, a few stars. */
.fx-dusk {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(92, 84, 170, 0.28) 0%, rgba(150, 120, 200, 0.16) 45%, rgba(245, 160, 120, 0.08) 100%);
}
.fx-dusk .zk-star { width: 4px; height: 4px; }

/* The day after a lesson Sunday: a faint rainbow low in the corner. */
.fx-root .zk-rainbow {
  position: absolute;
  right: -3vw;
  bottom: -1vh;
  width: min(56vw, 560px);
  height: min(28vw, 280px);
  opacity: 0.38;
  animation: zk-fade-in 3s ease-out both;
}

.fx-root .zk-bat { top: 30%; width: 40px; }

/* The masthead's crayon sun comes alive: a transparent layer with the same
   box as the logo (.brand img in theme-blocks.css: 52px, -5°) draws eyes over
   the drawn ones. The logo image itself is untouched. */
[data-theme="blocks"] .brand { position: relative; }
.fx-sunface {
  position: absolute;
  left: 0;
  top: 50%;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  transform: rotate(-5deg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fx-sunface .eye-white { fill: #FFF8DC; stroke: #4E5A1E; stroke-width: 0.8; }
.fx-sunface .lid { stroke: #4E5A1E; stroke-width: 1; }
.fx-sunface.is-wink .eye-r .eye-white,
.fx-sunface.is-sleepy .eye-white { fill: #F4C91E; stroke: none; }
.fx-sunface.is-sleepy .pupil { opacity: 0; }
.fx-sunface.is-sleepy .lid { opacity: 1; }
.fx-sunface .zk-zz { top: -6px; right: -8px; font-size: 13px; }
/* On hover the drawing and its eyes turn together (same box, same pivot). */
.fx-sunface,
[data-theme="blocks"] .brand:has(> .fx-sunface) img { transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.fx-sunface:hover,
[data-theme="blocks"] .brand:has(> .fx-sunface:hover) img { transform: rotate(10deg); }

/* A holiday sticker slapped on the hero strap's top-left corner. */
.fx-sticker {
  position: absolute;
  z-index: 1;
  top: -16px;
  left: -12px;
  width: 40px;
  height: auto;
  transform: rotate(-12deg);
  pointer-events: none;
}

/* Christmas: fairy lights along the top of the masthead, inside its padding. */
.fx-lights { position: absolute; top: 0; left: 0; right: 0; height: 15px; pointer-events: none; }
.fx-lights .zk-lights { display: block; width: 100%; height: 100%; }

/* The confetti layer: above the content, empty except for a few seconds. */
.fx-sparks { position: fixed; inset: 0; z-index: 40; width: 100%; height: 100%; pointer-events: none; }

/* The chick walks the bottom edge BEHIND the form (visible in the margins);
   on the form it never perches, so it never comes in front. */
.zk-chick.fx-form-chick { z-index: -1; }

@media (max-width: 700px) {
  .zk-chick.fx-form-chick { display: none; }
  .fx-sticker { left: -8px; width: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-root .fx-weather, .fx-root .zk-flash, .fx-root .zk-bat, .fx-sparks, .zk-balloon { display: none; }
  .fx-root *, .fx-sunface, .fx-sunface *, .fx-lights *, .fx-form-chick, .fx-form-chick *,
  [data-theme="blocks"] .brand:has(> .fx-sunface) img {
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  .fx-root, .fx-sparks, .fx-form-chick, .fx-sunface, .fx-sticker, .fx-lights, .zk-balloon { display: none !important; }
}