/* ==========================================================================
   Printways.co.uk — Scroll & Motion Design System
   Based on scroll-site-generator & UI/UX motion presets
   ========================================================================== */

/* ── Scroll Reveal Engine ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

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

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

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

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

[data-reveal].revealed,
[data-reveal].in {
  opacity: 1;
  transform: none;
}

/* Stagger delays */
[data-delay="50"] { transition-delay: 0.05s; }
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="150"] { transition-delay: 0.15s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="250"] { transition-delay: 0.25s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="350"] { transition-delay: 0.35s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="500"] { transition-delay: 0.5s; }

/* ── Subtle Hero Animations ── */
.hero-fade-in {
  opacity: 0;
  animation: heroEntrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-fade-in-delay-1 {
  opacity: 0;
  animation: heroEntrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}

.hero-fade-in-delay-2 {
  opacity: 0;
  animation: heroEntrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

.hero-fade-in-delay-3 {
  opacity: 0;
  animation: heroEntrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards;
}

@keyframes heroEntrance {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Process Timeline Line Progression ── */
.process-line-fill {
  transition: width 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ── Scrollytelling Artboard Animations ── */
@keyframes drawPath {
  0% { stroke-dashoffset: 400; }
  100% { stroke-dashoffset: 0; }
}

@keyframes foilShine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Card Hover Micro-interactions ── */
.card-hover-lift {
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.card-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.3);
}

/* ── Subtle Pulse for Active Badges ── */
@keyframes pulseDot {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
  100% { transform: scale(1); opacity: 1; }
}

.pulse-animation {
  animation: pulseDot 2.2s ease-in-out infinite;
}

/* ── Reduced Motion Accessibility Override ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  [data-reveal],
  [data-reveal="left"],
  [data-reveal="right"],
  [data-reveal="scale"],
  [data-reveal="fade"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  
  .hero-fade-in,
  .hero-fade-in-delay-1,
  .hero-fade-in-delay-2,
  .hero-fade-in-delay-3 {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  
  .floating-chip,
  .chip-1,
  .chip-2,
  .chip-3,
  .bezier-path,
  .foil-sweep-text,
  .pulse-animation {
    animation: none !important;
  }
  
  .artboard-scene {
    transition: none !important;
  }
}