/* ============================================================
   GARABATO · Effects layer
   Grano, micro-interacciones y reveals. Todo se atenúa con
   las variables --fx-* (controlables desde Tweaks) y respeta
   prefers-reduced-motion.
   ============================================================ */

:root {
  /* --fx-speed: multiplicador de duración de animaciones */
  --fx-speed: 1; /* @kind other */
  /* --fx-grain: opacidad del grano */
  --fx-grain: 0.05; /* @kind other */
}

/* ---- Grano / textura sutil sobre todo el sitio ---- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: var(--fx-grain, 0.05);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ---- Reveal de bloques al entrar en viewport ---- */
@media (prefers-reduced-motion: no-preference) {
  .fx-ready .fx-rise {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity calc(.7s * var(--fx-speed, 1)) cubic-bezier(0.2, 0, 0, 1), transform calc(.7s * var(--fx-speed, 1)) cubic-bezier(0.2, 0, 0, 1);
    transition-delay: var(--delay, 0s);
  }
  .fx-ready .fx-rise.in-view {
    opacity: 1;
    transform: none;
  }
}

/* ---- Micro-interacciones ---- */
.btn { transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .25s ease, background-color .2s ease, color .2s ease; }
.btn:hover { transform: translateY(-2px) rotate(-0.6deg); }
.btn:active { transform: translateY(0) rotate(0); }

/* Botón primario: subrayado-garabato al hover */
.btn--primary, .btn--xl, .btn--yellow { position: relative; }

/* Tarjetas que reaccionan */
.hp-work-card { transition: transform .4s cubic-bezier(0.2, 0, 0, 1), box-shadow .4s ease; }
.hp-work-card:hover { transform: translateY(-6px) rotate(-0.4deg); }
.hp-work-card:hover .hp-work-card__art .sq { transform: rotate(8deg) scale(1.06); }
.hp-work-card__art .sq { transition: transform .5s cubic-bezier(0.34, 1.56, 0.64, 1); }

.hp-journal-card { transition: transform .35s cubic-bezier(0.2, 0, 0, 1); }
.hp-journal-card:hover { transform: translateY(-5px); }
.hp-journal-card:hover .hp-journal-card__cover .sq { transform: rotate(-10deg) scale(1.08); }
.hp-journal-card__cover .sq { transition: transform .5s cubic-bezier(0.34, 1.56, 0.64, 1); }

.hp-logos__item { transition: transform .25s ease, color .25s ease; }
.hp-logos__item:hover { transform: rotate(-2deg) scale(1.04); }

.hp-studio-member__avatar { transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hp-studio-member:hover .hp-studio-member__avatar { transform: rotate(-6deg) scale(1.08); }

/* Inputs */
.input { transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .hp-work-card:hover, .hp-journal-card:hover { transform: none; }
}

/* ---- Movimiento off (Tweak) ---- */
.fx-no-motion .sq--float,
.fx-no-motion .preloader__mark { animation: none !important; }
.fx-no-motion .sq-parallax { transform: rotate(var(--rot, 0deg)) !important; transition: none !important; }
.fx-no-motion .sq--draw { scale: 1 !important; animation: none !important; }
.fx-no-motion .sq--draw path,
.fx-no-motion .sq--draw line { stroke-dashoffset: 0 !important; animation: none !important; }
.fx-no-motion .sq--draw circle { opacity: 1 !important; animation: none !important; }
.fx-no-motion .fx-rise { opacity: 1 !important; transform: none !important; }

/* ---- Panel de Tweaks ---- */
.tweaks {
  position: fixed; right: 20px; bottom: 20px; z-index: 10000;
  width: 300px; padding: 18px;
  background: var(--ink-900, #0A0A0F); color: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  font-family: var(--font-body, system-ui);
  animation: tweaks-in .3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes tweaks-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
.tweaks__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.tweaks__head .t-label { color: var(--brand-yellow, #FFD000); }
.tweaks__x { background: rgba(255,255,255,0.1); border: 0; color: #fff; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; transition: background .2s; }
.tweaks__x:hover { background: rgba(255,255,255,0.2); }
.tweaks__row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; padding: 9px 0; font-size: 13px; }
.tweaks__row span { grid-column: 1; }
.tweaks__row input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--brand-magenta, #FF0068); }
.tweaks__row em { grid-column: 2; grid-row: 1; font-style: normal; color: var(--brand-yellow, #FFD000); font-variant-numeric: tabular-nums; }
.tweaks__row--toggle { grid-template-columns: 1fr auto; }
.tweaks__switch { grid-column: 2; width: 44px; height: 26px; border-radius: 99px; border: 0; background: rgba(255,255,255,0.18); cursor: pointer; position: relative; transition: background .2s; }
.tweaks__switch i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .22s cubic-bezier(0.34, 1.56, 0.64, 1); }
.tweaks__switch.is-on { background: var(--brand-magenta, #FF0068); }
.tweaks__switch.is-on i { transform: translateX(18px); }