/* Motion + Animation Primitives */

@property --layer-float-x-a {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --layer-float-x-b {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --layer-float-y-a {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --layer-float-y-b {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --layer-dangle-rotate {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --layer-float-rotate-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --layer-float-rotate-b {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --layer-entry-drop-y {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --layer-entry-rotate {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --layer-entry-scale {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

@property --layer-entry-opacity {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

@property --layer-entry-blur {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@keyframes sample-visual-dangle {
  0% {
    --layer-dangle-rotate: -1.4deg;
  }

  50% {
    --layer-dangle-rotate: 1.4deg;
  }

  100% {
    --layer-dangle-rotate: -1.4deg;
  }
}

@keyframes hero-slogan-reveal {
  0% {
    opacity: 0;
    color: var(--accent);
  }

  23% {
    opacity: 1;
    color: var(--accent);
  }

  100% {
    opacity: 1;
    color: var(--text);
  }
}

@keyframes hero-subtitle-reveal {
  0% {
    opacity: 0;
    transform: translateY(0.3rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sample-visual-enter-fall-down {
  0% {
    --layer-entry-drop-y: calc(-100svh - 140%);
  }

  78% {
    --layer-entry-drop-y: 0%;
  }

  89% {
    --layer-entry-drop-y: -2.8%;
  }

  100% {
    --layer-entry-drop-y: 0%;
  }
}

@keyframes sample-visual-enter-rise {
  0% {
    --layer-entry-drop-y: calc(18svh + 120%);
  }

  100% {
    --layer-entry-drop-y: 0%;
  }
}

@keyframes sample-visual-enter-zoom-in {
  0% {
    --layer-entry-scale: 4.2;
    --layer-entry-opacity: 0;
    --layer-entry-blur: 26px;
  }

  35% {
    --layer-entry-opacity: 1;
  }

  68% {
    --layer-entry-blur: 2.5px;
  }

  100% {
    --layer-entry-scale: 1;
    --layer-entry-opacity: 1;
    --layer-entry-blur: 0px;
  }
}

@keyframes sample-visual-enter-zoom-out {
  0% {
    --layer-entry-scale: 0.12;
    --layer-entry-opacity: 0;
  }

  28% {
    --layer-entry-opacity: 1;
  }

  72% {
    --layer-entry-scale: 1.1;
  }

  100% {
    --layer-entry-scale: 1;
    --layer-entry-opacity: 1;
  }
}

@keyframes sample-visual-enter-angle-clockwise {
  0% {
    --layer-entry-rotate: -90deg;
  }

  100% {
    --layer-entry-rotate: 0deg;
  }
}

@keyframes sample-visual-enter-angle-counterclockwise {
  0% {
    --layer-entry-rotate: 90deg;
  }

  100% {
    --layer-entry-rotate: 0deg;
  }
}

@keyframes sample-visual-float-x-primary {
  0% {
    --layer-float-x-a: -1.2%;
  }

  100% {
    --layer-float-x-a: 1.25%;
  }
}

@keyframes sample-visual-float-x-secondary {
  0% {
    --layer-float-x-b: -0.48%;
  }

  100% {
    --layer-float-x-b: 0.52%;
  }
}

@keyframes sample-visual-float-y-primary {
  0% {
    --layer-float-y-a: -1.1%;
  }

  100% {
    --layer-float-y-a: 1.15%;
  }
}

@keyframes sample-visual-float-y-secondary {
  0% {
    --layer-float-y-b: 0.44%;
  }

  100% {
    --layer-float-y-b: -0.42%;
  }
}

@keyframes sample-visual-float-rotate-primary {
  0% {
    --layer-float-rotate-a: -0.52deg;
  }

  100% {
    --layer-float-rotate-a: 0.58deg;
  }
}

@keyframes sample-visual-float-rotate-secondary {
  0% {
    --layer-float-rotate-b: 0.18deg;
  }

  100% {
    --layer-float-rotate-b: -0.16deg;
  }
}