/* ============================================================================
   Logic4Learn — Brand Logo Animations (v12)
   Append to styles.css. Modos: topbar (loop sutil), hero (A8), press (A2)
============================================================================ */

/* Container */
[data-l4l-logo] { display: inline-block; line-height: 0; vertical-align: middle; }
.l4l-svg { display: block; }

/* Topbar sizing — el SVG mantiene proporción del viewBox 660:130 (~5.08:1).
   Para que se vea con la misma altura que las imgs originales (28px), width ≈ 142px.
   Forzamos altura para garantizar consistencia entre topbars. */
.brand-wordmark[data-l4l-logo] { height: 28px; }
.brand-wordmark[data-l4l-logo] .l4l-svg { height: 28px !important; width: auto !important; }
@media (max-width: 640px) {
  /* Mobile: el topbar original esconde el wordmark */
  .brand-wordmark[data-l4l-logo] { display: none; }
}
.l4l-ltr {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
  font-size: 100px;
  letter-spacing: -3px;
}
.l4l-navy { fill: #042C53; }
.l4l-accent { fill: #EF9F27; }
.l4l-arc { fill: none; stroke: #EF9F27; stroke-width: 6; stroke-linecap: round; }

/* Dark mode: las letras navy se vuelven blancas */
[data-theme="dark"] .l4l-navy { fill: #F3F4F6; }

/* === MODO STATIC (default / reduced-motion / ya-vista) === */
.l4l-mode-static .l4l-ltr,
.l4l-mode-static .l4l-arc { /* nada, render directo */ }

/* === MODO TOPBAR (siempre activo, micro-loop sutil en el "4") === */
.l4l-mode-topbar.l4l-run .l4l-accent {
  transform-origin: 313px 75px;
  animation: l4l-topbar-tilt 5s ease-in-out infinite;
}
.l4l-mode-topbar.l4l-run .l4l-arc {
  transform-origin: center;
  animation: l4l-topbar-pulse 5s ease-in-out infinite;
}
@keyframes l4l-topbar-tilt {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}
@keyframes l4l-topbar-pulse {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(1.04); }
}

/* === MODO HERO (A8 · 4 Spin + Blur) === */
.l4l-mode-hero .l4l-ltr { opacity: 0; filter: blur(8px); }
.l4l-mode-hero .l4l-accent {
  transform-origin: 313px 75px;
  transform: rotate(-180deg) scale(0.3);
  opacity: 0;
}
.l4l-mode-hero .l4l-arc { transform-origin: center; transform: scaleX(0); }

.l4l-mode-hero.l4l-run .l4l-l1  { animation: l4l-blur 0.6s 0.60s ease-out forwards; }
.l4l-mode-hero.l4l-run .l4l-l2  { animation: l4l-blur 0.6s 0.65s ease-out forwards; }
.l4l-mode-hero.l4l-run .l4l-l3  { animation: l4l-blur 0.6s 0.70s ease-out forwards; }
.l4l-mode-hero.l4l-run .l4l-l4  { animation: l4l-blur 0.6s 0.75s ease-out forwards; }
.l4l-mode-hero.l4l-run .l4l-l5  { animation: l4l-blur 0.6s 0.80s ease-out forwards; }
.l4l-mode-hero.l4l-run .l4l-l7  { animation: l4l-blur 0.6s 0.85s ease-out forwards; }
.l4l-mode-hero.l4l-run .l4l-l8  { animation: l4l-blur 0.6s 0.90s ease-out forwards; }
.l4l-mode-hero.l4l-run .l4l-l9  { animation: l4l-blur 0.6s 0.95s ease-out forwards; }
.l4l-mode-hero.l4l-run .l4l-l10 { animation: l4l-blur 0.6s 1.00s ease-out forwards; }
.l4l-mode-hero.l4l-run .l4l-l11 { animation: l4l-blur 0.6s 1.05s ease-out forwards; }
.l4l-mode-hero.l4l-run .l4l-accent {
  animation: l4l-spin 0.8s 0.1s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.l4l-mode-hero.l4l-run .l4l-arc {
  animation: l4l-arc-grow 0.5s 1.2s cubic-bezier(0.2,0.8,0.2,1) forwards;
}

@keyframes l4l-blur     { to { opacity: 1; filter: blur(0); } }
@keyframes l4l-spin     { to { opacity: 1; transform: rotate(0) scale(1); filter: blur(0); } }
@keyframes l4l-arc-grow { to { transform: scaleX(1); } }

/* === MODO PRESS (A2 · Stroke Trace) === */
.l4l-mode-press .l4l-ltr {
  fill: transparent;
  stroke: #042C53; stroke-width: 1.5;
  stroke-dasharray: 600; stroke-dashoffset: 600;
}
.l4l-mode-press .l4l-accent { stroke: #EF9F27; }
.l4l-mode-press .l4l-arc { stroke-dasharray: 700; stroke-dashoffset: 700; }

[data-theme="dark"] .l4l-mode-press .l4l-ltr { stroke: #F3F4F6; }
[data-theme="dark"] .l4l-mode-press .l4l-accent { stroke: #EF9F27; }

.l4l-mode-press.l4l-run .l4l-l1  { animation: l4l-trace 1.0s 0.00s ease-in-out forwards, l4l-fill-navy 0.5s 1.00s ease-out forwards; }
.l4l-mode-press.l4l-run .l4l-l2  { animation: l4l-trace 1.0s 0.05s ease-in-out forwards, l4l-fill-navy 0.5s 1.05s ease-out forwards; }
.l4l-mode-press.l4l-run .l4l-l3  { animation: l4l-trace 1.0s 0.10s ease-in-out forwards, l4l-fill-navy 0.5s 1.10s ease-out forwards; }
.l4l-mode-press.l4l-run .l4l-l4  { animation: l4l-trace 1.0s 0.15s ease-in-out forwards, l4l-fill-navy 0.5s 1.15s ease-out forwards; }
.l4l-mode-press.l4l-run .l4l-l5  { animation: l4l-trace 1.0s 0.20s ease-in-out forwards, l4l-fill-navy 0.5s 1.20s ease-out forwards; }
.l4l-mode-press.l4l-run .l4l-accent { animation: l4l-trace 1.0s 0.25s ease-in-out forwards, l4l-fill-orange 0.5s 1.25s ease-out forwards; }
.l4l-mode-press.l4l-run .l4l-l7  { animation: l4l-trace 1.0s 0.30s ease-in-out forwards, l4l-fill-navy 0.5s 1.30s ease-out forwards; }
.l4l-mode-press.l4l-run .l4l-l8  { animation: l4l-trace 1.0s 0.35s ease-in-out forwards, l4l-fill-navy 0.5s 1.35s ease-out forwards; }
.l4l-mode-press.l4l-run .l4l-l9  { animation: l4l-trace 1.0s 0.40s ease-in-out forwards, l4l-fill-navy 0.5s 1.40s ease-out forwards; }
.l4l-mode-press.l4l-run .l4l-l10 { animation: l4l-trace 1.0s 0.45s ease-in-out forwards, l4l-fill-navy 0.5s 1.45s ease-out forwards; }
.l4l-mode-press.l4l-run .l4l-l11 { animation: l4l-trace 1.0s 0.50s ease-in-out forwards, l4l-fill-navy 0.5s 1.50s ease-out forwards; }
.l4l-mode-press.l4l-run .l4l-arc { animation: l4l-arc-trace 0.8s 1.7s cubic-bezier(0.2,0.8,0.2,1) forwards; }

@keyframes l4l-trace        { to { stroke-dashoffset: 0; } }
@keyframes l4l-fill-navy    { to { fill: #042C53; stroke-width: 0; } }
@keyframes l4l-fill-orange  { to { fill: #EF9F27; stroke-width: 0; } }
@keyframes l4l-arc-trace    { to { stroke-dashoffset: 0; } }

[data-theme="dark"] .l4l-mode-press.l4l-run .l4l-ltr { animation-name: l4l-trace, l4l-fill-white !important; }
[data-theme="dark"] .l4l-mode-press.l4l-run .l4l-accent { animation-name: l4l-trace, l4l-fill-orange !important; }
@keyframes l4l-fill-white { to { fill: #F3F4F6; stroke-width: 0; } }

/* Reduce motion: forzar estático */
@media (prefers-reduced-motion: reduce) {
  .l4l-mode-topbar.l4l-run .l4l-accent,
  .l4l-mode-topbar.l4l-run .l4l-arc { animation: none !important; }
  .l4l-mode-hero .l4l-ltr,
  .l4l-mode-hero .l4l-accent,
  .l4l-mode-hero .l4l-arc,
  .l4l-mode-press .l4l-ltr,
  .l4l-mode-press .l4l-accent,
  .l4l-mode-press .l4l-arc { opacity: 1 !important; transform: none !important; filter: none !important; fill: currentColor !important; stroke-width: 0 !important; stroke-dashoffset: 0 !important; }
}