/* ED Quiz Banner — HTML5/CSS3 replacement for test4_*_speed.gif
   --scale variable: 0.6 (blue header, 60% size) / 0.5 (lightblue mobile, 50% size). */

.ed-quiz-banner {
  --scale: 1;
  position: relative;
  display: block;
  width: calc(600px * var(--scale));
  height: calc(132px * var(--scale));
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  border-radius: calc(14px * var(--scale));
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  color: inherit;
  font-family: 'Work Sans', 'Inter', -apple-system, sans-serif;
}
.ed-quiz-banner--blue {
  --scale: 0.6;
  border: 3px solid #015993;
  background: linear-gradient(180deg, #EDF2F6 0%, #FFFFFF 50%, #EDF2F6 100%);
}
.ed-quiz-banner--lightblue {
  --scale: 0.5;
  border: 1px solid #DCE5EB;
  background: linear-gradient(180deg, #F6F9FB 0%, #FFFFFF 50%, #F6F9FB 100%);
}

/* === Phase containers === */
.ed-quiz-banner .phase {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.ed-quiz-banner .phase--taps    { animation: edqVisTaps    5s infinite; }
.ed-quiz-banner .phase--results { animation: edqVisResults 5s infinite; }
.ed-quiz-banner .phase--cta     { animation: edqVisCta     5s infinite; }

@keyframes edqVisTaps    { 0%, 55% { opacity: 1; } 57%, 100% { opacity: 0; } }
@keyframes edqVisResults { 0%, 55% { opacity: 0; } 57%, 83% { opacity: 1; } 85%, 100% { opacity: 0; } }
@keyframes edqVisCta     { 0%, 83% { opacity: 0; } 85%, 100% { opacity: 1; } }

/* === Phase 1: Numbers + checkmark inline === */
.ed-quiz-banner .phase--taps .row {
  display: flex;
  gap: calc(56px * var(--scale));
  font-size: calc(54px * var(--scale));
  font-weight: 900;
  align-items: center;
  position: relative;
  letter-spacing: -1px;
}
.ed-quiz-banner .phase--taps .slot {
  width: calc(38px * var(--scale));
  height: calc(60px * var(--scale));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ed-quiz-banner .phase--taps .slot--num::before {
  content: attr(data-num);
  color: #B5C5D1;
  opacity: 0;
}
.ed-quiz-banner .s1.slot--num::before { animation: edqN1 5s infinite; }
.ed-quiz-banner .s2.slot--num::before { animation: edqN2 5s infinite; }
.ed-quiz-banner .s3.slot--num::before { animation: edqN3 5s infinite; }
.ed-quiz-banner .s4.slot--num::before { animation: edqN4 5s infinite; }

@keyframes edqN1 {
  0%, 4%    { opacity: 0; }
  6%, 9%    { opacity: 1; color: #B5C5D1; }
  11%, 55%  { opacity: 1; color: #0a1a2e; }
  57%, 100% { opacity: 0; }
}
@keyframes edqN2 {
  0%, 14%   { opacity: 0; }
  16%, 19%  { opacity: 1; color: #B5C5D1; }
  21%, 55%  { opacity: 1; color: #0a1a2e; }
  57%, 100% { opacity: 0; }
}
@keyframes edqN3 {
  0%, 24%   { opacity: 0; }
  26%, 29%  { opacity: 1; color: #B5C5D1; }
  31%, 55%  { opacity: 1; color: #0a1a2e; }
  57%, 100% { opacity: 0; }
}
@keyframes edqN4 {
  0%, 34%   { opacity: 0; }
  36%, 39%  { opacity: 1; color: #B5C5D1; }
  41%, 55%  { opacity: 1; color: #0a1a2e; }
  57%, 100% { opacity: 0; }
}

.ed-quiz-banner .phase--taps .slot--check { width: calc(38px * var(--scale)); }
.ed-quiz-banner .phase--taps .check-svg {
  width: calc(38px * var(--scale));
  height: calc(38px * var(--scale));
  opacity: 0;
  animation: edqCheckShow 5s infinite;
}
.ed-quiz-banner .check-svg .ring {
  fill: none;
  stroke: #015993;
  stroke-width: 4;
  stroke-dasharray: 226;
  stroke-dashoffset: 226;
  animation: edqRing 5s infinite;
}
.ed-quiz-banner .check-svg .tick {
  fill: none;
  stroke: #015993;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: edqTick 5s infinite;
}
@keyframes edqCheckShow { 0%, 44% { opacity: 0; } 46%, 55% { opacity: 1; } 57%, 100% { opacity: 0; } }
@keyframes edqRing      { 0%, 46% { stroke-dashoffset: 226; } 50%, 55% { stroke-dashoffset: 0; } 57%, 100% { stroke-dashoffset: 226; } }
@keyframes edqTick      { 0%, 50% { stroke-dashoffset: 50;  } 53%, 55% { stroke-dashoffset: 0; } 57%, 100% { stroke-dashoffset: 50;  } }

/* Hand cursor */
.ed-quiz-banner .hand-cursor {
  position: absolute;
  width: calc(36px * var(--scale));
  height: calc(36px * var(--scale));
  color: #4BA3C8;
  z-index: 3;
  opacity: 0;
  animation: edqHand 5s infinite cubic-bezier(0.45, 0, 0.55, 1);
}
@keyframes edqHand {
  0%   { opacity: 0; left: 5%;    top: 75%; transform: translate(-50%, -50%) rotate(-5deg); }
  4%   { opacity: 1; left: 18.7%; top: 65%; transform: translate(-50%, -50%) rotate(0deg); }
  8%   { left: 18.7%; top: 55%; transform: translate(-50%, -50%) scale(0.85); }
  10%  { left: 18.7%; top: 55%; transform: translate(-50%, -50%) scale(1); }
  16%  { left: 34.3%; top: 65%; transform: translate(-50%, -50%); }
  18%  { left: 34.3%; top: 55%; transform: translate(-50%, -50%) scale(0.85); }
  20%  { left: 34.3%; top: 55%; transform: translate(-50%, -50%) scale(1); }
  26%  { left: 50%;   top: 65%; transform: translate(-50%, -50%); }
  28%  { left: 50%;   top: 55%; transform: translate(-50%, -50%) scale(0.85); }
  30%  { left: 50%;   top: 55%; transform: translate(-50%, -50%) scale(1); }
  36%  { left: 65.7%; top: 65%; transform: translate(-50%, -50%); }
  38%  { left: 65.7%; top: 55%; transform: translate(-50%, -50%) scale(0.85); }
  40%  { left: 65.7%; top: 55%; transform: translate(-50%, -50%) scale(1); }
  46%  { left: 81.3%; top: 65%; transform: translate(-50%, -50%); }
  48%  { left: 81.3%; top: 55%; transform: translate(-50%, -50%) scale(0.85); opacity: 1; }
  50%  { left: 81.3%; top: 55%; transform: translate(-50%, -50%) scale(1);    opacity: 1; }
  54%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Ripple */
.ed-quiz-banner .ripple {
  position: absolute;
  width: calc(60px * var(--scale));
  height: calc(60px * var(--scale));
  border: 2px solid #4BA3C8;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.ed-quiz-banner .r1 { animation: edqRip1 5s infinite; }
.ed-quiz-banner .r2 { animation: edqRip2 5s infinite; }
.ed-quiz-banner .r3 { animation: edqRip3 5s infinite; }
.ed-quiz-banner .r4 { animation: edqRip4 5s infinite; }
.ed-quiz-banner .r5 { animation: edqRip5 5s infinite; }
@keyframes edqRip1 { 0%, 7%  { opacity: 0; left: 18.7%; top: 55%; transform: translate(-50%, -50%) scale(0.3); } 9%  { opacity: 0.7; } 13% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } 100% { opacity: 0; } }
@keyframes edqRip2 { 0%, 17% { opacity: 0; left: 34.3%; top: 55%; transform: translate(-50%, -50%) scale(0.3); } 19% { opacity: 0.7; } 23% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } 100% { opacity: 0; } }
@keyframes edqRip3 { 0%, 27% { opacity: 0; left: 50%;   top: 55%; transform: translate(-50%, -50%) scale(0.3); } 29% { opacity: 0.7; } 33% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } 100% { opacity: 0; } }
@keyframes edqRip4 { 0%, 37% { opacity: 0; left: 65.7%; top: 55%; transform: translate(-50%, -50%) scale(0.3); } 39% { opacity: 0.7; } 43% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } 100% { opacity: 0; } }
@keyframes edqRip5 { 0%, 47% { opacity: 0; left: 81.3%; top: 55%; transform: translate(-50%, -50%) scale(0.3); } 49% { opacity: 0.7; } 53% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } 100% { opacity: 0; } }

/* Results */
.ed-quiz-banner .phase--results span {
  position: absolute;
  font-size: calc(36px * var(--scale));
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0;
}
.ed-quiz-banner .r-severe   { color: #E0522F; animation: edqRSev  5s infinite; }
.ed-quiz-banner .r-moderate { color: #F4A48A; animation: edqRMod  5s infinite; }
.ed-quiz-banner .r-mild     { color: #ABB133; animation: edqRMild 5s infinite; }
@keyframes edqRSev  { 0%, 57% { opacity: 0; } 59%, 66% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes edqRMod  { 0%, 66% { opacity: 0; } 68%, 75% { opacity: 1; } 77%, 100% { opacity: 0; } }
@keyframes edqRMild { 0%, 75% { opacity: 0; } 77%, 83% { opacity: 1; } 85%, 100% { opacity: 0; } }

/* CTA */
.ed-quiz-banner .phase--cta .cta-content {
  display: flex;
  align-items: center;
  gap: calc(14px * var(--scale));
  font-size: calc(22px * var(--scale));
  font-weight: 800;
  color: #013a5e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ed-quiz-banner .phase--cta .cta-icon {
  width: calc(38px * var(--scale));
  height: calc(38px * var(--scale));
  color: #013a5e;
  flex-shrink: 0;
}

/* Center the banner inside any parent (overrides YT widget left/right alignment) */
.ed-quiz-banner-wrap, .widget_builderwidget {
  text-align: center;
}

/* Reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .ed-quiz-banner .phase,
  .ed-quiz-banner .hand-cursor,
  .ed-quiz-banner .ripple,
  .ed-quiz-banner .check-svg .ring,
  .ed-quiz-banner .check-svg .tick { animation: none !important; }
  .ed-quiz-banner .phase--cta { opacity: 1; }
  .ed-quiz-banner .phase--taps,
  .ed-quiz-banner .phase--results { opacity: 0; }
}

/* Per-language CTA */
.ed-quiz-banner[lang="fr"] .phase--cta .cta-content { font-size: calc(19px * var(--scale)); }
.ed-quiz-banner[lang="nl"] .phase--cta .cta-content { font-size: calc(22px * var(--scale)); }