/* =========================================================
   AFG IT — ANIMATIONS
   ========================================================= */


/* =========================================================
   1. INITIAL REVEAL STATES
   ========================================================= */

   .reveal-item {
    opacity: 0;
    transform: translateY(34px);
    transition:
      opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  
  .reveal-item.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  .hero-line.reveal-item {
    transform: translateY(75px);
  }
  
  .hero-line.reveal-item.is-visible {
    transform: translateY(0);
  }
  
  .reveal-group .reveal-item:nth-child(1) {
    transition-delay: 80ms;
  }
  
  .reveal-group .reveal-item:nth-child(2) {
    transition-delay: 150ms;
  }
  
  .reveal-group .reveal-item:nth-child(3) {
    transition-delay: 220ms;
  }
  
  .reveal-group .reveal-item:nth-child(4) {
    transition-delay: 290ms;
  }
  
  
  /* =========================================================
     2. HERO TITLE MASK EFFECT
     ========================================================= */
  
  .hero-title {
    overflow: hidden;
  }
  
  .hero-line {
    transform-origin: left center;
    will-change: transform, opacity;
  }
  
  
  /* =========================================================
     3. STATUS PANEL INDICATORS
     ========================================================= */
  
  .status-dot {
    position: relative;
  }
  
  .status-dot::after {
    position: absolute;
    inset: -5px;
    border: 1px solid var(--color-orange);
    border-radius: 50%;
    content: "";
    opacity: 0;
    animation: statusPulse 2.4s ease-out infinite;
  }
  
  .status-row:nth-child(2) .status-dot::after {
    animation-delay: 0.35s;
  }
  
  .status-row:nth-child(3) .status-dot::after {
    animation-delay: 0.7s;
  }
  
  .status-row:nth-child(4) .status-dot::after {
    animation-delay: 1.05s;
  }
  
  @keyframes statusPulse {
    0% {
      opacity: 0.45;
      transform: scale(0.65);
    }
  
    70% {
      opacity: 0;
      transform: scale(1.75);
    }
  
    100% {
      opacity: 0;
      transform: scale(1.75);
    }
  }
  
  .status-panel-icon span {
    animation: statusBars 1.9s ease-in-out infinite;
  }
  
  .status-panel-icon span:nth-child(2) {
    animation-delay: 0.22s;
  }
  
  .status-panel-icon span:nth-child(3) {
    animation-delay: 0.44s;
  }
  
  @keyframes statusBars {
    0%,
    100% {
      opacity: 0.35;
    }
  
    50% {
      opacity: 1;
    }
  }
  
  
  /* =========================================================
     4. TICKER
     ========================================================= */
  
  .ticker-track {
    animation: tickerMove 28s linear infinite;
    will-change: transform;
  }
  
  .ticker:hover .ticker-track {
    animation-play-state: paused;
  }
  
  @keyframes tickerMove {
    from {
      transform: translateX(0);
    }
  
    to {
      transform: translateX(-50%);
    }
  }
  
  
  /* =========================================================
     5. SCROLL REVEAL
     ========================================================= */
  
  [data-reveal] {
    opacity: 0;
    transform: translateY(42px);
    transition:
      opacity 760ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  
  [data-reveal="left"] {
    transform: translateX(-42px);
  }
  
  [data-reveal="right"] {
    transform: translateX(42px);
  }
  
  [data-reveal].is-visible {
    opacity: 1;
    transform: translate(0, 0);
  }
  
  
  /* =========================================================
     6. SERVICE HOVER DETAILS
     ========================================================= */
  
  .service-number {
    transition:
      color var(--transition-medium),
      transform var(--transition-medium);
  }
  
  .service-item:hover .service-number {
    color: var(--color-orange);
    transform: scale(1.15);
  }
  
  .service-content {
    transition: transform var(--transition-medium);
  }
  
  .service-item:hover .service-content {
    transform: translateX(8px);
  }
  
  
  /* =========================================================
     7. PROCESS CARDS
     ========================================================= */
  
  .process-card {
    transform: translateY(0);
    transition:
      transform var(--transition-medium),
      background-color var(--transition-medium);
  }
  
  .process-card:hover {
    transform: translateY(-6px);
  }
  
  .process-card-line::after {
    animation: processPoint 2.8s ease-in-out infinite;
  }
  
  .process-card:nth-child(2) .process-card-line::after {
    animation-delay: 0.3s;
  }
  
  .process-card:nth-child(3) .process-card-line::after {
    animation-delay: 0.6s;
  }
  
  .process-card:nth-child(4) .process-card-line::after {
    animation-delay: 0.9s;
  }
  
  @keyframes processPoint {
    0%,
    100% {
      transform: scale(1);
    }
  
    50% {
      transform: scale(1.45);
    }
  }
  
  
  /* =========================================================
     8. CAPABILITIES BOARD
     ========================================================= */
  
  .capabilities-lines path {
    stroke-dasharray: 8 8;
    animation: lineFlow 12s linear infinite;
  }
  
  @keyframes lineFlow {
    to {
      stroke-dashoffset: -160;
    }
  }
  
  .board-center-marker {
    animation: centerFloat 5s ease-in-out infinite;
  }
  
  @keyframes centerFloat {
    0%,
    100% {
      transform: translate(-50%, -50%);
    }
  
    50% {
      transform: translate(-50%, calc(-50% - 8px));
    }
  }
  
  .board-center-marker::after {
    position: absolute;
    inset: -12px;
    border: 1px solid rgba(255, 90, 31, 0.22);
    border-radius: 50%;
    content: "";
    animation: centerRing 3.2s ease-out infinite;
  }
  
  @keyframes centerRing {
    0% {
      opacity: 0.55;
      transform: scale(0.82);
    }
  
    80% {
      opacity: 0;
      transform: scale(1.45);
    }
  
    100% {
      opacity: 0;
      transform: scale(1.45);
    }
  }
  
  
  /* =========================================================
     9. ABOUT VISUAL
     ========================================================= */
  
  .about-circle {
    animation: rotateSlow 24s linear infinite;
  }
  
  .about-circle span {
    animation: rotateReverse 12s linear infinite;
  }
  
  @keyframes rotateSlow {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }
  
    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
  
  @keyframes rotateReverse {
    from {
      transform: translate(-50%, -50%) rotate(45deg);
    }
  
    to {
      transform: translate(-50%, -50%) rotate(-315deg);
    }
  }
  
  
  /* =========================================================
     10. FORM MODAL
     ========================================================= */
  
  .form-modal {
    animation: modalFadeIn 220ms ease forwards;
  }
  
  .form-modal-box {
    animation: modalBoxIn 380ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  
  @keyframes modalFadeIn {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  
  @keyframes modalBoxIn {
    from {
      opacity: 0;
      transform: translateY(28px) scale(0.97);
    }
  
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  
  
  /* =========================================================
     11. PARALLAX DECORATIONS
     ========================================================= */
  
  .hero-decoration,
  .status-panel,
  .about-circle,
  .board-center-marker {
    will-change: transform;
  }
  
  
  /* =========================================================
     12. REDUCED MOTION
     ========================================================= */
  
  @media (prefers-reduced-motion: reduce) {
    .ticker-track,
    .status-dot::after,
    .status-panel-icon span,
    .process-card-line::after,
    .capabilities-lines path,
    .board-center-marker,
    .board-center-marker::after,
    .about-circle,
    .about-circle span {
      animation: none !important;
    }
  
    .reveal-item,
    [data-reveal] {
      opacity: 1;
      transform: none;
    }
  }