/* "Elfie spotted" camera loop (js/elfie-spotted.js): a CCTV monitor with zoom and enhance */
.esp{position:relative;display:block;width:100%;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:#000;border:5px solid #16296A;box-shadow:0 0 0 1px #000,0 30px 60px -26px rgba(11,26,74,.75);font-family:'Share Tech Mono',ui-monospace,Menlo,monospace}
.esp>canvas.esp-static{position:absolute;inset:0;width:100%;height:100%;transition:opacity .35s;image-rendering:pixelated}
.esp img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
.esp .esp-wide{opacity:0;transition:opacity 1.1s ease,transform 3.4s cubic-bezier(.3,.1,.2,1);filter:saturate(.75) contrast(1.05)}
.esp .esp-wide.on{opacity:1}
.esp .esp-wide.zoom{transform:scale(1.7)}
.esp .esp-close{opacity:0;transition:opacity .9s ease,transform 4.6s ease-out;z-index:1;filter:saturate(.88) contrast(1.05)}
.esp .esp-close.on{opacity:1}
.esp .esp-close.zoom{transform:scale(1.06)}
.esp-grain{position:absolute;inset:0;z-index:2;opacity:0;transition:opacity .9s;pointer-events:none}
.esp-grain.on{opacity:1}
.esp-grain .l{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px)}
.esp-grain .v{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.6) 100%)}
.esp-grain .g{position:absolute;inset:-20px;opacity:.14;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");animation:espGrain .5s steps(4) infinite}
@keyframes espGrain{25%{transform:translate(-6px,4px)}50%{transform:translate(5px,-3px)}75%{transform:translate(-3px,-5px)}}
.esp-ring{position:absolute;z-index:3;width:24%;aspect-ratio:1;border-radius:50%;border:4px solid #F5B32F;box-shadow:0 0 0 4px rgba(255,231,163,.35),0 0 30px rgba(255,231,163,.7);transform:translate(-50%,-50%) scale(.2);opacity:0}
.esp-ring.on{animation:espRingIn .6s cubic-bezier(.2,1.6,.5,1) forwards,espRingPulse 1.4s ease-in-out .6s infinite}
@keyframes espRingIn{to{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes espRingPulse{50%{box-shadow:0 0 0 12px rgba(255,231,163,0),0 0 40px rgba(255,231,163,.9)}}
.esp-scan{position:absolute;left:0;right:0;height:22%;top:-22%;z-index:4;background:linear-gradient(180deg,transparent,rgba(124,240,181,.55),transparent);pointer-events:none}
.esp-scan.go{animation:espScan 1s linear 2}
@keyframes espScan{to{top:100%}}
.esp-hud{position:absolute;left:12px;right:12px;z-index:5;display:flex;justify-content:space-between;gap:8px;color:#fff;font-size:13px;letter-spacing:.08em;text-shadow:0 1px 3px #000}
.esp-hud.t{top:10px}.esp-hud.b{bottom:10px}
.esp-hud .rec{display:inline-block;width:9px;height:9px;border-radius:50%;background:#ff4a4a;margin-right:4px;animation:espBlink 1s steps(2) infinite}
@keyframes espBlink{50%{opacity:0}}
.esp-msg{position:absolute;left:50%;top:50%;z-index:6;transform:translate(-50%,-50%);color:#9CF7C8;font-size:clamp(14px,2.6vw,20px);letter-spacing:.14em;white-space:nowrap;opacity:0;text-shadow:0 0 10px rgba(124,240,181,.6)}
.esp-msg.on{opacity:1}
.esp-msg.blink{animation:espBlink .7s steps(2) infinite}
.esp-msg.box{background:rgba(7,13,36,.8);padding:7px 14px;border-radius:8px}
.esp-msg.tag{top:auto;bottom:16%;background:rgba(7,13,36,.75);padding:5px 12px;border-radius:999px;color:#FFE7A3;text-shadow:none}
.esp-shout{position:absolute;left:0;right:0;bottom:15%;z-index:6;text-align:center;font-family:'Plus Jakarta Sans','Inter',sans-serif;font-weight:800;font-size:clamp(22px,4.6vw,40px);letter-spacing:.04em;color:#fff;text-shadow:3px 0 #ff3b5c,-3px 0 #33e1ff,0 4px 18px rgba(0,0,0,.7);opacity:0;transform:scale(.6)}
.esp-shout.on{animation:espPop .5s cubic-bezier(.2,1.6,.5,1) forwards,espJit 2.4s steps(1) .5s infinite}
@keyframes espPop{to{opacity:1;transform:scale(1)}}
@keyframes espJit{0%,92%{translate:0 0}94%{translate:-3px 1px}96%{translate:2px -1px}98%{translate:-1px 0}}
.espwrap.still .esp-shout{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.esp *{animation:none!important;transition:none!important}}
/* on the tracker's welcome screen it takes the old map's place */
.tk-welcome .welspot{width:100%}
@media(min-width:1000px){.tk-welcome>.welspot{grid-column:1;grid-row:1/span 8}}
/* Elf HQ security typing on the camera screen, over the static, before the picture */
.espwrap{display:block;width:100%}
.esp-typer{position:absolute;left:7%;right:7%;top:50%;transform:translateY(-50%);z-index:7;display:flex;flex-direction:column;background:rgba(4,10,28,.82);border:1px solid rgba(124,240,181,.35);border-radius:12px;padding:12px 16px;min-height:calc(4 * 1.7em + 24px);font-family:'Share Tech Mono',ui-monospace,Menlo,monospace;font-size:clamp(11.5px,1.7vw,16px);line-height:1.7;letter-spacing:.07em;color:#9CF7C8;text-shadow:0 0 8px rgba(124,240,181,.45);opacity:0;transition:opacity .45s}
.esp-typer.on{opacity:1}
.esp-typer span{display:block;min-height:1.7em}
.esp-typer span:nth-child(4){color:#FFE7A3;text-shadow:0 0 8px rgba(255,214,110,.5)}
.esp-typer span.cur::after{content:'_';animation:espBlink .6s steps(2) infinite}
.espwrap.still .esp-typer{display:none}
/* the picture glitching in through the static before it settles */
.espwrap.glitching .esp-wide.on{animation:espGlitchIn 2.6s steps(1) both}
@keyframes espGlitchIn{
  0%{opacity:0}
  6%{opacity:.85;transform:translateX(-14px);clip-path:inset(18% 0 52% 0);filter:saturate(2) hue-rotate(40deg) contrast(1.4)}
  11%{opacity:0}
  17%{opacity:.7;transform:translateX(10px);clip-path:inset(55% 0 12% 0);filter:saturate(.3) contrast(1.6)}
  23%{opacity:.9;transform:none;clip-path:inset(0 0 0 0);filter:drop-shadow(5px 0 0 rgba(255,59,92,.8)) drop-shadow(-5px 0 0 rgba(51,225,255,.8))}
  29%{opacity:.15}
  36%{opacity:.8;transform:translateX(-6px) skewX(4deg);clip-path:inset(30% 0 30% 0)}
  44%{opacity:.95;transform:none;clip-path:inset(0 0 0 0);filter:drop-shadow(3px 0 0 rgba(255,59,92,.7)) drop-shadow(-3px 0 0 rgba(51,225,255,.7))}
  52%{opacity:.35}
  60%{opacity:1;transform:translateX(4px);clip-path:inset(62% 0 4% 0)}
  68%{opacity:1;transform:none;clip-path:inset(0 0 0 0);filter:drop-shadow(2px 0 0 rgba(255,59,92,.6)) drop-shadow(-2px 0 0 rgba(51,225,255,.6))}
  80%{opacity:.75}
  88%,100%{opacity:1;transform:none;clip-path:inset(0 0 0 0);filter:saturate(.75) contrast(1.05)}
}
.espwrap.glitching .esp-static{animation:espStaticFlick .3s steps(2) infinite}
@keyframes espStaticFlick{50%{opacity:.15}}

/* the grown-up's sound switch under the camera */
.esp-sound{display:inline-flex;align-items:center;gap:8px;margin:12px auto 0;padding:9px 16px;border:2px solid #16296A;border-radius:999px;background:#fff;color:#16296A;font:600 15px/1 'Inter',system-ui,sans-serif;cursor:pointer;box-shadow:0 6px 16px -10px rgba(11,26,74,.6)}
.esp-sound svg{width:20px;height:20px}
.esp-sound[aria-pressed="true"]{background:#16296A;color:#fff}
.esp-sound:focus-visible{outline:3px solid #F5B32F;outline-offset:2px}
.hero__art:has(>.trackmap+.esp-sound){flex-direction:column}
.welspot>.esp-sound{display:flex;width:max-content}
/* Homepage map mode (data-map): the world turns to the North Pole, dives into the village map,
   a radar finds Elfie's dot, the map locks on and zooms, then the camera picture glitches in. */
.esp-globe{position:absolute;inset:0;width:100%;height:100%;z-index:8;opacity:0;pointer-events:none;background:radial-gradient(ellipse at center,#0b2448 0%,#020a18 75%);transition:opacity .5s,transform 1.1s cubic-bezier(.5,0,.8,.3)}
.esp-globe.on{opacity:1}
.esp-globe.dive{transform:scale(5);opacity:0;transition:opacity 1s ease-in,transform 1.1s cubic-bezier(.5,0,.8,.3)}
.esp-map{position:absolute;inset:0;z-index:7;overflow:hidden;opacity:0;transform:scale(.3);transition:opacity .8s,transform 1.1s cubic-bezier(.2,.7,.3,1)}
.esp-map.on{opacity:1;transform:scale(1)}
.esp-map.lock{transform:scale(3.6);transition:transform 1.4s cubic-bezier(.6,0,.4,1)}
.esp-map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.7) saturate(.85)}
.esp-map .radar{position:absolute;left:50%;top:50%;width:160%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;opacity:0;background:conic-gradient(from 0deg,rgba(124,255,178,0) 0deg,rgba(124,255,178,.32) 40deg,rgba(124,255,178,0) 64deg);mix-blend-mode:screen}
.esp-map.scan .radar{opacity:1;animation:espSweep 2.2s linear infinite}
.esp-map.found .radar,.esp-map.lock .radar{opacity:0;transition:opacity .6s}
@keyframes espSweep{to{transform:translate(-50%,-50%) rotate(360deg)}}
.esp-map .blip{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#7CFFB2;box-shadow:0 0 14px 4px rgba(124,255,178,.7);animation:espBlipOff 1.3s ease-out forwards}
@keyframes espBlipOff{0%{transform:scale(.3);opacity:0}25%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
.esp-map .pin{position:absolute;width:0;height:0;opacity:0}
.esp-map .pin i{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:#FFE7A3;box-shadow:0 0 18px 6px rgba(255,214,110,.85);animation:espPinPulse 1s ease-in-out infinite}
.esp-map .pin em{position:absolute;left:50%;top:14px;transform:translateX(-50%);white-space:nowrap;font-style:normal;font-family:'Share Tech Mono',ui-monospace,Menlo,monospace;font-size:clamp(9px,1.3vw,13px);letter-spacing:.08em;color:#FFE7A3;background:rgba(7,13,36,.82);padding:3px 8px;border-radius:6px}
.esp-map.found .pin,.esp-map.lock .pin{opacity:1;transition:opacity .3s}
.esp-map.lock .pin em{opacity:0;transition:opacity .3s}
@keyframes espPinPulse{50%{transform:scale(1.6)}}
.esp-cap{position:absolute;left:6%;right:6%;bottom:13%;z-index:6;text-align:center;font-family:'Share Tech Mono',ui-monospace,Menlo,monospace;font-size:clamp(10.5px,1.5vw,14px);line-height:1.45;letter-spacing:.06em;color:#FFE7A3;background:rgba(7,13,36,.82);border-radius:10px;padding:7px 10px;opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s}
.esp-cap.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.esp-globe,.esp-map{display:none}}
.espwrap .esp-msg{z-index:9}