/* Basic GSAP Slider CSS Begin */

[data-gsap-slider-init] {
  --slider-status: on; /* Turn slider on/off */
  --slider-spv: 3; /* Slides per view */ 
  --slider-gap: 1.5em; /* Slides Gap */
}

@media screen and (max-width: 991px) {
   [data-gsap-slider-init] {
    --slider-status: on; /* Turn slider on/off */
    --slider-spv: 2.25; /* Slides per view */ 
    --slider-gap: 1.5em; /* Slides Gap */
  } 
}

@media screen and (max-width: 767px) {
  [data-gsap-slider-init] { 
    --slider-status: on; /* Turn slider on/off */
    --slider-spv: 1.15; /* Slides per view */ 
    --slider-gap: 1em; /* Gap */
  }
}

[data-gsap-slider-item]:last-child {
  margin-right: 0;
}

/* Controls */
[data-gsap-slider-status="not-active"] [data-gsap-slider-controls] {
  display: none;
}

[data-gsap-slider-control-status="not-active"] { 
  opacity: 0.2;
  pointer-events: none;
}

/* Customization */

.gsap-slider__control {
  transition: opacity 0.3s ease;
}

.demo-card {
  transition: all 0.3s ease;
}

[data-gsap-slider-item-status="not-active"] .demo-card {
  background-color: #131313;
}

.demo-card__tag {
  transition: all 0.3s ease;
}

[data-gsap-slider-item-status="not-active"] .demo-card__tag {
  opacity: 0;
}

/* Basic GSAP Slider CSS End */

/* Number Odometer CSS Begin */

[data-odometer-element] {
  display: inline-flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
}

[data-odometer-part="mask"], 
[data-odometer-part="static"] {
  display: inline-block;
  overflow: clip;
  padding: 0.05em;
  margin: -0.05em;
}

[data-odometer-part="roller"] {
  display: block;
  white-space: pre;
  text-align: center;
  will-change: transform;
}

[data-odometer-part="static"] {
  display: inline-block;
}

/* Number Odometer CSS End */

/* Fit Text to Width CSS Begin */

[data-fit-width] {
  display: inline-block;
  white-space: nowrap; 
  margin: 0;
}

/* Fit Text to Width CSS End */

/* Sticky Features CSS Begin */

/* Optional: Create the --nav-height: 6em; in your variable panel to skip this step */

:root {
  --nav-height: 0em;
}

/* Sticky Features CSS End */

/* Custom Cursor CSS Begin */

body:has(a:hover) .cursor,
body:has(button:hover) .cursor,
body:has([data-cursor]:hover) .cursor {
  width: 3em;
  height: 3em;
  background-color: rgba(205, 218, 1, 0.3);
}

@media (hover: none) and (pointer: coarse) {
  .cursor {
    display: none;
  }
}

/* Custom Cursor CSS End */

/* Scaling Hamburger Navigation CSS Begin */

/* Nav Dark BG */
.navigation__dark-bg {
  transition: all 0.7s cubic-bezier(0.5, 0.5, 0, 1);
}

[data-navigation-status="active"] .navigation__dark-bg {
  opacity: 0;
  visibility: visible;
}

/* Nav Group BG  */
.hamburger-nav__bg {
  transition: all 0.7s cubic-bezier(0.5, 0.5, 0, 1);
}

[data-navigation-status="active"] .hamburger-nav__bg {
  width: 100%;
  height: 100%;
}

/* Nav Group  */
.hamburger-nav__group {
  transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1), transform 0.7s cubic-bezier(0.5, 0.5, 0, 1);
  transform: scale(0.15) rotate(0.001deg);
  opacity: 0;
  visibility: hidden;
}

[data-navigation-status="active"] .hamburger-nav__group {
  transform: scale(1) rotate(0.001deg);
  opacity: 1;
  visibility: visible;
}

/* Active Link  */

.hamburger-nav__a[aria-current] .hamburger-nav__p {
  opacity: 0.33;
}

/* Active Indicator  */

.hamburger-nav__dot {
  transition: all 0.7s cubic-bezier(0.5, 0.5, 0, 1);
  transform: scale(0) rotate(0.001deg);
  opacity: 0.5;
}

.hamburger-nav__a[aria-current] .hamburger-nav__dot {
  transform: scale(1) rotate(0.001deg);
  opacity: 1;
}

.hamburger-nav:has(.hamburger-nav__a:hover) .hamburger-nav__dot {
  transform: scale(0) rotate(0.001deg);
}

.hamburger-nav .hamburger-nav__a:hover .hamburger-nav__dot {
  transform: scale(1) rotate(0.001deg);
  opacity: 0.25;
}

/* Hamburger Button  */
.hamburger-nav__toggle {
  transition: transform 0.7s cubic-bezier(0.5, 0.5, 0, 1);
  transform: translate(0em, 0em) rotate(0.001deg);
}

[data-navigation-status="active"] .hamburger-nav__toggle {
  transform: translate(-1em, 1em) rotate(0.001deg);
}

.hamburger-nav__toggle .hamburger-nav__toggle-bar {
  transition: transform 0.7s cubic-bezier(0.5, 0.5, 0, 1);
  transform: translateY(-0.15em) rotate(0.001deg);
}

.hamburger-nav__toggle:hover .hamburger-nav__toggle-bar {
  transform: translateY(0.15em) rotate(0.001deg);
}

[data-navigation-status="active"] .hamburger-nav__toggle .hamburger-nav__toggle-bar {
  transform: translateY(0em) rotate(45deg);
}

.hamburger-nav__toggle .hamburger-nav__toggle-bar:nth-child(2) {
  transition: transform 0.7s cubic-bezier(0.5, 0.5, 0, 1);
  transform: translateY(0.15em) rotate(0.001deg);
}

.hamburger-nav__toggle:hover .hamburger-nav__toggle-bar:nth-child(2) {
  transform: translateY(-0.15em) rotate(0.001deg);
}

[data-navigation-status="active"] .hamburger-nav__toggle .hamburger-nav__toggle-bar:nth-child(2) {
  transform: translateY(0em) rotate(-45deg);
}

/* Scaling Hamburger Navigation CSS End */

/* Osmo Resource CSS Begin */

/* SplitText */
.gsap_split_word-mask {
	margin: -0.1em -0.05em;
	padding: 0.1em 0.05em;
}
  
/* CSS Animations */

.crisp-header__slider-nav-btn {
  transition: border-color 0.75s cubic-bezier(0.625, 0.05, 0, 1);
}

.crisp-header__slider-nav-btn img {
  transform: scale(1) rotate(0.001deg);
  transition: transform 0.75s cubic-bezier(0.625, 0.05, 0, 1);
}

.crisp-header__slider-nav:has(.crisp-header__slider-nav-btn:hover) img {
  transform: scale(0.825) rotate(0.001deg);
}

.crisp-header__slider-nav:has(.crisp-header__slider-nav-btn:hover) .crisp-header__slider-nav-btn:hover img {
  transform: scale(1) rotate(0.001deg);
}

/* ------------------------- Underline Link by Osmo [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;
  opacity: 0.5;
  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;
  }
}

/* Osmo Resource CSS End */

/* Flick Cards CSS Begin */

[data-flick-cards-dragger] {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: auto;
  touch-action: pan-y;
}

/* Position Slides (also in Webflow Designer) */
[data-flick-cards-item-status] .flick-card__media,
:is(.wf-design-mode, .w-editor) .flick-card__media {
  transition: opacity 0.2s ease;
  opacity: 0.5;
}

[data-flick-cards-item-status="2-before"] .flick-card__media,
[data-flick-cards-item-status="2-after"] .flick-card__media,
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(2) .flick-card__media,
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-last-child(1) .flick-card__media{
  transition: opacity 0.2s ease;
  opacity: 0.75;
}

[data-flick-cards-item-status="active"] .flick-card__media,
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(1) .flick-card__media {
  opacity: 1;
}

:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(1) {z-index: 4;}
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(2) {transform: translate(25%, 1%) rotate(10deg) scale(0.9, 0.9);z-index: 3;}
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(3) {transform: translate(45%, 5%) rotate(15deg) scale(0.8, 0.8);z-index: 2;}
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-last-child(1) {transform: translate(-25%, 1%) rotate(-10deg) scale(0.9, 0.9);z-index: 3;}
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-last-child(2) {transform: translate(-45%, 5%) rotate(-15deg) scale(0.8, 0.8);z-index: 2;}

/* Animate Button */
[data-flick-cards-item-status] .flick-card__btn,
:is(.wf-design-mode, .w-editor) .flick-group__item .flick-card__btn {
  transition: opacity 0.4s cubic-bezier(0.625, 0.05, 0, 1), 1s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  transform: translate(0%, 50%) rotate(0.001deg);
}

[data-flick-cards-item-status="active"] .flick-card__btn,
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(1) .flick-card__btn {
  opacity: 1;
  transform: translate(0%, 0%) rotate(0.001deg);
}

/* Flick Cards CSS End */

/* Bubble button CSS Begin */

.btn-bubble-arrow__content {
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform: translateX(-2.75rem) rotate(0.001deg);
}

.btn-bubble-arrow__arrow {
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform: scale(0) rotate(0.001deg);
  transform-origin: left;
}

.btn-bubble-arrow__arrow-svg {
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform: rotate(0.001deg);
}

.btn-bubble-arrow__arrow.is--duplicate {
  position: absolute;
  z-index: 2;
  right: 0;
  transform: scale(1) rotate(0.001deg);
  transform-origin: right;
}

/* Hover */

.btn-bubble-arrow:hover .btn-bubble-arrow__content {
  transform: translateX(0em) rotate(0.001deg);
}

.btn-bubble-arrow:hover .btn-bubble-arrow__arrow-svg {
  transform: rotate(-45deg);
}

.btn-bubble-arrow:hover .btn-bubble-arrow__arrow {
  transform: scale(1) rotate(0.001deg);
}

.btn-bubble-arrow:hover .btn-bubble-arrow__arrow.is--duplicate {
  transform: scale(0) rotate(0.001deg);
}

/* Bubble button CSS End */

/* Centered Looping Slider CSS Begin */

/* Orange highlight ring on bullet point nav for hover + focus states */
.centered-slider-bullet::after{
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 100em;
  z-index: -1;
  border: 1px solid #CDDA01;
  transition: all 0.5s cubic-bezier(0.65, 0.05, 0, 1);
}

.centered-slider-bullet:hover::after,
.centered-slider-bullet.active::after,
.centered-slider-bullet:focus::after{
  inset: -5px;
}

/* Fade non-active slides */
.centered-slider-row:has( .centered-slider-slide.active) .centered-slider-slide:not(.active){
  opacity: 1;
}

/* Little (orange) corners on each slide */
/* https://css-tip.com/corner-only-border-image/ */
.centered-slider-slide::after {
  --size: 1em; /* corner size */
  --width: 1px;  /* border width */
  --gap: 0.5em; /* gap */
  --color: #CDDA01;
  content: '';
  position: absolute;
  inset: calc(var(--gap) * -1);
  z-index: 1;
  opacity: 0;
  padding: calc(var(--gap) + var(--width));
  outline: var(--width) solid var(--color);
  outline-offset: calc(var(--gap)/-1);
  mask:
    conic-gradient(at var(--size) var(--size),#0000 75%,#000 0)
    0 0/calc(100% - var(--size)) calc(100% - var(--size)),
    linear-gradient(#000 0 0) content-box;
  transition: all 0.4s cubic-bezier(0.65, 0.05, 0, 1);
}

.centered-slider-slide.active::after {
  outline-offset: calc(-1*var(--width));
  opacity: 1;
}

/* Centered Looping Slider CSS End */

/* Scroll Marquee CSS Begin */

/* Optional: Rotating arrow left/right based on Scroll Direction */

.marquee__advanced__arrow-svg,
[data-marquee-direction="right"][data-marquee-status="inverted"] .marquee__advanced__arrow-svg {
  transition: 0.5s cubic-bezier(0.625, 0.05, 0, 1);
  transform: rotate(-180deg);
}

[data-marquee-status="inverted"] .marquee__advanced__arrow-svg,
[data-marquee-direction="right"][data-marquee-status="normal"] .marquee__advanced__arrow-svg {
  transform: rotate(-359.999deg);
}

/* Scroll Marquee CSS End */

/* Project Cards Autoplay Hover CSS Begin */

[data-media-init] [data-media-placeholder] {
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

[data-media-init][data-media-status="playing"] [data-media-placeholder],
[data-media-init][data-media-status="paused"] [data-media-placeholder] {
  visibility: hidden;
  opacity: 0;
}

/* Project Cards Autoplay Hover CSS End */