/* ==========================================================================
   DATA PILL ACADEMY — ANIMATION SYSTEM
   Subtle premium motion: reveals, loader, skeletons, hover, accordion
   Shared across Homepage & Course Details
   ========================================================================== */

/* ==========================================================================
   1. PAGE LOADER
   ========================================================================== */

.dp-page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--dp-bg-base, #06070B);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  transition: opacity 400ms ease, visibility 400ms ease;
}

.dp-page-loader.dp-loader-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.dp-loader-mark {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.dp-loader-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dp-loader-dots {
  display: flex;
  gap: 8px;
}

.dp-loader-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dp-primary, #8B5CF6);
  animation: dp-dot-pulse 1.2s ease-in-out infinite;
}

.dp-loader-dot:nth-child(2) {
  animation-delay: 0.15s;
}

.dp-loader-dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes dp-dot-pulse {
  0%, 80%, 100% {
    opacity: 0.25;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ==========================================================================
   2. SECTION REVEAL ANIMATIONS
   ========================================================================== */

.dp-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.dp-reveal.dp-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px) {
  .dp-reveal {
    transform: translateY(8px);
    transition: opacity 350ms ease, transform 350ms ease;
  }
}

/* Stagger support for children within a parent */
.dp-reveal[style*="--dp-stagger"] {
  transition-delay: calc(var(--dp-stagger, 0) * 100ms);
}

/* ==========================================================================
   3. CARD HOVER LIFT — major cards only (Touch-guarded)
   ========================================================================== */

.dp-hover-lift {
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 250ms ease,
              box-shadow 250ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .dp-hover-lift:hover {
    transform: translateY(-4px);
    border-color: rgba(139, 92, 246, 0.3);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4), 0 0 16px rgba(139, 92, 246, 0.08);
  }
}

/* ==========================================================================
   4. BUTTON INTERACTIONS — polish only, no size/color changes
   ========================================================================== */

.dp-btn-primary:hover svg {
  transform: translateX(-3px);
  transition: transform 250ms ease;
}

.dp-btn-primary:active {
  transform: translateY(0px) !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25) !important;
}

.dp-btn:focus-visible {
  outline: 2px solid var(--dp-primary, #8B5CF6);
  outline-offset: 3px;
}

.dp-btn-secondary:hover svg {
  transform: translateX(-2px);
  transition: transform 250ms ease;
}

.dp-btn-secondary:active {
  transform: translateY(0px) !important;
}

/* ==========================================================================
   5. SKELETON LOADING STATES
   ========================================================================== */

.dp-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--dp-bg-surface, #0E111A);
  border: 1px solid var(--dp-border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: var(--dp-radius-lg, 16px);
}

.dp-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 40%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.03) 60%,
    transparent 100%
  );
  animation: dp-shimmer 1.8s ease-in-out infinite;
}

@keyframes dp-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.dp-skeleton-line {
  height: 14px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  margin-bottom: 10px;
}

.dp-skeleton-line.w-60 { width: 60%; }
.dp-skeleton-line.w-80 { width: 80%; }
.dp-skeleton-line.w-40 { width: 40%; }

/* Skeleton card sizes matching real content */
.dp-skeleton-program { height: 320px; }
.dp-skeleton-instructor { height: 180px; }
.dp-skeleton-feedback { height: 200px; }
.dp-skeleton-branch { height: 220px; }

/* Crossfade from skeleton to content */
.dp-skeleton-fade-in {
  animation: dp-fade-in 350ms ease forwards;
}

@keyframes dp-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ==========================================================================
   6. IMAGE LAZY FADE-IN
   ========================================================================== */

.dp-img-reveal {
  opacity: 0;
  transition: opacity 300ms ease;
}

.dp-img-reveal.dp-img-loaded {
  opacity: 1;
}

/* ==========================================================================
   7. HERO ENTRANCE — one-shot stagger
   ========================================================================== */

.dp-hero-content .dp-hero-entrance {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 768px) {
  .dp-hero-content .dp-hero-entrance {
    transform: translateY(8px);
    transition-duration: 400ms;
  }
}

.dp-hero.dp-hero-entered .dp-hero-entrance:nth-child(1) {
  opacity: 1; transform: translateY(0);
  transition-delay: 100ms;
}
.dp-hero.dp-hero-entered .dp-hero-entrance:nth-child(2) {
  opacity: 1; transform: translateY(0);
  transition-delay: 200ms;
}
.dp-hero.dp-hero-entered .dp-hero-entrance:nth-child(3) {
  opacity: 1; transform: translateY(0);
  transition-delay: 350ms;
}
.dp-hero.dp-hero-entered .dp-hero-entrance:nth-child(4) {
  opacity: 1; transform: translateY(0);
  transition-delay: 500ms;
}
.dp-hero.dp-hero-entered .dp-hero-entrance:nth-child(5) {
  opacity: 1; transform: translateY(0);
  transition-delay: 650ms;
}

/* Pipeline visual subtle entrance */
.dp-hero .dp-pipeline-container {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1) 300ms,
              transform 800ms cubic-bezier(0.16, 1, 0.3, 1) 300ms;
}

.dp-hero.dp-hero-entered .dp-pipeline-container {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   8. REDUCED MOTION — full accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .dp-page-loader {
    transition: none;
  }

  .dp-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .dp-hover-lift:hover {
    transform: none;
  }

  .dp-btn-primary:hover,
  .dp-btn-secondary:hover {
    transform: none;
  }

  .dp-btn-primary:hover svg,
  .dp-btn-secondary:hover svg {
    transform: none;
  }

  .dp-img-reveal {
    opacity: 1;
    transition: none;
  }

  .dp-hero-content .dp-hero-entrance {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .dp-hero .dp-pipeline-container {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .dp-skeleton::after {
    animation: none;
  }

  .dp-loader-dot {
    animation: none;
    opacity: 1;
  }

  .dp-skeleton-fade-in {
    animation: none;
    opacity: 1;
  }

  html {
    scroll-behavior: auto;
  }
}