/**
 * 8bitflow Premium Animation Styles
 * GPU-only transforms. Jitter-free. Reduced-motion safe.
 */

@layer animations {

/* ── Base reveal states (elements start hidden) ── */
[data-animate] {
  opacity: 0;
  will-change: transform, opacity;
  animation-fill-mode: both;
}

[data-animate].is-visible {
  opacity: 1 !important;
}

/* If JS has marked an element visible, no later mobile layer should keep it hidden. */
[data-animate].is-visible,
[data-animate].is-visible > *.is-visible,
[data-animate="stagger"].is-visible > * {
  opacity: 1 !important;
}

/* Footers should never wait on scroll observers to become readable */
footer[role="contentinfo"][data-animate] {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: none;
  will-change: auto;
  transition: none;
}

/* ── Animation Types ── */

/* fade-up: most common, subtle lift */
[data-animate="fade-up"] {
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="fade-up"].is-visible {
  transform: translate3d(0, 0, 0);
}

/* fade-down */
[data-animate="fade-down"] {
  transform: translate3d(0, -20px, 0);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="fade-down"].is-visible {
  transform: translate3d(0, 0, 0);
}

/* fade-left */
[data-animate="fade-left"] {
  transform: translate3d(-24px, 0, 0);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="fade-left"].is-visible {
  transform: translate3d(0, 0, 0);
}

/* fade-right */
[data-animate="fade-right"] {
  transform: translate3d(24px, 0, 0);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="fade-right"].is-visible {
  transform: translate3d(0, 0, 0);
}

/* scale-up: for cards, images */
[data-animate="scale-up"] {
  transform: scale3d(0.92, 0.92, 1);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="scale-up"].is-visible {
  transform: scale3d(1, 1, 1);
}

/* scale-in: gentle entrance (no bounce — enterprise feel) */
[data-animate="scale-in"] {
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="scale-in"].is-visible {
  transform: translate3d(0, 0, 0);
}

/* blur-in: for text emphasis */
[data-animate="blur-in"] {
  filter: blur(8px);
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="blur-in"].is-visible {
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}

/* flip-up: 3D rotation reveal */
[data-animate="flip-up"] {
  transform: perspective(800px) rotateX(25deg) translate3d(0, 30px, 0);
  transform-origin: center bottom;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="flip-up"].is-visible {
  transform: perspective(800px) rotateX(0) translate3d(0, 0, 0);
}

/* hero-reveal: slightly more dramatic than fade-up */
[data-animate="hero-reveal"] {
  transform: translate3d(0, 30px, 0);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="hero-reveal"].is-visible {
  transform: translate3d(0, 0, 0);
}

/* fade-up-soft: very subtle lift for dense sections */
[data-animate="fade-up-soft"] {
  transform: translate3d(0, 12px, 0);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="fade-up-soft"].is-visible {
  transform: translate3d(0, 0, 0);
}

/* slide-up: for cards/lists */
[data-animate="slide-up"] {
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="slide-up"].is-visible {
  transform: translate3d(0, 0, 0);
}

/* reveal-mask: for image overlays */
[data-animate="reveal-mask"] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="reveal-mask"].is-visible {
  clip-path: inset(0 0 0 0);
}

/* ── Stagger children: parent controls child delays ── */
[data-animate="stagger"] > * {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="stagger"].is-visible > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
/* JS-driven stagger fallback: children get is-visible directly */
[data-animate="stagger"] > *.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* stagger-left: horizontal stagger */
[data-animate="stagger-left"] > * {
  opacity: 0;
  transform: translate3d(-40px, 0, 0);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="stagger-left"].is-visible > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
[data-animate="stagger-left"] > *.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (max-width: 1023.98px) {
  [data-animate="fade-left"],
  [data-animate="fade-right"] {
    transform: translate3d(0, 24px, 0);
  }

  [data-animate="fade-left"].is-visible,
  [data-animate="fade-right"].is-visible {
    transform: translate3d(0, 0, 0);
  }
}

/* ── Hover Enhancements ── */
[data-hover-lift] {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-hover-lift]:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: 0 12px 24px -8px rgba(167, 139, 250, 0.15);
}

/* hover-glow: disabled — stacks with hover-lift creating visual noise */
[data-hover-glow] {
  /* transitions handled by card base styles */
}
[data-hover-glow]:hover {
  /* no additional glow — card border-color change in base.css is enough */
}

[data-hover-scale] {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-hover-scale]:hover {
  transform: scale3d(1.02, 1.02, 1);
}

/* hover-shine: disabled — light sweep is distracting on a dark UI */
[data-hover-shine] {
  position: relative;
}
[data-hover-shine]::before {
  display: none;
}

/* ── Underline Reveal ── */
[data-underline] {
  position: relative;
  display: inline-block;
}
[data-underline]::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-underline]:hover::after {
  width: 100%;
}

/* ── Counter number base style ── */
[data-counter] {
  font-variant-numeric: tabular-nums;
}

/* ── Magnetic button base ── */
[data-magnetic] {
  transition: transform 0.2s ease-out;
  will-change: transform;
}

/* ── Text reveal base ── */
[data-text-reveal] {
  opacity: 0;
}
[data-text-reveal].is-visible {
  opacity: 1;
}

/* ── Parallax base ── */
[data-parallax] {
  will-change: transform;
}

/* ── Image reveal base ── */
[data-img-reveal] {
  will-change: clip-path, transform, opacity;
}

/* ── Card tilt base ── */
[data-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ── Cursor glow ── */
#cursor-glow {
  pointer-events: none;
  contain: paint layout;
}

/* ── Float animation (premium subtle organic motion) ── */
[data-float] {
  animation: floatOrganic 7s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  will-change: transform;
}
@keyframes floatOrganic {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  25% { transform: translate3d(4px, -10px, 0) rotate(0.5deg); }
  50% { transform: translate3d(-2px, -14px, 0) rotate(-0.3deg); }
  75% { transform: translate3d(3px, -6px, 0) rotate(0.4deg); }
}

/* ── Gradient shift for backgrounds ── */
[data-gradient-shift] {
  background-size: 200% 200%;
  animation: gradientMove 10s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes fadeGradient {
  0%, 100% { background-color: rgba(167, 139, 250, 0.03); }
  50% { background-color: rgba(52, 211, 153, 0.05); }
}

/* ── Pulse ring (for status indicators) ── */
[data-pulse-ring] {
  position: relative;
}
[data-pulse-ring]::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 1px solid currentColor;
  opacity: 0;
  transform: scale(0.9);
  animation: pulseRing 2.5s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes pulseRing {
  0% { opacity: 0.6; transform: scale(0.9); }
  100% { opacity: 0; transform: scale(1.4); }
}

/* ── Marquee CSS animation (used by animate-marquee class) ── */
@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (min-width: 768px) {
  .animate-marquee {
    display: flex;
    white-space: nowrap;
    animation: marqueeScroll 48s linear infinite;
    will-change: transform;
  }
}
.animate-marquee {
  display: flex;
}
.animate-marquee.is-paused {
  animation-play-state: paused;
}
.animate-marquee > * {
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Integration Tooltip ── */
.integration-tooltip {
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.integration-tooltip.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.integration-item:hover svg {
  transform: scale(1.08);
}
.integration-item {
  position: relative;
}

/* ── Modal entrance animations ── */
@keyframes modalBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modalPanelIn {
  from { opacity: 0; transform: scale(0.95) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Stagger utility for JS-driven delays ── */
[data-delay="0.05"] { transition-delay: 0.05s; }
[data-delay="0.1"] { transition-delay: 0.1s; }
[data-delay="0.15"] { transition-delay: 0.15s; }
[data-delay="0.2"] { transition-delay: 0.2s; }
[data-delay="0.25"] { transition-delay: 0.25s; }
[data-delay="0.3"] { transition-delay: 0.3s; }
[data-delay="0.35"] { transition-delay: 0.35s; }
[data-delay="0.4"] { transition-delay: 0.4s; }
[data-delay="0.45"] { transition-delay: 0.45s; }
[data-delay="0.5"] { transition-delay: 0.5s; }

/* ── Touch feedback (mobile tap effect) ── */
[data-touch-feedback] {
  transition: transform 0.15s ease, background-color 0.2s ease;
}
[data-touch-feedback]:active {
  transform: scale(0.97);
}

/* ── Focus ring enhancement ── */
:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 2px;
}

/* ── Shimmer loading effect ── */
[data-shimmer] {
  background: linear-gradient(90deg, #18171d 25%, #262630 50%, #18171d 75%);
  background-size: 200% 100%;
  animation: shimmerMove 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes shimmerMove {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* .glass and .glass-light are defined in base.css — single source of truth */

/* ── Gradient border effect ── */
[data-gradient-border] {
  position: relative;
  background: #121215;
}
[data-gradient-border]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, #a78bfa, #34d399, #a78bfa);
  background-size: 200% 200%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: gradientMove 4s ease infinite;
  pointer-events: none;
}

/* ── Animated gradient text ── */
[data-gradient-text] {
  background: linear-gradient(135deg, #a78bfa, #34d399, #60a5fa, #a78bfa);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientMove 6s ease infinite;
}

/* ── Glow border on hover ── */
[data-hover-glow-border] {
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-hover-glow-border]:hover {
  box-shadow: none;
  border-color: rgba(167, 139, 250, 0.28) !important;
}

/* #scroll-progress is defined in base.css — single source of truth */

/* ── Navigation progress bar ── */
#nav-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #a78bfa, #34d399);
  z-index: 10000;
  pointer-events: none;
  will-change: width, opacity, margin-left;
  opacity: 0;
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.5);
  transition: opacity 0.15s ease;
}
#nav-progress.active {
  opacity: 1;
}
@keyframes navProgressIndeterminate {
  0% { width: 0; margin-left: 0; }
  20% { width: 30%; margin-left: 0; }
  50% { width: 20%; margin-left: 40%; }
  80% { width: 30%; margin-left: 70%; }
  100% { width: 0; margin-left: 100%; }
}
#nav-progress.indeterminate {
  animation: navProgressIndeterminate 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
#nav-progress.finishing {
  animation: none;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0s,
              margin-left 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0s,
              opacity 0.3s ease 0.2s;
  width: 100% !important;
  margin-left: 0 !important;
  opacity: 1;
}
#nav-progress.hiding {
  animation: none;
  transition: opacity 0.2s ease;
  opacity: 0;
}

/* ── Blob / organic shape backgrounds ── */
[data-blob] {
  position: relative;
}
[data-blob]::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.08;
  pointer-events: none;
  animation: blobFloat 12s ease-in-out infinite;
}
@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(24px, -16px) scale(1.04); }
  50% { transform: translate(-16px, 24px) scale(0.96); }
  75% { transform: translate(16px, 16px) scale(1.02); }
}

/* ── Typewriter cursor blink ── */
[data-typewriter]::after {
  content: "|";
  animation: cursorBlink 1s step-end infinite;
  color: #a78bfa;
  font-weight: 300;
}
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ── Ripple effect on click ── */
[data-ripple] {
  position: relative;
  overflow: hidden;
}
[data-ripple] .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(167, 139, 250, 0.2);
  transform: scale(0);
  animation: rippleExpand 0.6s ease-out;
  pointer-events: none;
}
@keyframes rippleExpand {
  to { transform: scale(4.5); opacity: 0; }
}

/* ── Reduced Motion: disable all animations ── */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-animate] > *,
  [data-hover-lift],
  [data-hover-glow],
  [data-hover-scale],
  [data-hover-glow-border],
  [data-hover-shine],
  [data-magnetic],
  [data-tilt],
  [data-float],
  [data-gradient-shift],
  [data-gradient-border]::before,
  [data-gradient-text],
  [data-pulse-ring]::before,
  [data-shimmer],
  .animate-marquee,
  .skeleton,
  #scroll-progress,
  .particle,
  .glow-dot {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    clip-path: none !important;
  }
  [data-animate="reveal-mask"] {
    clip-path: none !important;
  }
  [data-gradient-text] {
    -webkit-text-fill-color: initial;
  }
  [data-float],
  [data-gradient-shift],
  [data-hover-lift]:hover,
  [data-hover-scale]:hover {
    animation: none !important;
    transform: none !important;
    box-shadow: none !important;
  }
}

/* ── Mobile optimizations ── */
@media (max-width: 767.98px) {
  [data-animate="fade-left"],
  [data-animate="fade-right"] {
    transform: translate3d(0, 24px, 0);
  }
  [data-animate="fade-left"].is-visible,
  [data-animate="fade-right"].is-visible {
    transform: translate3d(0, 0, 0);
  }

  [data-animate="hero-reveal"] {
    transform: translate3d(0, 28px, 0);
  }

  [data-hover-lift]:hover,
  [data-hover-scale]:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  [data-float] {
    animation-duration: 9s;
  }

  [data-tilt] {
    transform: none !important;
  }

  [data-parallax] {
    transform: none !important;
  }

  [data-animate] {
    will-change: auto;
  }

  #cursor-glow {
    display: none !important;
  }

  /* Smoother, faster stagger on mobile */
  [data-animate="stagger"] > * {
    transition-duration: 0.4s;
  }

  /* Lighter reveal animations on mobile */
  [data-animate="scale-up"] {
    transform: scale3d(0.95, 0.95, 1);
    transition-duration: 0.5s;
  }

  [data-animate="blur-in"] {
    filter: blur(4px);
    transform: translate3d(0, 12px, 0);
    transition-duration: 0.6s;
  }

  [data-animate="blur-in"].is-visible {
    filter: blur(0);
  }

  /* Disable 3D flips on mobile for performance */
  [data-animate="flip-up"] {
    transform: translate3d(0, 24px, 0);
    transition-duration: 0.6s;
  }
  [data-animate="flip-up"].is-visible {
    transform: translate3d(0, 0, 0);
  }

  /* Disable reveal-mask on mobile (clip-path can be expensive) */
  [data-animate="reveal-mask"] {
    clip-path: none !important;
    opacity: 0;
  }
  [data-animate="reveal-mask"].is-visible {
    opacity: 1;
  }

  /* Gradient border performance on mobile */
  [data-gradient-border]::before {
    animation-duration: 8s;
  }

  /* Glow effects are subtle on mobile */
  [data-hover-glow-border]:hover {
    box-shadow: none;
    border-color: rgba(167, 139, 250, 0.22) !important;
  }

  /* Marquee pause on touch */
  .animate-marquee:active {
    animation-play-state: paused;
  }

  /* Pulse animations slower on mobile */
  [data-pulse-ring]::before {
    animation-duration: 3s;
  }
}

/* ── Print styles ── */
@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  .backdrop-blur-md,
  .backdrop-blur {
    backdrop-filter: none !important;
  }
  nav, footer, .fixed, .particles-container, [data-animate] {
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
  }
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}

} /* end @layer animations */