/*
 * Accessibility Fix for Interactive Alphabet Arc
 * Region 4 Education Service Center
 *
 * Problem: The rainbow arc's color-cycling animation (powered by Framer Motion)
 * rapidly shifts all 6 bands through every rainbow color in a 6-second infinite
 * loop. This is very distracting on Smartboards and laptops, and the rapid
 * flashing colors pose a seizure risk (WCAG 2.1 SC 2.3.1).
 *
 * Fix: Force each rainbow band to display its own natural static color,
 * overriding the Framer Motion inline styles with CSS !important. Also make
 * the blink keyframe animation gentler and add prefers-reduced-motion support.
 */

/* =========================================================
   1. Stop rainbow color cycling — lock each arc band to its
      natural color. CSS !important overrides Framer Motion's
      inline style="border-color: ..." updates.
   ========================================================= */

.rainbow > div.red {
    border-color: #EE1E27 !important;
}

.rainbow > div.orange {
    border-color: #F26524 !important;
}

.rainbow > div.yellow {
    border-color: #FFDE19 !important;
}

.rainbow > div.green {
    border-color: #04A34E !important;
}

.rainbow > div.blue {
    border-color: #23429B !important;
}

.rainbow > div.purple {
    border-color: #80429A !important;
}

/* No longer animating border-color, so drop the GPU hint */
.rainbow > div {
    will-change: auto !important;
    transition: none !important;
}

/* =========================================================
   2. Tame the blink animation — raise the minimum opacity
      so it becomes a gentle pulse instead of a full flash.
   ========================================================= */

:root {
    --blink-opacity: 60% !important;
}

/* =========================================================
   3. Respect prefers-reduced-motion for users/devices that
      request reduced motion at the OS level.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}