/* ============================================================
   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); }
.brand-by{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:2px; text-transform:uppercase; color:#9aa1ad; text-decoration:none; }
.brand-by b{ color:var(--amber); font-weight:600; }
.brand-by:hover{ color:#c2c7d0; }
.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; }
.chip-n{ font-size:11px; opacity:.6; margin-left:3px; font-variant-numeric:tabular-nums; }
.chip.active .chip-n{ opacity:.85; }
.lib-col h3 .chip-n{ color:var(--amber); opacity:.8; }

/* ============ 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; }
/* ============ TABS ============ */
.tabs{ display:flex; gap:22px; padding:14px clamp(16px,4vw,40px) 0; border-bottom:1px solid var(--line); }
.tab{
  font-family:var(--display); font-weight:600; font-size:15px; color:var(--ink-dim);
  background:transparent; border:none; border-bottom:2px solid transparent;
  padding:10px 2px; margin-bottom:-1px; cursor:pointer; transition:color .15s, border-color .15s;
}
.tab:hover{ color:var(--ink); }
.tab.active{ color:var(--ink); border-bottom-color:var(--amber); }
.tab-n{ font-family:var(--mono); font-size:11px; font-weight:600; color:var(--ink-faint); background:var(--panel-2); border:1px solid var(--line); border-radius:20px; padding:1px 7px; margin-left:3px; vertical-align:1px; font-variant-numeric:tabular-nums; }
.tab.active .tab-n{ color:var(--amber); border-color:rgba(255,176,32,.35); background:rgba(255,176,32,.08); }
[data-panel][hidden]{ display:none; }

.lib-col ul{ list-style:none; display:flex; flex-direction:column; gap:9px; }
.lib-col li{
  display:flex; gap:12px; align-items:flex-start; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:11px 13px;
  transition:border-color .15s, background .15s;
}
.lib-main{ flex:1; display:flex; flex-direction:column; gap:9px; min-width:0; }
.lib-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.mini-btn{
  font-family:var(--sans); font-size:11px; cursor:pointer; padding:5px 10px; border-radius:6px;
  color:var(--amber); background:transparent; border:1px solid rgba(255,176,32,.35); transition:background .15s, border-color .15s, color .15s;
}
.mini-btn:hover{ background:rgba(255,176,32,.12); }
.mini-btn.ghost{ color:var(--ink-faint); border-color:var(--line); }
.mini-btn.ghost:hover{ color:var(--ink-dim); border-color:var(--ink-faint); background:transparent; }
.sound-prompt{
  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:8px; padding:11px 12px; margin:0;
}
.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); }
.foot-by{ margin-top:12px; font-family:var(--mono); font-size:12px; letter-spacing:1px; }
.foot-by a{ color:#9aa1ad; text-decoration:none; }
.foot-by a:hover{ color:var(--cyan); }
.foot-by b{ color:var(--amber); font-weight:600; }
.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); }

.build-cta{ text-decoration:none; }

/* ============================================================
   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 }
}

/* ============================================================
   ANIMATIONS TAB — micro-interactions & motion-design previews
   ============================================================ */

/* coin drop */
.fx-coindrop{ background:radial-gradient(120% 120% at 50% 0%,#141018,#05060a); overflow:hidden; }
.fx-coindrop .coin{ position:absolute; top:-14%; width:20px; height:20px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffe08a,#f0a726 60%,#b9791a); border:1px solid #ffcf5c;
  color:#8a5a10; font:700 12px/19px var(--mono); text-align:center; box-shadow:0 0 6px rgba(255,190,60,.5); }
.fx-coindrop.play .coin{ animation:coinfall 1.4s ease-in infinite; }
@keyframes coinfall{ 0%{ transform:translateY(-20px) rotateY(0) } 72%{ transform:translateY(232px) rotateY(540deg) } 84%{ transform:translateY(206px) } 93%{ transform:translateY(226px) } 100%{ transform:translateY(222px) rotateY(720deg) } }

/* coin flip */
.fx-coinflip{ background:radial-gradient(120% 120% at 50% 50%,#14120a,#05060a); display:grid; place-items:center; perspective:520px; }
.fx-coinflip .coin3d{ width:72px; height:72px; position:relative; transform-style:preserve-3d; }
.fx-coinflip.play .coin3d{ animation:coinspin 2s ease-in-out infinite; }
@keyframes coinspin{ 0%{ transform:rotateX(0) } 100%{ transform:rotateX(1440deg) } }
.fx-coinflip .cface{ position:absolute; inset:0; border-radius:50%; display:grid; place-items:center; font:800 26px var(--display);
  backface-visibility:hidden; background:radial-gradient(circle at 38% 30%,#ffe08a,#eaa11f 62%,#b9791a); color:#7a4e10; border:3px solid #ffcf5c; }
.fx-coinflip .tails{ transform:rotateX(180deg); color:#7a4e10; }

/* odometer */
.fx-odo{ background:radial-gradient(120% 120% at 50% 50%,#0c1420,#05070c); display:grid; place-items:center; }
.fx-odo .odo-row{ display:flex; align-items:center; font:800 34px var(--mono); color:#fff; }
.fx-odo .odo-sep{ color:#5a6272; padding:0 2px; }
.fx-odo .odo-col{ display:inline-block; height:42px; width:24px; overflow:hidden; }
.fx-odo .odo-strip{ display:flex; flex-direction:column; }
.fx-odo .odo-strip span{ height:42px; display:grid; place-items:center; }
.fx-odo.play .odo-strip{ animation:odoRoll 1.4s cubic-bezier(.2,.85,.25,1) forwards; }
@keyframes odoRoll{ from{ transform:translateY(0) } to{ transform:translateY(var(--y)) } }

/* like-button burst */
.fx-like{ background:radial-gradient(120% 120% at 50% 50%,#1a0a12,#05060a); display:grid; place-items:center; }
.fx-like .heart{ font-size:46px; color:#3a2230; position:relative; z-index:2; }
.fx-like.play .heart{ animation:likeheart 2.4s ease-in-out infinite; }
@keyframes likeheart{ 0%,60%{ transform:scale(1); color:#3a2230 } 8%{ transform:scale(.7) } 20%{ transform:scale(1.25); color:#ff3b5c } 30%{ transform:scale(1); color:#ff3b5c } 100%{ transform:scale(1); color:#ff3b5c } }
.fx-like .lp{ position:absolute; left:50%; top:50%; width:7px; height:7px; border-radius:50%; background:#ff5c8a; opacity:0; }
.fx-like.play .lp{ animation:likeparts 2.4s ease-out infinite; }
@keyframes likeparts{ 0%,14%{ transform:translate(-50%,-50%) scale(1); opacity:0 } 20%{ opacity:1 } 42%{ transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(.35); opacity:0 } 100%{ opacity:0 } }

/* success checkmark */
.fx-check{ background:radial-gradient(120% 120% at 50% 50%,#0c1a12,#05070c); display:grid; place-items:center; }
.fx-check svg{ width:46%; }
.fx-check .ck-c{ fill:none; stroke:#2fe36a; stroke-width:5; stroke-dasharray:264; stroke-dashoffset:264; }
.fx-check .ck-p{ fill:none; stroke:#2fe36a; stroke-width:7; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:80; stroke-dashoffset:80; filter:drop-shadow(0 0 5px rgba(47,227,106,.5)); }
.fx-check.play .ck-c{ animation:ckcircle 2.4s ease-in-out infinite; }
.fx-check.play .ck-p{ animation:ckpath 2.4s ease-in-out infinite; }
@keyframes ckcircle{ 0%{ stroke-dashoffset:264 } 30%,90%{ stroke-dashoffset:0 } 100%{ stroke-dashoffset:0 } }
@keyframes ckpath{ 0%,25%{ stroke-dashoffset:80 } 45%,90%{ stroke-dashoffset:0 } 100%{ stroke-dashoffset:0 } }

/* achievement / trophy */
.fx-trophy{ background:radial-gradient(120% 120% at 50% 40%,#1a1408,#05060a); display:grid; place-items:center; overflow:hidden; }
.fx-trophy .badge{ position:relative; width:94px; height:94px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 35%,#ffe08a,#e0a11f 70%); box-shadow:0 0 26px rgba(255,190,60,.5); overflow:hidden; }
.fx-trophy .tico{ font-size:42px; }
.fx-trophy .shine{ position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent); transform:skewX(-18deg); }
.fx-trophy .ach{ position:absolute; bottom:20px; font:700 12px var(--display); letter-spacing:2px; color:#ffd77a; opacity:0; }
.fx-trophy.play .badge{ animation:trophypop 3s ease-in-out infinite; }
.fx-trophy.play .shine{ animation:trophyshine 3s ease-in-out infinite; }
.fx-trophy.play .ach{ animation:achtext 3s ease-in-out infinite; }
@keyframes trophypop{ 0%{ transform:scale(0) rotate(-28deg) } 14%{ transform:scale(1.12) rotate(0) } 22%{ transform:scale(1) } 85%{ transform:scale(1); opacity:1 } 96%,100%{ transform:scale(1); opacity:0 } }
@keyframes trophyshine{ 0%,30%{ left:-60% } 55%{ left:120% } 100%{ left:120% } }
@keyframes achtext{ 0%,20%{ opacity:0; transform:translateY(8px) } 32%{ opacity:1; transform:translateY(0) } 85%{ opacity:1 } 100%{ opacity:0 } }

/* level up */
.fx-levelup{ background:radial-gradient(120% 120% at 50% 50%,#0a1020,#05060a); display:grid; place-items:center; }
.fx-levelup .lvl{ font:800 30px var(--display); color:#ffd54a; letter-spacing:1px; text-shadow:0 0 16px rgba(255,190,60,.6); opacity:0; margin-bottom:14px; }
.fx-levelup .xp{ width:64%; height:12px; border-radius:8px; background:#1a2233; overflow:hidden; border:1px solid #2a3346; }
.fx-levelup .xp-fill{ height:100%; width:0; border-radius:8px; background:linear-gradient(90deg,#ffb020,#ff7a1a); }
.fx-levelup.play .lvl{ animation:lvlpop 3s ease-in-out infinite; }
.fx-levelup.play .xp-fill{ animation:xpfill 3s ease-in-out infinite; }
@keyframes xpfill{ 0%{ width:15% } 45%{ width:100% } 55%{ width:100%; filter:brightness(1.7) } 100%{ width:100% } }
@keyframes lvlpop{ 0%,45%{ opacity:0; transform:scale(.6) } 55%{ opacity:1; transform:scale(1.15) } 62%{ transform:scale(1) } 90%{ opacity:1 } 100%{ opacity:0 } }

/* confetti cannon */
.fx-cpop{ background:radial-gradient(120% 120% at 50% 100%,#12131a,#05060a); overflow:hidden; }
.fx-cpop .cp{ position:absolute; bottom:8%; width:8px; height:8px; border-radius:2px; opacity:0; }
.fx-cpop.play .cp{ animation:cpop 2.6s ease-out infinite; }
@keyframes cpop{ 0%{ transform:translate(0,0); opacity:0 } 6%{ opacity:1 } 45%{ transform:translate(var(--tx),var(--ty)) } 100%{ transform:translate(calc(var(--tx)*1.1),44px); opacity:0 } }

/* balloons */
.fx-balloons{ background:linear-gradient(180deg,#0e1830,#05070c); overflow:hidden; }
.fx-balloons .balloon{ position:absolute; bottom:-26%; width:34px; height:42px; border-radius:50%/45% 45% 55% 55%; box-shadow:inset -4px -4px 8px rgba(0,0,0,.2); }
.fx-balloons .balloon::after{ content:""; position:absolute; top:100%; left:50%; width:1px; height:38px; background:rgba(255,255,255,.3); }
.fx-balloons.play .balloon{ animation:balloonrise linear infinite; }
@keyframes balloonrise{ 0%{ transform:translateY(0) translateX(0) } 50%{ transform:translateY(-150px) translateX(9px) } 100%{ transform:translateY(-300px) translateX(-7px) } }

/* emoji rain */
.fx-emoji{ background:radial-gradient(120% 120% at 50% 0%,#12131a,#05060a); overflow:hidden; }
.fx-emoji .em{ position:absolute; top:-12%; font-size:22px; }
.fx-emoji.play .em{ animation:emrain linear infinite; }
@keyframes emrain{ 0%{ transform:translateY(-20px) rotate(0) } 100%{ transform:translateY(262px) rotate(var(--r)) } }

/* spin-to-win wheel */
.fx-wheel{ background:radial-gradient(120% 120% at 50% 50%,#12131a,#05060a); display:grid; place-items:center; }
.fx-wheel .wheel{ width:118px; height:118px; border-radius:50%; border:4px solid #2a3346;
  background:conic-gradient(#ff4d78 0 45deg,#ffb020 45deg 90deg,#37e0d8 90deg 135deg,#7a5cff 135deg 180deg,#4dff88 180deg 225deg,#ff7a1a 225deg 270deg,#ff4d78 270deg 315deg,#ffb020 315deg 360deg); }
.fx-wheel.play .wheel{ animation:wheelspin 3s cubic-bezier(.15,.9,.2,1) infinite; }
@keyframes wheelspin{ 0%{ transform:rotate(0) } 72%,100%{ transform:rotate(1170deg) } }
.fx-wheel .whub{ position:absolute; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px #2a3346; }
.fx-wheel .wpin{ position:absolute; top:calc(50% - 74px); width:0; height:0; border-left:9px solid transparent; border-right:9px solid transparent; border-top:16px solid #fff; }

/* loading spinners */
.fx-spinner{ background:#0a0d16; display:flex; align-items:center; justify-content:center; gap:26px; }
.fx-spinner .sp{ width:40px; height:40px; }
.fx-spinner .ring{ border:4px solid #253049; border-top-color:var(--cyan); border-radius:50%; }
.fx-spinner.play .ring{ animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }
.fx-spinner .dots{ display:flex; align-items:center; gap:6px; width:auto; }
.fx-spinner .dots i{ width:9px; height:9px; border-radius:50%; background:var(--amber); }
.fx-spinner.play .dots i{ animation:spdot .9s ease-in-out infinite; }
.fx-spinner .dots i:nth-child(2){ animation-delay:.15s } .fx-spinner .dots i:nth-child(3){ animation-delay:.3s }
@keyframes spdot{ 0%,100%{ transform:translateY(0); opacity:.4 } 50%{ transform:translateY(-10px); opacity:1 } }
.fx-spinner .pulse{ border-radius:50%; background:#ff4d78; }
.fx-spinner.play .pulse{ animation:sppulse 1s ease-in-out infinite; }
@keyframes sppulse{ 0%,100%{ transform:scale(.5); opacity:.5 } 50%{ transform:scale(1); opacity:1 } }

/* skeleton shimmer */
.fx-skel{ background:#0e1017; display:flex; align-items:center; gap:16px; padding:0 26px; }
.fx-skel .sk-av{ width:56px; height:56px; border-radius:50%; flex:none; }
.fx-skel .sk-lines{ flex:1; display:flex; flex-direction:column; gap:10px; }
.fx-skel .sk-l{ height:12px; border-radius:6px; }
.fx-skel .w70{ width:70% } .fx-skel .w90{ width:90% } .fx-skel .w50{ width:50% }
.fx-skel .sk-av,.fx-skel .sk-l{ background:linear-gradient(100deg,#1c2130 30%,#2b3346 50%,#1c2130 70%); background-size:220% 100%; }
.fx-skel.play .sk-av,.fx-skel.play .sk-l{ animation:shimmer 1.4s linear infinite; }
@keyframes shimmer{ 0%{ background-position:180% 0 } 100%{ background-position:-80% 0 } }

/* typing dots */
.fx-typing{ background:radial-gradient(120% 120% at 50% 50%,#12131a,#05060a); display:grid; place-items:center; }
.fx-typing .bubble{ display:flex; gap:7px; padding:14px 18px; border-radius:18px 18px 18px 4px; background:#232a3a; }
.fx-typing .bubble i{ width:10px; height:10px; border-radius:50%; background:#9fb0c8; }
.fx-typing.play .bubble i{ animation:tdot 1.2s ease-in-out infinite; }
.fx-typing .bubble i:nth-child(2){ animation-delay:.18s } .fx-typing .bubble i:nth-child(3){ animation-delay:.36s }
@keyframes tdot{ 0%,60%,100%{ transform:translateY(0); opacity:.5 } 30%{ transform:translateY(-7px); opacity:1 } }

/* material ripple */
.fx-ripple{ background:radial-gradient(120% 120% at 50% 50%,#0a1020,#05060a); display:grid; place-items:center; }
.fx-ripple .btn{ position:relative; overflow:hidden; padding:14px 30px; border-radius:10px; background:linear-gradient(180deg,#2b6cff,#1a4fd0); color:#fff; font:700 15px var(--display); letter-spacing:1px; }
.fx-ripple .rip{ position:absolute; top:50%; left:50%; width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,.6); transform:translate(-50%,-50%) scale(0); }
.fx-ripple.play .rip{ animation:ripple 1.8s ease-out infinite; }
@keyframes ripple{ 0%{ transform:translate(-50%,-50%) scale(0); opacity:.7 } 70%,100%{ transform:translate(-50%,-50%) scale(14); opacity:0 } }

/* squash & stretch bounce */
.fx-bounce{ background:linear-gradient(180deg,#0e1424,#05070c); overflow:hidden; }
.fx-bounce .ball{ position:absolute; top:16%; left:50%; width:40px; height:40px; margin-left:-20px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#ff9d6b,#e2542a 65%,#b23a17); }
.fx-bounce.play .ball{ animation:balldrop 1.6s cubic-bezier(.5,.05,.9,.6) infinite; }
@keyframes balldrop{ 0%{ transform:translateY(0) scaleY(1) } 42%{ transform:translateY(120px) scaleY(1.06) } 52%{ transform:translateY(134px) scaleY(.6) scaleX(1.35) } 62%{ transform:translateY(120px) scaleY(1.06) } 100%{ transform:translateY(0) scaleY(1) } }
.fx-bounce .floor{ position:absolute; bottom:20%; left:16%; right:16%; height:3px; border-radius:3px; background:rgba(255,255,255,.14); }

/* 3D flip card */
.fx-flip{ background:radial-gradient(120% 120% at 50% 50%,#12131a,#05060a); display:grid; place-items:center; perspective:700px; }
.fx-flip .fcard{ width:120px; height:78px; position:relative; transform-style:preserve-3d; }
.fx-flip.play .fcard{ animation:flipcard 3s ease-in-out infinite; }
@keyframes flipcard{ 0%,20%{ transform:rotateY(0) } 55%,80%{ transform:rotateY(180deg) } 100%{ transform:rotateY(0) } }
.fx-flip .ff{ position:absolute; inset:0; border-radius:10px; display:grid; place-items:center; font:700 16px var(--display); backface-visibility:hidden; }
.fx-flip .front{ background:linear-gradient(135deg,#2b6cff,#1a4fd0); color:#fff; }
.fx-flip .back{ background:linear-gradient(135deg,#ff7a1a,#ffb020); color:#1a1200; transform:rotateY(180deg); }

/* floating hearts */
.fx-hearts{ background:radial-gradient(120% 120% at 50% 100%,#1a0a14,#05060a); overflow:hidden; }
.fx-hearts .hb{ position:absolute; bottom:-8%; font-size:22px; color:#ff4d78; }
.fx-hearts.play .hb{ animation:heartfloat linear infinite; }
@keyframes heartfloat{ 0%{ transform:translateY(0) translateX(0) scale(.7); opacity:0 } 15%{ opacity:1 } 80%{ opacity:1 } 100%{ transform:translateY(-224px) translateX(var(--drift)) scale(1.1); opacity:0 } }

/* star rating fill */
.fx-rate{ background:radial-gradient(120% 120% at 50% 50%,#141208,#05060a); display:flex; align-items:center; justify-content:center; gap:8px; }
.fx-rate .star{ font-size:34px; color:#2f2a1a; }
.fx-rate.play .star{ animation:starfill 3s ease-in-out infinite; }
@keyframes starfill{ 0%,10%{ color:#2f2a1a; transform:scale(1) } 18%{ color:#ffc21e; transform:scale(1.35) } 26%{ transform:scale(1) } 85%{ color:#ffc21e } 100%{ color:#2f2a1a } }

/* notification pulse / radar */
.fx-radar{ background:radial-gradient(120% 120% at 50% 50%,#0a1020,#05060a); display:grid; place-items:center; }
.fx-radar .rdot{ width:14px; height:14px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan); position:relative; z-index:2; }
.fx-radar .rring{ position:absolute; top:50%; left:50%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; border:2px solid var(--cyan); opacity:0; }
.fx-radar.play .rring{ animation:radar 2.4s ease-out infinite; }
.fx-radar .rring:nth-child(2){ animation-delay:.8s } .fx-radar .rring:nth-child(3){ animation-delay:1.6s }
@keyframes radar{ 0%{ transform:scale(1); opacity:.8 } 100%{ transform:scale(8); opacity:0 } }

/* ============================================================
   DRAMATIC NAME REVEAL (typewriter + pause)
   ============================================================ */
.fx-typepause{ background:radial-gradient(120% 120% at 50% 45%,#101116,#040507); display:grid; place-items:center; }
.fx-typepause .tp{ font-family:var(--display); font-weight:700; font-size:30px; letter-spacing:1px; color:#f2ede6; white-space:pre; }
.fx-typepause .tp-cur{ display:inline-block; width:3px; height:1.05em; background:var(--amber); margin-left:5px; vertical-align:-3px; animation:blink 1s steps(1) infinite; }

/* ============================================================
   NATURE / ATMOSPHERE
   ============================================================ */
/* tree swaying */
.fx-tree{ background:linear-gradient(180deg,#26304a,#0e1522 70%); overflow:hidden; }
.fx-tree .tree{ position:absolute; left:50%; bottom:16%; width:0; transform-origin:bottom center; }
.fx-tree.play .tree{ animation:treesway 4s ease-in-out infinite; }
@keyframes treesway{ 0%,100%{ transform:rotate(-3deg) } 50%{ transform:rotate(3deg) } }
.fx-tree .trunk{ position:absolute; bottom:0; left:-6px; width:12px; height:70px; background:linear-gradient(90deg,#3a2a1a,#5a4326); border-radius:3px; }
.fx-tree .canopy{ position:absolute; bottom:56px; left:-52px; width:104px; height:96px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#3f8f4e,#1f5a2c 70%); box-shadow:0 0 24px rgba(30,90,44,.5); }
.fx-tree .ground{ position:absolute; left:0; right:0; bottom:0; height:16%; background:linear-gradient(180deg,#132018,#0a120c); }

/* rainfall */
.fx-rain{ background:linear-gradient(180deg,#1a2432,#0c1119); overflow:hidden; }
.fx-rain .rd{ position:absolute; top:-16%; width:1.5px; background:linear-gradient(180deg,rgba(160,190,220,0),rgba(160,190,220,.7)); }
.fx-rain.play .rd{ animation:rainfall linear infinite; }
@keyframes rainfall{ 0%{ transform:translateY(-20px) translateX(0) } 100%{ transform:translateY(280px) translateX(18px) } }

/* fog */
.fx-fog{ background:linear-gradient(180deg,#20242c,#0c0e12); overflow:hidden; }
.fx-fog .fb{ position:absolute; height:60px; width:160%; left:-30%; border-radius:50%; background:radial-gradient(closest-side,rgba(180,190,205,.22),transparent); filter:blur(8px); }
.fx-fog .b1{ top:26%; } .fx-fog .b2{ top:48%; } .fx-fog .b3{ top:70%; }
.fx-fog.play .fb{ animation:fog 9s ease-in-out infinite; }
.fx-fog.play .b2{ animation-duration:12s; animation-direction:reverse; } .fx-fog.play .b3{ animation-duration:14s; }
@keyframes fog{ 0%,100%{ transform:translateX(-12%) } 50%{ transform:translateX(12%) } }

/* fireflies */
.fx-fireflies{ background:radial-gradient(120% 120% at 50% 40%,#0e1a12,#050806); overflow:hidden; }
.fx-fireflies .ff{ position:absolute; width:6px; height:6px; border-radius:50%; background:#eaff9a; box-shadow:0 0 8px 2px rgba(210,255,120,.7); }
.fx-fireflies.play .ff{ animation:firefly ease-in-out infinite; }
@keyframes firefly{ 0%,100%{ transform:translate(0,0); opacity:.1 } 25%{ opacity:1 } 50%{ transform:translate(var(--dx),var(--dy)); opacity:.6 } 75%{ opacity:1 } }

/* god rays */
.fx-godrays{ background:radial-gradient(120% 120% at 20% 0%,#3a2f18,#0a0a06 70%); overflow:hidden; }
.fx-godrays .sun{ position:absolute; top:-30px; left:-30px; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle,#ffe9a8,rgba(255,220,140,0) 70%); }
.fx-godrays .rays{ position:absolute; top:-40%; left:-40%; width:180%; height:180%;
  background:repeating-conic-gradient(from 0deg at 12% 12%, rgba(255,232,170,.16) 0deg 4deg, transparent 4deg 12deg); mix-blend-mode:screen; }
.fx-godrays.play .rays{ animation:godrays 12s linear infinite; }
@keyframes godrays{ 0%{ transform:rotate(0) } 100%{ transform:rotate(8deg) } }

/* aurora */
.fx-aurora{ background:linear-gradient(180deg,#050813,#0a0f1e); overflow:hidden; }
.fx-aurora .stars{ position:absolute; inset:0; background-image:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 20%,#fff,transparent),radial-gradient(1px 1px at 50% 60%,#fff,transparent),radial-gradient(1px 1px at 85% 50%,#fff,transparent),radial-gradient(1px 1px at 35% 75%,#fff,transparent); opacity:.6; }
.fx-aurora .au{ position:absolute; top:6%; left:-20%; width:140%; height:60%; border-radius:50%; filter:blur(18px); mix-blend-mode:screen; opacity:.6; }
.fx-aurora .a1{ background:radial-gradient(closest-side,rgba(60,240,150,.6),transparent); }
.fx-aurora .a2{ background:radial-gradient(closest-side,rgba(120,120,255,.5),transparent); top:14%; }
.fx-aurora .a3{ background:radial-gradient(closest-side,rgba(80,255,220,.4),transparent); top:2%; }
.fx-aurora.play .au{ animation:aurora 8s ease-in-out infinite; }
.fx-aurora.play .a2{ animation-duration:11s; animation-direction:reverse; } .fx-aurora.play .a3{ animation-duration:13s; }
@keyframes aurora{ 0%,100%{ transform:translateX(-10%) skewX(-8deg) scaleY(.9) } 50%{ transform:translateX(10%) skewX(8deg) scaleY(1.1) } }

/* embers */
.fx-embers{ background:radial-gradient(120% 120% at 50% 100%,#2a1206,#070403); overflow:hidden; }
.fx-embers .eb{ position:absolute; bottom:-6%; border-radius:50%; background:radial-gradient(circle,#ffd27a,#ff6a1a 70%); box-shadow:0 0 6px 1px rgba(255,120,40,.7); }
.fx-embers.play .eb{ animation:ember linear infinite; }
@keyframes ember{ 0%{ transform:translateY(0) translateX(0); opacity:0 } 15%{ opacity:1 } 85%{ opacity:.8 } 100%{ transform:translateY(-240px) translateX(var(--drift)); opacity:0 } }

/* falling leaves */
.fx-leaves{ background:linear-gradient(180deg,#2a2016,#120d08); overflow:hidden; }
.fx-leaves .lf{ position:absolute; top:-8%; width:12px; height:9px; border-radius:60% 10% 60% 10%; }
.fx-leaves.play .lf{ animation:leaffall linear infinite; }
@keyframes leaffall{ 0%{ transform:translateY(-20px) translateX(0) rotate(0); opacity:0 } 12%{ opacity:1 } 100%{ transform:translateY(280px) translateX(var(--sway)) rotate(360deg); opacity:1 } }

/* ============================================================
   POWERPOINT-STYLE ANIMATION ENGINE
   One demo object; the variant class picks the motion.
   ============================================================ */
.fx-ppt{ background:radial-gradient(120% 120% at 50% 50%,#12131a,#05060a); display:grid; place-items:center; overflow:hidden; }
.fx-ppt .ppt-obj{ width:96px; height:60px; border-radius:12px; display:grid; place-items:center;
  font:800 24px var(--display); color:#0b0d12; background:linear-gradient(135deg,#ffd27a,#ffb020); box-shadow:0 10px 30px -12px rgba(0,0,0,.7); }

/* entrances (variant sets vars) */
.fx-ppt[class*=" ppt-in-"].play .ppt-obj{ animation:pptEnter 2.4s ease-in-out infinite; }
@keyframes pptEnter{
  0%{ transform:translate(var(--fx,0),var(--fy,0)) scale(var(--s0,.7)) rotate(var(--r0,0deg)); opacity:0 }
  20%,72%{ transform:none; opacity:1 }
  100%{ transform:translate(var(--fx,0),var(--fy,0)) scale(var(--s0,.7)) rotate(var(--r0,0deg)); opacity:0 }
}
.ppt-in-fade{ --s0:1 } .ppt-in-fadeUp{ --fy:40px;--s0:1 } .ppt-in-fadeDown{ --fy:-40px;--s0:1 }
.ppt-in-fadeLeft{ --fx:-40px;--s0:1 } .ppt-in-fadeRight{ --fx:40px;--s0:1 }
.ppt-in-flyLeft{ --fx:-160px;--s0:1 } .ppt-in-flyRight{ --fx:160px;--s0:1 }
.ppt-in-flyTop{ --fy:-140px;--s0:1 } .ppt-in-flyBottom{ --fy:140px;--s0:1 }
.ppt-in-flyTL{ --fx:-160px;--fy:-140px;--s0:1 } .ppt-in-flyTR{ --fx:160px;--fy:-140px;--s0:1 }
.ppt-in-flyBL{ --fx:-160px;--fy:140px;--s0:1 } .ppt-in-flyBR{ --fx:160px;--fy:140px;--s0:1 }
.ppt-in-float{ --fy:28px;--s0:1 } .ppt-in-zoom{ --s0:.2 } .ppt-in-zoomBig{ --s0:1.8 }
.ppt-in-grow{ --s0:.3;--r0:-110deg } .ppt-in-spin{ --s0:.4;--r0:-300deg }
.ppt-in-back{ --fy:120px;--s0:1 } .ppt-in-drop{ --fy:-150px;--s0:1 }

/* exits */
.fx-ppt[class*=" ppt-out-"].play .ppt-obj{ animation:pptExit 2.2s ease-in infinite; }
@keyframes pptExit{
  0%,42%{ transform:none; opacity:1 }
  88%,100%{ transform:translate(var(--fx,0),var(--fy,0)) scale(var(--s0,.6)) rotate(var(--r0,0deg)); opacity:0 }
}
.ppt-out-fade{ --s0:1 } .ppt-out-flyLeft{ --fx:-160px;--s0:1 } .ppt-out-flyRight{ --fx:160px;--s0:1 }
.ppt-out-flyTop{ --fy:-150px;--s0:1 } .ppt-out-flyBottom{ --fy:150px;--s0:1 }
.ppt-out-zoom{ --s0:.2 } .ppt-out-zoomBig{ --s0:1.9 } .ppt-out-spin{ --s0:.3;--r0:200deg }
.ppt-out-shrink{ --s0:0 } .ppt-out-sink{ --fy:90px;--s0:1 }

/* motion paths */
.fx-ppt[class*=" ppt-path-"] .ppt-obj{ offset-rotate:0deg; }
.fx-ppt[class*=" ppt-path-"].play .ppt-obj{ animation:pptPath 3s ease-in-out infinite alternate; }
@keyframes pptPath{ 0%{ offset-distance:0% } 100%{ offset-distance:100% } }
.ppt-path-arc .ppt-obj{ offset-path:path('M -120 20 Q 0 -90 120 20') }
.ppt-path-scurve .ppt-obj{ offset-path:path('M -120 0 C -40 -70 40 70 120 0') }
.ppt-path-wave .ppt-obj{ offset-path:path('M -120 0 Q -80 -34 -40 0 T 40 0 T 120 0') }
.ppt-path-zigzag .ppt-obj{ offset-path:path('M -120 -24 L -60 24 L 0 -24 L 60 24 L 120 -24') }
.ppt-path-loop .ppt-obj{ offset-path:path('M -110 10 C -70 -70 -10 -70 10 0 C 30 60 70 60 110 -10') }
.ppt-path-diagonal .ppt-obj{ offset-path:path('M -110 55 L 110 -55') }
.ppt-path-bounce .ppt-obj{ offset-path:path('M -120 -30 Q -60 40 0 -30 Q 60 40 120 -30') }
.ppt-path-circle .ppt-obj{ offset-path:path('M 0 -55 A 55 55 0 1 1 -0.1 -55') }

/* emphasis */
.fx-ppt.ppt-em-pulse.play .ppt-obj{ animation:emPulse 1.4s ease-in-out infinite }
@keyframes emPulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.18) } }
.fx-ppt.ppt-em-grow.play .ppt-obj{ animation:emGrow 2s ease-in-out infinite }
@keyframes emGrow{ 0%,100%{ transform:scale(1) } 40%,60%{ transform:scale(1.35) } }
.fx-ppt.ppt-em-teeter.play .ppt-obj{ animation:emTeeter 1.4s ease-in-out infinite }
@keyframes emTeeter{ 0%,100%{ transform:rotate(-7deg) } 50%{ transform:rotate(7deg) } }
.fx-ppt.ppt-em-spin.play .ppt-obj{ animation:emSpin 1.8s linear infinite }
@keyframes emSpin{ to{ transform:rotate(360deg) } }
.fx-ppt.ppt-em-spinY.play .ppt-obj{ animation:emSpinY 1.8s linear infinite }
@keyframes emSpinY{ to{ transform:rotateY(360deg) } }
.fx-ppt.ppt-em-bounce.play .ppt-obj{ animation:emBounce 1.2s ease-in-out infinite }
@keyframes emBounce{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-24px) } }
.fx-ppt.ppt-em-shake.play .ppt-obj{ animation:emShake .5s ease-in-out infinite }
@keyframes emShake{ 0%,100%{ transform:translateX(0) } 25%{ transform:translateX(-9px) } 75%{ transform:translateX(9px) } }
.fx-ppt.ppt-em-heartbeat.play .ppt-obj{ animation:emHeart 1.4s ease-in-out infinite }
@keyframes emHeart{ 0%,40%,100%{ transform:scale(1) } 10%{ transform:scale(1.2) } 20%{ transform:scale(1) } 30%{ transform:scale(1.15) } }
.fx-ppt.ppt-em-flash.play .ppt-obj{ animation:emFlash 1.4s steps(1) infinite }
@keyframes emFlash{ 0%,49%{ opacity:1 } 50%,99%{ opacity:.15 } }
.fx-ppt.ppt-em-color.play .ppt-obj{ animation:emColor 3s linear infinite }
@keyframes emColor{ to{ filter:hue-rotate(360deg) } }
.fx-ppt.ppt-em-wobble.play .ppt-obj{ animation:emWobble 1.6s ease-in-out infinite }
@keyframes emWobble{ 0%,100%{ transform:translateX(0) rotate(0) } 20%{ transform:translateX(-14px) rotate(-6deg) } 40%{ transform:translateX(10px) rotate(4deg) } 60%{ transform:translateX(-8px) rotate(-3deg) } 80%{ transform:translateX(5px) rotate(2deg) } }
.fx-ppt.ppt-em-jello.play .ppt-obj{ animation:emJello 1.6s ease-in-out infinite }
@keyframes emJello{ 0%,40%,100%{ transform:skew(0,0) } 12%{ transform:skew(-10deg,-10deg) } 20%{ transform:skew(8deg,8deg) } 28%{ transform:skew(-5deg,-5deg) } }
.fx-ppt.ppt-em-tada.play .ppt-obj{ animation:emTada 2s ease-in-out infinite }
@keyframes emTada{ 0%,100%{ transform:scale(1) rotate(0) } 10%,20%{ transform:scale(.9) rotate(-4deg) } 30%,50%,70%{ transform:scale(1.15) rotate(4deg) } 40%,60%{ transform:scale(1.15) rotate(-4deg) } }
.fx-ppt.ppt-em-rubber.play .ppt-obj{ animation:emRubber 1.6s ease-in-out infinite }
@keyframes emRubber{ 0%,100%{ transform:scale(1,1) } 30%{ transform:scale(1.35,.7) } 45%{ transform:scale(.8,1.2) } 60%{ transform:scale(1.1,.9) } }
.fx-ppt.ppt-em-swing.play .ppt-obj{ transform-origin:top center; animation:emSwing 1.6s ease-in-out infinite }
@keyframes emSwing{ 0%,100%{ transform:rotate(0) } 25%{ transform:rotate(12deg) } 50%{ transform:rotate(-8deg) } 75%{ transform:rotate(5deg) } }
.fx-ppt.ppt-em-float.play .ppt-obj{ animation:emFloat 2.6s ease-in-out infinite }
@keyframes emFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }

/* special reveals */
.fx-ppt.ppt-sp-swivel{ perspective:600px } .fx-ppt.ppt-sp-swivel.play .ppt-obj{ animation:spSwivel 2.4s ease-in-out infinite }
@keyframes spSwivel{ 0%{ transform:rotateY(90deg); opacity:0 } 20%,72%{ transform:rotateY(0); opacity:1 } 100%{ transform:rotateY(90deg); opacity:0 } }
.fx-ppt.ppt-sp-flip{ perspective:700px } .fx-ppt.ppt-sp-flip.play .ppt-obj{ animation:spFlip 2.6s ease-in-out infinite }
@keyframes spFlip{ 0%,15%{ transform:rotateY(0) } 55%,80%{ transform:rotateY(180deg) } 100%{ transform:rotateY(360deg) } }
.fx-ppt.ppt-sp-wipeR.play .ppt-obj{ animation:spWipeR 2.4s ease-in-out infinite }
@keyframes spWipeR{ 0%{ clip-path:inset(0 100% 0 0) } 25%,72%{ clip-path:inset(0) } 100%{ clip-path:inset(0 100% 0 0) } }
.fx-ppt.ppt-sp-wipeU.play .ppt-obj{ animation:spWipeU 2.4s ease-in-out infinite }
@keyframes spWipeU{ 0%{ clip-path:inset(100% 0 0 0) } 25%,72%{ clip-path:inset(0) } 100%{ clip-path:inset(100% 0 0 0) } }
.fx-ppt.ppt-sp-split.play .ppt-obj{ animation:spSplit 2.4s ease-in-out infinite }
@keyframes spSplit{ 0%{ clip-path:inset(0 50% 0 50%) } 25%,72%{ clip-path:inset(0) } 100%{ clip-path:inset(0 50% 0 50%) } }
.fx-ppt.ppt-sp-circle.play .ppt-obj{ animation:spCircle 2.4s ease-in-out infinite }
@keyframes spCircle{ 0%{ clip-path:circle(0% at 50% 50%) } 25%,72%{ clip-path:circle(80% at 50% 50%) } 100%{ clip-path:circle(0% at 50% 50%) } }
.fx-ppt.ppt-sp-diamond.play .ppt-obj{ animation:spDiamond 2.4s ease-in-out infinite }
@keyframes spDiamond{ 0%{ clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%) } 25%,72%{ clip-path:polygon(50% -25%,125% 50%,50% 125%,-25% 50%) } 100%{ clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%) } }
.fx-ppt.ppt-sp-box.play .ppt-obj{ animation:spBox 2.4s ease-in-out infinite }
@keyframes spBox{ 0%{ clip-path:inset(50% 50% 50% 50%) } 25%,72%{ clip-path:inset(0) } 100%{ clip-path:inset(50% 50% 50% 50%) } }

/* 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; }
}