/* ============================================
   LaserMed · Motion
   Animaciones CSS, clases reveal
   ============================================ */

/* Reveal states (initially hidden, JS reveals) */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-fade {
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}

.reveal-fade.is-visible {
  opacity: 1;
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity 1.2s var(--ease-out),
    transform 1.2s var(--ease-out);
}

.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

.reveal-blur {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(20px);
  transition:
    opacity 1.2s var(--ease-out),
    filter 1.2s var(--ease-out),
    transform 1.2s var(--ease-out);
}

.reveal-blur.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Stagger delays */
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }
.reveal[data-delay="4"] { transition-delay: 0.4s; }
.reveal[data-delay="5"] { transition-delay: 0.5s; }
.reveal[data-delay="6"] { transition-delay: 0.6s; }

/* Line mask reveal (for big titles) */
.line-mask {
  display: block;
  overflow: hidden;
}

.line-mask > span {
  display: block;
  transform: translateY(110%);
  transition: transform 1.1s var(--ease-out-soft);
}

.line-mask.is-visible > span {
  transform: translateY(0);
}

/* Word-by-word reveal (for hero) */
.word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.word-mask > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease-out-soft);
}

.word-mask.is-visible > span {
  transform: translateY(0);
}

/* Image clip reveal (for media blocks) */
.clip-reveal {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.4s var(--ease-out-soft);
}

.clip-reveal.is-visible {
  clip-path: inset(0 0 0 0);
}

/* Horizontal line draw (for separators) */
.line-draw {
  width: 0;
  height: 1px;
  background: var(--lm-accent);
  transition: width 1.2s var(--ease-out);
}

.line-draw.is-visible {
  width: 64px;
}

/* Marquee (for badges strip if needed) */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.marquee {
  display: flex;
  overflow: hidden;
  gap: var(--sp-12);
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

.marquee__track {
  display: flex;
  gap: var(--sp-12);
  flex-shrink: 0;
  animation: marquee 30s linear infinite;
}

/* Spinner / loader */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Number counter (for stats) */
.tabular {
  font-variant-numeric: tabular-nums;
}

/* Smooth transitions for hover/active */
.hover-lift {
  transition: transform var(--dur) var(--ease-out);
}

.hover-lift:hover {
  transform: translateY(-2px);
}

/* Underline grow on hover (for nav links) */
.ul-grow {
  position: relative;
}

.ul-grow::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}

.ul-grow:hover::after {
  transform: scaleX(1);
}