:root {
  --anim-duration: 700ms;
  --anim-duration-fast: 400ms;
  --anim-stagger: 80ms;
  --anim-distance: 32px;
  --anim-blur: 10px;

  --anim-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --anim-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --anim-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --anim-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  --anim-hover-duration: 260ms;
  --anim-hover-lift: -6px;
  --anim-hover-scale: 1.03;
  --anim-hover-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.28);
}

[data-anim-ease="default"] { --anim-e: var(--anim-ease); }
[data-anim-ease="out"]     { --anim-e: var(--anim-ease-out); }
[data-anim-ease="in-out"]  { --anim-e: var(--anim-ease-in-out); }
[data-anim-ease="spring"]  { --anim-e: var(--anim-ease-spring); }
[data-anim-ease="linear"]  { --anim-e: linear; }

html.anim-ready [data-anim] {
  opacity: var(--anim-o, 0);
  transform:
    perspective(var(--anim-persp, 1200px))
    translate3d(var(--anim-tx, 0), var(--anim-ty, 0), 0)
    rotateX(var(--anim-rx, 0deg))
    rotate(var(--anim-rot, 0deg))
    scale(var(--anim-sc, 1))
    scaleX(var(--anim-scx, 1));
  filter: blur(var(--anim-bl, 0px));
  clip-path: var(--anim-clip, none);
  transition-property: opacity, transform, filter, clip-path;
  transition-duration: var(--anim-d, var(--anim-duration));
  transition-timing-function: var(--anim-e, var(--anim-ease));
  transition-delay: var(--anim-dl, 0ms);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

html.anim-ready [data-anim].is-inview {
  --anim-o: 1;
  --anim-tx: 0;
  --anim-ty: 0;
  --anim-rx: 0deg;
  --anim-rot: 0deg;
  --anim-sc: 1;
  --anim-scx: 1;
  --anim-bl: 0px;
}

html.anim-ready [data-anim].anim-done {
  will-change: auto;
}

[data-anim="fade"]      { }
[data-anim="fade-up"]   { --anim-ty: var(--anim-distance); }
[data-anim="fade-down"] { --anim-ty: calc(var(--anim-distance) * -1); }
[data-anim="fade-left"] { --anim-tx: calc(var(--anim-distance) * -1); }
[data-anim="fade-right"]{ --anim-tx: var(--anim-distance); }
[data-anim="zoom-in"]   { --anim-sc: 0.92; }
[data-anim="zoom-out"]  { --anim-sc: 1.08; }
[data-anim="blur-in"]   { --anim-bl: var(--anim-blur); }
[data-anim="rise"]      { --anim-ty: calc(var(--anim-distance) * 1.6); --anim-bl: var(--anim-blur); }
[data-anim="rotate-in"] { --anim-rot: -5deg; --anim-sc: 0.96; }
[data-anim="flip-up"]   { --anim-rx: 24deg; --anim-ty: calc(var(--anim-distance) * 0.5); transform-origin: 50% 100%; }

[data-anim="line-grow"] { --anim-o: 1; --anim-scx: 0; transform-origin: left center; }
[data-anim="line-grow"].is-inview { --anim-scx: 1; }

[data-anim^="mask"] { --anim-o: 1; }
[data-anim="mask-up"]    { --anim-clip: inset(0 0 105% 0); --anim-ty: 0.25em; }
[data-anim="mask-down"]  { --anim-clip: inset(105% 0 0 0); --anim-ty: -0.25em; }
[data-anim="mask-right"] { --anim-clip: inset(0 105% 0 0); }
[data-anim^="mask"].is-inview { --anim-clip: inset(0 0 0 0); }

[data-anim="none"] { --anim-o: 1; }

[data-split] { --anim-persp: 800px; }

.anim-split__l,
.anim-split__w {
  display: inline-block;
}
.anim-split__l { overflow: hidden; }
.anim-split__i {
  display: inline-block;
  white-space: pre-wrap;
  transform-origin: 50% 100%;
}

[data-hover] {
  transition:
    transform var(--anim-hover-duration) var(--anim-ease-out),
    box-shadow var(--anim-hover-duration) var(--anim-ease-out),
    opacity var(--anim-hover-duration) var(--anim-ease-out),
    filter var(--anim-hover-duration) var(--anim-ease-out),
    background-color var(--anim-hover-duration) var(--anim-ease-out),
    color var(--anim-hover-duration) var(--anim-ease-out),
    border-color var(--anim-hover-duration) var(--anim-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  [data-hover~="lift"]:hover,
  [data-hover~="lift"]:focus-visible {
    transform: translate3d(0, var(--anim-hover-lift), 0);
  }
  [data-hover~="grow"]:hover,
  [data-hover~="grow"]:focus-visible {
    transform: scale(var(--anim-hover-scale));
  }
  [data-hover~="shrink"]:hover,
  [data-hover~="shrink"]:focus-visible {
    transform: scale(0.97);
  }
  [data-hover~="tilt-slight"]:hover {
    transform: rotate(-1.2deg);
  }
  [data-hover~="shadow"]:hover,
  [data-hover~="shadow"]:focus-visible {
    box-shadow: var(--anim-hover-shadow);
  }
  [data-hover~="glow"]:hover,
  [data-hover~="glow"]:focus-visible {
    box-shadow: 0 0 0 1px currentColor, 0 0 24px -6px currentColor;
  }
  [data-hover~="brighten"]:hover { filter: brightness(1.08); }
  [data-hover~="fade"]:hover     { opacity: 0.7; }

  [data-hover~="zoom-img"] { overflow: hidden; }
  [data-hover~="zoom-img"] img {
    transition: transform 600ms var(--anim-ease-out);
    will-change: transform;
  }
  [data-hover~="zoom-img"]:hover img { transform: scale(1.06); }

  [data-hover~="arrow"] [data-hover-arrow] {
    transition: transform var(--anim-hover-duration) var(--anim-ease-out);
  }
  [data-hover~="arrow"]:hover [data-hover-arrow],
  [data-hover~="arrow"]:focus-visible [data-hover-arrow] {
    transform: translateX(4px);
  }

  [data-hover~="shine"] { position: relative; overflow: hidden; }
  [data-hover~="shine"]::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.28), transparent);
    transform: translateX(0) skewX(-16deg);
    transition: transform 700ms var(--anim-ease-out);
    pointer-events: none;
  }
  [data-hover~="shine"]:hover::after { transform: translateX(420%) skewX(-16deg); }
}

[data-hover~="underline"] {
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 320ms var(--anim-ease-out);
}
[data-hover~="underline"]:hover,
[data-hover~="underline"]:focus-visible { background-size: 100% 1px; }

[data-hover]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

[data-scroll-progress] { --anim-progress: 0; }

[data-progress-bar] {
  --anim-progress: 0;
  transform-origin: left center;
  transform: scaleX(var(--anim-progress));
  will-change: transform;
}

[data-parallax],
[data-magnetic],
[data-tilt] { will-change: transform; }
[data-magnetic] { transition: transform 500ms var(--anim-ease-out); }
[data-magnetic].is-tracking { transition: transform 120ms linear; }
[data-tilt] { transform-style: preserve-3d; }

[data-marquee] {
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
[data-marquee] .anim-marquee__track {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--marquee-gap, 3rem);
  padding-right: var(--marquee-gap, 3rem);
  animation: anim-marquee var(--marquee-duration, 30s) linear infinite;
  will-change: transform;
}
[data-marquee][data-marquee-reverse] .anim-marquee__track { animation-direction: reverse; }
[data-marquee][data-marquee-pause]:hover .anim-marquee__track { animation-play-state: paused; }
@keyframes anim-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}

[data-header] {
  transition: transform 420ms var(--anim-ease-out), background-color 300ms linear,
              box-shadow 300ms linear, padding 300ms var(--anim-ease-out);
  will-change: transform;
}
[data-header].is-hidden { transform: translate3d(0, -100%, 0); }
[data-header].is-scrolled { box-shadow: 0 6px 24px -18px rgb(0 0 0 / 0.5); }

[data-anim="draw"] { --anim-o: 1; }
[data-anim="draw"] path,
[data-anim="draw"] line,
[data-anim="draw"] circle,
[data-anim="draw"] polyline {
  stroke-dasharray: var(--anim-draw-len, 1000);
  stroke-dashoffset: var(--anim-draw-len, 1000);
  transition: stroke-dashoffset var(--anim-d, 1400ms) var(--anim-e, var(--anim-ease-in-out))
              var(--anim-dl, 0ms);
}
[data-anim="draw"].is-inview path,
[data-anim="draw"].is-inview line,
[data-anim="draw"].is-inview circle,
[data-anim="draw"].is-inview polyline { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  html.anim-ready [data-anim] {
    --anim-tx: 0 !important;
    --anim-ty: 0 !important;
    --anim-rx: 0deg !important;
    --anim-rot: 0deg !important;
    --anim-sc: 1 !important;
    --anim-scx: 1 !important;
    --anim-bl: 0px !important;
    --anim-clip: none !important;
    --anim-d: 260ms !important;
    --anim-dl: 0ms !important;
    transition-property: opacity;
  }
  html.anim-ready [data-anim="draw"] path,
  html.anim-ready [data-anim="draw"] line,
  html.anim-ready [data-anim="draw"] circle,
  html.anim-ready [data-anim="draw"] polyline {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transition: none;
  }
  [data-hover]:hover,
  [data-hover]:focus-visible { transform: none !important; }
  [data-hover~="zoom-img"]:hover img { transform: none !important; }
  [data-hover~="shine"]::after { display: none; }
  [data-marquee] .anim-marquee__track { animation: none !important; }
  [data-header] { transition: none; }
  [data-header].is-hidden { transform: none; }
  * { scroll-behavior: auto !important; }
}

@media print {
  html.anim-ready [data-anim] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}