/* E&O quiz — everything that moves. One reduced-motion switch at the bottom. */

/* ── background ───────────────────────────────────────────── */
.eoq-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.eoq-grid{position:absolute;inset:-80px;
  background-image:linear-gradient(rgba(125,179,232,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(125,179,232,.07) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 35%,#000 30%,transparent 80%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 35%,#000 30%,transparent 80%);
  animation:eoq-pan 22s linear infinite}
@keyframes eoq-pan{to{transform:translate(56px,56px)}}

.eoq-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.eoq-orb-a{width:46vmax;height:46vmax;left:-14vmax;top:-12vmax;background:#F27A21;opacity:.26;
  animation:eoq-drift-a 19s ease-in-out infinite alternate}
.eoq-orb-b{width:40vmax;height:40vmax;right:-14vmax;top:22vh;background:#3E77B8;opacity:.34;
  animation:eoq-drift-b 23s ease-in-out infinite alternate}
.eoq-orb-c{width:28vmax;height:28vmax;left:30vw;bottom:-14vmax;background:#7DB3E8;opacity:.16;
  animation:eoq-drift-a 27s ease-in-out infinite alternate-reverse}
@keyframes eoq-drift-a{to{transform:translate(12vmax,9vmax) scale(1.15)}}
@keyframes eoq-drift-b{to{transform:translate(-10vmax,-8vmax) scale(.9)}}

/* drifting glyphs */
.eoq-float{position:absolute;bottom:-90px;width:var(--sz);height:var(--sz);opacity:0;
  background:no-repeat center/contain;
  animation:eoq-rise var(--dur) linear var(--del) infinite}
@keyframes eoq-rise{
  0%{transform:translateY(0) rotate(-12deg);opacity:0}
  10%{opacity:.42}
  85%{opacity:.3}
  100%{transform:translateY(-120vh) rotate(16deg);opacity:0}}
.eoq-f-doc{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Crect width='40' height='48' rx='5' fill='%23F2EDE4'/%3E%3Crect width='40' height='11' rx='5' fill='%23F27A21'/%3E%3Cg stroke='%239AABC2' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M8 20h24M8 28h18M8 36h22'/%3E%3C/g%3E%3C/svg%3E")}
.eoq-f-check{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18' fill='%234CC38A'/%3E%3Cpath d='M11 21l6 6 12-13' stroke='%230D1828' stroke-width='4.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.eoq-f-lens{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='16' cy='16' r='11' fill='none' stroke='%237DB3E8' stroke-width='4.5'/%3E%3Cpath d='M24 24l12 12' stroke='%237DB3E8' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E")}
.eoq-f-shield{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 46'%3E%3Cpath d='M20 2l16 6v13c0 11-7 19-16 23C11 40 4 32 4 21V8z' fill='%23F27A21'/%3E%3Cpath d='M13 23l5 5 10-11' stroke='%230D1828' stroke-width='4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.eoq-f-q{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18' fill='none' stroke='%23F2B04B' stroke-width='3.5'/%3E%3Ctext x='20' y='28' text-anchor='middle' font-family='Arial' font-weight='700' font-size='22' fill='%23F2B04B'%3E%3F%3C/text%3E%3C/svg%3E")}
.eoq-f-stamp{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 34'%3E%3Crect x='2' y='2' width='60' height='30' rx='5' fill='none' stroke='%23F0625F' stroke-width='3.5'/%3E%3Ctext x='32' y='24' text-anchor='middle' font-family='Arial' font-weight='800' font-size='17' fill='%23F0625F'%3EE%26amp;O%3C/text%3E%3C/svg%3E")}

/* ── screen entrances ─────────────────────────────────────── */
.eoq-screen.on{animation:eoq-enter .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes eoq-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.eoq-screen.on .eoq-h1{animation:eoq-enter .6s .05s cubic-bezier(.2,.8,.2,1) both}
.eoq-screen.on .eoq-form,.eoq-screen.on .eoq-lead{animation:eoq-enter .6s .14s cubic-bezier(.2,.8,.2,1) both}
.eoq-screen.on .eoq-rules li{animation:eoq-enter .5s cubic-bezier(.2,.8,.2,1) both}
.eoq-screen.on .eoq-rules li:nth-child(1){animation-delay:.22s}
.eoq-screen.on .eoq-rules li:nth-child(2){animation-delay:.3s}
.eoq-screen.on .eoq-rules li:nth-child(3){animation-delay:.38s}
.eoq-screen.on .eoq-rules li:nth-child(4){animation-delay:.46s}

/* hero */
.eoq-hero-ring.r1{transform-origin:110px 110px;animation:eoq-spin 26s linear infinite}
.eoq-hero-ring.r2{transform-origin:110px 110px;animation:eoq-spin 18s linear infinite reverse}
.eoq-hero-orbit{transform-origin:110px 110px;animation:eoq-spin 6s linear infinite}
.eoq-hero-doc{animation:eoq-bob 4s ease-in-out infinite}
.eoq-hero-lens{transform-origin:150px 140px;animation:eoq-sweep 5s ease-in-out infinite}
@keyframes eoq-spin{to{transform:rotate(360deg)}}
@keyframes eoq-bob{50%{transform:translateY(-6px)}}
@keyframes eoq-sweep{0%,100%{transform:translate(0,0) rotate(0)}30%{transform:translate(-44px,-46px) rotate(-6deg)}60%{transform:translate(-30px,-8px) rotate(4deg)}}

/* wrong code */
.eoq-shake{animation:eoq-shake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes eoq-shake{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}

/* button sheen */
.eoq-btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);animation:eoq-sheen 4.2s ease-in-out infinite}
.eoq-btn-ghost::after{display:none}
@keyframes eoq-sheen{0%,62%{left:-60%}100%{left:130%}}

/* ── question screen ──────────────────────────────────────── */
.eoq-radar-sweep{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(242,122,33,0) 0deg,rgba(242,122,33,0) 270deg,rgba(242,122,33,.55) 360deg);
  animation:eoq-spin 2.6s linear infinite}
.eoq-radar-dot{position:absolute;left:50%;top:3px;width:8px;height:8px;margin-left:-4px;border-radius:50%;
  background:var(--sky);box-shadow:0 0 10px var(--sky);
  transform-origin:4px 35px;animation:eoq-spin 4s linear infinite reverse}
.eoq-radar.pop b{animation:eoq-pop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes eoq-pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}

.eoq-bar i{position:relative;overflow:hidden}
.eoq-bar i::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.28) 0 8px,transparent 8px 18px);
  animation:eoq-stripes 1s linear infinite}
@keyframes eoq-stripes{to{background-position:21px 0}}
.eoq-pips i.now{animation:eoq-blink 1.2s ease-in-out infinite}
@keyframes eoq-blink{50%{opacity:.35}}
.eoq-chip.bump b{animation:eoq-pop .6s cubic-bezier(.2,1.6,.4,1)}

/* the question types itself in, word by word */
.eoq-qtext .w{display:inline-block;opacity:0;transform:translateY(10px);
  animation:eoq-word .45s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i) * 45ms)}
@keyframes eoq-word{to{opacity:1;transform:none}}

/* answer box: a light runs round the border while you type */
.eoq-answerbox{background:linear-gradient(var(--rule),var(--rule))}
.eoq-answerbox:focus-within{
  background:conic-gradient(from var(--eoq-a,0deg),#F27A21,#7DB3E8,#4CC38A,#F27A21);
  animation:eoq-border 3s linear infinite}
@property --eoq-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes eoq-border{to{--eoq-a:360deg}}

#eoq-askcard{animation:eoq-enter .45s cubic-bezier(.2,.8,.2,1) both}

/* marking */
.eoq-scan-doc{animation:eoq-bob 2.4s ease-in-out infinite}
.eoq-scan-doc i{transform-origin:left;animation:eoq-line 1.6s ease-in-out infinite}
.eoq-scan-doc i:nth-child(2){animation-delay:.15s}.eoq-scan-doc i:nth-child(3){animation-delay:.3s}
.eoq-scan-doc i:nth-child(4){animation-delay:.45s}.eoq-scan-doc i:nth-child(5){animation-delay:.6s}
@keyframes eoq-line{0%,100%{background:#C5CDD8}50%{background:#F27A21}}
.eoq-scan-beam{top:0;animation:eoq-beam 1.5s ease-in-out infinite alternate}
@keyframes eoq-beam{to{top:146px}}
.eoq-dots i{display:inline-block;font-style:normal;animation:eoq-dot 1.2s infinite}
.eoq-dots i:nth-child(2){animation-delay:.2s}.eoq-dots i:nth-child(3){animation-delay:.4s}
@keyframes eoq-dot{0%,60%,100%{transform:none;opacity:.35}30%{transform:translateY(-6px);opacity:1}}
.eoq-marking{animation:eoq-enter .35s ease both}

/* result */
.eoq-result{animation:eoq-flip .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes eoq-flip{from{opacity:0;transform:perspective(900px) rotateX(-14deg) translateY(16px)}to{opacity:1;transform:none}}
.eoq-ring.hi{animation:eoq-glow 1.6s ease-in-out 1}
@keyframes eoq-glow{40%{filter:drop-shadow(0 0 18px rgba(76,195,138,.8))}}
.eoq-verdict{animation:eoq-enter .5s .35s both}
.eoq-feedback{animation:eoq-enter .5s .5s both}
.eoq-guide{animation:eoq-enter .5s .7s both}

/* ── finish ───────────────────────────────────────────────── */
.eoq-trophy svg{animation:eoq-trophy .9s cubic-bezier(.2,1.5,.4,1) both, eoq-bob 3.2s 1s ease-in-out infinite}
@keyframes eoq-trophy{from{transform:scale(.2) rotate(-25deg);opacity:0}to{transform:none;opacity:1}}
.eoq-shine{animation:eoq-shine 3s ease-in-out 1s infinite}
@keyframes eoq-shine{0%{transform:translateX(-10px);opacity:0}20%{opacity:1}50%,100%{transform:translateX(40px);opacity:0}}
.eoq-recap span{animation:eoq-pop .45s cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(.8s + var(--i) * 70ms)}
.eoq-board li{animation:eoq-row .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 80ms)}
@keyframes eoq-row{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
.eoq-board li.me::before{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(242,122,33,.22),transparent 70%);
  animation:eoq-sweepbg 2.4s ease-in-out infinite}
@keyframes eoq-sweepbg{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* confetti canvas */
.eoq-confetti{position:fixed;inset:0;pointer-events:none;z-index:2147483000}

/* ── calm mode ────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .eoq *,.eoq *::before,.eoq *::after{animation:none !important;transition-duration:.01ms !important}
  .eoq-qtext .w{opacity:1;transform:none}
  .eoq-float{display:none}
}