/* ============================================================
   SchoolClaude Kids — FX Layer
   Glassmorphism upgrades + scroll reveals + micro-interactions
   Import AFTER kids.css and kids-lesson.css
   ============================================================ */

/* ───────────────────────────────────────────────────────────
   GLASS TOKEN UPGRADES
   ─────────────────────────────────────────────────────────── */
:root {
  --fx-glass-bg:      rgba(40, 25, 100, 0.48);
  --fx-glass-strong:  rgba(20, 10, 60, 0.72);
  --fx-edge-shine:    inset 0 1px 0 rgba(255, 255, 255, 0.40);
  --fx-inner-glow:    inset 0 0 32px rgba(255, 255, 255, 0.04);
  --fx-green-glow:    0 0 28px rgba(58, 255, 156, 0.55), 0 0 80px rgba(58, 255, 156, 0.18);
  --fx-magenta-glow:  0 0 28px rgba(255, 79, 216, 0.55), 0 0 80px rgba(255, 79, 216, 0.18);
  --fx-sun-glow:      0 0 28px rgba(255, 210, 63, 0.60), 0 0 64px rgba(255, 210, 63, 0.20);
  --fx-blue-glow:     0 0 28px rgba(56, 216, 255, 0.55), 0 0 80px rgba(56, 216, 255, 0.18);

  --fx-enter-dur:     420ms;
  --fx-enter-ease:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --fx-micro-dur:     180ms;
  --fx-micro-ease:    cubic-bezier(0.34, 1.56, 0.64, 1);   /* spring overshoot */
  --fx-hover-dur:     240ms;
  --fx-hover-ease:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ───────────────────────────────────────────────────────────
   REDUCED-MOTION GUARD — disable heavy animations for a11y
   ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --fx-enter-dur: 0ms;
    --fx-micro-dur: 0ms;
    --fx-hover-dur: 0ms;
  }
  .fx-reveal, .fx-stagger > * { opacity: 1 !important; transform: none !important; }
  .kids-page *,
  .kids-page *::before,
  .kids-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ───────────────────────────────────────────────────────────
   SCROLL REVEAL BASE
   JS adds .fx-visible when element enters viewport
   ─────────────────────────────────────────────────────────── */
.fx-reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  transition:
    opacity   var(--fx-enter-dur) var(--fx-enter-ease),
    transform var(--fx-enter-dur) var(--fx-enter-ease);
}
.fx-reveal.fx-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Staggered children */
.fx-stagger > * {
  opacity: 0;
  transform: translateY(22px) scale(0.97);
  transition:
    opacity   var(--fx-enter-dur) var(--fx-enter-ease),
    transform var(--fx-enter-dur) var(--fx-enter-ease);
}
.fx-stagger.fx-visible > *:nth-child(1)  { transition-delay:  0ms; }
.fx-stagger.fx-visible > *:nth-child(2)  { transition-delay: 70ms; }
.fx-stagger.fx-visible > *:nth-child(3)  { transition-delay:140ms; }
.fx-stagger.fx-visible > *:nth-child(4)  { transition-delay:210ms; }
.fx-stagger.fx-visible > *:nth-child(5)  { transition-delay:280ms; }
.fx-stagger.fx-visible > *:nth-child(6)  { transition-delay:350ms; }
.fx-stagger.fx-visible > *:nth-child(7)  { transition-delay:420ms; }
.fx-stagger.fx-visible > *:nth-child(n+8) { transition-delay:490ms; }
.fx-stagger.fx-visible > * { opacity: 1; transform: none; }

/* Slide-in-right variant */
.fx-reveal--right {
  transform: translateX(-36px) scale(0.97);
}
.fx-reveal--right.fx-visible {
  transform: translateX(0) scale(1);
}

/* ───────────────────────────────────────────────────────────
   GLASS CARD UPGRADE — applies to step-cards, lesson-intro, etc.
   ─────────────────────────────────────────────────────────── */
.step-card {
  background: var(--fx-glass-bg);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow:
    var(--fx-edge-shine),
    var(--fx-inner-glow),
    0 8px 32px rgba(0, 0, 0, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateZ(0);
  transition:
    transform  var(--fx-hover-dur) var(--fx-hover-ease),
    box-shadow var(--fx-hover-dur) var(--fx-hover-ease),
    border-color var(--fx-hover-dur) ease;
  will-change: transform;
}
.step-card:hover {
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow:
    var(--fx-edge-shine),
    var(--fx-inner-glow),
    0 16px 48px rgba(0, 0, 0, 0.40),
    0 4px 16px rgba(0, 0, 0, 0.25);
}

/* Glare overlay — JS writes --mx / --my on mousemove */
.step-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.10) 0%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 300ms ease;
}
.step-card:hover::after { opacity: 1; }

/* Lesson intro upgrade */
.lesson-intro {
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  box-shadow:
    var(--fx-edge-shine),
    var(--fx-inner-glow),
    0 12px 40px rgba(0, 0, 0, 0.40);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: transform var(--fx-hover-dur) var(--fx-hover-ease);
}
.lesson-intro:hover { transform: translateY(-2px); }

/* ───────────────────────────────────────────────────────────
   BUTTON — ripple + magnetic lift
   ─────────────────────────────────────────────────────────── */
.kids-btn {
  position: relative;
  overflow: hidden;
  transition:
    transform  var(--fx-micro-dur) var(--fx-micro-ease),
    box-shadow var(--fx-micro-dur) var(--fx-micro-ease),
    filter     var(--fx-micro-dur) ease;
}
.kids-btn:hover {
  transform: translateY(-3px) scale(1.04);
  filter: brightness(1.12);
}
.kids-btn:active {
  transform: translateY(1px) scale(0.97);
  transition-duration: 80ms;
}

/* Ripple element injected by JS */
.kids-btn .fx-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.30);
  width: 10px; height: 10px;
  transform: scale(0);
  animation: fxRipple 560ms ease-out forwards;
  pointer-events: none;
}
@keyframes fxRipple {
  to { transform: scale(30); opacity: 0; }
}

/* CTA link inside world-map station */
.kids-hex-cta {
  position: relative;
  overflow: hidden;
  transition:
    transform  var(--fx-micro-dur) var(--fx-micro-ease),
    box-shadow var(--fx-micro-dur) ease;
}
.kids-hex-cta:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 24px rgba(58, 255, 156, 0.35);
}
.kids-hex-cta:active { transform: scale(0.96); transition-duration: 80ms; }

/* ───────────────────────────────────────────────────────────
   HEX STATIONS — depth + glow pulse on hover
   ─────────────────────────────────────────────────────────── */
.kids-station { transition: transform var(--fx-hover-dur) var(--fx-hover-ease); }
.kids-station:hover { transform: translateY(-4px); }

.kids-hex {
  transition:
    filter     var(--fx-hover-dur) ease,
    transform  var(--fx-hover-dur) var(--fx-hover-ease);
}
.kids-station--open .kids-hex:hover {
  filter: drop-shadow(0 0 18px rgba(58, 255, 156, 0.70)) drop-shadow(0 0 40px rgba(58, 255, 156, 0.30));
  transform: scale(1.07) rotateY(4deg);
}
.kids-station--completed .kids-hex:hover {
  filter: drop-shadow(0 0 18px rgba(56, 216, 255, 0.70)) drop-shadow(0 0 40px rgba(56, 216, 255, 0.30));
  transform: scale(1.06);
}

/* Pulsing ring on open station */
.kids-hex-halo {
  transition: opacity var(--fx-hover-dur) ease;
}
.kids-station--open .kids-hex:hover .kids-hex-halo {
  animation: fxHaloPulse 1.4s ease-in-out infinite;
}
@keyframes fxHaloPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.08); }
}

/* Robot inside hex — gentle scale on hover */
.kids-hex-robot {
  transition: transform var(--fx-hover-dur) var(--fx-micro-ease);
}
.kids-station--open .kids-hex:hover .kids-hex-robot {
  transform: scale(1.12) translateY(-4px);
}

/* ───────────────────────────────────────────────────────────
   HERO TEXT — NO glass box, text floats freely over space bg
   ─────────────────────────────────────────────────────────── */
.kids-hero-text {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

/* Hero robot float */
.kids-robot-img {
  animation: fxRobotFloat 6s ease-in-out infinite;
  transition: filter var(--fx-hover-dur) ease;
  filter: drop-shadow(0 8px 32px rgba(58, 255, 156, 0.35));
}
@keyframes fxRobotFloat {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50%     { transform: translateY(-14px) rotate(1deg); }
}
.kids-robot-img:hover {
  filter: drop-shadow(0 8px 40px rgba(255, 79, 216, 0.55)) drop-shadow(0 0 60px rgba(58, 255, 156, 0.30));
}

/* ───────────────────────────────────────────────────────────
   SAFETY BOX — glass upgrade
   ─────────────────────────────────────────────────────────── */
.kids-safety {
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  box-shadow:
    var(--fx-edge-shine),
    var(--fx-inner-glow),
    0 8px 28px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: transform var(--fx-hover-dur) var(--fx-hover-ease);
}
.kids-safety:hover { transform: translateY(-2px); }

/* ───────────────────────────────────────────────────────────
   HOW-IT-WORKS STEPS
   ─────────────────────────────────────────────────────────── */
.kids-step {
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  box-shadow:
    var(--fx-edge-shine),
    var(--fx-inner-glow),
    0 6px 24px rgba(0, 0, 0, 0.30);
  transition:
    transform  var(--fx-hover-dur) var(--fx-hover-ease),
    box-shadow var(--fx-hover-dur) ease;
}
.kids-step:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow:
    var(--fx-edge-shine),
    var(--fx-inner-glow),
    0 14px 40px rgba(0, 0, 0, 0.40);
}

/* Step number glow on hover */
.kids-step:hover .kids-step-num {
  text-shadow: 0 0 24px currentColor, 0 0 48px currentColor;
  transform: scale(1.08);
}
.kids-step-num {
  transition: text-shadow var(--fx-hover-dur) ease, transform var(--fx-hover-dur) var(--fx-micro-ease);
}

/* ───────────────────────────────────────────────────────────
   CHOOSE CHIPS — bounce select + glass
   ─────────────────────────────────────────────────────────── */
.choose-chip {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--fx-edge-shine), 0 2px 8px rgba(0,0,0,0.22);
  transition:
    transform     var(--fx-micro-dur) var(--fx-micro-ease),
    box-shadow    var(--fx-micro-dur) ease,
    border-color  var(--fx-micro-dur) ease,
    background    var(--fx-micro-dur) ease;
}
.choose-chip:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: var(--fx-edge-shine), 0 8px 20px rgba(255, 210, 63, 0.30);
}
.choose-chip[aria-pressed="true"],
.choose-chip[aria-checked="true"] {
  transform: scale(1.06);
  box-shadow: var(--fx-edge-shine), var(--fx-sun-glow);
  animation: fxChipPop 320ms var(--fx-micro-ease);
}
@keyframes fxChipPop {
  0%  { transform: scale(0.92); }
  60% { transform: scale(1.10); }
  100%{ transform: scale(1.06); }
}

/* ───────────────────────────────────────────────────────────
   OFFLINE MISSION — shimmer border
   ─────────────────────────────────────────────────────────── */
.offline-mission {
  position: relative;
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow:
    var(--fx-edge-shine),
    var(--fx-inner-glow),
    0 8px 32px rgba(0, 0, 0, 0.32);
  overflow: hidden;
}
/* Animated shimmer sweep */
.offline-mission::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 126, 236, 0.12) 50%,
    transparent 65%
  );
  background-size: 200% 100%;
  animation: fxShimmer 3s linear infinite;
}
@keyframes fxShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ───────────────────────────────────────────────────────────
   TEACHER NOTE — glass left-bar
   ─────────────────────────────────────────────────────────── */
.teacher-note {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--fx-edge-shine), 0 4px 16px rgba(0,0,0,0.24);
  transition: transform var(--fx-hover-dur) var(--fx-hover-ease);
}
.teacher-note:hover { transform: translateX(-3px); }

/* ───────────────────────────────────────────────────────────
   TIPS — glass pill
   ─────────────────────────────────────────────────────────── */
.tip {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--fx-edge-shine), 0 2px 8px rgba(0,0,0,0.18);
  border: 1px solid rgba(255, 255, 255, 0.10);
  transition: transform var(--fx-micro-dur) var(--fx-micro-ease);
}
.tip:hover { transform: translateX(-4px); }

/* ───────────────────────────────────────────────────────────
   SECRET CODE FORM — holographic glass
   ─────────────────────────────────────────────────────────── */
.secret-code-form,
.kids-code-form {
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  box-shadow:
    var(--fx-edge-shine),
    var(--fx-inner-glow),
    0 8px 36px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition:
    transform  var(--fx-hover-dur) var(--fx-hover-ease),
    box-shadow var(--fx-hover-dur) ease;
}
.secret-code-form:hover,
.kids-code-form:hover {
  transform: translateY(-2px);
  box-shadow:
    var(--fx-edge-shine),
    var(--fx-inner-glow),
    0 12px 48px rgba(0, 0, 0, 0.44),
    0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* ───────────────────────────────────────────────────────────
   SECTION HEADERS — subtle glow entrance
   ─────────────────────────────────────────────────────────── */
.kids-section-h {
  transition: text-shadow var(--fx-hover-dur) ease;
}
.kids-section-h:hover {
  text-shadow: 0 0 40px rgba(56, 216, 255, 0.45);
}

/* ───────────────────────────────────────────────────────────
   NAVIGATION TOPBAR — glass upgrade
   ─────────────────────────────────────────────────────────── */
.kids-topbar {
  backdrop-filter: blur(28px) saturate(2.0);
  -webkit-backdrop-filter: blur(28px) saturate(2.0);
  box-shadow:
    var(--fx-edge-shine),
    0 4px 24px rgba(0, 0, 0, 0.40),
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

/* Back button hover */
.kids-hex-btn--back {
  transition:
    transform  var(--fx-micro-dur) var(--fx-micro-ease),
    box-shadow var(--fx-micro-dur) ease,
    background var(--fx-micro-dur) ease;
}
.kids-hex-btn--back:hover {
  transform: translateX(3px) scale(1.04);
}

/* ───────────────────────────────────────────────────────────
   STATION CONNECTOR (path between stations) — pulse
   ─────────────────────────────────────────────────────────── */
.kids-connector {
  position: relative;
  overflow: hidden;
}
.kids-connector::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: -100%;
  width: 60%;
  background: linear-gradient(90deg, transparent, rgba(58, 255, 156, 0.55), transparent);
  animation: fxConnectorPulse 2.4s ease-in-out infinite;
}
@keyframes fxConnectorPulse {
  0%   { inset-inline-start: -60%; }
  100% { inset-inline-start: 140%; }
}

/* ───────────────────────────────────────────────────────────
   PROMPT TEXTAREA — neon focus ring
   ─────────────────────────────────────────────────────────── */
textarea.reflection {
  transition:
    border-color var(--fx-micro-dur) ease,
    box-shadow   var(--fx-micro-dur) ease,
    transform    var(--fx-micro-dur) ease;
}
textarea.reflection:focus {
  transform: scale(1.008);
  border-color: var(--kids-electric-blue);
  box-shadow:
    0 0 0 3px rgba(56, 216, 255, 0.20),
    0 0 18px rgba(56, 216, 255, 0.22);
}

/* ───────────────────────────────────────────────────────────
   INFO-TYPE CARDS (lesson 02) — glass upgrade
   ─────────────────────────────────────────────────────────── */
.info-type {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--fx-edge-shine), 0 4px 16px rgba(0,0,0,0.25);
  transition:
    transform  var(--fx-hover-dur) var(--fx-hover-ease),
    box-shadow var(--fx-hover-dur) ease;
}
.info-type:hover { transform: translateY(-4px) scale(1.02); }
.info-type--public:hover  { box-shadow: var(--fx-edge-shine), var(--fx-green-glow); }
.info-type--private:hover { box-shadow: var(--fx-edge-shine), var(--fx-sun-glow); }
.info-type--secret:hover  { box-shadow: var(--fx-edge-shine), var(--fx-magenta-glow); }

/* ───────────────────────────────────────────────────────────
   XP BADGE (HUD) — pulse on update
   ─────────────────────────────────────────────────────────── */
.kids-xp-changed {
  animation: fxXpPop 500ms var(--fx-micro-ease);
}
@keyframes fxXpPop {
  0%  { transform: scale(1); }
  40% { transform: scale(1.22); filter: brightness(1.4); }
  100%{ transform: scale(1); filter: brightness(1); }
}

/* ───────────────────────────────────────────────────────────
   PAGE TRANSITION — fade-in on load
   Main: slide+fade.  Header: opacity only (NO transform —
   transform on header would create stacking context that
   lets <main> paint over the header/dropdown by DOM order).
   ─────────────────────────────────────────────────────────── */
body.kids-page > main {
  animation: fxPageIn 500ms var(--fx-enter-ease) both;
}
body.kids-page > header.kids-topbar {
  animation: fxTopbarIn 400ms var(--fx-enter-ease);
  /* No fill-mode — element returns to CSS-declared z-index:40 after animation */
}
@keyframes fxPageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fxTopbarIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ───────────────────────────────────────────────────────────
   MISSION COMPLETE SUCCESS FLASH
   JS adds .fx-success to secret-code-form on correct code
   ─────────────────────────────────────────────────────────── */
.fx-success {
  animation: fxSuccess 700ms var(--fx-enter-ease);
}
@keyframes fxSuccess {
  0%   { box-shadow: var(--fx-edge-shine), 0 0 0 rgba(58, 255, 156, 0); }
  40%  { box-shadow: var(--fx-edge-shine), 0 0 80px rgba(58, 255, 156, 0.80), 0 0 0 8px rgba(58, 255, 156, 0.30); }
  100% { box-shadow: var(--fx-edge-shine), var(--fx-green-glow); }
}

/* ───────────────────────────────────────────────────────────
   A11Y — WCAG 2.5.5 touch targets (48×48 min), focus rings,
   kid-friendly amplified selected state
   ─────────────────────────────────────────────────────────── */
.kids-btn,
.kids-hex-cta,
.kids-hex-btn,
.choose-chip {
  min-height: 48px;
  min-width: 48px;
}
.kids-btn {
  padding: 14px 26px;
  font-weight: 700;
}

/* Clear, consistent focus ring on every interactive element */
.kids-page a:focus-visible,
.kids-page button:focus-visible,
.kids-page [role="button"]:focus-visible,
.kids-page input:focus-visible,
.kids-page textarea:focus-visible,
.kids-page select:focus-visible,
.kids-page .choose-chip:focus-visible,
.kids-page .kids-station:focus-visible {
  outline: 3px solid #FFD23F;
  outline-offset: 3px;
  border-radius: 8px;
  box-shadow: 0 0 0 6px rgba(255, 210, 63, 0.25);
}

/* Kid-friendly selected chip: unmissable */
.choose-chip[aria-pressed="true"],
.choose-chip[aria-checked="true"] {
  outline: 3px solid var(--kids-sun, #FFD23F);
  outline-offset: 3px;
  transform: scale(1.08);
}

/* Larger ripple for larger buttons */
.kids-btn .fx-ripple,
.kids-hex-cta .fx-ripple {
  width: 14px;
  height: 14px;
}