/* ------------------------- Underline Link [https://osmo.supply/] -------------------------  */


[data-underline-link] {
  text-decoration: none;
  position: relative;
}

[data-underline-link]::before,
[data-underline-link="alt"]::before,
[data-underline-link="alt"]::after{
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}

[data-underline-link="alt"]::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
  transition-delay: 0.3s;
}

[data-underline-link="alt"]::after {
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
  transition-delay: 0s;
}

@media (hover: hover) and (pointer: fine) {
  [data-hover]:hover [data-underline-link]::before,
  [data-underline-link]:hover::before {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }  
  
  [data-hover]:hover [data-underline-link="alt"]::before,
  [data-underline-link="alt"]:hover::before {
    transform-origin: right;
    transform: scaleX(0) rotate(0.001deg);
    transition-delay: 0s;
  }
  
  [data-hover]:hover [data-underline-link="alt"]::after,
  [data-underline-link="alt"]:hover::after {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
    transition-delay: 0.3s;
  }
}

/* ------------------------- Cards Stack [https://osmo.supply/] -------------------------  */



.dropping-stack__item:nth-child(1) {
  position: relative;
}

/* Controls */
.dropping-stack__control .dropping-stack__control-circle {
  transition: transform 0.3s ease;
  transform: translateY(0em) rotate(0.001deg);
}

.dropping-stack__control:hover .dropping-stack__control-circle {
  transform: translateY(-0.25em) rotate(0.001deg);
}

/* Style the cards in the Webflow editor */
:is(.wf-design-mode, .w-editor) .dropping-stack__item:nth-child(1) {z-index: 3;}
:is(.wf-design-mode, .w-editor) .dropping-stack__item:nth-child(2) {transform: translate(2.5em, 2.5em); z-index: 2;}
:is(.wf-design-mode, .w-editor) .dropping-stack__item:nth-child(3) {transform: translate(5em, 5em); z-index: 1;}
:is(.wf-design-mode, .w-editor) .dropping-stack__item:nth-child(4) {transform: translate(7.5em, 7.5em);}

@media screen and (max-width: 767px) {
  :is(.wf-design-mode, .w-editor) .dropping-stack__item:nth-child(2) {transform: translate(1.5em, 1.5em);}
  :is(.wf-design-mode, .w-editor) .dropping-stack__item:nth-child(3) {transform: translate(3em, 3em);}
  :is(.wf-design-mode, .w-editor) .dropping-stack__item:nth-child(4) {transform: translate(4.5em, 4.5em);}
}



/* ------------------------- Cursor Marquee [https://osmo.supply/] -------------------------  */



.cursor-marquee__card {
  transition: all 0.4s cubic-bezier(.75, 0, .25, 1);
  transform: translateY(0%) rotate(0.001deg);
  clip-path: inset(calc(50% - 0.25em) round 50em);
  will-change: clip-path;
  opacity: 0;
}

[data-cursor-marquee-status="active"] .cursor-marquee__card {
  clip-path: inset(0 round 50em);
  transform: translateY(-25%) rotate(0.001deg);
}

/* Show cursor dot when script loaded */
[data-cursor-marquee-status="not-active"] .cursor-marquee__card,
[data-cursor-marquee-status="active"] .cursor-marquee__card{
  opacity: 1;
}

/* CSS Keyframe Animation */
@keyframes translateXCursor { 
  to {
    transform: translateX(-100%);
  }
}

.cursor-marquee__text-span {
  animation: translateXCursor 10s linear infinite paused;
  transition: opacity 0.15s ease-in-out 0.25s;
  opacity: 0;
}

[data-cursor-marquee-status="active"] .cursor-marquee__text-span {
  transition: opacity 0.15s ease-in-out 0s;
  opacity: 1;
}


/* ------------------------- pixelated scroll [https://osmo.supply/] -------------------------  */



[data-pixelated-scroll-panel] {
  display: flex;
  flex-direction: row;
  width: 100%;
}

[data-pixelated-scroll-column] {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  flex: 1 1 0%;
  min-width: 0;
}
  
[data-pixelated-scroll-pixel] {
  aspect-ratio: 1;
  width: 100%;
  background-color: currentColor;
  backface-visibility: hidden;
  will-change: opacity;
}

[data-pixelated-scroll-transition][data-mode="reveal"] {
  inset: 0% 0% auto;
}

[data-pixelated-scroll-transition][data-pixel-ratio="2.5/1"] [data-pixelated-scroll-pixel] {
  aspect-ratio: 2.5/1;
}