/* ==========================================================================
   Animation — keyframes, scroll-driven reveals, gateway motion
   All motion is transform/opacity only unless noted; everything degrades to
   a static, fully visible state without @supports(animation-timeline).
   ========================================================================== */

@layer motion {
  @property --count {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
  }

  @keyframes progress-scale {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }

  @keyframes marquee-scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }

  @keyframes menu-link-in {
    from {
      opacity: 0;
      transform: translateY(0.75rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fade-up {
    from {
      opacity: 0;
      transform: translateY(1.25rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes line-reveal {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  /* Static fallback: the counter shows the real value immediately.
     Supporting browsers override this below to animate 0 -> target. */
  .proof-tile__number[data-count-to] {
    counter-reset: count var(--count-to, 0);
  }

  .proof-tile__number[data-count-to]::after {
    content: counter(count);
  }

  @keyframes count-up {
    from {
      --count: 0;
    }
    to {
      --count: var(--count-to, 0);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    /* ---- Hero load-in stagger ---- */
    .reveal-line {
      overflow: hidden;
      display: block;
    }

    .reveal-line > span {
      display: inline-block;
      animation: line-reveal var(--dur-reveal) var(--ease-standard) both;
      animation-delay: calc(var(--reveal-index, 0) * 90ms + 120ms);
    }

    /* Counters are intentionally static: the number shows its real value at all
       times (a scroll-linked count-up made "4" flicker through 3, 2, 1). */
  }

  /* Static fallback when reduced motion is requested: content is already
     visible by default (opacity:1 base state lives on the elements, the
     animation only adds motion), so no extra rule is required here. */

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .scroll-reveal {
        opacity: 0;
        transform: translateY(1.5rem);
        animation: fade-up var(--dur-reveal) var(--ease-standard) both;
        animation-timeline: view();
        animation-range: entry 0% cover 25%;
      }

      .scroll-reveal-group > * {
        opacity: 0;
        transform: translateY(1.5rem);
        animation: fade-up var(--dur-reveal) var(--ease-standard) both;
        animation-timeline: view();
        animation-range: entry 0% cover 25%;
      }

      .scroll-reveal-group > *:nth-child(1) {
        animation-delay: 0ms;
      }
      .scroll-reveal-group > *:nth-child(2) {
        animation-delay: 90ms;
      }
      .scroll-reveal-group > *:nth-child(3) {
        animation-delay: 180ms;
      }
      .scroll-reveal-group > *:nth-child(4) {
        animation-delay: 270ms;
      }
    }
  }

  @supports not (animation-timeline: view()) {
    .scroll-reveal,
    .scroll-reveal-group > * {
      opacity: 1;
      transform: none;
    }
  }

  /* ---- Timeline connector draw (Moving process / Consultancy approach) ---- */
  .timeline::before {
    transform: scaleY(1);
  }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .timeline::before {
        transform: scaleY(0);
        animation: timeline-draw linear both;
        animation-timeline: view();
        animation-range: entry 10% cover 65%;
      }
    }
  }

  @keyframes timeline-draw {
    to {
      transform: scaleY(1);
    }
  }

  .timeline__marker {
    opacity: 1;
    transform: none;
  }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .timeline__marker {
        opacity: 0;
        transform: scale(0.6);
        animation: marker-pop var(--dur-reveal) var(--ease-standard) both;
        animation-timeline: view();
        animation-range: entry 0% cover 20%;
      }
    }
  }

  @keyframes marker-pop {
    to {
      opacity: 1;
      transform: none;
    }
  }

  /* ---- Thank-you check draw ---- */
  .thanks-check svg {
    stroke-dasharray: 48;
    stroke-dashoffset: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .thanks-check svg {
      stroke-dashoffset: 48;
      animation: check-draw 640ms var(--ease-standard) 200ms both;
    }
  }

  @keyframes check-draw {
    to {
      stroke-dashoffset: 0;
    }
  }

  /* ---- Sticky header shrink ----
     Background is always solid — at every scroll position, in every browser —
     so the header never blends into whatever scrolls underneath it. Only the
     blur/shadow/padding shrink is a scroll-driven enhancement layered on top
     where the browser supports it. */
  .site-header {
    background: var(--surface-header, var(--white));
    box-shadow: var(--shadow-sm);
    transition: background var(--dur-ui) var(--ease-standard), box-shadow var(--dur-ui) var(--ease-standard),
      padding-block var(--dur-ui) var(--ease-standard);
  }

  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      .site-header {
        animation: header-shrink var(--dur-ui) linear both;
        animation-timeline: scroll(root);
        animation-range: 0 220px;
      }
    }
  }

  @keyframes header-shrink {
    from {
      background: var(--surface-header, var(--white));
      box-shadow: var(--shadow-sm);
      backdrop-filter: none;
    }
    to {
      background: color-mix(in oklab, var(--surface-header, var(--white)) 92%, transparent);
      backdrop-filter: blur(14px) saturate(1.4);
      box-shadow: var(--shadow-sm);
      padding-block: var(--space-1);
    }
  }
}

@media print {
  .site-header,
  .scroll-progress,
  .mobile-menu,
  .marquee {
    display: none !important;
  }
}