/* =========================================
   TAIYARI24 ENTERPRISE — ANIMATIONS
   Scroll-driven, purposeful, precise
   ========================================= */

/* ---- Reveal animations (intersection observer) ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-slower) var(--ease-premium),
    transform var(--dur-slower) var(--ease-premium);
}

[data-reveal="left"] {
  transform: translateX(-24px);
}

[data-reveal="right"] {
  transform: translateX(24px);
}

[data-reveal="scale"] {
  transform: scale(0.95);
}

[data-reveal="fade"] {
  transform: none;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger children */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-slower) var(--ease-premium),
    transform var(--dur-slower) var(--ease-premium);
}

[data-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay: 80ms; }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: 160ms; }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: 240ms; }
[data-stagger].is-visible > *:nth-child(5) { transition-delay: 320ms; }
[data-stagger].is-visible > *:nth-child(6) { transition-delay: 400ms; }
[data-stagger].is-visible > *:nth-child(7) { transition-delay: 480ms; }
[data-stagger].is-visible > *:nth-child(8) { transition-delay: 560ms; }

[data-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}

/* ---- Hero text reveal ---- */
.hero-reveal {
  overflow: hidden;
}

.hero-reveal__line {
  display: block;
  transform: translateY(100%);
  opacity: 0;
  transition:
    transform var(--dur-slowest) var(--ease-premium),
    opacity var(--dur-slowest) var(--ease-premium);
}

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

.hero-reveal__line:nth-child(1) { transition-delay: 100ms; }
.hero-reveal__line:nth-child(2) { transition-delay: 220ms; }
.hero-reveal__line:nth-child(3) { transition-delay: 340ms; }

/* Sub content after headline */
.hero-sub-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-slowest) var(--ease-premium),
    transform var(--dur-slowest) var(--ease-premium);
  transition-delay: 500ms;
}

.hero-sub-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.hero-actions-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-slowest) var(--ease-premium),
    transform var(--dur-slowest) var(--ease-premium);
  transition-delay: 700ms;
}

.hero-actions-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---- Counter animation ---- */
.count-up {
  transition: all var(--dur-slow);
}

/* ---- Hover line animation ---- */
.hover-underline {
  position: relative;
  display: inline-block;
}

.hover-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-default);
}

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

/* ---- Loading spinner ---- */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* ---- Shimmer / skeleton ---- */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface) 25%,
    var(--border) 50%,
    var(--surface) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

/* ---- Page transition ---- */
.page-enter {
  animation: pageEnter var(--dur-slow) var(--ease-premium) forwards;
}

@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- Dot pulse (live indicator) ---- */
@keyframes dotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.5; }
}

.dot-pulse {
  animation: dotPulse 2s ease-in-out infinite;
}

/* ---- Blog filter button animation ---- */
.filter-btn {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--mid);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-default);
}

.filter-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.filter-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

/* ---- Number ticker ---- */
.ticker {
  display: inline-flex;
  overflow: hidden;
}

/* ---- Smooth number animation ---- */
@keyframes countUp {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }
}