/*
 * Animations — @keyframes and scroll-reveal state classes.
 *
 * .reveal + .d1–.d6  : hero entrance (fires on page load, animation)
 * .sr + .sr.in-view  : scroll reveal (fires via IntersectionObserver, transition)
 * .sr-d1–.sr-d6      : staggered transition-delay classes
 *
 * Octopus keyframes (centerFloat, centerPulse, rotateRing, nodeFloat,
 * mobileCF, mobileNF) kept here so expertise.css can reference them.
 *
 * All blocks wrapped in prefers-reduced-motion so motion is opt-in.
 * Depends on: variables.css
 *
 * @package Vinelec
 */

/* =================================================================
   HERO ENTRANCE — animation (one-shot on load)
   ================================================================= */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
  }

  .d1 { animation-delay: 0.05s; }
  .d2 { animation-delay: 0.13s; }
  .d3 { animation-delay: 0.21s; }
  .d4 { animation-delay: 0.29s; }
  .d5 { animation-delay: 0.37s; }
  .d6 { animation-delay: 0.50s; }

  @keyframes rise {
    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* =================================================================
   SCROLL REVEAL — transition (triggered by IntersectionObserver)
   ================================================================= */

@media (prefers-reduced-motion: no-preference) {
  .sr {
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity 0.65s cubic-bezier(0.2, 0.7, 0.3, 1),
      transform 0.65s cubic-bezier(0.2, 0.7, 0.3, 1);
  }

  .sr.in-view {
    opacity: 1;
    transform: none;
  }

  .sr-d1 { transition-delay: 0.05s; }
  .sr-d2 { transition-delay: 0.13s; }
  .sr-d3 { transition-delay: 0.21s; }
  .sr-d4 { transition-delay: 0.29s; }
  .sr-d5 { transition-delay: 0.37s; }
  .sr-d6 { transition-delay: 0.45s; }
}

/* =================================================================
   OCTOPUS — CENTER NODE
   ================================================================= */

@keyframes centerFloat {
  0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }
  25%       { transform: translate(-50%, -50%) translate(8px, -7px); }
  50%       { transform: translate(-50%, -50%) translate(-6px, 8px); }
  75%       { transform: translate(-50%, -50%) translate(5px, 5px); }
}

@keyframes centerPulse {
  0%, 100% {
    box-shadow:
      0 0 22px #009dff,
      0 0 60px rgba(0, 157, 255, 0.85),
      0 0 120px rgba(0, 157, 255, 0.25),
      inset 0 0 40px rgba(0, 157, 255, 0.5);
  }
  50% {
    box-shadow:
      0 0 38px #00d9ff,
      0 0 90px rgba(0, 217, 255, 1),
      0 0 160px rgba(0, 217, 255, 0.35),
      inset 0 0 50px rgba(0, 217, 255, 0.72);
  }
}

/* =================================================================
   OCTOPUS — SERVICE NODES
   ================================================================= */

@keyframes rotateRing {
  to { transform: rotate(360deg); }
}

@keyframes nodeFloat {
  0%, 100% { transform: translate(0, 0); }
  25%       { transform: translate(7px, -6px); }
  50%       { transform: translate(-5px, 7px); }
  75%       { transform: translate(4px, 4px); }
}

/* =================================================================
   OCTOPUS — MOBILE VARIANTS (inside @media, defined here for context)
   ================================================================= */

@keyframes mobileCF {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

@keyframes mobileNF {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}