/* Ember supports plain CSS out of the box. More info: https://cli.emberjs.com/release/advanced-use/stylesheets/ */
@import 'tailwindcss';

@theme {
  --spacing: 1px;

  --breakpoint-sm: 530px;
}

@custom-variant lower {
  @layer lower-specificity {
    & {
      @slot;
    }
  }
}

@utility textc-* {
  font-size: calc(--value([*], number) * var(--cpx));
  line-height: --modifier(--leading-*, [length], [*]);
}

@utility gapc-* {
  gap: calc(--value([*], number) * var(--cpx));
}

@utility gap-xc-* {
  column-gap: calc(--value([*], number) * var(--cpx));
}

@utility hc-* {
  height: calc(--value([*], number) * var(--cpx));
}

@utility wc-* {
  width: calc(--value([*], number) * var(--cpx));
}

@utility bottomc-* {
  bottom: calc(--value([*], number) * var(--cpx));
}

@utility topc-* {
  top: calc(--value([*], number) * var(--cpx));
}

@utility leftc-* {
  left: calc(--value([*], number) * var(--cpx));
}

@utility rightc-* {
  right: calc(--value([*], number) * var(--cpx));
}

@utility mbc-* {
  margin-bottom: calc(--value([*], number) * var(--cpx));
}
@utility mlc-* {
  margin-left: calc(--value([*], number) * var(--cpx));
}
@utility mrc-* {
  margin-right: calc(--value([*], number) * var(--cpx));
}
@utility myc-* {
  margin-block: calc(--value([*], number) * var(--cpx));
}
@utility pc-* {
  padding: calc(--value([*], number) * var(--cpx));
}
@utility pbc-* {
  padding-bottom: calc(--value([*], number) * var(--cpx));
}
@utility pxc-* {
  padding-inline: calc(--value([*], number) * var(--cpx));
}
@utility pyc-* {
  padding-block: calc(--value([*], number) * var(--cpx));
}
@utility ptc-* {
  padding-top: calc(--value([*], number) * var(--cpx));
}

@utility roundedc-* {
  border-radius: calc(--value([*], number) * var(--cpx));
}
@layer base {
  :root {
    --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  }
  * {
    animation-fill-mode: both;
    animation-timing-function: var(
      --animation-timing-function,
      var(--ease-out-cubic)
    );
    animation-delay: calc(
      calc(var(--conductor-delay, 0) + var(--delay, 0)) * 1s
    );
    animation-play-state: paused !important;
    /* animation-name: var(--animation); */
    animation-duration: calc(var(--duration) * 1s);
    /* animation-duration: 0s !important;
    animation-delay: 0s !important; */
    /* max-width: 100%; */
  }

  /* .absolute,
  .absolute > * {
    max-width: none;
  } */

  * {
    user-select: none;
  }

  [data-selectable] {
    user-select: text;
  }

  [data-run] * {
    animation-play-state: running !important;
  }
  html {
    height: 100%;
  }
  html,
  body {
    min-height: 100%;
    margin: 0;
    scrollbar-gutter: stable;
  }

  body {
    --max-w-px: calc(var(--max-w) * 1px);
    --cpx: calc(
      min(100cqw, var(--max-w-px)) / var(--max-w)
    ); /* 1px expressed in container‑width units */
  }

  /* svg,
  path {
    transform: translateZ(0);
    backface-visibility: hidden;
  } */

  :where(:not(.vara) > svg) path:not(.user-doodle) {
    fill: none;
    --duration: var(--arg-duration, var(--speed-duration));
    /* --animation: dashOffset0; */
    animation-name: dashOffset0;
    /* animation: dashOffset0 calc(var(--duration) * 1s) ease-out both; */
    /* animation-delay: calc(
      calc(var(--conductor-delay, 0) + var(--delay, 0)) * 1s
    ); */
  }

  path:not(.user-doodle):not([stroke-dasharray]) {
    stroke-dasharray: var(--path-total-length);
    stroke-dashoffset: var(--path-total-length);
  }

  html {
    scroll-snap-type: y mandatory;
    overscroll-behavior: none;
  }

  body {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    line-height: 1.3;
    position: relative;
    overflow-x: hidden;
    /* padding-inline: calc(20 * var(--cpx)); */
  }

  pre {
    white-space: pre-wrap;
  }

  .paper-holes {
    background-image: url('/paper-hole.svg'), url('/paper-hole.svg');
    background-size: 18px 58px;
    background-position:
      24px 4px,
      calc(100% - 24px) 04px;
    background-repeat: repeat-y;
  }

  h1 {
    @apply text-[60px] font-bold;
  }

  @keyframes dashOffset0 {
    0% {
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    to {
      stroke-dashoffset: 0;
    }
  }
  @keyframes click {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(0.92);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes finger-down {
    0% {
      opacity: 0;
      /* transform: scale(2.2); */
      /* filter: blur(10px); */
      translate: -50% 100%;
    }
    100% {
      opacity: 1;
      /* transform: scale(1); */
      /* filter: blur(0px); */
      translate: -50% 0;
    }
  }
  @keyframes fade-in-up {
    from {
      opacity: 0;
      filter: blur(10px);
      transform: translateY(10%);
    }
    to {
      opacity: 1;
      filter: blur(0px);
      transform: translateY(0);
    }
  }
  @keyframes pop-in {
    from {
      opacity: 0;
      transform: scale(0);
    }
  }
  @keyframes slide-out-left {
    to {
      transform: translateX(-110%) skew(-15deg);
    }
  }
  @keyframes slide-out-right {
    to {
      transform: translateX(110%) skew(15deg);
    }
  }
  @keyframes parallax-y {
    from {
      transform: translateY(20%);
    }
    to {
      transform: translateY(-20%);
    }
  }
  @keyframes move-down {
    0% {
      opacity: 0;
      transform: translateY(var(--start-y, -100%));
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: translateY(var(--end-y, 0));
    }
  }

  @keyframes scaleScrollProgress {
    0% {
      transform: scaleX(0);
    }
    100% {
      transform: scaleX(1);
    }
  }

  .scroll-progress-bar {
    transform-origin: 0 50%;
    animation-name: scaleScrollProgress;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(root);
    animation-range: 0% calc(100% - var(--extra-scroll-spacer, 0px));
    animation-play-state: running !important;
  }
}