/* ============================================================================
   LBS Design System — Glass primitives
   Clases reutilizables: .glass, .glass--raised, .glass--edge, .sheen, .tilt
   Filtros SVG, keyframes, utilidades de animación.
   ========================================================================= */

/* ── Filtro SVG de refracción (baja intensidad) ────────────────────── */
/* Embebido como data URI para que CSP img-src data: lo permita sin
   ajustar la política. Se aplica via filter: url(#lbs-refract) en
   .glass--edge. opt-in por clase, desactivado en reduced-motion. */

/* ── Hidden SVG defs ───────────────────────────────────────────────── */
.svg-defs { position: absolute; }

/* ── Reset box-sizing ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Glass surfaces ────────────────────────────────────────────────── */
.glass {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  position: relative;
  overflow: hidden;
}

/* Highlight especular: borde superior luminoso */
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    168deg,
    var(--glass-border-top) 0%,
    var(--glass-border-side) 40%,
    var(--glass-border-bottom) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* Sombra interior sutil */
.glass::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.07),
              inset 0 -1px 2px rgba(0,0,0,.1);
  pointer-events: none;
}

.glass--raised {
  backdrop-filter: blur(var(--glass-blur-raised)) saturate(var(--glass-saturate-raised));
  -webkit-backdrop-filter: blur(var(--glass-blur-raised)) saturate(var(--glass-saturate-raised));
  box-shadow: var(--shadow-3);
}

@supports not (backdrop-filter: blur(1px)) {
  .glass {
    background: var(--surface-solid);
    box-shadow: var(--shadow-2);
  }
  .glass--raised {
    background: var(--surface-solid);
  }
}

/* ── Sheen (barrido especular en hover) ────────────────────────────── */
.sheen {
  position: relative;
  overflow: hidden;
}
.sheen::after {
  content: '';
  position: absolute;
  inset: -100%;
  background: linear-gradient(
    115deg,
    transparent 40%,
    rgba(255,255,255,.08) 45%,
    rgba(255,255,255,.14) 50%,
    rgba(255,255,255,.08) 55%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: transform 600ms var(--ease-glass);
  pointer-events: none;
  z-index: 1;
}
.sheen:hover::after,
.sheen:focus-visible::after {
  transform: translateX(100%);
}

/* ── Mesh gradient background ──────────────────────────────────────── */
.mesh-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--bg);
  overflow: hidden;
}

.mesh-bg__blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform, opacity;
  animation-timing-function: var(--ease-glass);
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.mesh-bg__blob--1 {
  width: 60vmax;
  height: 60vmax;
  top: -20%;
  left: -10%;
  background: radial-gradient(circle, var(--blob-1) 0%, transparent 70%);
  animation-name: blob-drift-1;
  animation-duration: 70s;
}
.mesh-bg__blob--2 {
  width: 50vmax;
  height: 50vmax;
  bottom: -15%;
  right: -10%;
  background: radial-gradient(circle, var(--blob-2) 0%, transparent 70%);
  animation-name: blob-drift-2;
  animation-duration: 85s;
}
.mesh-bg__blob--3 {
  width: 40vmax;
  height: 40vmax;
  top: 30%;
  left: 50%;
  background: radial-gradient(circle, var(--blob-3) 0%, transparent 70%);
  animation-name: blob-drift-3;
  animation-duration: 60s;
}
.mesh-bg__blob--warm {
  width: 35vmax;
  height: 35vmax;
  bottom: 10%;
  left: 20%;
  background: radial-gradient(circle, var(--blob-warm) 0%, transparent 65%);
  animation-name: blob-drift-4;
  animation-duration: 90s;
}

@keyframes blob-drift-1 {
  from { transform: translate(0, 0) scale(1); opacity: .7; }
  to   { transform: translate(8vw, 6vh) scale(1.1); opacity: 1; }
}
@keyframes blob-drift-2 {
  from { transform: translate(0, 0) scale(1); opacity: .6; }
  to   { transform: translate(-6vw, -8vh) scale(1.15); opacity: .9; }
}
@keyframes blob-drift-3 {
  from { transform: translate(0, 0) scale(1); opacity: .5; }
  to   { transform: translate(5vw, -5vh) scale(1.08); opacity: .8; }
}
@keyframes blob-drift-4 {
  from { transform: translate(0, 0) scale(1); opacity: .4; }
  to   { transform: translate(-4vw, 4vh) scale(1.12); opacity: .7; }
}

/* Noise overlay via SVG feTurbulence data URI */
.mesh-bg__noise {
  position: absolute;
  inset: 0;
  opacity: .035;
  mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  pointer-events: none;
}

/* ── SVG refraction filter (inline def, referenced by class) ───────── */
.glass--edge {
  filter: url(#lbs-refract);
}

/* ── Stagger entrance ──────────────────────────────────────────────── */
@keyframes glass-enter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.stagger-enter {
  opacity: 0;
  animation: glass-enter var(--dur-enter) var(--ease-out) forwards;
}

/* JS sets --stagger-i per element; fallback for no-JS: all visible */
.stagger-enter { animation-delay: calc(var(--stagger-i, 0) * 60ms); }

/* ── Tilt 3D (JS adds --tilt-x/--tilt-y on hover) ─────────────────── */
.tilt {
  transform-style: preserve-3d;
  transition: transform var(--dur-base) var(--ease-out);
}
.tilt:hover {
  transform: perspective(800px)
             rotateX(var(--tilt-x, 0deg))
             rotateY(var(--tilt-y, 0deg));
}

/* ── Focus ring on glass ───────────────────────────────────────────── */
.glass:focus-visible,
[class*="glass"]:focus-visible,
.btn:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ── Flash messages animation ──────────────────────────────────────── */
@keyframes flash-enter {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes flash-exit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}
.flash-animate {
  animation: flash-enter var(--dur-enter) var(--ease-out);
}
.flash-dismiss {
  animation: flash-exit var(--dur-slow) var(--ease-out) forwards;
}

/* ── Shimmer (loading placeholder) ─────────────────────────────────── */
@keyframes shimmer {
  from { background-position: -200% center; }
  to   { background-position: 200% center; }
}
.shimmer {
  background: linear-gradient(
    90deg,
    var(--surface) 25%,
    rgba(255,255,255,.06) 50%,
    var(--surface) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.8s var(--ease-glass) infinite;
}

/* ── Utility: tabular nums ─────────────────────────────────────────── */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* ── Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .mesh-bg__blob { animation: none !important; opacity: 1 !important; }
  .mesh-bg__noise { opacity: .02; }
  .tilt:hover { transform: none !important; }
  .sheen::after { display: none; }
  .glass--edge { filter: none; }
  .stagger-enter {
    opacity: 1;
    animation: none !important;
  }
}

/* ── Responsive: fewer blobs on small screens ──────────────────────── */
@media (max-width: 640px) {
  .mesh-bg__blob--3,
  .mesh-bg__blob--warm { display: none; }
}