/* Legal Staff — shared motion and graphics primitives, used by index.html, directory.html and app.html.
   Palette: ink #0A0A0A on paper #FAFAF9, greys #363636 / #5E5E5E / #8A8A8A / #E5E5E5, alert red #B42318 (alerts only),
   a cool silver gradient that echoes the logo, and WhatsApp green #25D366 only inside WhatsApp illustrations. */
:root {
  --ls-ease: cubic-bezier(.2, .7, .2, 1);
  --ls-ease-out: cubic-bezier(.16, 1, .3, 1);
  --ls-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ls-ink: #0A0A0A;
  --ls-paper: #FAFAF9;
  --ls-line: #E5E5E5;
  --ls-red: #B42318;
  --ls-silver: linear-gradient(135deg, #FFFFFF 0%, #D9D9D9 38%, #8E8E8E 62%, #F2F2F2 100%);
}

/* ---------- keyframes ---------- */
@keyframes ls-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ls-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ls-scale-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ls-slide-in-right { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes ls-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes ls-float-slow { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(.6deg); } }
@keyframes ls-pulse-ring { 0% { transform: scale(.8); opacity: .55; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes ls-pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes ls-spin { to { transform: rotate(360deg); } }
@keyframes ls-draw { from { stroke-dashoffset: var(--ls-len, 400); } to { stroke-dashoffset: 0; } }
@keyframes ls-scan { 0% { transform: translateY(-10%); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(110%); opacity: 0; } }
@keyframes ls-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes ls-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes ls-pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
@keyframes ls-drift { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(2%, -3%, 0); } }
@keyframes ls-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ls-orbit { from { transform: rotate(0) translateX(var(--ls-r, 70px)) rotate(0); } to { transform: rotate(360deg) translateX(var(--ls-r, 70px)) rotate(-360deg); } }
@keyframes ls-dash-flow { to { stroke-dashoffset: -24; } }
@keyframes ls-typing { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-3px); opacity: 1; } }

/* ---------- utilities ---------- */
.ls-float { animation: ls-float 6s var(--ls-ease) infinite; will-change: transform; }
.ls-float-slow { animation: ls-float-slow 9s ease-in-out infinite; will-change: transform; }
.ls-spin-slow { animation: ls-spin 40s linear infinite; transform-origin: center; }
.ls-pulse { animation: ls-pulse-dot 2s ease-in-out infinite; }
.ls-flow { stroke-dasharray: 4 8; animation: ls-dash-flow 1.2s linear infinite; }
.ls-shimmer { background: linear-gradient(90deg, #F0F0EF 25%, #FAFAF9 37%, #F0F0EF 63%); background-size: 400% 100%; animation: ls-shimmer 1.4s ease infinite; }
.ls-silver-text { background: var(--ls-silver); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ls-typing span { display: inline-block; width: 6px; height: 6px; border-radius: 3px; background: currentColor; margin: 0 2px; animation: ls-typing 1.2s ease-in-out infinite; }
.ls-typing span:nth-child(2) { animation-delay: .15s; }
.ls-typing span:nth-child(3) { animation-delay: .3s; }

/* Pulse ring around a dot or icon: put .ls-ring on a positioned wrapper. */
.ls-ring { position: relative; }
.ls-ring::before, .ls-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid currentColor; animation: ls-pulse-ring 2.6s var(--ls-ease-out) infinite; pointer-events: none; }
.ls-ring::after { animation-delay: 1.3s; }

/* Scroll reveal: add .ls-reveal; JS adds .ls-in when the element enters the viewport.
   --ls-delay staggers siblings. Without JS the content stays visible (see .ls-js gate). */
.ls-js .ls-reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ls-ease) var(--ls-delay, 0ms), transform .8s var(--ls-ease) var(--ls-delay, 0ms); }
.ls-js .ls-reveal.ls-in { opacity: 1; transform: none; }
.ls-js .ls-reveal-scale { opacity: 0; transform: scale(.96); transition: opacity .9s var(--ls-ease) var(--ls-delay, 0ms), transform .9s var(--ls-ease-out) var(--ls-delay, 0ms); }
.ls-js .ls-reveal-scale.ls-in { opacity: 1; transform: none; }
/* SVG line drawing when revealed: set --ls-len to the path length (or a value larger than it). */
.ls-js .ls-reveal .ls-draw, .ls-js .ls-reveal-scale .ls-draw { stroke-dasharray: var(--ls-len, 400); stroke-dashoffset: var(--ls-len, 400); transition: stroke-dashoffset 1.6s var(--ls-ease) calc(var(--ls-delay, 0ms) + 200ms); }
.ls-js .ls-in .ls-draw { stroke-dashoffset: 0; }

/* Hover lift for cards and buttons. */
.ls-lift { transition: transform .25s var(--ls-ease), box-shadow .25s var(--ls-ease), border-color .25s var(--ls-ease); }
.ls-lift:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(10, 10, 10, .08); }
.ls-press { transition: transform .12s var(--ls-ease); }
.ls-press:active { transform: scale(.97); }

/* ---------- reduced motion: no movement, content fully visible ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .ls-js .ls-reveal, .ls-js .ls-reveal-scale { opacity: 1 !important; transform: none !important; }
  .ls-js .ls-reveal .ls-draw, .ls-js .ls-reveal-scale .ls-draw { stroke-dashoffset: 0 !important; }
  .ls-ring::before, .ls-ring::after { display: none; }
}