/* =====================================================================
   animations.css — motion only. Layout/skin rules live in main.css.
   Everything degrades gracefully when JS or GSAP is unavailable:
   reveal targets are visible by default and only hidden once the
   `js-motion` class is added to <html> by main.js.
   ===================================================================== */

/* Reveal primitives (activated only when JS motion is enabled) */
.js-motion .reveal { opacity: 0; transform: translateY(28px); }
/* No transform here: GSAP owns the reveal-line offset so the masked
   heading never keeps a leftover translate inside its clipping mask. */
.js-motion .reveal-line { opacity: 0; }

/* The extra breathing room prevents descenders (g, y, p, q) from being
   clipped by the reveal mask on large display headings. */
.js-motion .mask-line {
  display: block;
  overflow: hidden;
  padding: 0.06em 0 0.22em;
  margin-bottom: -0.1em;
}

/* Marquee */
@keyframes marquee-x {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
.marquee__track {
  animation: marquee-x 34s linear infinite;
  will-change: transform;
  transform: translateZ(0);
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
  animation-duration: 34s;
  animation-play-state: running;
}

/* Scroll indicator */
@keyframes scroll-nudge {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(7px); opacity: 0.45; }
}
.hero__scroll .bi { animation: scroll-nudge 2.1s ease-in-out infinite; }

/* Floating technical labels */
@keyframes float-soft {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -12px, 0); }
}
.float-tag { animation: float-soft 7s ease-in-out infinite; }
.float-tag:nth-of-type(2) { animation-duration: 9s; animation-delay: -2s; }
.float-tag:nth-of-type(3) { animation-duration: 11s; animation-delay: -4s; }

/* About workstation: quiet, contextual activity inside the illustration. */
@keyframes about-type-left {
  0%, 100% { transform: translate3d(0, 0, 0); }
  38% { transform: translate3d(1px, -2px, 0); }
  68% { transform: translate3d(-1px, 1px, 0); }
}
@keyframes about-type-right {
  0%, 100% { transform: translate3d(0, 0, 0); }
  34% { transform: translate3d(-1px, 1px, 0); }
  72% { transform: translate3d(1px, -2px, 0); }
}
@keyframes about-cursor-blink {
  0%, 44% { opacity: 0.9; }
  45%, 100% { opacity: 0.12; }
}
@keyframes about-code-shift {
  0%, 100% { stroke-dashoffset: 0; opacity: 0.58; }
  48% { stroke-dashoffset: -32; opacity: 0.9; }
}
@keyframes about-status-breathe {
  0%, 100% { opacity: 0.38; transform: scale(0.8); }
  50% { opacity: 0.95; transform: scale(1.15); }
}
@keyframes about-cable-signal {
  0%, 14% { opacity: 0; transform: translate3d(0, 0, 0); }
  24% { opacity: 0.8; }
  52% { opacity: 0.45; transform: translate3d(36px, 0, 0); }
  60%, 100% { opacity: 0; transform: translate3d(36px, 0, 0); }
}
@keyframes about-pixel-flicker {
  0%, 100% { opacity: 0.12; transform: translate3d(0, 0, 0); }
  38% { opacity: 0.9; transform: translate3d(2px, -1px, 0); }
  56% { opacity: 0.28; transform: translate3d(-1px, 1px, 0); }
}
.about-visual__hand--left { animation: about-type-left 2.15s ease-in-out infinite; }
.about-visual__hand--right { animation: about-type-right 2.55s ease-in-out -0.72s infinite; }
.about-visual__cursor { animation: about-cursor-blink 1.08s steps(1, end) infinite; }
.about-visual__code-lines {
  stroke-dasharray: 32 10;
  animation: about-code-shift 6.4s ease-in-out infinite;
}
.about-visual__status {
  transform-origin: center;
  animation: about-status-breathe 3.8s ease-in-out infinite;
}
.about-visual__status--desk { animation-duration: 4.7s; animation-delay: -1.6s; }
.about-visual__cable-pulse { animation: about-cable-signal 6.8s ease-in-out 0.9s infinite; }
.about-visual__pixel { animation: about-pixel-flicker 4.6s steps(1, end) infinite; }
.about-visual__pixel--two { animation-duration: 6.2s; animation-delay: -2.8s; }
.about-visual__pixel--three { animation-duration: 5.4s; animation-delay: -1.3s; }

/* Standalone About hero: layered motion for the supplied line illustration. */
@keyframes about-art-enter {
  from {
    opacity: 0;
    clip-path: inset(38% 0 0 76%);
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: scale(1);
  }
}
@keyframes about-art-hands {
  0%, 22%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  48% { transform: translate3d(2px, -2px, 0) rotate(0.18deg); }
  72% { transform: translate3d(-1px, 1px, 0) rotate(-0.1deg); }
}
@keyframes about-art-monitor {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.14; }
  46% { transform: translate3d(1px, 0, 0); opacity: 0.24; }
}
@keyframes about-art-scan {
  0%, 12% { opacity: 0; transform: translate3d(0, 0, 0); }
  22% { opacity: 0.38; }
  66% { opacity: 0.08; transform: translate3d(0, 112px, 0); }
  72%, 100% { opacity: 0; transform: translate3d(0, 112px, 0); }
}
@keyframes about-art-person {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  52% { transform: translate3d(1px, -1px, 0) rotate(0.1deg); }
}
@keyframes about-art-signal {
  0%, 16%, 100% { opacity: 0.08; transform: translate3d(0, 0, 0); }
  44% { opacity: 0.75; transform: translate3d(2px, -1px, 0); }
  68% { opacity: 0.18; transform: translate3d(-1px, 1px, 0); }
}
.about-hero-art { animation: about-art-enter 1.65s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both; }
.about-hero-art__hands img {
  transform-origin: 57% 46%;
  animation: about-art-hands 2.75s ease-in-out 1.1s infinite;
}
.about-hero-art__monitor img { animation: about-art-monitor 4.6s ease-in-out -1.3s infinite; }
.about-hero-art__scan { animation: about-art-scan 4.2s ease-in-out 1.7s infinite; }
.about-hero-art__person img {
  transform-origin: 80% 60%;
  animation: about-art-person 7.6s ease-in-out -2.4s infinite;
}
.about-hero-art__signals i { animation: about-art-signal 4.9s steps(1, end) infinite; }
.about-hero-art__signals i:nth-child(2) { animation-duration: 6.3s; animation-delay: -2.1s; }
.about-hero-art__signals i:nth-child(3) { animation-duration: 2.1s; animation-delay: -0.7s; }
.about-hero-art__signals i:nth-child(4) { animation-duration: 5.7s; animation-delay: -3.6s; }
.about-hero-art__signals i:nth-child(5) { animation-duration: 7.2s; animation-delay: -1.8s; }
.about-hero-art__signals i:nth-child(6) { animation-duration: 4.4s; animation-delay: -2.9s; }
.about-hero-art__signals i:nth-child(7) { animation-duration: 6.8s; animation-delay: -4.2s; }
.about-hero-art__signals i:nth-child(8) { animation-duration: 5.3s; animation-delay: -1.1s; }

/* Selected Work architecture: sparse packets and system health signals. */
@keyframes work-node-online {
  0%, 100% { opacity: 0.28; transform: scale(0.78); }
  50% { opacity: 0.9; transform: scale(1.12); }
}
@keyframes work-bit-state {
  0%, 18%, 100% { opacity: 0.12; }
  42%, 70% { opacity: 0.86; }
}
.work-bg__status {
  transform-box: fill-box;
  transform-origin: center;
  animation: work-node-online 3.9s ease-in-out infinite;
}
.work-bg__status--late { animation-duration: 4.8s; animation-delay: -2.1s; }
.work-bg__bit { animation: work-bit-state 4.3s steps(1, end) infinite; }
.work-bg__bit--two { animation-duration: 6.1s; animation-delay: -3.2s; }
.work-bg__bit--three { animation-duration: 5.2s; animation-delay: -1.7s; }

/* Preloader */
@keyframes preloader-out {
  to { transform: translateY(-100%); }
}
.preloader.is-leaving { animation: preloader-out 0.6s cubic-bezier(0.76, 0, 0.24, 1) forwards; }

/* Mobile menu staggered links */
@keyframes menu-link-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.mobile-menu .m-link { animation: menu-link-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.mobile-menu .m-link:nth-child(1) { animation-delay: 0.05s; }
.mobile-menu .m-link:nth-child(2) { animation-delay: 0.1s; }
.mobile-menu .m-link:nth-child(3) { animation-delay: 0.15s; }
.mobile-menu .m-link:nth-child(4) { animation-delay: 0.2s; }
.mobile-menu .m-link:nth-child(5) { animation-delay: 0.25s; }
.mobile-menu .m-link:nth-child(6) { animation-delay: 0.3s; }

/* Project architecture flows: a subtle left-to-right data progression. */
@keyframes flow-step {
  0%, 18% {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(229, 255, 61, 0.16), 0 0 22px rgba(229, 255, 61, 0.12);
    transform: translateY(-3px);
  }
  28%, 100% {
    border-color: var(--line-strong);
    box-shadow: none;
    transform: translateY(0);
  }
}
@keyframes flow-status {
  0%, 18% { opacity: 1; transform: scale(1); }
  28%, 100% { opacity: 0; transform: scale(0.55); }
}
@keyframes flow-arrow {
  0%, 18% { color: var(--accent); opacity: 1; transform: translate(2px, -50%); }
  28%, 100% { color: var(--blue); opacity: 0.4; transform: translate(0, -50%); }
}
.proj-flow__node { animation: flow-step 8s ease-in-out infinite; }
.proj-flow__node::before {
  content: "";
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0.55rem rgba(229, 255, 61, 0.7);
  animation: flow-status 8s ease-in-out infinite;
}
.proj-flow__node:nth-child(2), .proj-flow__node:nth-child(2)::before { animation-delay: 2s; }
.proj-flow__node:nth-child(3), .proj-flow__node:nth-child(3)::before { animation-delay: 4s; }
.proj-flow__node:nth-child(4), .proj-flow__node:nth-child(4)::before { animation-delay: 6s; }
.proj-flow__arrow { animation: flow-arrow 8s ease-in-out infinite; }
.proj-flow__node:nth-child(2) .proj-flow__arrow { animation-delay: 2s; }
.proj-flow__node:nth-child(3) .proj-flow__arrow { animation-delay: 4s; }

/* Magnetic buttons get a soft spring back via transform transition */
.magnetic { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }

/* ---------- Reduced motion: content stays, motion goes ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js-motion .reveal,
  .js-motion .reveal-line { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none; }
  .about-visual__hand,
  .about-visual__cursor,
  .about-visual__code-lines,
  .about-visual__status,
  .about-visual__cable-pulse,
  .about-visual__pixel,
  .about-hero-art,
  .about-hero-art__layer img,
  .about-hero-art__scan,
  .about-hero-art__signals i,
  .work-bg__packet,
  .work-bg__status,
  .work-bg__trace,
  .work-bg__bit { animation: none !important; }
  .work-bg__packet { display: none !important; }
  .cursor-dot { display: none !important; }
}