/* ════════════════════════════════════════
   EFFECTS SECTION — "What you can make"
   8 animated effect tiles
════════════════════════════════════════ */

/* Section layout */
.fx-sec { padding:80px 48px; border-bottom:1px solid #1e1b3a; }
.fx-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.fx-tile { background:#0b0b16; border:1px solid #1a1730; border-radius:12px; overflow:hidden; transition:border-color .25s,transform .25s; }
.fx-tile:hover { border-color:#4c1d95; }
.fx-tile.new-fx { border-color:#2d1f5e; }
.fx-prev { aspect-ratio:1/1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:#060610; border-bottom:1px solid #1a1730; color:#2a2a40; }
.fx-prev .gif-icon { font-size:26px; }
.fx-prev .gif-label { font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }
.fx-prev .gif-sub { font-size:9px; color:#1a1a28; }
.fx-prev-anim { align-items:center; justify-content:center; }
.fx-body { padding:12px 14px 14px; }
.fx-name { font-size:12px; font-weight:800; color:#c4b5fd; margin-bottom:4px; display:flex; align-items:center; gap:6px; }
.fx-desc { font-size:10px; color:#6b7280; line-height:1.5; }
.new-badge { background:#7c3aed; color:#fff; font-size:8px; font-weight:700; padding:1px 6px; border-radius:20px; }

/* Animated demo elements */
.fx-demo { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:8px; }
.fxd-text { display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; justify-content:center; }
.fxd-line { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0; font-size:15px; font-weight:700; color:#fff; line-height:1.55; white-space:nowrap; }
.fxl { display:inline-block; animation-duration:5.5s; animation-timing-function:ease-out; animation-iteration-count:infinite; animation-fill-mode:both; }
.fxsp { display:inline-block; width:0.3em; }
.fxw { display:inline-block; margin:0 0.18em; animation-duration:5.5s; animation-timing-function:ease-out; animation-iteration-count:infinite; animation-fill-mode:both; }
.fxline { animation-duration:5.5s; animation-timing-function:cubic-bezier(0.22,1,0.36,1); animation-iteration-count:infinite; animation-fill-mode:both; font-size:15px; font-weight:700; color:#fff; text-align:center; line-height:1.55; }
.fxd-mode { display: none; }

/* Mask reveal */
.fxd-mask-container { gap:6px; }
.fxmask-wrap {
  overflow: hidden;
  height: 1.55em;
  line-height: 1.55;
  width: 100%;
  text-align: center;
}
.fxmask-inner { display:block; font-size:15px; font-weight:700; color:#fff; line-height:1.55; animation:fx-mask 5.5s cubic-bezier(0.22,1,0.36,1) infinite; animation-fill-mode:both; }

/* Jitter letter classes */
.fxjitter-0 { animation:fx-jitter-0 5.5s ease-out infinite; animation-fill-mode:both; }
.fxjitter-1 { animation:fx-jitter-1 5.5s ease-out infinite; animation-fill-mode:both; }
.fxjitter-2 { animation:fx-jitter-2 5.5s ease-out infinite; animation-fill-mode:both; }
.fxjitter-3 { animation:fx-jitter-3 5.5s ease-out infinite; animation-fill-mode:both; }
.fxjitter-4 { animation:fx-jitter-4 5.5s ease-out infinite; animation-fill-mode:both; }
.fxjitter-5 { animation:fx-jitter-5 5.5s ease-out infinite; animation-fill-mode:both; }
.fxjitter-6 { animation:fx-jitter-6 5.5s ease-out infinite; animation-fill-mode:both; }

/* ── Keyframes ── */

/* FADE */
@keyframes fx-fade {
  0%,73.1%,100% { opacity:0; }
  13%,63% { opacity:1; }
  0% { animation-timing-function:ease-out; }
  63% { animation-timing-function:ease-in; }
}

/* DIRECTION — slide from below */
@keyframes fx-dir {
  0%,100%   { opacity:0; transform:translateY(22px); }
  13%       { opacity:1; transform:translateY(0); animation-timing-function:linear; }
  63%       { opacity:1; transform:translateY(0); animation-timing-function:ease-in; }
  73%       { opacity:0; transform:translateY(-22px); animation-timing-function:steps(1,end); }
  73.01%    { opacity:0; transform:translateY(22px); }
}

/* ROTATION */
@keyframes fx-rot {
  0%,100%  { opacity:0; transform:rotate(-30deg); animation-timing-function:cubic-bezier(0.34,1.56,0.64,1); }
  13%      { opacity:1; transform:rotate(0deg);   animation-timing-function:linear; }
  63%      { opacity:1; transform:rotate(0deg);   animation-timing-function:ease-in; }
  73%      { opacity:0; transform:rotate(30deg);  animation-timing-function:steps(1,end); }
  73.01%   { opacity:0; transform:rotate(-30deg); }
}

/* SCALE */
@keyframes fx-scale {
  0%,73.1%,100% { transform:scale(0); }
  13%,63% { transform:scale(1); }
  0% { animation-timing-function:cubic-bezier(0.34,1.56,0.64,1); }
  63% { animation-timing-function:ease-in; }
}

/* KERNING */
@keyframes fx-kern {
  0%,73.1%,100% { opacity:0; gap:0.35em; }
  13%,63%       { opacity:1; gap:0em; }
  0%  { animation-timing-function:cubic-bezier(0.22,1,0.36,1); }
  63% { animation-timing-function:ease-in; }
}

/* MASK — text slides up through overflow:hidden */
@keyframes fx-mask {
  0%,100%    { transform:translateY(110%); animation-timing-function:cubic-bezier(0.22,1,0.36,1); }
  13%        { transform:translateY(0%);   animation-timing-function:linear; }
  63%        { transform:translateY(0%);   animation-timing-function:ease-in; }
  73%        { transform:translateY(-110%); animation-timing-function:steps(1,end); }
  73.01%     { transform:translateY(110%); }
}

/* JITTER — 7 variants with different XY offsets */
@keyframes fx-jitter-0 {
  0%,73.1%,100% { opacity:0; transform:translate(-9px,7px); }
  13%,63% { opacity:1; transform:translate(0,0); }
  0% { animation-timing-function:ease-out; } 63% { animation-timing-function:ease-in; }
}
@keyframes fx-jitter-1 {
  0%,73.1%,100% { opacity:0; transform:translate(6px,-8px); }
  13%,63% { opacity:1; transform:translate(0,0); }
  0% { animation-timing-function:ease-out; } 63% { animation-timing-function:ease-in; }
}
@keyframes fx-jitter-2 {
  0%,73.1%,100% { opacity:0; transform:translate(-4px,-6px); }
  13%,63% { opacity:1; transform:translate(0,0); }
  0% { animation-timing-function:ease-out; } 63% { animation-timing-function:ease-in; }
}
@keyframes fx-jitter-3 {
  0%,73.1%,100% { opacity:0; transform:translate(8px,4px); }
  13%,63% { opacity:1; transform:translate(0,0); }
  0% { animation-timing-function:ease-out; } 63% { animation-timing-function:ease-in; }
}
@keyframes fx-jitter-4 {
  0%,73.1%,100% { opacity:0; transform:translate(-7px,2px); }
  13%,63% { opacity:1; transform:translate(0,0); }
  0% { animation-timing-function:ease-out; } 63% { animation-timing-function:ease-in; }
}
@keyframes fx-jitter-5 {
  0%,73.1%,100% { opacity:0; transform:translate(3px,-9px); }
  13%,63% { opacity:1; transform:translate(0,0); }
  0% { animation-timing-function:ease-out; } 63% { animation-timing-function:ease-in; }
}
@keyframes fx-jitter-6 {
  0%,73.1%,100% { opacity:0; transform:translate(-5px,5px); }
  13%,63% { opacity:1; transform:translate(0,0); }
  0% { animation-timing-function:ease-out; } 63% { animation-timing-function:ease-in; }
}
/* Kerning: flex line z gap animation (cross-browser, incl. Safari) */
.fxkl {
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700; color:#fff; line-height:1.55;
  animation:fx-kern 5.5s ease-out infinite both;
  gap:0;
}
.fxksp { width:0.32em; flex-shrink:0; }