/* ===== slekens.dev — Live FX (solo homepage) ===== */
:root{--fx-i:1}

/* spotlight que sigue al cursor */
#fxSpotlight{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,38%), color-mix(in srgb,var(--accent) 18%,transparent), transparent 60%);
  mix-blend-mode:screen}
html[data-theme="dark"] #fxSpotlight{background:radial-gradient(440px circle at var(--mx,50%) var(--my,38%), color-mix(in srgb,var(--accent) 30%,transparent), transparent 60%)}
body.fx-spot #fxSpotlight{opacity:calc(.55*var(--fx-i))}

/* terminal de fondo */
#fxTerm{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .7s;
  font-family:var(--font-mono);font-size:12px;line-height:2;color:var(--accent);white-space:pre}
body.fx-term #fxTerm{opacity:calc(.07*var(--fx-i))}
#fxTerm .col{position:absolute;top:0;will-change:transform;animation:termScroll linear infinite}
@keyframes termScroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}

/* grano */
#fxGrain{position:fixed;inset:0;z-index:41;pointer-events:none;opacity:0;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px}
body.fx-grain #fxGrain{opacity:calc(.32*var(--fx-i))}

/* shimmer en glass */
body.fx-shimmer .glass{position:relative;overflow:hidden;isolation:isolate}
body.fx-shimmer .glass::after{content:"";position:absolute;top:-20%;left:-70%;width:55%;height:140%;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent 0%, color-mix(in srgb,#fff 26%,transparent) 50%, transparent 100%);
  transform:skewX(-16deg);animation:fxShimmer 9s ease-in-out infinite;opacity:calc(.7*var(--fx-i))}
html[data-theme="dark"] body.fx-shimmer .glass::after{background:linear-gradient(100deg,transparent, color-mix(in srgb,var(--accent) 30%,transparent) 50%, transparent)}
@keyframes fxShimmer{0%{left:-70%}30%{left:170%}100%{left:170%}}

/* tilt 3D */
.tiltable{transition:transform .25s var(--ease);transform-style:preserve-3d;will-change:transform}

@media (prefers-reduced-motion:reduce){
  #fxTerm .col,body.fx-shimmer .glass::after{animation:none}
}

/* ===== FX panel ===== */
#fxBtn.icon-btn.on{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:var(--accent-soft)}
#fxPanel{position:fixed;top:74px;right:24px;z-index:88;width:268px;border-radius:18px;padding:16px;
  background:var(--glass-strong);-webkit-backdrop-filter:blur(8px) saturate(180%);backdrop-filter:blur(8px) saturate(180%);
  border:1px solid var(--line);box-shadow:var(--shadow-lg),inset 0 1.5px 0 var(--rim);
  opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top right;pointer-events:none;transition:.26s var(--ease)}
#fxPanel.open{opacity:1;transform:none;pointer-events:auto}
#fxPanel .fxh{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
#fxPanel .fxh .t{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
#fxPanel .fxh .t b{color:var(--accent)}
.fx-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;font-size:13.5px;color:var(--ink)}
.fx-row:not(:last-child){border-bottom:1px solid var(--line)}
.fx-sw{width:38px;height:22px;border-radius:999px;background:var(--line-strong);position:relative;cursor:pointer;transition:.2s;flex-shrink:0}
.fx-sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:.2s}
.fx-sw.on{background:var(--accent)}.fx-sw.on::after{left:18px}
.fx-int{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.fx-int label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);display:flex;justify-content:space-between;margin-bottom:8px}
.fx-int input{width:100%;accent-color:var(--accent)}