/* ============================================================
   MOTION MENU — a visual catalogue of video effects
   ============================================================ */

:root{
  --bg:        #08090c;
  --bg-2:      #0e1015;
  --panel:     #14161d;
  --panel-2:   #1a1d26;
  --line:      #262a35;
  --ink:       #eef0f5;
  --ink-dim:   #9aa0b0;
  --ink-faint: #626879;
  --amber:     #ffb020;
  --amber-2:   #ff7a1a;
  --cyan:      #37e0d8;
  --pink:      #ff4d78;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --sans: 'Inter', system-ui, sans-serif;
  --display: 'Space Grotesk', var(--sans);
  --radius: 16px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
a{ color:var(--amber); }

/* ============ LOGIN ============ */
.login{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  background:radial-gradient(1200px 800px at 70% -10%, #1a1420 0%, var(--bg) 55%);
  overflow:hidden;
}
.login-bg{
  position:absolute; inset:0; z-index:0; opacity:.5;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.02) 2px 3px),
    conic-gradient(from 210deg at 80% 20%, transparent, rgba(255,176,32,.10), transparent 40%);
  animation:drift 22s linear infinite;
}
@keyframes drift{ to{ transform:translateY(-40px) } }
.login-card{
  position:relative; z-index:1;
  width:min(92vw, 380px);
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--line);
  border-radius:20px;
  padding:34px 30px 26px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
}
.login-logo{
  display:flex; align-items:center; gap:10px;
  font-family:var(--display); font-weight:700; font-size:26px; letter-spacing:-.5px;
}
.clap{ filter:drop-shadow(0 2px 8px rgba(255,176,32,.4)); }
.login-tag{ color:var(--ink-dim); margin:10px 0 22px; font-size:14.5px; }
.login form{ display:flex; flex-direction:column; gap:14px; }
.login label{
  display:flex; flex-direction:column; gap:6px;
  font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--ink-faint);
}
.login input{
  font-family:var(--sans); font-size:15px; color:var(--ink);
  background:var(--bg-2); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; transition:border-color .2s, box-shadow .2s;
}
.login input:focus{ outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(255,176,32,.15); }
.login button{
  margin-top:6px; font-family:var(--display); font-weight:600; font-size:15px;
  color:#1a1200; cursor:pointer;
  background:linear-gradient(180deg, var(--amber), var(--amber-2));
  border:none; border-radius:10px; padding:13px;
  transition:transform .1s, filter .2s;
}
.login button:hover{ filter:brightness(1.06); }
.login button:active{ transform:translateY(1px); }
.login-error{
  color:var(--pink); font-size:13px; text-align:center; min-height:0; height:0; overflow:hidden;
  opacity:0; transition:opacity .2s;
}
.login-error.show{ height:auto; opacity:1; margin-top:2px; }
.login-hint{ text-align:center; color:var(--ink-faint); font-size:12.5px; margin-top:18px; }
.login-hint b{ color:var(--ink-dim); font-family:var(--mono); }

/* ============ TOPBAR ============ */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px clamp(16px,4vw,40px);
  background:rgba(10,11,15,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:11px; }
.brand .clap{ font-size:24px; }
.brand-name{ display:block; font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:-.3px; }
.brand-sub{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:2px; color:var(--ink-faint); }
.topbar-right{ display:flex; align-items:center; gap:10px; }
#search{
  font-family:var(--sans); font-size:14px; color:var(--ink);
  background:var(--bg-2); border:1px solid var(--line); border-radius:10px;
  padding:10px 14px; width:min(46vw, 280px); transition:border-color .2s, box-shadow .2s;
}
#search:focus{ outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(55,224,216,.14); }
.ghost-btn{
  font-family:var(--sans); font-size:13.5px; color:var(--ink-dim); cursor:pointer;
  background:transparent; border:1px solid var(--line); border-radius:10px; padding:10px 14px;
  transition:color .2s, border-color .2s;
}
.ghost-btn:hover{ color:var(--ink); border-color:var(--ink-faint); }

/* ============ HERO ============ */
.hero{ padding:clamp(34px,6vw,64px) clamp(16px,4vw,40px) 10px; max-width:920px; }
.hero h1{
  font-family:var(--display); font-weight:700; letter-spacing:-1px;
  font-size:clamp(28px,4.6vw,46px); line-height:1.08;
  background:linear-gradient(120deg,#fff 20%, var(--amber) 120%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero p{ color:var(--ink-dim); font-size:clamp(15px,1.6vw,18px); margin-top:16px; max-width:720px; }
.hero em{ color:var(--ink); font-style:italic; }
.legend{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:22px; font-size:13px; color:var(--ink-faint); }
.legend span{ display:flex; align-items:center; gap:8px; }
.dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.dot-live{ background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.dot-copy{ background:var(--amber); box-shadow:0 0 10px var(--amber); }
.dot-sound{ background:var(--pink); box-shadow:0 0 10px var(--pink); }

/* ============ FILTERS ============ */
.filters{
  position:sticky; top:63px; z-index:30;
  display:flex; flex-wrap:wrap; gap:8px;
  padding:16px clamp(16px,4vw,40px);
  background:rgba(8,9,12,.9); backdrop-filter:blur(8px);
}
.chip{
  font-family:var(--sans); font-size:13.5px; color:var(--ink-dim); cursor:pointer;
  background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:8px 15px;
  transition:all .18s;
}
.chip:hover{ color:var(--ink); border-color:var(--ink-faint); }
.chip.active{ color:#1a1200; background:var(--amber); border-color:var(--amber); font-weight:600; }

/* ============ GRID ============ */
.grid{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  padding:8px clamp(16px,4vw,40px) 40px;
}
.card{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .2s, border-color .2s, box-shadow .2s;
}
.card:hover{ transform:translateY(-4px); border-color:#33384a; box-shadow:0 24px 50px -24px rgba(0,0,0,.8); }

/* stage = the live preview area */
.stage{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:#000; border-bottom:1px solid var(--line);
  display:grid; place-items:center;
}
.stage .cat-tag{
  position:absolute; top:10px; left:10px; z-index:5;
  font-family:var(--mono); font-size:10px; letter-spacing:1px; text-transform:uppercase;
  color:var(--ink); background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.14);
  padding:4px 8px; border-radius:6px; backdrop-filter:blur(4px);
}
.replay{
  position:absolute; top:10px; right:10px; z-index:6;
  font-family:var(--sans); font-size:11px; color:var(--ink);
  background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.14);
  border-radius:6px; padding:4px 9px; cursor:pointer; backdrop-filter:blur(4px);
  opacity:0; transition:opacity .2s;
}
.card:hover .replay{ opacity:1; }

.card-body{ padding:16px 17px 17px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card-title{ font-family:var(--display); font-weight:600; font-size:17px; letter-spacing:-.2px; }
.card-blurb{ color:var(--ink-dim); font-size:13.5px; line-height:1.5; }

.recipe{
  background:var(--bg-2); border:1px solid var(--line); border-radius:10px;
  padding:11px 12px; margin-top:2px;
}
.recipe-label{ font-size:10px; text-transform:uppercase; letter-spacing:1.5px; color:var(--ink-faint); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.recipe-label::before{ content:"›"; color:var(--amber); font-weight:700; }
.recipe-text{ font-family:var(--mono); font-size:12px; color:var(--ink); line-height:1.5; }
.recipe-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.copy-btn{
  font-family:var(--sans); font-size:11.5px; cursor:pointer;
  border-radius:7px; padding:6px 12px; transition:background .2s, border-color .2s, filter .2s; border:1px solid transparent;
}
.copy-btn.primary{ color:#1a1200; font-weight:600; background:linear-gradient(180deg,var(--amber),var(--amber-2)); }
.copy-btn.primary:hover{ filter:brightness(1.07); }
.copy-btn.ghost{ color:var(--ink-dim); background:transparent; border-color:var(--line); }
.copy-btn.ghost:hover{ color:var(--ink); border-color:var(--ink-faint); }
.full-prompt{
  margin-top:10px; max-height:260px; overflow:auto;
  font-family:var(--mono); font-size:11px; line-height:1.55; color:var(--ink-dim);
  white-space:pre-wrap; word-break:break-word;
  background:#05060a; border:1px solid var(--line); border-radius:9px; padding:12px 13px;
}
.full-prompt::-webkit-scrollbar{ width:8px; }
.full-prompt::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; }

.tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:4px; }
.tag{ font-size:11px; padding:4px 9px; border-radius:6px; border:1px solid var(--line); color:var(--ink-dim); background:var(--panel); transition:background .15s, transform .1s; }
.tag.sfx{ border-color:rgba(255,77,120,.3); color:#ff86a2; }
.tag.music{ border-color:rgba(55,224,216,.3); color:var(--cyan); }
.tag.playable{ cursor:pointer; user-select:none; }
.tag.sfx.playable:hover{ background:rgba(255,77,120,.14); }
.tag.music.playable:hover{ background:rgba(55,224,216,.14); }
.tag.playable:active{ transform:scale(.96); }
.tag.pinged{ animation:ping .32s ease; }
@keyframes ping{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.35) } 100%{ box-shadow:0 0 0 8px rgba(255,255,255,0) } }
.tag.music.playing{ background:rgba(55,224,216,.2); color:#bff7f3; }
.tag.music.playing::after{ content:" ■"; }

/* ============ LIBRARY ============ */
.library{ padding:34px clamp(16px,4vw,40px) 20px; border-top:1px solid var(--line); background:var(--bg-2); }
.library h2{ font-family:var(--display); font-weight:700; font-size:clamp(22px,3vw,30px); letter-spacing:-.5px; }
.library-intro{ color:var(--ink-dim); max-width:640px; margin-top:8px; font-size:14.5px; }
.library-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:26px; margin-top:24px; }
.lib-col h3{ font-family:var(--display); font-weight:600; font-size:15px; color:var(--ink); margin-bottom:12px; text-transform:uppercase; letter-spacing:1px; }
.lib-col ul{ list-style:none; display:flex; flex-direction:column; gap:9px; }
.lib-col li{
  display:flex; gap:12px; align-items:center; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 13px;
  transition:border-color .15s, background .15s;
}
.lib-col li:hover{ border-color:var(--ink-faint); background:var(--panel-2); }
.lib-col .lib-txt{ display:flex; flex-direction:column; gap:2px; }
.lib-col li b{ font-family:var(--mono); font-size:12.5px; color:var(--amber); }
.lib-col li span{ font-size:13px; color:var(--ink-dim); }
.play-ico{
  flex:none; width:28px; height:28px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font-size:10px; color:var(--ink);
  background:var(--bg-2); border:1px solid var(--line); transition:all .15s;
}
.lib-col li:hover .play-ico{ background:var(--amber); color:#1a1200; border-color:var(--amber); }
.lib-col li.playing .play-ico{ background:var(--cyan); color:#04201e; border-color:var(--cyan); animation:pulse 1s ease-in-out infinite; }
.lib-col li.playing:hover .play-ico{ background:var(--cyan); color:#04201e; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(55,224,216,.5) } 50%{ box-shadow:0 0 0 6px rgba(55,224,216,0) } }
.lib-col li.pinged .play-ico{ animation:ping .32s ease; }

/* ============ AUDIO LIBRARIES ============ */
.audiolibs{ padding:34px clamp(16px,4vw,40px) 20px; border-top:1px solid var(--line); }
.audiolibs h2{ font-family:var(--display); font-weight:700; font-size:clamp(22px,3vw,30px); letter-spacing:-.5px; }
.audiolibs .library-intro em{ color:var(--ink); font-style:italic; }
.lib-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-top:22px; }
.libcard{
  display:flex; flex-direction:column; gap:9px; text-decoration:none;
  background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line);
  border-radius:12px; padding:15px 16px; transition:transform .18s, border-color .18s, box-shadow .18s;
}
.libcard:hover{ transform:translateY(-3px); border-color:#33384a; box-shadow:0 18px 40px -22px rgba(0,0,0,.8); }
.libcard-top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.libcard-name{ font-family:var(--display); font-weight:700; font-size:16px; color:var(--ink); }
.libcard-kind{ font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--ink-faint); white-space:nowrap; }
.libcard-best{ font-size:13px; color:var(--ink-dim); line-height:1.45; flex:1; }
.libcard-foot{ display:flex; flex-direction:column; gap:5px; margin-top:2px; }
.lic-badge{ align-self:flex-start; font-size:10.5px; font-weight:600; padding:3px 9px; border-radius:6px; }
.lic-free{ color:#7dffb0; background:rgba(77,255,136,.12); border:1px solid rgba(77,255,136,.3); }
.lic-credit{ color:#ffcf7d; background:rgba(255,176,32,.12); border:1px solid rgba(255,176,32,.3); }
.lic-account{ color:#9fb4d4; background:rgba(120,140,180,.12); border:1px solid rgba(120,140,180,.3); }
.libcard-lic{ font-family:var(--mono); font-size:11px; color:var(--ink-faint); }
.lib-note{ margin-top:18px; font-size:13px; color:var(--ink-faint); }
.lib-note b{ color:var(--ink-dim); }

/* ============ FOOTER + TOAST ============ */
.foot{ padding:30px clamp(16px,4vw,40px) 50px; color:var(--ink-faint); font-size:13px; border-top:1px solid var(--line); }
.toast{
  position:fixed; bottom:26px; left:50%; transform:translate(-50%,20px);
  background:var(--amber); color:#1a1200; font-family:var(--display); font-weight:600; font-size:14px;
  padding:11px 20px; border-radius:10px; opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s; z-index:80;
  box-shadow:0 14px 40px -10px rgba(255,176,32,.5);
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ============================================================
   EFFECT PREVIEW ANIMATIONS
   Each .fx-* is a self-contained mini scene inside a 16:9 stage.
   Animations are re-triggered by toggling the .play class in JS.
   ============================================================ */
.fx{ position:absolute; inset:0; }

/* --- 1. Typewriter lower-third --- */
.fx-type{ background:radial-gradient(120% 120% at 50% 120%, #241a12, #000); }
.fx-type .tw{
  position:absolute; left:16px; bottom:16px; right:16px;
  font-family:var(--mono); font-size:15px; color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.9);
}
.fx-type .tw::after{ content:"▍"; color:var(--amber); animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0 } }

/* --- 2. Timecode ticker --- */
.fx-tc{ background:linear-gradient(180deg,#0a0d16,#05070c); }
.fx-tc .tc{
  font-family:var(--mono); font-weight:700; font-size:34px; letter-spacing:2px; color:#ff3b3b;
  text-shadow:0 0 22px rgba(255,59,59,.55);
}
.fx-tc .tc-label{ position:absolute; top:14px; left:0; right:0; text-align:center; font-family:var(--mono); font-size:10px; letter-spacing:3px; color:#ff6b6b; opacity:.8; }
.fx-tc .grid-lines{ position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent 0 13px,rgba(255,59,59,.05) 13px 14px); }

/* --- 3. 1985 VHS --- */
.fx-vhs{ background:#0a0a12; overflow:hidden; }
.fx-vhs .vhs-inner{
  position:absolute; inset:0;
  background:linear-gradient(120deg,#3a2d5c,#1c3a4a 60%,#4a2d3a);
  filter:saturate(1.4) contrast(1.1);
  animation:vhsWobble 4s ease-in-out infinite;
}
@keyframes vhsWobble{ 0%,100%{ transform:translateX(0) } 50%{ transform:translateX(1.5px) } }
.fx-vhs .scan{ position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 2px,transparent 2px 4px); mix-blend-mode:multiply; }
.fx-vhs .noise{ position:absolute; inset:0; opacity:.08; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:noiseShift .3s steps(3) infinite; }
@keyframes noiseShift{ to{ transform:translateY(-6px) } }
.fx-vhs .vhs-txt{ position:absolute; top:12px; left:14px; font-family:var(--mono); font-size:13px; color:#fff; letter-spacing:1px; text-shadow:1px 1px 0 rgba(0,0,0,.5); }
.fx-vhs .vhs-tc{ position:absolute; bottom:12px; right:14px; font-family:var(--mono); font-size:13px; color:#fff; letter-spacing:1px; }
.fx-vhs .vhs-play{ position:absolute; bottom:12px; left:14px; font-family:var(--mono); font-size:13px; color:#fff; letter-spacing:2px; }
.fx-vhs .band{ position:absolute; left:0; right:0; height:5px; background:rgba(255,255,255,.15); filter:blur(1px); animation:vBand 6s linear infinite; }
@keyframes vBand{ 0%{ top:-5% } 100%{ top:105% } }

/* --- 4. Focus pull (rack focus) --- */
.fx-focus{ background:radial-gradient(120% 90% at 50% 30%,#14202b,#05080c); }
.fx-focus .subj{ position:absolute; border-radius:50%; }
.fx-focus .face-a{ width:70px; height:70px; left:26%; top:34%; background:radial-gradient(circle at 40% 35%,#ffd7a8,#c07a3c); box-shadow:0 8px 24px rgba(0,0,0,.5); }
.fx-focus .face-b{ width:52px; height:52px; right:24%; top:48%; background:radial-gradient(circle at 40% 35%,#a8c8ff,#3c5ec0); box-shadow:0 8px 24px rgba(0,0,0,.5); }
.fx-focus .whoosh{
  position:absolute; bottom:12px; left:0; right:0; text-align:center;
  font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--cyan); opacity:0;
}
.fx-focus.play .face-a{ animation:rackA 3.4s ease-in-out infinite; }
.fx-focus.play .face-b{ animation:rackB 3.4s ease-in-out infinite; }
.fx-focus.play .whoosh{ animation:whooshLabel 3.4s ease-in-out infinite; }
@keyframes rackA{ 0%,20%{ filter:blur(0) } 50%,70%{ filter:blur(6px) } 100%{ filter:blur(0) } }
@keyframes rackB{ 0%,20%{ filter:blur(6px) } 50%,70%{ filter:blur(0) } 100%{ filter:blur(6px) } }
@keyframes whooshLabel{ 0%,18%{ opacity:0 } 35%{ opacity:1 } 55%{ opacity:0 } 100%{ opacity:0 } }

/* --- 5. Kinetic typography --- */
.fx-kinetic{ background:linear-gradient(135deg,#1a1030,#0a0616); }
.fx-kinetic .word{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:38px; color:#fff; opacity:0; letter-spacing:-1px;
}
.fx-kinetic.play .w1{ animation:pop 3.6s ease-in-out infinite; }
.fx-kinetic.play .w2{ animation:pop 3.6s ease-in-out infinite 1.2s; }
.fx-kinetic.play .w3{ animation:pop 3.6s ease-in-out infinite 2.4s; color:var(--amber); }
@keyframes pop{ 0%{ opacity:0; transform:scale(.6) } 8%{ opacity:1; transform:scale(1) } 26%{ opacity:1; transform:scale(1.02) } 33%{ opacity:0; transform:scale(1.1) } 100%{ opacity:0 } }

/* --- 6. Cinematic title reveal --- */
.fx-title{ background:radial-gradient(120% 120% at 50% 50%,#12131a,#000); }
.fx-title .ttl{
  font-family:var(--display); font-weight:600; font-size:30px; color:#fff; letter-spacing:8px;
  text-transform:uppercase; opacity:0;
}
.fx-title .bar{ position:absolute; left:50%; bottom:34%; width:0; height:2px; background:var(--amber); transform:translateX(-50%); }
.fx-title.play .ttl{ animation:titleIn 4s ease-in-out infinite; }
.fx-title.play .bar{ animation:barIn 4s ease-in-out infinite; }
@keyframes titleIn{ 0%{ opacity:0; letter-spacing:20px } 25%{ opacity:1; letter-spacing:8px } 70%{ opacity:1; letter-spacing:8px } 85%{ opacity:0; letter-spacing:2px } 100%{ opacity:0 } }
@keyframes barIn{ 0%,10%{ width:0 } 30%{ width:120px } 70%{ width:120px } 85%{ width:0 } 100%{ width:0 } }

/* --- 7. Countdown leader --- */
.fx-count{ background:#0b0b0b; }
.fx-count .ring{ position:absolute; inset:0; }
.fx-count .num{ font-family:var(--mono); font-weight:700; font-size:60px; color:#eee; }
.fx-count .cross-v,.fx-count .cross-h{ position:absolute; background:rgba(255,255,255,.25); }
.fx-count .cross-v{ left:50%; top:0; bottom:0; width:1px; transform:translateX(-.5px); }
.fx-count .cross-h{ top:50%; left:0; right:0; height:1px; transform:translateY(-.5px); }
.fx-count .sweep{ position:absolute; inset:14%; border-radius:50%; border:2px solid rgba(255,255,255,.2); }
.fx-count.play .sweep{ background:conic-gradient(rgba(255,255,255,.14) 0deg,transparent 0deg); animation:sweep 1s linear infinite; }
@keyframes sweep{ to{ background:conic-gradient(rgba(255,255,255,.14) 360deg,transparent 360deg) } }

/* --- 8. Glitch text --- */
.fx-glitch{ background:#06070a; }
.fx-glitch .g{ font-family:var(--display); font-weight:700; font-size:34px; color:#fff; letter-spacing:1px; position:relative; }
.fx-glitch.play .g{ animation:gjit .18s steps(2) infinite; }
.fx-glitch .g::before,.fx-glitch .g::after{ content:attr(data-t); position:absolute; inset:0; }
.fx-glitch.play .g::before{ color:var(--pink); animation:gr .6s infinite; }
.fx-glitch.play .g::after{ color:var(--cyan); animation:gc .6s infinite; }
@keyframes gjit{ 50%{ transform:translate(1px,-1px) } }
@keyframes gr{ 0%,100%{ clip-path:inset(0 0 60% 0); transform:translateX(-3px) } 50%{ clip-path:inset(50% 0 0 0); transform:translateX(3px) } }
@keyframes gc{ 0%,100%{ clip-path:inset(40% 0 0 0); transform:translateX(3px) } 50%{ clip-path:inset(0 0 55% 0); transform:translateX(-3px) } }

/* --- 9. Number counter --- */
.fx-num{ background:linear-gradient(160deg,#0c1a14,#04080c); }
.fx-num .big{ font-family:var(--display); font-weight:700; font-size:52px; color:var(--cyan); text-shadow:0 0 24px rgba(55,224,216,.4); }
.fx-num .cap{ position:absolute; bottom:20px; left:0; right:0; text-align:center; font-size:12px; letter-spacing:2px; color:var(--ink-dim); text-transform:uppercase; }

/* --- 10. Lower-third name bar --- */
.fx-lower{ background:linear-gradient(120deg,#1c1c28,#0a0a12); }
.fx-lower .lt{ position:absolute; left:-60%; bottom:26px; display:flex; align-items:center; }
.fx-lower .lt .accent{ width:5px; height:44px; background:var(--amber); }
.fx-lower .lt .lt-txt{ background:rgba(0,0,0,.6); padding:8px 16px; backdrop-filter:blur(4px); }
.fx-lower .lt .name{ font-family:var(--display); font-weight:600; font-size:17px; color:#fff; }
.fx-lower .lt .role{ font-size:11px; letter-spacing:1px; color:var(--amber); text-transform:uppercase; }
.fx-lower.play .lt{ animation:slideIn 4s ease-in-out infinite; }
@keyframes slideIn{ 0%{ left:-60% } 16%{ left:16px } 78%{ left:16px } 92%{ left:-60% } 100%{ left:-60% } }

/* --- 11. Light leak / film burn --- */
.fx-leak{ background:#0a0a0a; }
.fx-leak .frame{ position:absolute; inset:0; background:linear-gradient(135deg,#20140a,#0a0a0a 60%); }
.fx-leak .burn{ position:absolute; inset:0; background:radial-gradient(60% 100% at -10% 50%,rgba(255,120,26,.7),transparent 55%); mix-blend-mode:screen; }
.fx-leak.play .burn{ animation:leak 3.6s ease-in-out infinite; }
@keyframes leak{ 0%{ transform:translateX(-30%); opacity:0 } 30%{ opacity:1 } 60%{ transform:translateX(120%); opacity:.9 } 100%{ transform:translateX(160%); opacity:0 } }
.fx-leak .grain{ position:absolute; inset:0; opacity:.06; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='0.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }

/* --- 12. Bokeh depth --- */
.fx-bokeh{ background:radial-gradient(120% 120% at 30% 20%,#101c2c,#04060a); }
.fx-bokeh .b{ position:absolute; border-radius:50%; filter:blur(6px); opacity:.7; }
.fx-bokeh.play .b{ animation:float 6s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }

/* --- 13. Data bars --- */
.fx-bars{ background:linear-gradient(180deg,#0e1220,#05070c); display:flex; align-items:flex-end; gap:10px; padding:22px 26px; }
.fx-bars .bar{ flex:1; height:0; background:linear-gradient(180deg,var(--amber),var(--amber-2)); border-radius:4px 4px 0 0; }
.fx-bars.play .bar{ animation:grow 3s ease-in-out infinite; }
.fx-bars .bar:nth-child(2){ animation-delay:.1s; background:linear-gradient(180deg,var(--cyan),#1a8f8a); }
.fx-bars .bar:nth-child(3){ animation-delay:.2s; }
.fx-bars .bar:nth-child(4){ animation-delay:.3s; background:linear-gradient(180deg,var(--cyan),#1a8f8a); }
.fx-bars .bar:nth-child(5){ animation-delay:.4s; }
@keyframes grow{ 0%{ height:0 } 40%{ height:var(--h,60%) } 82%{ height:var(--h,60%) } 100%{ height:0 } }

/* --- 14. Wipe transition --- */
.fx-wipe{ background:#000; }
.fx-wipe .panel{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:26px; }
.fx-wipe .p1{ background:linear-gradient(135deg,#ff7a1a,#ffb020); color:#1a1200; }
.fx-wipe .p2{ background:linear-gradient(135deg,#1a2740,#0a1020); color:#fff; clip-path:inset(0 0 0 100%); }
.fx-wipe.play .p2{ animation:wipe 3.4s cubic-bezier(.7,0,.2,1) infinite; }
@keyframes wipe{ 0%,15%{ clip-path:inset(0 0 0 100%) } 45%,70%{ clip-path:inset(0 0 0 0%) } 100%{ clip-path:inset(0 0 0 100%) } }

/* --- 15. Ken Burns (slow zoom) --- */
.fx-ken{ background:#000; overflow:hidden; }
.fx-ken .img{ position:absolute; inset:0; background:linear-gradient(135deg,#33241a,#0a0f1a 70%),radial-gradient(circle at 70% 30%,rgba(255,176,32,.4),transparent 40%); background-blend-mode:screen; }
.fx-ken.play .img{ animation:ken 6s ease-in-out infinite alternate; }
@keyframes ken{ 0%{ transform:scale(1) translate(0,0) } 100%{ transform:scale(1.25) translate(-4%,-3%) } }
.fx-ken .cap{ position:absolute; bottom:16px; left:16px; font-family:var(--display); font-weight:600; font-size:16px; color:#fff; text-shadow:0 2px 10px #000; }

/* --- 16. Progress bar / audiogram --- */
.fx-wave{ background:linear-gradient(180deg,#160e22,#07060c); display:flex; align-items:center; justify-content:center; gap:5px; }
.fx-wave .bar{ width:5px; height:20%; background:var(--pink); border-radius:3px; }
.fx-wave.play .bar{ animation:wave 1s ease-in-out infinite; }
.fx-wave .bar:nth-child(odd){ background:var(--cyan); }
@keyframes wave{ 0%,100%{ height:15% } 50%{ height:75% } }

/* --- scramble / decode --- */
.fx-scramble{ background:#04060a; }
.fx-scramble .sc{ font-family:var(--mono); font-weight:700; font-size:26px; color:var(--cyan); letter-spacing:2px; text-shadow:0 0 12px rgba(55,224,216,.5); }

/* --- split-flap board --- */
.fx-flap{ background:#0a0a10; }
.fx-flap .flapwrap{ position:absolute; inset:0; display:flex; gap:3px; align-items:center; justify-content:center; }
.fx-flap .flap-cell{
  font-family:var(--mono); font-weight:700; font-size:20px; color:#fff;
  background:linear-gradient(180deg,#26262f,#141418); border-radius:3px;
  width:20px; height:30px; display:grid; place-items:center;
  box-shadow:inset 0 -1px 0 #000, inset 0 1px 0 rgba(255,255,255,.08);
}

/* --- neon flicker --- */
.fx-neon{ background:radial-gradient(120% 120% at 50% 60%,#1a0518,#05010a); }
.fx-neon .nn{ font-family:var(--display); font-weight:700; font-size:40px; letter-spacing:3px; color:#fff; }
.fx-neon.play .nn{ animation:neon 3s steps(1) infinite; }
@keyframes neon{
  0%,17%,21%,79%,100%{ color:#ff5c8a; text-shadow:0 0 6px #ff4d78,0 0 16px #ff4d78,0 0 34px #ff2d5c; }
  19%,55%,58%{ color:#3a1020; text-shadow:none; }
}

/* --- handwriting signature --- */
.fx-sign{ background:linear-gradient(160deg,#14141a,#0a0a0e); }
.fx-sign svg{ width:74%; }
.fx-sign path{ fill:none; stroke:var(--amber); stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:700; stroke-dashoffset:700; filter:drop-shadow(0 1px 4px rgba(255,176,32,.4)); }
.fx-sign.play path{ animation:draw 3s ease-in-out infinite; }
@keyframes draw{ 0%{ stroke-dashoffset:700 } 55%,88%{ stroke-dashoffset:0 } 100%{ stroke-dashoffset:0 } }

/* --- gradient sheen text --- */
.fx-sheen{ background:#0a0c10; }
.fx-sheen .sh{
  font-family:var(--display); font-weight:800; font-size:40px; letter-spacing:-1px;
  background:linear-gradient(100deg,#4a4a52 0%,#4a4a52 42%,#fff 50%,#4a4a52 58%,#4a4a52 100%);
  background-size:250% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.fx-sheen.play .sh{ animation:sheen 3s linear infinite; }
@keyframes sheen{ 0%{ background-position:150% 0 } 100%{ background-position:-60% 0 } }

/* --- word-pop subtitles --- */
.fx-wordpop{ background:radial-gradient(120% 120% at 50% 120%,#1a1220,#05060a); }
.fx-wordpop .wp{ position:absolute; bottom:26px; left:16px; right:16px; font-family:var(--display); font-weight:700; font-size:21px; line-height:1.3; }
.fx-wordpop .wp span{ color:#565b6c; }
.fx-wordpop.play .wp span{ animation:wpop 5s ease infinite; }
.fx-wordpop .wp span:nth-child(1){ animation-delay:.2s } .fx-wordpop .wp span:nth-child(2){ animation-delay:.8s }
.fx-wordpop .wp span:nth-child(3){ animation-delay:1.4s } .fx-wordpop .wp span:nth-child(4){ animation-delay:2s }
.fx-wordpop .wp span:nth-child(5){ animation-delay:2.6s }
@keyframes wpop{ 0%{ color:#565b6c; transform:translateY(3px); display:inline-block } 6%{ color:var(--amber); transform:translateY(0) } 18%{ color:#fff } 100%{ color:#fff } }

/* --- camera shake --- */
.fx-shake{ background:#0a0d16; overflow:hidden; }
.fx-shake .content{ position:absolute; inset:-6px; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:32px; color:#fff; background:linear-gradient(135deg,#3a2410,#0a1020); }
.fx-shake.play .content{ animation:shake .4s linear infinite; }
@keyframes shake{ 0%,100%{ transform:translate(0,0) } 20%{ transform:translate(-4px,3px) } 40%{ transform:translate(4px,-3px) } 60%{ transform:translate(-3px,-4px) } 80%{ transform:translate(3px,4px) } }

/* --- dolly zoom --- */
.fx-dolly{ background:#000; overflow:hidden; }
.fx-dolly .bg{ position:absolute; inset:0; background:radial-gradient(circle at 50% 40%,#26405c,#0a1020 70%); }
.fx-dolly.play .bg{ animation:dolly 4s ease-in-out infinite; }
@keyframes dolly{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.7) } }
.fx-dolly .subj{ position:absolute; left:50%; bottom:18%; width:42px; height:66px; transform:translateX(-50%); background:radial-gradient(circle at 50% 28%,#ffd7a8,#b56a2c); border-radius:22px 22px 9px 9px; box-shadow:0 10px 24px rgba(0,0,0,.5); }
.fx-dolly .dz-label{ position:absolute; top:12px; left:0; right:0; text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:3px; color:#9fb4d4; }

/* --- whip pan --- */
.fx-whip{ background:#000; overflow:hidden; }
.fx-whip .s{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:30px; }
.fx-whip .s1{ background:linear-gradient(135deg,#ff7a1a,#ffb020); color:#1a1200; }
.fx-whip .s2{ background:linear-gradient(135deg,#1a2740,#0a1020); color:#fff; }
.fx-whip.play .s1{ animation:whipOut 3s ease-in-out infinite; }
.fx-whip.play .s2{ animation:whipIn 3s ease-in-out infinite; }
@keyframes whipOut{ 0%,28%{ transform:translateX(0); filter:blur(0) } 42%{ transform:translateX(-115%); filter:blur(12px) } 100%{ transform:translateX(-115%); filter:blur(12px) } }
@keyframes whipIn{ 0%,28%{ transform:translateX(115%); filter:blur(12px) } 42%,95%{ transform:translateX(0); filter:blur(0) } 100%{ transform:translateX(115%); filter:blur(12px) } }

/* --- iris wipe --- */
.fx-iris .a,.fx-iris .b{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:30px; }
.fx-iris .a{ background:linear-gradient(135deg,#1a2740,#0a1020); color:#fff; }
.fx-iris .b{ background:linear-gradient(135deg,#ff7a1a,#ffb020); color:#1a1200; clip-path:circle(0% at 50% 50%); }
.fx-iris.play .b{ animation:iris 3.4s ease-in-out infinite; }
@keyframes iris{ 0%,14%{ clip-path:circle(0% at 50% 50%) } 50%,76%{ clip-path:circle(75% at 50% 50%) } 100%{ clip-path:circle(0% at 50% 50%) } }

/* --- 3D cube rotate --- */
.fx-cube{ background:#05070c; perspective:600px; }
.fx-cube .cube{ position:absolute; inset:18% 25%; transform-style:preserve-3d; }
.fx-cube .face{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:26px; backface-visibility:hidden; }
.fx-cube .f1{ background:linear-gradient(135deg,#ff7a1a,#ffb020); color:#1a1200; transform:translateZ(60px); }
.fx-cube .f2{ background:linear-gradient(135deg,#1a2740,#0a1020); color:#fff; transform:rotateY(90deg) translateZ(60px); }
.fx-cube.play .cube{ animation:cube 3.4s ease-in-out infinite; }
@keyframes cube{ 0%,25%{ transform:rotateY(0deg) } 60%,85%{ transform:rotateY(-90deg) } 100%{ transform:rotateY(0deg) } }

/* --- zoom-blur punch --- */
.fx-zoomblur{ background:#000; overflow:hidden; }
.fx-zoomblur .s1{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:30px; color:#fff; background:linear-gradient(135deg,#3a2410,#0a1020); }
.fx-zoomblur.play .s1{ animation:zb 3s ease-in infinite; }
@keyframes zb{ 0%,38%{ transform:scale(1); filter:blur(0); opacity:1 } 58%{ transform:scale(2.4); filter:blur(16px); opacity:0 } 60%,100%{ transform:scale(1); filter:blur(0); opacity:1 } }

/* --- confetti --- */
.fx-confetti{ background:radial-gradient(120% 120% at 50% 0%,#12131a,#05060a); overflow:hidden; }
.fx-confetti .cf{ position:absolute; top:-12%; height:12px; border-radius:2px; }
.fx-confetti.play .cf{ animation:confetti 2.6s linear infinite; }
@keyframes confetti{ 0%{ transform:translateY(-20px) rotate(0) } 100%{ transform:translateY(300px) rotate(600deg) } }

/* --- matrix rain --- */
.fx-matrix{ background:#000; overflow:hidden; }
.fx-matrix .col{ position:absolute; top:0; font-family:var(--mono); font-size:12px; line-height:1.18; color:#39ff88; white-space:pre; text-align:center; text-shadow:0 0 6px rgba(57,255,136,.6); }
.fx-matrix.play .col{ animation-name:matrix; animation-timing-function:linear; animation-iteration-count:infinite; }
@keyframes matrix{ 0%{ transform:translateY(-70%) } 100%{ transform:translateY(105%) } }

/* --- starfield warp --- */
.fx-stars{ background:radial-gradient(circle at 50% 50%,#0a0a1e,#000); overflow:hidden; }
.fx-stars .st{ position:absolute; left:50%; top:50%; width:2px; height:2px; background:#fff; border-radius:50%; }
.fx-stars.play .st{ animation:warp 2s linear infinite; }
@keyframes warp{ 0%{ transform:translate(-50%,-50%) scale(.2); opacity:0 } 15%{ opacity:1 } 100%{ transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(1.6); opacity:0 } }

/* --- snowfall --- */
.fx-snow{ background:linear-gradient(180deg,#0e1830,#05070c); overflow:hidden; }
.fx-snow .fl{ position:absolute; top:-8%; background:#fff; border-radius:50%; opacity:.85; }
.fx-snow.play .fl{ animation-name:snow; animation-timing-function:linear; animation-iteration-count:infinite; }
@keyframes snow{ 0%{ transform:translateY(-10px) translateX(0) } 100%{ transform:translateY(300px) translateX(26px) } }

/* --- spotlight sweep --- */
.fx-spot{ background:#050505; overflow:hidden; }
.fx-spot .txt{ font-family:var(--display); font-weight:800; font-size:34px; color:#fff; opacity:.14; letter-spacing:2px; }
.fx-spot .beam{ position:absolute; inset:0; background:radial-gradient(closest-side at 30% 50%,rgba(255,255,255,.9),rgba(255,255,255,0) 62%); mix-blend-mode:screen; }
.fx-spot.play .beam{ animation:spot 4s ease-in-out infinite; }
@keyframes spot{ 0%{ transform:translateX(-34%) } 50%{ transform:translateX(34%) } 100%{ transform:translateX(-34%) } }

/* --- mesh gradient --- */
.fx-mesh{ background:#0a0612; overflow:hidden; }
.fx-mesh .blob{ position:absolute; width:62%; height:62%; border-radius:50%; filter:blur(32px); opacity:.75; }
.fx-mesh .b1{ background:#ff4d78; left:-12%; top:-14%; }
.fx-mesh .b2{ background:#37e0d8; right:-12%; top:8%; }
.fx-mesh .b3{ background:#ffb020; left:24%; bottom:-22%; }
.fx-mesh.play .blob{ animation:mesh 6s ease-in-out infinite alternate; }
.fx-mesh.play .b2{ animation-delay:-2s } .fx-mesh.play .b3{ animation-delay:-4s }
@keyframes mesh{ 0%{ transform:translate(0,0) scale(1) } 100%{ transform:translate(18%,14%) scale(1.3) } }

/* --- news ticker --- */
.fx-tick{ background:#0a0d16; }
.fx-tick .anchor{ position:absolute; inset:0 0 34px 0; background:radial-gradient(circle at 50% 30%,#1a2440,#0a1020); }
.fx-tick .bar{ position:absolute; left:0; right:0; bottom:0; height:34px; background:#c81e1e; display:flex; align-items:center; overflow:hidden; }
.fx-tick .label{ flex:none; background:#08090c; color:#fff; font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:1px; padding:0 10px; height:100%; display:grid; place-items:center; z-index:2; }
.fx-tick .crawl{ white-space:nowrap; font-family:var(--sans); font-size:13px; color:#fff; padding-left:14px; }
.fx-tick.play .crawl{ animation:crawl 9s linear infinite; }
@keyframes crawl{ 0%{ transform:translateX(60%) } 100%{ transform:translateX(-115%) } }

/* --- story progress bars --- */
.fx-story{ background:linear-gradient(160deg,#2a1836,#0a0612); }
.fx-story .bars{ position:absolute; top:12px; left:12px; right:12px; display:flex; gap:4px; }
.fx-story .seg{ flex:1; height:3px; background:rgba(255,255,255,.28); border-radius:2px; overflow:hidden; }
.fx-story .seg::after{ content:""; display:block; height:100%; width:0; background:#fff; }
.fx-story.play .seg::after{ animation:seg 4s linear infinite; }
.fx-story.play .seg:nth-child(2)::after{ animation-delay:1s } .fx-story.play .seg:nth-child(3)::after{ animation-delay:2s } .fx-story.play .seg:nth-child(4)::after{ animation-delay:3s }
@keyframes seg{ 0%{ width:0 } 25%,100%{ width:100% } }
.fx-story .story-mid{ font-family:var(--display); font-weight:700; font-size:24px; color:#fff; letter-spacing:2px; opacity:.9; }

/* --- logo stamp --- */
.fx-stamp{ background:radial-gradient(120% 120% at 50% 50%,#14151c,#05060a); }
.fx-stamp .seal{ width:96px; height:96px; border-radius:50%; border:4px solid var(--amber); display:grid; place-items:center; color:var(--amber); font-family:var(--display); font-weight:800; font-size:13px; letter-spacing:1px; }
.fx-stamp.play .seal{ animation:stamp 3s ease-in-out infinite; }
@keyframes stamp{ 0%{ transform:scale(3) rotate(-18deg); opacity:0 } 12%{ transform:scale(1) rotate(0); opacity:1 } 18%{ transform:scale(1.06) } 24%{ transform:scale(1) } 82%{ opacity:1 } 92%,100%{ opacity:0 } }

/* --- line chart --- */
.fx-line{ background:linear-gradient(180deg,#0e1220,#05070c); }
.fx-line svg{ width:82%; height:70%; }
.fx-line .ln{ fill:none; stroke:var(--cyan); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:520; stroke-dashoffset:520; filter:drop-shadow(0 0 5px rgba(55,224,216,.5)); }
.fx-line.play .ln{ animation:lineDraw 3s ease-in-out infinite; }
@keyframes lineDraw{ 0%{ stroke-dashoffset:520 } 55%,88%{ stroke-dashoffset:0 } 100%{ stroke-dashoffset:0 } }

/* --- donut gauge --- */
.fx-donut{ background:radial-gradient(120% 120% at 50% 50%,#0c1a14,#04080c); }
.fx-donut svg{ width:58%; transform:rotate(-90deg); }
.fx-donut .track{ fill:none; stroke:#1e2a26; stroke-width:11; }
.fx-donut .val{ fill:none; stroke:var(--cyan); stroke-width:11; stroke-linecap:round; stroke-dasharray:283; stroke-dashoffset:283; filter:drop-shadow(0 0 5px rgba(55,224,216,.5)); }
.fx-donut.play .val{ animation:donut 3s ease-out infinite; }
@keyframes donut{ 0%{ stroke-dashoffset:283 } 55%,88%{ stroke-dashoffset:71 } 100%{ stroke-dashoffset:283 } }
.fx-donut .pct{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:26px; color:#fff; }

/* --- halftone pop --- */
.fx-halftone{ background-color:#12100a; background-image:radial-gradient(var(--amber) 30%, transparent 32%); background-size:12px 12px; }
.fx-halftone.play{ animation:halftone 2.6s ease-in-out infinite; }
@keyframes halftone{ 0%,100%{ background-size:10px 10px } 50%{ background-size:16px 16px } }
.fx-halftone .txt{ font-family:var(--display); font-weight:800; font-size:40px; color:#12100a; -webkit-text-stroke:2px var(--amber); }

/* --- CRT power-off --- */
.fx-crtoff{ background:#000; }
.fx-crtoff .screen{ position:absolute; inset:0; background:linear-gradient(135deg,#2a3a5c,#182636); }
.fx-crtoff.play .screen{ animation:crtoff 3s ease-in-out infinite; }
@keyframes crtoff{
  0%,52%{ transform:scaleY(1) scaleX(1); opacity:1; filter:brightness(1) }
  70%{ transform:scaleY(.03) scaleX(1); opacity:1; filter:brightness(3) }
  82%{ transform:scaleY(.02) scaleX(.35); filter:brightness(5) }
  90%{ transform:scaleY(.004) scaleX(.08); opacity:1; filter:brightness(7) }
  100%{ transform:scaleY(.004) scaleX(0); opacity:0 }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001s !important; animation-iteration-count:1 !important; }
}

@media (max-width:560px){
  .topbar{ flex-wrap:wrap; }
  #search{ width:100%; order:3; }
  .grid{ grid-template-columns:1fr; }
}