:root {
  --hero-stagger-duration: 800ms;
  --hero-stagger-distance: 12px;
  --hero-stagger-stagger: 80ms;
  --hero-stagger-blur: 3px;
  --hero-stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes hero-stagger-reveal {
  from {
    opacity: 0;
    transform: translateY(var(--hero-stagger-distance));
    filter: blur(var(--hero-stagger-blur));
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@property --nav-float-progress {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --footer-reveal-progress {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@keyframes floating-nav {
  from {
    background-color: color-mix(in oklch, var(--color-white) 80%, transparent);

    @variant dark {
      background-color: color-mix(in oklch, var(--color-neutral-950) 80%, transparent);
    }
  }
  to {
    background-color: transparent;
  }
}

@keyframes floating-nav-bar {
  from {
    --nav-float-progress: 0;
  }
  to {
    --nav-float-progress: 1;
  }
}

@keyframes footer-reveal {
  from {
    --footer-reveal-progress: 0;
  }
  to {
    --footer-reveal-progress: 1;
  }
}

@utility hero-title-word {
  @apply inline-block whitespace-pre;

  @variant motion-safe {
    animation-name: hero-stagger-reveal;
    animation-duration: var(--hero-stagger-duration);
    animation-timing-function: var(--hero-stagger-ease);
    animation-fill-mode: both;
    animation-delay: calc(var(--hero-stagger-index, 0) * var(--hero-stagger-stagger));
    will-change: transform, opacity, filter;
  }
}

@utility hero-stagger-item {
  @variant motion-safe {
    animation-name: hero-stagger-reveal;
    animation-duration: var(--hero-stagger-duration);
    animation-timing-function: var(--hero-stagger-ease);
    animation-fill-mode: both;
    animation-delay: calc(var(--enter-delay, 0) * 1ms);
    will-change: transform, opacity, filter;
  }
}

@utility floating-nav {
  @variant motion-safe {
    animation-name: floating-nav;
    animation-duration: 1ms;
    animation-timeline: scroll();
    animation-range: 0 80px;
    animation-fill-mode: both;
    animation-timing-function: linear;
  }
}

@utility floating-nav-bar {
  @variant motion-safe {
    --nav-float-progress: 0;
    animation-name: floating-nav-bar;
    animation-duration: 1ms;
    animation-timeline: scroll();
    animation-range: 0 150px;
    animation-fill-mode: both;
    animation-timing-function: linear;
    transform: translateY(calc(var(--nav-float-progress) * 10px));
    border-radius: calc(var(--nav-float-progress) * 1.25rem);
    background-color: color-mix(in oklch, var(--color-white) calc(var(--nav-float-progress) * 80%), transparent);
    box-shadow:
      0 1px 2px color-mix(in oklch, var(--color-black) calc(var(--nav-float-progress) * 4%), transparent),
      0 10px 28px -14px color-mix(in oklch, var(--color-black) calc(var(--nav-float-progress) * 14%), transparent),
      0 0 0 1px color-mix(in oklch, var(--color-black) calc(var(--nav-float-progress) * 5%), transparent);
    will-change: transform, border-radius, background-color, box-shadow;

    @variant dark {
      background-color: color-mix(in oklch, var(--color-neutral-900) calc(var(--nav-float-progress) * 80%), transparent);
      box-shadow:
        0 1px 2px color-mix(in oklch, var(--color-black) calc(var(--nav-float-progress) * 40%), transparent),
        0 10px 28px -14px color-mix(in oklch, var(--color-black) calc(var(--nav-float-progress) * 55%), transparent),
        0 0 0 1px color-mix(in oklch, var(--color-white) calc(var(--nav-float-progress) * 6%), transparent);
    }
  }
}

@utility footer-reveal {
  @variant motion-safe {
    --footer-reveal-progress: 0;
    animation-name: footer-reveal;
    animation-duration: 1ms;
    animation-timeline: view();
    animation-range: entry 0% entry 95%;
    animation-fill-mode: both;
    animation-timing-function: linear;
    transform-origin: center top;
    opacity: var(--footer-reveal-progress);
    transform: scale(calc(0.94 + var(--footer-reveal-progress) * 0.06));
    filter: blur(calc((1 - var(--footer-reveal-progress)) * 10px));
    will-change: opacity, transform, filter;
  }
}