/* AI Border Effect - Siri-like glowing border when AI is active */
/* DO NOT modify base .page or #dashboard styles - they affect loading overlay */
/* CRITICAL: Never interfere with page-specific pseudo-elements like #page17::before */

/* The glow is drawn by a single fixed-position overlay (#ai-glow-overlay) that
   tracks the active page's main container. On page 1 that container is the
   #dashboard grid, so the glow wraps the WHOLE dashboard once - never the
   individual cards. The fixed overlay lives outside the .page chain, so it is
   not clipped by .page { overflow: hidden }. */

.card {
  position: relative;
  transition: all 0.3s ease;
}

/* CRITICAL: Disable AI glow pseudo-elements on page 1 cards - NO layout changes.
   The overlay handles page 1, so individual cards must never glow. */
#page1 .card.ai-active::before,
#page1 .card.ai-active::after,
#page1 .mini-card.ai-active::before,
#page1 .mini-card.ai-active::after,
#page1 .difficulty-card.ai-active::before,
#page1 .difficulty-card.ai-active::after,
#page1 .dual-card-wrapper.ai-active::before,
#page1 .dual-card-wrapper.ai-active::after,
#page1 #dashboard .card.ai-active::before,
#page1 #dashboard .card.ai-active::after,
#page1 #dashboard .mini-card.ai-active::before,
#page1 #dashboard .mini-card.ai-active::after,
#page1 #dashboard .difficulty-card.ai-active::before,
#page1 #dashboard .difficulty-card.ai-active::after,
#page1 #dashboard .dual-card-wrapper.ai-active::before,
#page1 #dashboard .dual-card-wrapper.ai-active::after {
  content: none !important;
  display: none !important;
  background: none !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* PAGE 1: never glow the dashboard container or any of its cards directly.
   The fixed overlay provides the single outer glow. This applies at ALL widths. */
#page1 #dashboard.ai-active,
#page1 #dashboard.ai-active .card,
#page1 #dashboard.ai-active .mini-card,
#page1 #dashboard.ai-active .difficulty-card,
#page1 #dashboard.ai-active .dual-card-wrapper {
  box-shadow: none !important;
  animation: none !important;
  border: none !important;
  outline: none !important;
}

/* =====================================================
   FIXED-POSITION AI GLOW OVERLAY
   Tracks the active container's rect (set by ai-border.js). Rendered BEHIND
   page content via DOM order (inserted as body's first child). Same Siri
   gradient + blur as the original design. Available at ALL widths.
   ===================================================== */
#ai-glow-overlay {
  display: none;
  position: fixed;
  pointer-events: none;
  border-radius: 10px;
}

body.ai-glow-active #ai-glow-overlay {
  display: block;
}

#ai-glow-overlay::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border-radius: 10px;
  background: linear-gradient(135deg, #e8a0bf, #b08fcf, #8bb8e8, #7dd4d4, #a4c8f0, #c2a6e0, #e8a0bf);
  background-size: 400% 400%;
  animation: siriGradientMove 4s ease infinite;
  filter: blur(16px);
  opacity: 0.8;
}

#ai-glow-overlay::after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 10px;
  background: linear-gradient(135deg, #e8a0bf, #b08fcf, #8bb8e8, #7dd4d4, #a4c8f0, #c2a6e0, #e8a0bf);
  background-size: 400% 400%;
  animation: siriGradientMove 4s ease infinite;
  filter: blur(4px);
  opacity: 0.4;
}

/* PAGE 1 ONLY: the overlay sits BEHIND the #dashboard grid, which has
   transparent 10px gaps between cards. A filled gradient overlay would bleed
   THROUGH those gaps and look like a glow around every card. So on page 1 the
   overlay becomes a hollow glowing FRAME: transparent fill + outward box-shadow,
   which only draws outside its box and can never show through the gaps. The
   fixed overlay lives outside the .page chain, so .page { overflow:hidden }
   does not clip this glow. */
body.ai-on-page1 #ai-glow-overlay {
  background: transparent;
}

/* The pulse (siriGlowPulse, below) is drawn as a crossfade between its two keyframes, each a
   static box-shadow layer: animating box-shadow repaints the whole frame every frame (17 fps on
   the kiosk tablet), opacity is composited for free. Same look at both ends of the pulse and
   within a few brightness levels in between. ai-border.js sets --glow-k (0..1, the pulse with
   its ease-in-out) 30 times a second, on the same frames as the caption orb. */
body.ai-on-page1 #ai-glow-overlay::before,
body.ai-on-page1 #ai-glow-overlay::after {
  inset: 0;
  background: none;
  filter: none;
  border-radius: 10px;
  will-change: opacity;
}
body.ai-on-page1 #ai-glow-overlay::before {
  box-shadow:
    0 0 15px rgba(232, 160, 191, 0.4),
    0 0 30px rgba(176, 143, 207, 0.3),
    0 0 45px rgba(125, 212, 212, 0.2),
    0 0 60px rgba(164, 200, 240, 0.15);
  opacity: calc(1 - var(--glow-k, 0));
}
body.ai-on-page1 #ai-glow-overlay::after {
  box-shadow:
    0 0 25px rgba(232, 160, 191, 0.6),
    0 0 50px rgba(176, 143, 207, 0.5),
    0 0 75px rgba(125, 212, 212, 0.4),
    0 0 100px rgba(164, 200, 240, 0.3);
  opacity: var(--glow-k, 0);
}

/* Canvas renderer (ai-border.js) draws the same glow at quarter resolution, so the browser
   doesn't repaint a blurred near-full-screen layer every frame. It replaces the pseudo-elements
   (not on page 1, see above); browsers without canvas filters never get .fx-canvas. */
#ai-glow-overlay canvas { position: absolute; pointer-events: none; }
#ai-glow-overlay:not(.fx-canvas) canvas { display: none; }
#ai-glow-overlay.fx-canvas::before,
#ai-glow-overlay.fx-canvas::after { display: none !important; }

/* Single-card pages use an inner-card glow on small/landscape screens instead of
   the overlay (the overlay halo would be clipped by their tight layout). Hide the
   overlay there - but ALWAYS keep it for page 1, which has no single .card. */
@media screen and (max-width: 767px) {
  body.ai-glow-active:not(.ai-on-page1) #ai-glow-overlay {
    display: none;
  }
}
@media screen and (max-width: 932px) and (orientation: landscape) {
  body.ai-glow-active:not(.ai-on-page1) #ai-glow-overlay {
    display: none;
  }
}

/* Desktop: suppress ALL card-level glow on non-page1 pages - overlay handles it */
@media screen and (min-width: 768px) {
  .page:not(#page1) .card.ai-active {
    animation: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
  }

  .page:not(#page1) .card.ai-active::before,
  .page:not(#page1) .card.ai-active::after {
    content: none !important;
    display: none !important;
  }
}

/* Animations */
@keyframes siriGradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Page 1 frame-glow pulse (box-shadow on the hollow overlay) */
@keyframes siriGlowPulse {
  0%, 100% {
    box-shadow:
      0 0 15px rgba(232, 160, 191, 0.4),
      0 0 30px rgba(176, 143, 207, 0.3),
      0 0 45px rgba(125, 212, 212, 0.2),
      0 0 60px rgba(164, 200, 240, 0.15);
  }
  50% {
    box-shadow:
      0 0 25px rgba(232, 160, 191, 0.6),
      0 0 50px rgba(176, 143, 207, 0.5),
      0 0 75px rgba(125, 212, 212, 0.4),
      0 0 100px rgba(164, 200, 240, 0.3);
  }
}

/* =====================================================
   MOBILE / LANDSCAPE-MOBILE - single-card pages keep their inner glow.
   Page 1 is intentionally excluded (it uses the overlay).
   ===================================================== */
@media screen and (max-width: 767px) {
  .page:not(#page1) .card.ai-active {
    border: none !important;
    outline: none !important;
    box-shadow:
      inset 0 0 30px rgba(232, 160, 191, 0.6),
      inset 0 0 60px rgba(176, 143, 207, 0.4),
      inset 0 0 90px rgba(125, 212, 212, 0.3) !important;
    animation: siriInnerGlowMobile 2.5s ease-in-out infinite !important;
  }
}

@media screen and (max-width: 932px) and (orientation: landscape) {
  .page:not(#page1) .card.ai-active {
    border: none !important;
    outline: none !important;
    box-shadow:
      inset 0 0 30px rgba(232, 160, 191, 0.6),
      inset 0 0 60px rgba(176, 143, 207, 0.4),
      inset 0 0 90px rgba(125, 212, 212, 0.3) !important;
    animation: siriInnerGlowMobile 2.5s ease-in-out infinite !important;
  }
}

/* Single-card pages - inner glow animation */
@keyframes siriInnerGlowMobile {
  0%, 100% {
    box-shadow:
      inset 0 0 30px rgba(232, 160, 191, 0.6),
      inset 0 0 60px rgba(176, 143, 207, 0.4),
      inset 0 0 90px rgba(125, 212, 212, 0.3);
  }
  33% {
    box-shadow:
      inset 0 0 35px rgba(176, 143, 207, 0.7),
      inset 0 0 70px rgba(125, 212, 212, 0.5),
      inset 0 0 100px rgba(232, 160, 191, 0.3);
  }
  66% {
    box-shadow:
      inset 0 0 35px rgba(125, 212, 212, 0.7),
      inset 0 0 70px rgba(232, 160, 191, 0.5),
      inset 0 0 100px rgba(176, 143, 207, 0.3);
  }
}