/*!
 * Overshoot free collection, v1.0.0
 *
 * Companion stylesheet for overshoot.js. Retheme by overriding the custom
 * properties below on :root, or on any individual element.
 *
 * MIT licensed.
 */

:root {
  --os-accent: #f05a28;
  --os-fg: #f4f4f5;
  --os-surface: #101014;
  --os-border: rgba(244, 244, 245, 0.14);
  --os-radius: 12px;

  --os-duration-fast: 250ms;
  --os-duration-slow: 400ms;
  --os-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Magnetic -------------------------------------------------------------- */
[data-os="magnetic"] {
  display: inline-flex;
  will-change: transform;
}

/* Field ----------------------------------------------------------------- */
[data-os="field"] {
  position: relative;
  overflow: hidden;
}

.os-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Tilt ------------------------------------------------------------------ */
.os-tilt {
  position: relative;
  overflow: hidden;
  border-radius: var(--os-radius);
  transform-style: preserve-3d;
  will-change: transform;
}

.os-tilt-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--os-duration-slow) var(--os-ease);
  background: radial-gradient(
    420px circle at var(--os-gx, 50%) var(--os-gy, 50%),
    rgba(255, 255, 255, 0.22),
    transparent 60%
  );
}

/* Scramble -------------------------------------------------------------- */
[data-os="scramble"] {
  font-variant-ligatures: none;
  /* Tabular figures stop the line reflowing while glyphs cycle. */
  font-variant-numeric: tabular-nums;
}

/* Marquee --------------------------------------------------------------- */
.os-marquee {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
}

.os-marquee-track {
  display: flex;
  flex-shrink: 0;
  width: max-content;
  animation: os-marquee 20s linear infinite;
}

.os-marquee:hover .os-marquee-track {
  animation-play-state: paused;
}

.os-marquee-half {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2rem;
  padding-right: 2rem;
}

.os-marquee-half > span {
  white-space: nowrap;
}

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

/* Trail ----------------------------------------------------------------- */
.os-trail {
  position: relative;
  overflow: hidden;
}

.os-trail-img {
  position: absolute;
  width: 104px;
  height: 132px;
  object-fit: cover;
  border-radius: calc(var(--os-radius) - 4px);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--os-rot, 0deg)) scale(0.86);
  transition:
    opacity var(--os-duration-fast) ease-out,
    transform var(--os-duration-slow) var(--os-ease);
}

.os-trail-img.is-in {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(var(--os-rot, 0deg)) scale(1);
}

/* Spotlight ------------------------------------------------------------- */
.os-spotlight {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--os-radius);
}

.os-spotlight::before,
.os-spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--os-on, 0);
  transition: opacity var(--os-duration-slow) var(--os-ease);
}

/* Edge glow: gradient masked to the 1px border only. */
.os-spotlight::before {
  padding: 1px;
  background: radial-gradient(
    240px circle at var(--os-x, 50%) var(--os-y, 50%),
    var(--os-accent),
    transparent 65%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Interior wash. */
.os-spotlight::after {
  background: radial-gradient(
    300px circle at var(--os-x, 50%) var(--os-y, 50%),
    rgba(240, 90, 40, 0.1),
    transparent 70%
  );
}

/* Repel ----------------------------------------------------------------- */
.os-repel {
  display: inline-block;
}

.os-repel-char {
  display: inline-block;
  white-space: pre;
  will-change: transform;
}

/* Shutter --------------------------------------------------------------- */
.os-shutter {
  display: flex;
  overflow: hidden;
  border-radius: var(--os-radius);
}

.os-shutter-slat {
  flex: 1 1 0;
  background-repeat: no-repeat;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 700ms var(--os-ease);
}

.os-shutter.is-open .os-shutter-slat {
  transform: scaleY(1);
}

/* Morph ----------------------------------------------------------------- */
[data-os="morph"],
.os-morph {
  position: relative;
  display: block;
  overflow: hidden;
}

/* The real word stays in the DOM for assistive tech and search engines. */
.os-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Fluid ----------------------------------------------------------------- */
[data-os="fluid"] {
  position: relative;
  overflow: hidden;
}

[data-os="fluid"] .os-canvas {
  /* The solve runs on a coarse grid; upscaling is what makes it look like
     dye rather than pixels. */
  image-rendering: auto;
  filter: blur(6px) saturate(1.2);
}

/* Blobs ----------------------------------------------------------------- */
[data-os="blobs"] {
  position: relative;
  overflow: hidden;
}

/* Reveal ---------------------------------------------------------------- */
.os-reveal-item {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(14px);
  transition:
    opacity 600ms var(--os-ease),
    transform 600ms var(--os-ease),
    filter 600ms var(--os-ease);
}

.os-reveal.is-revealed .os-reveal-item,
.is-revealed.os-reveal-item {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* Counter --------------------------------------------------------------- */
[data-os="counter"] {
  font-variant-numeric: tabular-nums;
}

/* Parallax -------------------------------------------------------------- */
.os-parallax > * {
  will-change: transform;
}

/* Glitch ---------------------------------------------------------------- */
.os-glitch {
  position: relative;
  display: inline-block;
}

.os-glitch::before,
.os-glitch::after {
  content: attr(data-os-glitch-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--os-duration-fast) ease-out,
    transform var(--os-duration-fast) ease-out;
}

.os-glitch::before {
  color: #00e5ff;
}

.os-glitch::after {
  color: var(--os-accent);
}

.os-glitch:hover::before {
  opacity: 0.85;
  transform: translate(-2px, -1px);
}

.os-glitch:hover::after {
  opacity: 0.85;
  transform: translate(2px, 1px);
}

/* Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .os-marquee-track {
    animation: none;
  }
  .os-shutter-slat {
    transform: scaleY(1);
    transition: none;
  }
  .os-trail-img {
    display: none;
  }
  [data-os="magnetic"],
  .os-tilt {
    transform: none !important;
  }
  .os-reveal-item {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}

/* Wave / Aurora --------------------------------------------------------- */
[data-os="wave"],
[data-os="aurora"] {
  position: relative;
  overflow: hidden;
}

.os-aurora-canvas {
  filter: blur(28px) saturate(1.15);
}