/* ==========================================================
   fx.css  -  shared by index.html, links.html and comments.html
   1. animated background layers
   2. games slide in when they scroll into view
   3. search bar in the top right corner
   4. menu button hover animations
   5. menu bar for links.html and comments.html
   ========================================================== */

/* ---------- 1. animated background ---------- */
.fx-host {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.fx-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}
.fx-blob-a {
  width: 52vmax;
  height: 52vmax;
  left: -14vmax;
  top: -16vmax;
  background: radial-gradient(circle, var(--accent-soft, rgba(168, 85, 247, 0.38)), transparent 64%);
  animation: fx-wander-a 22s ease-in-out infinite alternate;
}
.fx-blob-b {
  width: 44vmax;
  height: 44vmax;
  right: -12vmax;
  bottom: -14vmax;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent 64%);
  animation: fx-wander-b 28s ease-in-out infinite alternate;
}
.fx-blob-c {
  width: 34vmax;
  height: 34vmax;
  left: 38%;
  top: 30%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.2), transparent 64%);
  animation: fx-wander-c 34s ease-in-out infinite alternate;
}
@keyframes fx-wander-a {
  to { transform: translate3d(26vmax, 18vmax, 0) scale(1.2); }
}
@keyframes fx-wander-b {
  to { transform: translate3d(-24vmax, -16vmax, 0) scale(1.15); }
}
@keyframes fx-wander-c {
  0% { transform: translate3d(0, 0, 0) scale(0.9); }
  50% { transform: translate3d(-18vmax, 10vmax, 0) scale(1.15); }
  100% { transform: translate3d(14vmax, -14vmax, 0) scale(1); }
}

/* ---------- 2. slide in when scrolled into view ---------- */
.fx-track {
  transition: opacity 0.55s ease var(--fx-d, 0ms),
    translate 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.15) var(--fx-d, 0ms),
    scale 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.15) var(--fx-d, 0ms);
}
/* the game boxes keep their tilt and glow transitions too */
.game.fx-track {
  transition: transform 0.18s ease-out, box-shadow 0.25s ease,
    opacity 0.55s ease var(--fx-d, 0ms),
    translate 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.15) var(--fx-d, 0ms),
    scale 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.15) var(--fx-d, 0ms);
}
/* waiting off screen: hidden and pushed sideways/up/down (no animation while leaving) */
.fx-track.fx-pre,
.game.fx-track.fx-pre {
  opacity: 0;
  translate: var(--fx-x, 0px) var(--fx-y, 60px);
  scale: 0.88;
  transition: none;
}

/* ---------- 3. search bar in the top right corner ---------- */
html body .top { padding-top: 64px; }

html body .fx-search {
  position: fixed;
  top: 10px;
  right: 14px;
  left: auto;
  bottom: auto;
  z-index: 900;
  display: block;
  width: min(320px, calc(100vw - 96px));
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  transition: width 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
}
html body .fx-search:focus-within { width: min(460px, calc(100vw - 96px)); }
html body .fx-search .toolbar-inner,
html body .fx-search .search {
  display: block;
  flex: none;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
html body .fx-search::before {
  content: "\1F50D";
  position: absolute;
  left: 15px;
  top: 50%;
  z-index: 1;
  font-size: 15px;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
  transition: transform 0.3s ease;
}
html body .fx-search:focus-within::before {
  transform: translateY(-50%) rotate(-18deg) scale(1.2);
}
html body .fx-search input {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 11px 16px 11px 42px;
  border-radius: 999px;
  border: 1px solid var(--accent-soft, rgba(168, 85, 247, 0.5));
  background: var(--panel-solid, #16102e);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  outline: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  animation: fx-search-glow 3.6s ease-in-out infinite;
}
html body .fx-search input:focus {
  border-color: var(--accent, #a855f7);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(168, 85, 247, 0.35)), 0 6px 22px rgba(0, 0, 0, 0.4);
  animation: none;
}
html body .fx-search input::placeholder { color: var(--muted, #a09bb8); }
@keyframes fx-search-glow {
  0%, 100% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); }
  50% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 18px var(--accent-soft, rgba(168, 85, 247, 0.5)); }
}

/* ---------- 4. menu button hover animations ---------- */
html body #side-nav .nav-row,
html body #side-nav #panic-gear {
  position: relative;
  overflow: hidden;
  transition: background 0.15s, transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.4), box-shadow 0.25s;
}
/* light bar that grows on the left edge */
html body #side-nav .nav-row::before,
html body #side-nav #panic-gear::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: #fff;
  box-shadow: 0 0 10px #fff;
  transform: scaleY(0);
  transition: transform 0.25s ease;
  pointer-events: none;
}
/* shine that sweeps across */
html body #side-nav .nav-row::after,
html body #side-nav #panic-gear::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  opacity: 0;
  pointer-events: none;
}
html body #side-nav .nav-row:hover,
html body #side-nav #panic-gear:hover {
  transform: translateX(6px) scale(1.03);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 16px var(--accent-soft, rgba(168, 85, 247, 0.55));
}
html body #side-nav .nav-row:hover::before,
html body #side-nav #panic-gear:hover::before { transform: scaleY(1); }
html body #side-nav .nav-row:hover::after,
html body #side-nav #panic-gear:hover::after { animation: fx-nav-shine 0.75s ease; }
html body #side-nav .nav-row:active { transform: translateX(3px) scale(0.97); }
@keyframes fx-nav-shine {
  0% { left: -60%; opacity: 1; }
  100% { left: 130%; opacity: 1; }
}

/* the little picture on each button plays its own animation while you hover */
html body #side-nav .nav-row .nav-ico { transform-origin: 50% 60%; }
html body #side-nav .nav-row:hover .nav-ico { animation: fx-ico-pop 0.8s ease-in-out infinite; }
html body #side-nav .nav-row[data-nav="announce"]:hover .nav-ico { animation: fx-ico-ring 0.9s ease-in-out infinite; }
html body #side-nav .nav-row[data-nav="all"]:hover .nav-ico { animation: fx-ico-wiggle 0.7s ease-in-out infinite; }
html body #side-nav .nav-row[data-nav="new"]:hover .nav-ico { animation: fx-ico-pulse 0.7s ease-in-out infinite; }
html body #side-nav .nav-row[data-nav="fav"]:hover .nav-ico { animation: fx-ico-spin 1s ease-in-out infinite; }
html body #side-nav a.nav-row[href="comments.html"]:hover .nav-ico { animation: fx-ico-bounce 0.8s ease-in-out infinite; }
html body #side-nav .nav-row[data-nav="fnf"]:hover .nav-ico { animation: fx-ico-dance 0.8s ease-in-out infinite; }
html body #side-nav .nav-row[data-nav="fnaf"]:hover .nav-ico { animation: fx-ico-shake 0.35s linear infinite; }
html body #side-nav .nav-row[data-nav="clicker"]:hover .nav-ico { animation: fx-ico-tap 0.6s ease-in-out infinite; }
html body #side-nav .nav-row[data-nav="stickman"]:hover .nav-ico { animation: fx-ico-run 0.9s ease-in-out infinite; }

@keyframes fx-ico-pop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.35); }
}
@keyframes fx-ico-ring {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-22deg); }
  30% { transform: rotate(20deg); }
  45% { transform: rotate(-16deg); }
  60% { transform: rotate(12deg); }
  75% { transform: rotate(-6deg); }
}
@keyframes fx-ico-wiggle {
  0%, 100% { transform: rotate(0) scale(1.1); }
  25% { transform: rotate(-16deg) scale(1.25); }
  75% { transform: rotate(16deg) scale(1.25); }
}
@keyframes fx-ico-pulse {
  0%, 100% { transform: scale(1); filter: none; }
  50% { transform: scale(1.5); filter: drop-shadow(0 0 6px #fff); }
}
@keyframes fx-ico-spin {
  0% { transform: scale(1) rotate(0); }
  50% { transform: scale(1.5) rotate(180deg); filter: drop-shadow(0 0 7px #fde047); }
  100% { transform: scale(1) rotate(360deg); }
}
@keyframes fx-ico-bounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-9px); }
  55% { transform: translateY(0); }
  75% { transform: translateY(-4px); }
}
@keyframes fx-ico-dance {
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-4px) rotate(-14deg); }
  75% { transform: translateX(4px) rotate(14deg); }
}
@keyframes fx-ico-shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-3px, 1px); }
  50% { transform: translate(3px, -1px); }
  75% { transform: translate(-2px, -1px); }
}
@keyframes fx-ico-tap {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(5px) scale(0.8); }
}
@keyframes fx-ico-run {
  0% { transform: translateX(-6px) rotate(-8deg); }
  50% { transform: translateX(6px) translateY(-4px) rotate(8deg); }
  100% { transform: translateX(-6px) rotate(-8deg); }
}

/* ---------- 5. menu bar on links.html and comments.html ---------- */
html.fx-nav { --nav-w: 250px; }
html.fx-nav.nav-collapsed { --nav-w: 64px; }

body[data-fx-nav] {
  padding-left: calc(var(--nav-w) + 20px) !important;
  padding-top: 72px !important;
}
html.fx-nav.nav-ready body[data-fx-nav] { transition: padding-left 0.2s ease; }

body[data-fx-nav] #side-nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1000001;
  width: var(--nav-w);
  max-width: 85vw;
  box-sizing: border-box;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--panel-solid, #16102e);
  border-right: 1px solid var(--accent-soft, rgba(168, 85, 247, 0.4));
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
  color: #fff;
  font: 600 15px/1.2 system-ui, "Segoe UI", Roboto, Arial, sans-serif;
}
html.fx-nav.nav-ready body[data-fx-nav] #side-nav { transition: width 0.2s ease; }

body[data-fx-nav] #side-nav .nav-row {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  filter: none;
  color: #fff;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
body[data-fx-nav] #side-nav .nav-row:hover {
  background: var(--accent-soft, rgba(168, 85, 247, 0.28));
  filter: none;
}
body[data-fx-nav] #side-nav .nav-row.is-on { background: var(--accent, #a855f7); }
body[data-fx-nav] #side-nav .nav-row:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
body[data-fx-nav] #side-nav .nav-ico {
  flex: none;
  width: 24px;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
}
body[data-fx-nav] #side-nav .nav-ico svg { width: 24px; height: 24px; }
body[data-fx-nav] #side-nav .nav-label { flex: 1; min-width: 0; }
body[data-fx-nav] #side-nav .nav-sep { flex: none; height: 1px; margin: 6px 4px; background: rgba(255, 255, 255, 0.14); }
body[data-fx-nav] #side-nav .nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

html.fx-nav.nav-collapsed body[data-fx-nav] #side-nav .nav-label { display: none; }
html.fx-nav.nav-collapsed body[data-fx-nav] #side-nav .nav-row { justify-content: center; padding: 8px 0; }

@media (max-width: 699px) {
  body[data-fx-nav] { padding-left: 14px !important; padding-right: 14px !important; }
  html.fx-nav.nav-collapsed body[data-fx-nav] #side-nav {
    width: auto;
    padding: 8px;
    background: none;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }
  html.fx-nav.nav-collapsed body[data-fx-nav] #side-nav > :not(#nav-toggle) { display: none; }
  html.fx-nav.nav-collapsed body[data-fx-nav] #side-nav #nav-toggle {
    width: 44px;
    padding: 0;
    background: var(--panel-solid, #16102e);
    border: 1px solid var(--accent-soft, rgba(168, 85, 247, 0.4));
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  }
}

/* ---------- people who ask their device to reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-blob,
  html body .fx-search input { animation: none; }
  .fx-track.fx-pre,
  .game.fx-track.fx-pre { opacity: 1; translate: none; scale: 1; }
  html body #side-nav .nav-row:hover .nav-ico { animation: none; }
}