/* Video sightings (Paul, 3 Nov 2026, the approved format: designs/video-sighting on the review site; kids.js videoReveal).
   The clip sits under the static (canvas) in the CCTV monitor: the green box on the Elf's head (vspot, 2 s), a glitch
   (vglitch, 2 s), the clip, the signal lost (vlost, 2 s), then the ACTION REPLAY of its last 4 seconds (vreplay, 8 s). */
.monitor.vmon video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;filter:saturate(.82) contrast(1.06);transform-origin:var(--zx,50%) var(--zy,50%);transition:opacity .4s}
.monitor.vmon canvas{z-index:2}
.monitor.vmon.vlive video{opacity:1}
.monitor.vmon .vroll{position:absolute;left:0;right:0;height:22%;top:-25%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.18),transparent);z-index:3;pointer-events:none;opacity:0}

/* the green box round the Elf's head, "{ELF} SPOTTED" above it */
.vlock{position:absolute;z-index:5;border:3px solid #7CF7B2;border-radius:8px;box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 18px rgba(124,247,178,.7);opacity:0;pointer-events:none}
.vlock b{position:absolute;left:50%;bottom:100%;transform:translate(-50%,-8px);white-space:nowrap;font:13px/1 var(--mono);letter-spacing:.12em;color:#7CF7B2;background:rgba(4,10,26,.88);border:1px solid rgba(124,247,178,.5);border-radius:7px;padding:5px 9px}
.vlock.l b{left:0;transform:translateY(-8px)}.vlock.r b{left:auto;right:0;transform:translateY(-8px)}
.monitor.vspot .vlock{opacity:1;animation:vlockin .35s ease-out,vpulse 1s ease-in-out .35s infinite}
@keyframes vlockin{from{transform:scale(1.9);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes vpulse{50%{transform:scale(1.1);box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 32px rgba(124,247,178,1)}}
.monitor.vspot video{animation:vflickin .5s steps(1) both}
@keyframes vflickin{0%{opacity:0}20%{opacity:.7}40%{opacity:.15}60%{opacity:.9}80%{opacity:.5}100%{opacity:1}}

/* the glitch, and the signal lost after the clip */
.monitor.vglitch video,.monitor.vlost video{animation:vglitch 2s steps(1) both}
@keyframes vglitch{0%{transform:none;filter:none}6%{transform:translateX(-14px);filter:hue-rotate(90deg) contrast(1.6);clip-path:inset(10% 0 55% 0)}12%{transform:translateX(10px);filter:saturate(3) brightness(1.4);clip-path:inset(48% 0 12% 0)}18%{transform:none;filter:grayscale(1) contrast(2);clip-path:none}26%{transform:translate(8px,-4px) skewX(-8deg);filter:hue-rotate(-70deg);clip-path:inset(0 0 70% 0)}32%{transform:none;filter:brightness(2) contrast(1.8);clip-path:none;opacity:.5}40%{transform:translateX(-20px);filter:invert(.85);clip-path:inset(30% 0 30% 0);opacity:1}46%{transform:none;filter:none;clip-path:none}54%{transform:translateX(16px) scaleY(1.06);filter:hue-rotate(160deg) saturate(2.5);clip-path:inset(62% 0 4% 0)}62%{transform:none;filter:grayscale(1) brightness(.6);clip-path:none;opacity:.3}70%{transform:translate(-6px,6px);filter:contrast(2.4);clip-path:inset(18% 0 40% 0);opacity:1}78%{transform:none;filter:brightness(1.6);clip-path:none}86%{transform:translateX(12px);filter:hue-rotate(40deg);clip-path:inset(5% 0 80% 0)}92%,100%{transform:none;filter:saturate(.82) contrast(1.06);clip-path:none;opacity:1}}
.monitor.vglitch canvas{animation:vburst 2s steps(1) both}
@keyframes vburst{0%{opacity:.6}8%{opacity:.15}16%{opacity:.75}24%{opacity:0}32%{opacity:.55}40%{opacity:.1}50%{opacity:.7}58%{opacity:0}66%{opacity:.5}76%{opacity:.2}86%{opacity:.4}94%,100%{opacity:0}}
.monitor.vglitch .vroll{opacity:1;animation:vroll .5s linear 4}
.monitor.vlost .vroll{opacity:1;animation:vroll .4s linear 5}
@keyframes vroll{from{top:-25%}to{top:105%}}

/* the action replay: half speed, zooming in on the Elf */
.monitor.vreplay video{animation:vzoom 8s ease-out both;filter:saturate(.7) contrast(1.12) sepia(.15)}
@keyframes vzoom{from{transform:scale(1)}to{transform:scale(1.45)}}
.vrp{position:absolute;top:34px;left:50%;transform:translateX(-50%);z-index:5;font:14px/1 var(--mono);letter-spacing:.14em;color:#FFD36E;background:rgba(4,10,26,.85);border:1px solid rgba(255,211,110,.5);border-radius:8px;padding:6px 10px;white-space:nowrap;opacity:0;pointer-events:none}
.monitor.vreplay .vrp{opacity:1;animation:vblink 1s steps(2) infinite}
@keyframes vblink{50%{opacity:.2}}
.monitor.vreplay #hudwhen{color:#FFD36E}

/* the clips have sound: a phone that will not start it with sound plays it muted, and this turns it on */
.vsnd{position:absolute;right:10px;bottom:34px;z-index:6;display:flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:12px;border:2px solid #fff;background:var(--red,#D0353C);color:#fff;font:800 14px/1 var(--disp,'Plus Jakarta Sans',sans-serif);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s}
.vsnd::before{content:'';width:18px;height:18px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;
  --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z'/%3E%3Cpath d='M16 9l5 6M21 9l-5 6' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")}
.vsnd.on{background:rgba(4,10,26,.82);border-color:rgba(255,255,255,.7)}
.vsnd.on::before{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z'/%3E%3Cpath d='M16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")}
.vsnd:not(.on){animation:vsndp 1.4s ease-in-out infinite}
@keyframes vsndp{50%{transform:scale(1.06)}}
.monitor.vlive .vsnd{opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.monitor.vspot .vlock,.monitor.vreplay .vrp,.vsnd:not(.on){animation:none}.monitor.vreplay video{animation:none}}

/* the tap-to-play button when the phone will not start the clip itself (iPhone Low Power Mode, 4 Nov 2026) */
#mon .cl-tap{position:absolute;left:50%;top:50%;z-index:30;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;white-space:nowrap;padding:12px 20px 12px 14px;border:2px solid #7CF7B2;border-radius:999px;background:rgba(4,10,26,.88);color:#7CF7B2;font:400 18px/1 'Share Tech Mono',ui-monospace,Menlo,monospace;letter-spacing:.06em;cursor:pointer;box-shadow:0 0 24px rgba(124,247,178,.5)}
#mon .cl-tap i{width:0;height:0;border-left:16px solid #7CF7B2;border-top:10px solid transparent;border-bottom:10px solid transparent}
#mon .cl-tap:focus-visible{outline:3px solid #F5B32F;outline-offset:3px}
/* "Help us spread the magic!" the first time Back is pressed after a sighting (Jay, 4 Nov 2026) */
.vs-ask{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(4,10,26,.72)}
.vs-ask-in{width:min(420px,100%);background:#FFF8EC;color:#16296A;border-radius:22px;padding:26px 22px 18px;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.vs-ask-in h2{margin:0 0 8px;font:800 26px/1.15 'Plus Jakarta Sans',system-ui,sans-serif;color:#C8102E;text-wrap:balance}
.vs-ask-in p{margin:0 0 16px;font:500 16px/1.4 'Inter',system-ui,sans-serif}
.vs-ask-in .gt-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:56px;padding:12px 15px;border:0;border-radius:14px;background:linear-gradient(#2BB36A,#1E9E53);color:#fff;font:800 18px/1.15 'Plus Jakarta Sans',Inter,sans-serif;box-shadow:0 5px 0 #157A3F;cursor:pointer}
.vs-ask-in .gt-btn:focus-visible{outline:3px solid #F5B32F;outline-offset:3px}
.vs-ask-in .link{margin-top:12px;background:none;border:0;color:#16296A;font:600 15px 'Inter',system-ui,sans-serif;text-decoration:underline;cursor:pointer;min-height:44px}