/**
 * FEF Visibility — front-end styles.
 * =====================================================================
 * Animation keyframes (entrances + exits), loading / placeholder states,
 * conditional-visibility helpers, the debug badge + panel, reduced-motion
 * fallbacks and mobile-responsive tweaks.
 *
 * The JS engine sets `animation-name: fef-<effect>` inline together with
 * duration / delay / easing / fill-mode, so these keyframes only need to
 * describe the motion itself.
 */

/* ── Loading state: keep hidden (no flicker) until the engine decides ── */
.fef-vis-loading { opacity: 0 !important; visibility: hidden !important; }

/* Base class for animated targets */
.fef-anim { animation-fill-mode: both; backface-visibility: hidden; will-change: transform, opacity, filter; }

/* ═══════════════════════════ ENTRANCES ═══════════════════════════ */
@keyframes fef-fade        { from { opacity: 0; } to { opacity: 1; } }
@keyframes fef-fade-up     { from { opacity: 0; transform: translateY(28px); }  to { opacity: 1; transform: none; } }
@keyframes fef-fade-down   { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: none; } }
@keyframes fef-fade-left   { from { opacity: 0; transform: translateX(28px); }  to { opacity: 1; transform: none; } }
@keyframes fef-fade-right  { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes fef-zoom-in     { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes fef-slide-in    { from { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: none; } }
@keyframes fef-flip        { from { opacity: 0; transform: perspective(600px) rotateY(90deg); } to { opacity: 1; transform: perspective(600px) rotateY(0); } }
@keyframes fef-rotate      { from { opacity: 0; transform: rotate(-12deg) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes fef-bounce {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; transform: scale(1.05); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
@keyframes fef-blur-in     { from { opacity: 0; filter: blur(12px); } to { opacity: 1; filter: blur(0); } }
@keyframes fef-scale-up    { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
@keyframes fef-clip-reveal { from { clip-path: inset(0 100% 0 0); opacity: 0.4; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes fef-curtain     { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* ═══════════════════════════ EXITS ═══════════════════════════ */
@keyframes fef-fade-out    { from { opacity: 1; } to { opacity: 0; } }
@keyframes fef-zoom-out    { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.85); } }
@keyframes fef-slide-out   { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-100%); } }
@keyframes fef-collapse    { from { opacity: 1; transform: scaleY(1); transform-origin: top; } to { opacity: 0; transform: scaleY(0); transform-origin: top; } }
@keyframes fef-scale-down  { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.6); } }
@keyframes fef-rotate-out  { from { opacity: 1; transform: none; } to { opacity: 0; transform: rotate(12deg) scale(0.9); } }
@keyframes fef-blur-out    { from { opacity: 1; filter: blur(0); } to { opacity: 0; filter: blur(12px); } }
@keyframes fef-shrink      { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0); } }
@keyframes fef-curtain-close { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }

/* ═══════════════════════════ PLACEHOLDER / FALLBACK ═══════════════════════════ */
.fef-vis-placeholder {
  min-height: 60px;
  border: 1px dashed color-mix(in srgb, currentColor 25%, transparent);
  border-radius: 8px;
  background: repeating-linear-gradient(45deg,
      color-mix(in srgb, currentColor 4%, transparent) 0 10px,
      transparent 10px 20px);
  opacity: 0.6;
}
.fef-vis-swapped { transition: opacity .2s ease; }

/* ═══════════════════════════ DEBUG UI ═══════════════════════════ */
.fef-vis-badge {
  position: absolute; top: 4px; right: 4px; z-index: 9999;
  font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 2px 7px; border-radius: 999px; pointer-events: none;
  color: #fff; letter-spacing: .02em;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.fef-vis-badge.is-pass { background: #16a34a; }
.fef-vis-badge.is-fail { background: #dc2626; }

#fef-vis-debug-panel {
  position: fixed; left: 12px; bottom: 12px; z-index: 100000;
  font: 500 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #14121f; color: #e8e6f0;
  border: 1px solid #6d5efc; border-radius: 10px;
  padding: 8px 12px; box-shadow: 0 8px 30px rgba(0,0,0,.35);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  max-width: min(92vw, 520px);
}
#fef-vis-debug-panel strong { color: #a99bff; }
#fef-vis-debug-panel button {
  font: inherit; cursor: pointer; color: #fff; background: #6d5efc;
  border: 0; border-radius: 6px; padding: 3px 9px;
}
#fef-vis-debug-panel button:hover { background: #5a4be0; }

/* ═══════════════════════════ ACCESSIBILITY / MOTION ═══════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .fef-anim { animation: none !important; }
  .fef-vis-loading { opacity: 1 !important; visibility: visible !important; }
}

/* ═══════════════════════════ MOBILE RESPONSIVE ═══════════════════════════ */
@media (max-width: 767px) {
  #fef-vis-debug-panel { left: 6px; right: 6px; bottom: 6px; max-width: none; font-size: 11px; }
  .fef-vis-badge { font-size: 10px; padding: 1px 6px; }
  .fef-vis-placeholder { min-height: 44px; }
}
@media (max-width: 480px) {
  #fef-vis-debug-panel { flex-direction: column; align-items: stretch; text-align: center; }
  #fef-vis-debug-panel button { width: 100%; }
}