/*! formstone v2.3.0 [checkpoint.scss] 2026-10-14 | GPL-3.0 License | formstone.dev */
// Variables

$fs-checkpoint-duration: 0.5s !default;
$fs-checkpoint-distance: 50px !default;
$fs-checkpoint-perspective: 3000px !default;
$fs-checkpoint-rotate: 90deg !default;
$fs-checkpoint-scale-in: 0.5 !default;
$fs-checkpoint-scale-out: 1.25 !default;

/**
 * @module checkpoint
 * @description Animate elements on scroll
 */
/**
 * Default transition duration for checkpoint animations
 * @type {time}
 * @default 0.5s
 */
/**
 * Default translate distance for fade and zoom animations
 * @type {length}
 * @default 50px
 */
/**
 * Perspective value for flip animations
 * @type {length}
 * @default 3000px
 */
/**
 * Rotation amount for flip animations
 * @type {angle}
 * @default 90deg
 */
/**
 * Scale amount for zoom-in animations
 * @type {number}
 * @default 0.5
 */
/**
 * Scale amount for zoom-out animations
 * @type {number}
 * @default 1.25
 */
/**
 * Primary checkpoint component
 * Enables scroll-based animations on elements
 *
 * @selector .fs-checkpoint
 * @modifier .fs-checkpoint-active - Applied when animation is activated
 * @example
 *   <div class="fs-checkpoint" data-checkpoint-animation="fade-in">
 *     Content
 *   </div>
 */
.fs-checkpoint {
  /**
   * Transition duration for all animations
   * Overridable via custom property
   * @type {time}
   */
  --fs-checkpoint-duration: #{$fs-checkpoint-duration};
  /**
   * Translate distance for fade and zoom animations
   * @type {length}
   */
  --fs-checkpoint-distance: #{$fs-checkpoint-distance};
  /**
   * Perspective value for flip animations
   * @type {length}
   */
  --fs-checkpoint-perspective: #{$fs-checkpoint-perspective};
  /**
   * Rotation amount for flip animations
   * @type {angle}
   */
  --fs-checkpoint-rotate: #{$fs-checkpoint-rotate};
  /**
   * Scale amount for zoom-in animations
   * @type {number}
   */
  --fs-checkpoint-scale-in: #{$fs-checkpoint-scale-in};
  /**
   * Scale amount for zoom-out animations
   * @type {number}
   */
  --fs-checkpoint-scale-out: #{$fs-checkpoint-scale-out};
}

@media (prefers-reduced-motion) {
  .fs-checkpoint {
    --fs-checkpoint-duration: 0s;
  }
}

/**
 * Fade animations
 * Elements fade in from invisible state
 *
 * @animation fade-in - Fade in without movement
 * @animation fade-up - Fade in while moving up
 * @animation fade-down - Fade in while moving down
 * @animation fade-left - Fade in while moving from right to left
 * @animation fade-right - Fade in while moving from left to right
 * @example
 *   <div class="fs-checkpoint" data-checkpoint-animation="fade-up">
 *     Content
 *   </div>
 */
.fs-checkpoint[data-checkpoint-animation="fade-in"],
.fs-checkpoint[data-checkpoint-animation="fade-up"],
.fs-checkpoint[data-checkpoint-animation="fade-down"],
.fs-checkpoint[data-checkpoint-animation="fade-left"],
.fs-checkpoint[data-checkpoint-animation="fade-right"] {
  opacity: 0;
  transition: opacity var(--fs-checkpoint-duration) linear, transform var(--fs-checkpoint-duration) ease;
}

.fs-checkpoint[data-checkpoint-animation="fade-in"].fs-checkpoint-active,
.fs-checkpoint[data-checkpoint-animation="fade-up"].fs-checkpoint-active,
.fs-checkpoint[data-checkpoint-animation="fade-down"].fs-checkpoint-active,
.fs-checkpoint[data-checkpoint-animation="fade-left"].fs-checkpoint-active,
.fs-checkpoint[data-checkpoint-animation="fade-right"].fs-checkpoint-active {
  opacity: 1;
}

.fs-checkpoint[data-checkpoint-animation="fade-up"] {
  transform: translateY(var(--fs-checkpoint-distance));
}

.fs-checkpoint[data-checkpoint-animation="fade-down"] {
  transform: translateY(calc(var(--fs-checkpoint-distance) * -1));
}

.fs-checkpoint[data-checkpoint-animation="fade-up"].fs-checkpoint-active,
.fs-checkpoint[data-checkpoint-animation="fade-down"].fs-checkpoint-active {
  transform: translateY(0);
}

.fs-checkpoint[data-checkpoint-animation="fade-left"] {
  transform: translateX(calc(var(--fs-checkpoint-distance) * -1));
}

.fs-checkpoint[data-checkpoint-animation="fade-right"] {
  transform: translateX(var(--fs-checkpoint-distance));
}

.fs-checkpoint[data-checkpoint-animation="fade-left"].fs-checkpoint-active,
.fs-checkpoint[data-checkpoint-animation="fade-right"].fs-checkpoint-active {
  transform: translateX(0);
}

/**
 * Zoom-in animations
 * Elements scale up from smaller size while fading in
 *
 * @animation zoom-in - Zoom in without movement
 * @animation zoom-in-up - Zoom in while moving up
 * @animation zoom-in-down - Zoom in while moving down
 * @animation zoom-in-left - Zoom in while moving from right to left
 * @animation zoom-in-right - Zoom in while moving from left to right
 * @example
 *   <div class="fs-checkpoint" data-checkpoint-animation="zoom-in-up">
 *     Content
 *   </div>
 */
.fs-checkpoint[data-checkpoint-animation="zoom-in"],
.fs-checkpoint[data-checkpoint-animation="zoom-in-up"],
.fs-checkpoint[data-checkpoint-animation="zoom-in-down"],
.fs-checkpoint[data-checkpoint-animation="zoom-in-left"],
.fs-checkpoint[data-checkpoint-animation="zoom-in-right"] {
  opacity: 0;
  transition: opacity var(--fs-checkpoint-duration) linear, transform var(--fs-checkpoint-duration) ease;
}

.fs-checkpoint[data-checkpoint-animation="zoom-in"].fs-checkpoint-active,
.fs-checkpoint[data-checkpoint-animation="zoom-in-up"].fs-checkpoint-active,
.fs-checkpoint[data-checkpoint-animation="zoom-in-down"].fs-checkpoint-active,
.fs-checkpoint[data-checkpoint-animation="zoom-in-left"].fs-checkpoint-active,
.fs-checkpoint[data-checkpoint-animation="zoom-in-right"].fs-checkpoint-active {
  opacity: 1;
}

.fs-checkpoint[data-checkpoint-animation="zoom-in"] {
  transform: translateY(0) scale(var(--fs-checkpoint-scale-in));
}

.fs-checkpoint[data-checkpoint-animation="zoom-in-up"] {
  transform: translateY(var(--fs-checkpoint-distance)) scale(var(--fs-checkpoint-scale-in));
}

.fs-checkpoint[data-checkpoint-animation="zoom-in-down"] {
  transform: translateY(calc(var(--fs-checkpoint-distance) * -1)) scale(var(--fs-checkpoint-scale-in));
}

.fs-checkpoint[data-checkpoint-animation="zoom-in"].fs-checkpoint-active,
.fs-checkpoint[data-checkpoint-animation="zoom-in-up"].fs-checkpoint-active,
.fs-checkpoint[data-checkpoint-animation="zoom-in-down"].fs-checkpoint-active {
  transform: translateY(0) scale(1);
}

.fs-checkpoint[data-checkpoint-animation="zoom-in-left"] {
  transform: translateX(calc(var(--fs-checkpoint-distance) * -1)) scale(var(--fs-checkpoint-scale-in));
}

.fs-checkpoint[data-checkpoint-animation="zoom-in-right"] {
  transform: translateX(var(--fs-checkpoint-distance)) scale(var(--fs-checkpoint-scale-in));
}

.fs-checkpoint[data-checkpoint-animation="zoom-in-left"].fs-checkpoint-active,
.fs-checkpoint[data-checkpoint-animation="zoom-in-right"].fs-checkpoint-active {
  transform: translateX(0) scale(1);
}

/**
 * Zoom-out animations
 * Elements scale down from larger size while fading in
 *
 * @animation zoom-out - Zoom out without movement
 * @animation zoom-out-up - Zoom out while moving up
 * @animation zoom-out-down - Zoom out while moving down
 * @animation zoom-out-left - Zoom out while moving from right to left
 * @animation zoom-out-right - Zoom out while moving from left to right
 * @example
 *   <div class="fs-checkpoint" data-checkpoint-animation="zoom-out-up">
 *     Content
 *   </div>
 */
.fs-checkpoint[data-checkpoint-animation="zoom-out"],
.fs-checkpoint[data-checkpoint-animation="zoom-out-up"],
.fs-checkpoint[data-checkpoint-animation="zoom-out-down"],
.fs-checkpoint[data-checkpoint-animation="zoom-out-left"],
.fs-checkpoint[data-checkpoint-animation="zoom-out-right"] {
  opacity: 0;
  transition: opacity var(--fs-checkpoint-duration) linear, transform var(--fs-checkpoint-duration) ease;
}

.fs-checkpoint[data-checkpoint-animation="zoom-out"].fs-checkpoint-active,
.fs-checkpoint[data-checkpoint-animation="zoom-out-up"].fs-checkpoint-active,
.fs-checkpoint[data-checkpoint-animation="zoom-out-down"].fs-checkpoint-active,
.fs-checkpoint[data-checkpoint-animation="zoom-out-left"].fs-checkpoint-active,
.fs-checkpoint[data-checkpoint-animation="zoom-out-right"].fs-checkpoint-active {
  opacity: 1;
}

.fs-checkpoint[data-checkpoint-animation="zoom-out"] {
  transform: translateY(0) scale(var(--fs-checkpoint-scale-out));
}

.fs-checkpoint[data-checkpoint-animation="zoom-out-up"] {
  transform: translateY(var(--fs-checkpoint-distance)) scale(var(--fs-checkpoint-scale-out));
}

.fs-checkpoint[data-checkpoint-animation="zoom-out-down"] {
  transform: translateY(calc(var(--fs-checkpoint-distance) * -1)) scale(var(--fs-checkpoint-scale-out));
}

.fs-checkpoint[data-checkpoint-animation="zoom-out"].fs-checkpoint-active,
.fs-checkpoint[data-checkpoint-animation="zoom-out-up"].fs-checkpoint-active,
.fs-checkpoint[data-checkpoint-animation="zoom-out-down"].fs-checkpoint-active {
  transform: translateY(0) scale(1);
}

.fs-checkpoint[data-checkpoint-animation="zoom-out-left"] {
  transform: translateX(calc(var(--fs-checkpoint-distance) * -1)) scale(var(--fs-checkpoint-scale-out));
}

.fs-checkpoint[data-checkpoint-animation="zoom-out-right"] {
  transform: translateX(var(--fs-checkpoint-distance)) scale(var(--fs-checkpoint-scale-out));
}

.fs-checkpoint[data-checkpoint-animation="zoom-out-left"].fs-checkpoint-active,
.fs-checkpoint[data-checkpoint-animation="zoom-out-right"].fs-checkpoint-active {
  transform: translateX(0) scale(1);
}

/**
 * Flip animations
 * Elements rotate into view with 3D perspective
 *
 * @animation flip-up - Flip from bottom to top
 * @animation flip-down - Flip from top to bottom
 * @animation flip-left - Flip from right to left
 * @animation flip-right - Flip from left to right
 * @example
 *   <div class="fs-checkpoint" data-checkpoint-animation="flip-left">
 *     Content
 *   </div>
 */
.fs-checkpoint[data-checkpoint-animation="flip-up"],
.fs-checkpoint[data-checkpoint-animation="flip-down"],
.fs-checkpoint[data-checkpoint-animation="flip-left"],
.fs-checkpoint[data-checkpoint-animation="flip-right"] {
  backface-visibility: hidden;
  transition: opacity var(--fs-checkpoint-duration) linear, transform var(--fs-checkpoint-duration) ease;
}

.fs-checkpoint[data-checkpoint-animation="flip-up"] {
  transform: perspective(var(--fs-checkpoint-perspective)) rotateX(calc(var(--fs-checkpoint-rotate) * -1));
}

.fs-checkpoint[data-checkpoint-animation="flip-down"] {
  transform: perspective(var(--fs-checkpoint-perspective)) rotateX(var(--fs-checkpoint-rotate));
}

.fs-checkpoint[data-checkpoint-animation="flip-up"].fs-checkpoint-active,
.fs-checkpoint[data-checkpoint-animation="flip-down"].fs-checkpoint-active {
  transform: perspective(var(--fs-checkpoint-perspective)) rotateX(0);
}

.fs-checkpoint[data-checkpoint-animation="flip-left"] {
  transform: perspective(var(--fs-checkpoint-perspective)) rotateY(var(--fs-checkpoint-rotate));
}

.fs-checkpoint[data-checkpoint-animation="flip-right"] {
  transform: perspective(var(--fs-checkpoint-perspective)) rotateY(calc(var(--fs-checkpoint-rotate) * -1));
}

.fs-checkpoint[data-checkpoint-animation="flip-left"].fs-checkpoint-active,
.fs-checkpoint[data-checkpoint-animation="flip-right"].fs-checkpoint-active {
  transform: perspective(var(--fs-checkpoint-perspective)) rotateY(0);
}