/*.u-image,*/
/*.u-svg,*/
/*.u-video {*/
/*  overflow: clip !important*/
  
/*}*/




/* ================================
   NAVIGATION
   ================================ */
/* Dark BG */
.nav_outter_bg {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s cubic-bezier(0.5, 0.5, 0, 1), visibility 0s linear 0.7s;
}

/* Active — fade in instantly */
[data-navigation-status="active"] .nav_outter_bg {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s cubic-bezier(0.5, 0.5, 0, 1), visibility 0s;
}

/* Open/Close Container */
.nav_layout {
  transition: grid-template-rows 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  grid-template-rows: 0fr;
}
[data-navigation-status="active"] .nav_layout {
  grid-template-rows: 1fr;
}

/* Default (not-active) */
.nav_header_bg {
  background: color-mix(in srgb, var(--swatch--light-100) 30%, transparent);
  transition: background 0.5s cubic-bezier(.65, 0, 0, 1);
}

/* Active state */
[data-navigation-status="active"] .nav_header_bg {
  background: var(--swatch--light-200);
}



/* Menu Items */
[data-nav-item] {
  transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  opacity: 0;
  transform: translateY(2em);
}
[data-navigation-status="active"] [data-nav-item] {
  opacity: 1;
  transform: translateY(0em);
}

/* Link underline */
.nav_link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.2;
  transform: scaleX(0);
  transition: transform 0.6s cubic-bezier(.65, 0, 0, 1);
  transition-delay: inherit;
}
[data-navigation-status="active"] .nav_link::after {
  transform: scaleX(1);
}
.nav_link:hover::after {
  opacity: 0.4;
}

/* Link text slide */
.nav_link_text {
  transform: translateY(150%);
  transition: transform 0.6s cubic-bezier(.65, 0, 0, 1);
  transition-delay: inherit;
}
[data-navigation-status="active"] .nav_link_text {
  transform: translateY(0%);
}

/* Active Link */
.nav_link[aria-current]::after {
  opacity: 1;
}

/* ================================
   TOGGLE BUTTON
   ================================ */

/* Base bars */
.nav_toggle_wrap .nav_toggle_bar {
  transition: transform 0.6s cubic-bezier(.65, 0, 0, 1);
  transform: rotate(0.001deg);
}

/* Starting positions */
.nav_toggle_wrap .nav_toggle_bar:nth-child(1) {
  transform: translateY(-0.45em) rotate(0.001deg);
}
.nav_toggle_wrap .nav_toggle_bar:nth-child(2) {
  transform: translateY(0em) rotate(0.001deg);
}
.nav_toggle_wrap .nav_toggle_bar:nth-child(3) {
  transform: translateY(0.45em) rotate(0.001deg);
}

/* Hover — MATCHING CSS2 SHRINK ANIMATION */
.nav_toggle_wrap:hover .nav_toggle_bar:nth-child(1) {
  transform: translateY(-0.45em) scale(0.5, 1) rotate(0.001deg);
}
.nav_toggle_wrap:hover .nav_toggle_bar:nth-child(3) {
  transform: translateY(0.45em) scale(0.5, 1) rotate(0.001deg);
}
/* middle bar stays centered */
.nav_toggle_wrap:hover .nav_toggle_bar:nth-child(2) {
  transform: translateY(0em) rotate(0.001deg);
}

/* OPEN STATE — X */
[data-navigation-status="active"] .nav_toggle_wrap .nav_toggle_bar:nth-child(1) {
  transform: translateY(0em) rotate(45deg);
}
[data-navigation-status="active"] .nav_toggle_wrap .nav_toggle_bar:nth-child(2) {
  transform: translateY(0em) rotate(-45deg);
}
[data-navigation-status="active"] .nav_toggle_wrap .nav_toggle_bar:nth-child(3) {
  transform: translateY(0em) rotate(-45deg);
}

/* Hover Open — scale like CSS2 */
[data-navigation-status="active"] .nav_toggle_wrap:hover .nav_toggle_bar:nth-child(1),
[data-navigation-status="active"] .nav_toggle_wrap:hover .nav_toggle_bar:nth-child(3) {
  transform: rotate(45deg) scale(0.7, 1);
}

/* ================================
   MARQUEE
   ================================ */

@keyframes translateX {
  to {
    transform: translateX(-100%);
  }
}

[data-css-marquee-list] {
  animation: translateX 40s linear infinite paused;
}
[data-navigation-status="active"] [data-css-marquee-list] {
  animation-play-state: running;
}
[data-navigation-status="active"] .nav_banner_link_wrap:hover [data-css-marquee-list] {
  animation-play-state: paused;
}











  
  
/*.page_wrap {*/
/*  overflow: clip;*/
/*}*/

/*.loader_wrap {*/

/*display: none;*/
/*}*/

/*html, body {*/
/*  overscroll-behavior-y: none;*/
/*}*/

[data-load-reset] {
  opacity: 0;

}

 Text reveal mask spacing (SplitText) 
.line-mask,
.word-mask,
.char-mask {
  overflow: clip;

}

/*// ================================*/
/*// SWIPER SLIDER 
// =================================*/

.slider_offset {
  --slide-count: var(--lg);
  --lg: var(--lg);
  --md: var(--lg);
  --sm: var(--md);
  --xs: var(--sm);
}

@container (width < 50em) {
  .slider_offset {
    --slide-count: var(--md);
  }
}

@container (width < 35em) {
  .slider_offset {
    --slide-count: var(--sm);
  }
}

@container (width < 25em) {
  .slider_offset {
    --slide-count: var(--xs);
  }
}

html .slider_list> :not(.u-display-contents, .w-dyn-list),
.slider_list>.w-dyn-list>*>*>*,
.slider_list>.u-display-contents>*,
.slider_list>.u-display-contents>.u-display-contents>*,
.slider_list>.u-display-contents>.w-dyn-list>*>*>*,
.slider_list>.u-display-contents>.u-display-contents>.w-dyn-list>*>*>* {
  padding-inline: calc(var(--_gap---size) / 2);
  height: auto !important;
  flex: 0 0 auto;
  width: calc(100% / var(--slide-count));
}

/* ======================================= */
/*   flickity slider css
/* ======================================= */

.flickity-viewport {
  width: 100%;
  overflow: visible !important;
}

.flickity-button {
  display: none;
}



/* ======================================= */
/*// CUSTOM CURSOR MARQUEE OVER PARALAX SLIDER  */
/*// ================================*/


/* Hidden by default */
/*.u-cursor-marquee-text-card {*/
/*  opacity: 0;*/
/*}*/

/* Visible when hovering ANY slide */
/*.tricks_slider_slide:hover ~ .u-cursor-marquee-text-card {*/
/*  opacity: 1;*/
/*}*/




.u-cursor-marquee-text-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 10em);
  will-change: clip-path;
  opacity: 0;
}

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

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

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

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

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

/*  PARALLAX SLIDER MODAL POPUP BUTTON  */
/* ======================================= */

/* ---------- BASE: BUTTON ---------- */
.u-modal-button {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

/* ---------- BASE: INNER SVG ---------- */
[data-modal-svg] {
  transition: transform 0.4s cubic-bezier(.75, 0, .25, 1);
  transform-origin: center;
}

/* ---------- BASE: DASHED BORDER ---------- */
.u-modal-button-border {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2.0px dashed transparent;
  border-radius: 50%;
  pointer-events: none;
  transition: border-color 0.4s cubic-bezier(.75, 0, .25, 1);
}

/* ---------- KEYFRAMES ---------- */

@keyframes modalSpinBurst {
  from {
    transform: rotate(0deg) scale(1);
  }

  to {
    transform: rotate(240deg) scale(0.4);
  }
}

@keyframes modalScaleReturn {
  from {
    transform: rotate(240deg) scale(0.4);
  }

  to {
    transform: rotate(240deg) scale(1);
  }
}

@keyframes modalSpinSlow {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ======================================================= */
/*     PER-SLIDE HOVER LOGIC (DESKTOP ONLY)                */
/* ======================================================= */

@media (hover: hover) and (pointer: fine) {

  /* ONLY animate the button INSIDE the hovered slide */
  .tricks_slider_slide:hover .u-modal-button [data-modal-svg] {
    transform: rotate(180deg) scale(0.65);
  }

  .tricks_slider_slide:hover .u-modal-button .u-modal-button-border {
    border-color: currentColor;
    animation:
      modalSpinBurst 0.4s cubic-bezier(.75, 0, .25, 1) forwards,
      modalScaleReturn 0.25s cubic-bezier(.75, 0, .25, 1) forwards 0.4s,
      modalSpinSlow 2.5s linear infinite 0.35s;
  }
}

/* ======================================================= */
/*   TOUCH DEVICES — DISABLE HOVERS COMPLETELY             */
/* ======================================================= */

@media (hover: none),
(pointer: coarse) {

  .u-modal-button,
  .u-modal-button-border,
  [data-modal-svg] {
    animation: none !important;
    transform: none !important;
    border-color: transparent !important;
  }
}

/*// ================================*/
/*// BUTTON UNDERLINE ANIMATION
// =================================*/

/* UNDERLINE LINK ANIMATION (with alt variant) */
[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: scaleX(0);
}

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

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

/* Hover states */
@media (hover: hover) and (pointer: fine) {

  [data-hover]:hover [data-underline-link]::before,
  [data-underline-link]:hover::before {
    transform-origin: left;
    transform: scaleX(1);
  }

  [data-hover]:hover [data-underline-link="alt"]::before,
  [data-underline-link="alt"]:hover::before {
    transform-origin: right;
    transform: scaleX(0);
    transition-delay: 0s;
  }

  [data-hover]:hover [data-underline-link="alt"]::after,
  [data-underline-link="alt"]:hover::after {
    transform-origin: left;
    transform: scaleX(1);
    transition-delay: 0.3s;
  }
}