/* ============================================================================
   fx.css — capa de efectos visuales (animaciones y mesh gradient fluido).
   Solo estilos: no toca lógica. Se carga después de index.html y detail.css
   para redefinir bordes y estados. Ajustar aquí velocidad/intensidad.
   ============================================================================ */

/* Ángulo animable del gradiente cónico (Safari 16.4+, Chrome, Firefox 128+).
   Donde no exista @property, el borde queda estático con el mesh original. */
@property --fx-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

@keyframes fx-rotate  { to { --fx-angle: 360deg; } }
@keyframes fx-breathe {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 22px rgba(255,255,255,.35), 0 4px 18px rgba(0,0,0,.4); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 44px rgba(255,255,255,.65), 0 0 90px rgba(255,255,255,.25), 0 4px 18px rgba(0,0,0,.4); }
}
@keyframes fx-sheen   { from { transform: translateX(-140%) skewX(-18deg); } to { transform: translateX(240%) skewX(-18deg); } }
@keyframes fx-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes fx-photo-in {
  0%   { transform: scale(1.18); filter: brightness(2) saturate(1.4); opacity: .4; }
  60%  { filter: brightness(1.15) saturate(1.1); }
  100% { transform: scale(1); filter: brightness(1) saturate(1); opacity: 1; }
}
@keyframes fx-flash {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.75), 0 0 40px rgba(255,255,255,.9); }
  100% { box-shadow: 0 0 0 18px rgba(255,255,255,0), var(--glow-green), var(--shadow); }
}
@keyframes fx-press { 0% { transform: scale(1); } 40% { transform: scale(.92); } 100% { transform: scale(.96); } }

/* ---- Mesh fluido en los bordes -------------------------------------------
   Se define la variable EN cada elemento para que var(--fx-angle) se resuelva
   con el valor animado de ese elemento (definirla en :root la congelaría). */
.photo-slot, .item-row, .btn-qty, .btn-primary, #send-btn, .detail-card, .error-msg {
  --fx-hot: rgba(255,255,255,1);
  --fx-base: linear-gradient(#101215, #101215); /* capa opaca: el cónico solo asoma en el borde */
  --edge-flow: conic-gradient(from var(--fx-angle),
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.95) 18%,
    var(--fx-hot)        30%,
    rgba(255,255,255,.28) 45%,
    rgba(255,255,255,.9)  60%,
    rgba(255,255,255,.95) 78%,
    rgba(255,255,255,.3)  90%,
    rgba(255,255,255,.95) 100%);
  /* En reposo el borde es estático (el cónico se pinta una sola vez).
     Girarlo sin parar costaba ~90% de un núcleo en el teléfono. */
}

.photo-slot {
  background:
    linear-gradient(180deg, rgba(18,21,24,.88), rgba(12,13,15,.88)) padding-box,
    var(--fx-base) padding-box,
    var(--edge-flow) border-box;
}
.item-row {
  background:
    linear-gradient(180deg, rgba(18,21,24,.72), rgba(12,13,15,.72)) padding-box,
    var(--fx-base) padding-box,
    var(--edge-flow) border-box;
}
.btn-qty {
  background:
    linear-gradient(180deg, rgba(38,42,47,.88), rgba(18,21,24,.88)) padding-box,
    var(--fx-base) padding-box,
    var(--edge-flow) border-box;
}
.btn-primary {
  background:
    linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.2)) padding-box,
    var(--fx-base) padding-box,
    var(--edge-flow) border-box;
  position: relative; overflow: hidden;
}
#send-btn {
  background:
    linear-gradient(100deg, var(--ink) 0%, #8f949a 70%, var(--ink-dim) 100%) padding-box,
    var(--edge-flow) border-box;
}
.detail-card {
  --fx-hot: rgba(255,255,255,1);
  background:
    linear-gradient(180deg, rgba(18,21,24,.97), rgba(8,9,11,.98)) padding-box,
    var(--fx-base) padding-box,
    var(--edge-flow) border-box;
  animation: rise .22s ease both;
}
.error-msg {
  --edge-flow: conic-gradient(from var(--fx-angle), rgba(255,93,93,.9), rgba(255,93,93,.25) 40%, rgba(255,180,190,.9) 60%, rgba(255,93,93,.9));
  background:
    linear-gradient(180deg, rgba(60,14,26,.78), rgba(40,10,20,.78)) padding-box,
    linear-gradient(#1A0810, #1A0810) padding-box,
    var(--edge-flow) border-box;
}

/* Al presionar (solo mientras el dedo está encima), el borde gira y el elemento rebota */
.photo-slot:active, .item-row:active { animation: fx-rotate 1.2s linear infinite; }
.btn-qty:active, .btn-primary:active, #send-btn:active { animation: fx-rotate 1.2s linear infinite, fx-press .18s ease-out both; }

/* ---- Botón ENVIAR: estático cuando está listo (antes respiraba y brillaba
   en bucle: dos animaciones infinitas más). El efecto vive solo al presionar. */
#send-btn { position: relative; overflow: hidden; }
#send-btn:disabled { animation: none; }

/* ---- Slots de foto ------------------------------------------------------- */
.photo-slot .thumb-box { overflow: hidden; }
/* mientras comprime: flujo rápido en el borde + barrido de luz sobre la miniatura */
.photo-slot.busy { animation: fx-rotate 1s linear infinite; } /* solo mientras comprime */
.photo-slot.busy .thumb-box::after {
  background:
    linear-gradient(100deg, transparent 20%, rgba(255,255,255,.35) 50%, transparent 80%),
    rgba(5,6,7,.5);
  background-size: 200% 100%, auto;
  animation: fx-shimmer 1.1s linear infinite;
}
/* foto lista: la miniatura entra con zoom + destello, y el borde da un pulso verde */
.photo-slot.done {
  --fx-hot: rgba(255,255,255,1);
  --edge-flow: conic-gradient(from var(--fx-angle),
    rgba(255,255,255,.95), var(--fx-hot) 22%, rgba(255,255,255,.35) 45%,
    rgba(255,255,255,.9) 65%, rgba(255,255,255,.4) 85%, rgba(255,255,255,.95));
  background:
    linear-gradient(180deg, rgba(26,29,32,.92), rgba(10,12,14,.92)) padding-box,
    linear-gradient(#14171A, #14171A) padding-box,
    var(--edge-flow) border-box;
  animation: fx-flash .7s ease-out both; /* un solo pulso, luego estático */
}
.photo-slot.done .thumb-box img { animation: fx-photo-in .55s cubic-bezier(.2,1.1,.3,1) both; }
.photo-slot.done .check { animation: pop .45s cubic-bezier(.2,1.8,.4,1) both; }

/* ---- Filas de últimos items: entran con rise (una vez) ---------------- */
.item-row { animation: rise .35s ease-out both; }

/* ---- Movimiento reducido: la regla global de index.html ya frena todo ---- */

/* ---- Pestaña oculta: app.js pone .fx-paused en <html> y todo se congela ---- */
.fx-paused *, .fx-paused *::before, .fx-paused *::after { animation-play-state: paused !important; }