/* ==================================================================
   BREKKY GOLF CO. — GLOBAL STYLES (Slater style.css)
   ------------------------------------------------------------------
   01. Barba Page Transition
   02. Flickity Slider Overrides   (legacy — safe to delete)
   03. Image Reveal On Scroll
   04. Global Button & Link Staggers
   05. Card Component Framework
   06. Split Text Clipping Fix
   07. Navigation — Base Animations
   08. Mobile Nav Behavior
   09. Current-Page Link Hide
   10. Navigation — Animation Overrides
   11. Portfolio Centered Slider
   ================================================================== */

/* ==================================================================
   01. BARBA PAGE TRANSITION
   ================================================================== */
.w--current {
  pointer-events: none !important;
}

.transition__panel {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  z-index: 9999;
  pointer-events: none;
  /* Default to fully visible/covering. JS animates this away on first
     paint via the `once` transition. Prevents FOUC on refresh and
     guarantees every reload starts from the same shutter state. */
  visibility: visible;
  opacity: 1;
  display: flex;
  flex-direction: row;
}

.transition__shutter {
  flex: 1;
  height: 100%;
  background-color: var(--_theme---nav--open--dropdown-background, #e3dfd5);
  transform-origin: bottom center;
}

/* ==================================================================
   02. FLICKITY SLIDER OVERRIDES   (legacy)
   ------------------------------------------------------------------
   Flickity was replaced by the GSAP horizontalLoop slider (Section 16
   in the global JS). These rules are dead unless Flickity still runs
   somewhere — safe to delete once confirmed.
   ================================================================== */
.flickity-viewport {
  width: 100%;
  overflow: visible !important;
}

.flickity-button {
  display: none;
}

/* ==================================================================
   03. IMAGE REVEAL ON SCROLL   (replaces old [data-img] parallax)
   ------------------------------------------------------------------
   Opt-in via data-img="true" on the image element. The JS toggles
   .is-revealed via IntersectionObserver when the element enters
   viewport. Direction is reverse of text reveal: image rises from
   bottom up to meet text descending from top.

   TWO VARIANTS BELOW. Variant A active by default. To test
   Variant B, comment out Variant A and uncomment Variant B.
   ================================================================== */

/* ----- VARIANT A: clip-path reveal (sharper edge, cleaner) ----- */
[data-img="true"] {
  clip-path: inset(100% 0 0 0);
  transform: translateY(2.5rem);
  opacity: 0;
  transition:
    clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: clip-path, transform, opacity;
}

[data-img="true"].is-revealed {
  clip-path: inset(0 0 0 0);
  transform: translateY(0);
  opacity: 1;
  will-change: auto;
}

/* ----- VARIANT B: scale reveal (softer, organic) ----- */
/*
[data-img="true"] {
  transform: scale(1.15) translateY(2rem);
  opacity: 0;
  transition:
    transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

[data-img="true"].is-revealed {
  transform: scale(1) translateY(0);
  opacity: 1;
  will-change: auto;
}
*/

/* Reduced motion: render at end state, no transitions */
@media (prefers-reduced-motion: reduce) {
  [data-img="true"] {
    clip-path: none;
    transform: none;
    opacity: 1;
    transition: none;
  }
}

/* ==================================================================
   04. GLOBAL BUTTON & LINK STAGGERS
   ================================================================== */
.btn_main_wrap [data-button-animate-chars],
.g_clickable_link [data-button-animate-chars],
.nav_1_links_link [data-button-animate-chars] {
  overflow: hidden;
  position: relative;
  display: inline-block;
}

.btn_main_wrap [data-button-animate-chars] span,
.g_clickable_link [data-button-animate-chars] span,
.nav_1_links_link [data-button-animate-chars] span {
  display: inline-block;
  position: relative;
  text-shadow: 0px 1.3em currentColor;
  transform: translateY(0em) rotate(0.001deg);
  transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

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

  .btn_main_wrap:hover [data-button-animate-chars] span,
  .g_clickable_link:hover [data-button-animate-chars] span,
  .nav_1_links_link:hover [data-button-animate-chars] span {
    transform: translateY(-1.3em) rotate(0.001deg);
  }
}

/* ==================================================================
   05. CARD COMPONENT FRAMEWORK
   ================================================================== */
[data-card-hover] {
  --ease-osmo: cubic-bezier(0.625, 0.05, 0, 1);
  --card-duration: 0.6s;
  --card-fast-duration: 0.18s;
  --card-text-distance: 1.3em;
}

.card_primary_title,
.nav-dropdown__link-label {
  padding-bottom: 0.15em !important;
  margin-bottom: -0.15em !important;
}

.card_primary_title {
  transition: transform var(--card-duration) var(--ease-osmo);
  line-height: 1.2 !important;
  padding-bottom: 0.25em !important;
  margin-bottom: -0.25em !important;
}

[data-card-title] {
  overflow: hidden;
  display: inline-block;
}

[data-card-title] span {
  display: inline-block;
  position: relative;
  text-shadow: 0 var(--card-text-distance) currentColor;
  transform: translateY(0em) rotate(0.001deg);
  transition: transform var(--card-duration) var(--ease-osmo);
}

[data-card-img-wrap] {
  opacity: 0.6;
  overflow: clip;
  transition: opacity var(--card-fast-duration) var(--ease-osmo);
}

[data-card-img] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform var(--card-duration) var(--ease-osmo);
}

[data-card-arrow-wrap] {
  position: relative;
  overflow: hidden;
  display: inline-grid;
  place-items: center;
}

[data-card-arrow-1],
[data-card-arrow-2] {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--card-duration) var(--ease-osmo);
}

[data-card-arrow-1] {
  transform: translateX(0%) rotate(0.001deg);
}

[data-card-arrow-2] {
  position: absolute;
  inset: 0;
  transform: translateX(-200%) rotate(0.001deg);
}

@media (hover: hover) and (pointer: fine) {
  [data-card-hover]:hover .card_primary_title:not(.is-hover) {
    transform: translateY(-125%);
  }

  [data-card-hover]:hover .card_primary_title.is-hover {
    transform: translate(0px, 0%);
  }

  [data-card-hover]:hover [data-card-tag] span,
  [data-card-hover]:hover [data-card-title] span {
    transform: translateY(calc(-1 * var(--card-text-distance))) rotate(0.001deg);
  }

  [data-card-hover]:hover [data-card-img-wrap] {
    opacity: 1;
  }

  [data-card-hover]:hover [data-card-img] {
    transform: scale(1.06);
  }

  [data-card-hover]:hover [data-card-arrow-1] {
    transform: translateX(300%) rotate(0.001deg);
  }

  [data-card-hover]:hover [data-card-arrow-2] {
    transform: translateX(0%) rotate(0.001deg);
  }
}

/* Touch device: hold the dim at base 0.6 instead of clearing it.
   Every card has text overlaid, so the image stays dimmed for
   legibility. No hover fires on touch to lift it anyway. */
@media (hover: none),
(pointer: coarse) {
  [data-card-img-wrap] {
    opacity: 0.6;
  }
}

/* ==================================================================
   06. SPLIT TEXT CLIPPING FIX
   ================================================================== */
.line,
.word,
.char,
[data-split="line"] {
  padding-bottom: 0.2em !important;
  margin-bottom: -0.2em !important;
  padding-top: 0.1em !important;
  margin-top: -0.1em !important;
}

/* ==================================================================
   07. NAVIGATION — BASE ANIMATIONS
   ------------------------------------------------------------------
   The two competing nav blocks from the original were merged here.
   Override values now live as the single canonical declaration.
   (Section 10 layers the osmo-curve overrides on top of this.)
   ================================================================== */
:root {
  --nav-bg-height: calc(20em + calc(2em + 3em + 2.5em + 3em));
  --cubic-default: cubic-bezier(0.16, 1, 0.3, 1);
  --cubic-flip: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.3s;
  --duration-normal: 0.55s;
  --duration-flip: 0.6s;
}

a {
  color: inherit;
  text-decoration: none;
}

.nav-bg {
  background-color: var(--_theme---nav--open--dropdown-background);
  transition: height 0.85s var(--cubic-default);
}

.page-bg {
  transition: opacity var(--duration-fast) var(--cubic-default);
}

.nav {
  color: var(--_theme---nav--closed--text);
  transition: color var(--duration-fast) var(--cubic-default);
}

.nav-button {
  transition: background-color var(--duration-fast) var(--cubic-default),
    color var(--duration-fast) var(--cubic-default),
    border-color var(--duration-fast) var(--cubic-default);
}

.nav-button.is--primary {
  background-color: var(--_theme---nav--closed--button-primary-background);
  border-color: var(--_theme---nav--closed--button-primary-border);
  color: var(--_theme---nav--closed--button-primary-text);
}

.menu-button__line {
  background-color: currentColor;
}

.nav-dropdown {
  transition: opacity 0.5s var(--cubic-default),
    visibility 0.5s var(--cubic-default);
  will-change: opacity, transform;
}

/* Desktop hover-driven dropdown open state. Wrapped in (hover: hover)
   so phantom hover taps on mobile don't trigger it. */
@media (hover: hover) and (pointer: fine) {

  [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):hover+.nav-dropdown,
  [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-visible+.nav-dropdown,
  [data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown:hover,
  [data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown:focus-within,
  .wf-design-mode [data-dropdown-toggle="open"]+.nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  :is(body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):hover),
    body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-visible),
    body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-within),
    body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown:hover),
    body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown:focus-within)),
  .wf-design-mode body:has([data-dropdown-toggle="open"]) {
    .nav-bg {
      height: var(--nav-bg-height);
    }

    .page-bg {
      opacity: 1;
    }

    .nav {
      color: var(--_theme---nav--open--text);
    }

    .nav-button {
      border-color: var(--_theme---nav--open--text);
      color: var(--_theme---nav--open--text);
    }

    .nav-button.is--primary {
      background-color: var(--_theme---nav--open--button-primary-background);
      border-color: var(--_theme---nav--open--button-primary-background);
      color: var(--_theme---nav--open--button-primary-text);
    }
  }
}

.nav-link__dropdown-icon {
  transition: transform 0.5s var(--cubic-default);
}

[data-dropdown-toggle] {
  transition: background-color var(--duration-fast) var(--cubic-default);
}

@media screen and (min-width: 768px) and (hover: hover) and (pointer: fine) {

  [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):hover .nav-link__dropdown-icon,
  [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus .nav-link__dropdown-icon,
  [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-within .nav-link__dropdown-icon,
  [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):has(+ .nav-dropdown:hover) .nav-link__dropdown-icon,
  [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):has(+ .nav-dropdown:focus-within) .nav-link__dropdown-icon {
    transform: rotate(180deg);
  }

  [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):hover,
  [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus,
  [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-within,
  [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):has(+ .nav-dropdown:hover),
  [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):has(+ .nav-dropdown:focus-within),
  .wf-design-mode body:has([data-dropdown-toggle="open"])+.nav-dropdown {
    background-color: var(--_theme---nav--open--toggle-hover-background);
  }
}

/* Dropdown content items: restored to the slower, more luxurious
   cascade timing. Items start translated right + scaled slightly
   down so they appear to ease in toward you. */
.nav-dropdown__content-li {
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  transform: translate(2.5em, 0) scale(0.94);
  transform-origin: left center;
  will-change: transform, opacity;
}

.nav-dropdown__content-li:nth-child(1) {
  transition-delay: 0.12s;
}

.nav-dropdown__content-li:nth-child(2) {
  transition-delay: 0.18s;
}

.nav-dropdown__content-li:nth-child(3) {
  transition-delay: 0.24s;
}

.nav-dropdown__content-li:nth-child(4) {
  transition-delay: 0.30s;
}

.nav-dropdown__content-li:nth-child(5) {
  transition-delay: 0.36s;
}

.nav-dropdown__content-li:nth-child(6) {
  transition-delay: 0.42s;
}

/* Open state for dropdown content items. Scale comes along now since
   base state starts at scale(0.94). */
@media (hover: hover) and (pointer: fine) {

  body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):hover) [data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):hover+.nav-dropdown .nav-dropdown__content-li,
  body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-visible) .nav-dropdown__content-li,
  body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"]):focus-within) .nav-dropdown__content-li,
  body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown:hover) .nav-dropdown__content-li,
  body:has([data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown:focus-within) .nav-dropdown__content-li,
  .wf-design-mode [data-dropdown-toggle="open"]+.nav-dropdown .nav-dropdown__content-li {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

[data-dropdown-toggle="open"]+.nav-dropdown .nav-dropdown__content-li {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

.nav-dropdown__img {
  transition: transform var(--duration-flip) var(--cubic-flip);
}

.nav-dropdown__img-overlay {
  transition: opacity var(--duration-fast) var(--cubic-default);
}

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

  .nav-dropdown__link:hover .nav-dropdown__img-overlay,
  .nav-dropdown__link:focus-visible .nav-dropdown__img-overlay {
    opacity: 0;
  }

  .nav-dropdown__link:hover .nav-dropdown__img,
  .nav-dropdown__link:focus-visible .nav-dropdown__img {
    transform: scale(1.1);
  }

  .nav-dropdown__link.is--static:hover,
  .nav-dropdown__link.is--static:focus-visible {
    background: var(--_theme---nav--open--link-hover-background);
  }
}

/* Focus-visible only path for keyboard users on any device */
.nav-dropdown__link:focus-visible .nav-dropdown__img-overlay {
  opacity: 0;
}

.nav-dropdown__link:focus-visible .nav-dropdown__img {
  transform: scale(1.1);
}

.nav-dropdown__link.is--static:focus-visible {
  background: var(--_theme---nav--open--link-hover-background);
}

.nav-dropdown__link-label {
  display: inline-block;
  overflow: clip;
  line-height: 1;
  vertical-align: bottom;
}

.nav-dropdown__link-label-inner {
  --text-duplicate-distance: 1.2em;
  display: inline-block;
  pointer-events: none;
  transition: transform var(--duration-flip) var(--cubic-flip);
  text-shadow: 0 var(--text-duplicate-distance) currentColor;
}

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

  .nav-dropdown__link:hover .nav-dropdown__link-label-inner,
  .nav-dropdown__link:focus-visible .nav-dropdown__link-label-inner {
    transform: translate(0, calc(-1 * var(--text-duplicate-distance)));
  }
}

.nav-dropdown__link:focus-visible .nav-dropdown__link-label-inner {
  transform: translate(0, calc(-1 * var(--text-duplicate-distance)));
}

.nav-dropdown__link-bubble {
  position: relative;
  --arrow-travel: 150%;
}

.nav-arrow-icon {
  transition: transform var(--duration-flip) var(--cubic-flip);
}

.nav-arrow-icon.is-2 {
  position: absolute;
  inset: 0;
  transform: translate(calc(-1 * var(--arrow-travel)), 0);
}

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

  .nav-dropdown__link:hover .nav-arrow-icon:not(.is-2),
  .nav-dropdown__link:focus-visible .nav-arrow-icon:not(.is-2) {
    transform: translate(var(--arrow-travel), 0);
  }

  .nav-dropdown__link:hover .nav-arrow-icon.is-2,
  .nav-dropdown__link:focus-visible .nav-arrow-icon.is-2 {
    transform: translate(0, 0);
  }
}

.nav-dropdown__link:focus-visible .nav-arrow-icon:not(.is-2) {
  transform: translate(var(--arrow-travel), 0);
}

.nav-dropdown__link:focus-visible .nav-arrow-icon.is-2 {
  transform: translate(0, 0);
}

a.nav-link .nav-link__label::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform var(--duration-normal) var(--cubic-default);
  transform: scale(0, 1);
  transform-origin: right center;
}

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

  a.nav-link:hover .nav-link__label::after,
  a.nav-link:focus-visible .nav-link__label::after {
    transform: scale(1, 1);
    transform-origin: left center;
  }
}

a.nav-link:focus-visible .nav-link__label::after {
  transform: scale(1, 1);
  transform-origin: left center;
}

/* ==================================================================
   08. MOBILE NAV BEHAVIOR
   ------------------------------------------------------------------
   Fluid scaling expand on open. All elements share the same easing
   curve and coordinated timing so the menu reads as one cohesive
   gesture instead of multiple things popping in at different speeds.
   ================================================================== */
@media screen and (max-width: 767px) {
  :root {
    --nav-bg-height: 100dvh;
  }

  /* Base (closed) state. Snappier timing for the close, so dismissing
     the menu feels decisive. */
  .nav-bg {
    transition: height 0.55s cubic-bezier(0.7, 0, 0.3, 1);
  }

  .nav-dropdown__overflow {
    transition: grid-template-rows 0.5s cubic-bezier(0.7, 0, 0.3, 1);
  }

  .nav-center {
    transform: scale(0.96) translateY(0.5rem);
    transform-origin: top center;
    opacity: 0;
    transition:
      opacity 0.35s cubic-bezier(0.7, 0, 0.3, 1),
      transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);
  }

  .menu-button__line {
    transition:
      transform 0.45s cubic-bezier(0.7, 0, 0.3, 1),
      background-color var(--duration-fast) var(--cubic-default);
  }

  /* Open state. Longer, fluid easing so the expand feels gradual.
     CSS uses the destination state's transition during the change,
     so these longer values apply only when OPENING. Closing falls
     back to the snappier base transitions above. */
  :is([data-menu-status="open"]) {
    color: var(--_theme---nav--open--text);

    .nav-bg {
      transition: height 0.95s cubic-bezier(0.16, 1, 0.3, 1);
      height: var(--nav-bg-height);
    }

    .nav-center {
      transition:
        opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
      transition-delay: 0.18s;
      opacity: 1;
      visibility: visible;
      transform: scale(1) translateY(0);
    }

    .menu-button__line {
      transition:
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        background-color var(--duration-fast) var(--cubic-default);
    }

    .menu-button__line:nth-of-type(1) {
      transform: translate(0px, 0.125em) rotate(135deg);
      background-color: currentColor;
    }

    .menu-button__line:nth-of-type(2) {
      transform: translate(0px, -0.175em) rotate(-135deg);
      background-color: currentColor;
    }

    .page-bg {
      opacity: 1;
    }

    .nav {
      color: var(--_theme---nav--open--text);
    }

    .nav-button {
      border-color: var(--_theme---nav--open--text);
      color: var(--_theme---nav--open--text);
    }

    .nav-button.is--primary {
      background-color: var(--_theme---nav--open--button-primary-background);
      border-color: var(--_theme---nav--open--button-primary-background);
      color: var(--_theme---nav--open--button-primary-text);
    }
  }

  [data-dropdown-toggle="open"]+.nav-dropdown .nav-dropdown__overflow {
    transition: grid-template-rows 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    grid-template-rows: 1fr;
  }

  [data-dropdown-toggle="open"] .nav-link__dropdown-icon {
    transform: rotate(180deg);
  }
}

/* ==================================================================
   09. CURRENT-PAGE LINK HIDE
   ------------------------------------------------------------------
   When a nav link points to the current page, hide its entire row
   from the nav menu. Webflow auto-applies .w--current on initial
   load; the applyCurrentClass JS helper reapplies it after Barba
   transitions so this works across SPA navigation.
   ================================================================== */
.nav-dropdown__content-li:has(a.w--current) {
  display: none;
}

/* Also catches links not wrapped in the standard li structure. */
a.w--current.nav-dropdown__link {
  display: none;
}

/* ==================================================================
   10. NAVIGATION — ANIMATION OVERRIDES
   ------------------------------------------------------------------
   Smoother, more deliberate motion using the osmo curve. Asymmetric
   timing — luxurious open, fast close. Content cascades in WITH the
   sheet, not after. Layers on top of Section 07.
   ================================================================== */
:root {
  --nav-smooth: cubic-bezier(0.625, 0.05, 0, 1);
  --nav-fast: 0.3s;
  --nav-default: 0.5s;
  --nav-long: 0.75s;
}

/* ----- Background sheet ----- */

/* Close: fast, no delay */
.nav-bg {
  transition: height var(--nav-default) var(--nav-smooth) !important;
}

/* Open: longer, builds momentum */
[data-menu-status="open"] .nav-bg {
  transition: height var(--nav-long) var(--nav-smooth) !important;
}

/* ----- Dropdown panel fade ----- */
.nav-dropdown {
  transition:
    opacity var(--nav-fast) var(--nav-smooth),
    visibility var(--nav-fast) var(--nav-smooth) !important;
}

/* ----- Dropdown caret ----- */
.nav-link__dropdown-icon {
  transition: transform var(--nav-default) var(--nav-smooth) !important;
}

/* ----- Dropdown content items ----- */

/* Base state: hidden, slight rise, slight scale.
   Close runs from this state with no delays. */
.nav-dropdown__content-li {
  transition:
    opacity var(--nav-default) var(--nav-smooth),
    transform var(--nav-long) var(--nav-smooth) !important;
  transition-delay: 0s !important;
  transform: translate(0, 1em) scale(0.97);
  transform-origin: center top;
  opacity: 0;
}

/* Open state: items cascade in as sheet finishes expanding. First
   item lands ~150ms into the open sequence; each subsequent ~60ms later. */
[data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown .nav-dropdown__content-li,
[data-dropdown-toggle="open"]+.nav-dropdown .nav-dropdown__content-li {
  transform: translate(0, 0) scale(1) !important;
  opacity: 1 !important;
}

[data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown .nav-dropdown__content-li:nth-child(1),
[data-dropdown-toggle="open"]+.nav-dropdown .nav-dropdown__content-li:nth-child(1) {
  transition-delay: 0.15s !important;
}

[data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown .nav-dropdown__content-li:nth-child(2),
[data-dropdown-toggle="open"]+.nav-dropdown .nav-dropdown__content-li:nth-child(2) {
  transition-delay: 0.21s !important;
}

[data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown .nav-dropdown__content-li:nth-child(3),
[data-dropdown-toggle="open"]+.nav-dropdown .nav-dropdown__content-li:nth-child(3) {
  transition-delay: 0.27s !important;
}

[data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown .nav-dropdown__content-li:nth-child(4),
[data-dropdown-toggle="open"]+.nav-dropdown .nav-dropdown__content-li:nth-child(4) {
  transition-delay: 0.33s !important;
}

[data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown .nav-dropdown__content-li:nth-child(5),
[data-dropdown-toggle="open"]+.nav-dropdown .nav-dropdown__content-li:nth-child(5) {
  transition-delay: 0.39s !important;
}

[data-dropdown-toggle]:not([data-dropdown-toggle="closed"])+.nav-dropdown .nav-dropdown__content-li:nth-child(6),
[data-dropdown-toggle="open"]+.nav-dropdown .nav-dropdown__content-li:nth-child(6) {
  transition-delay: 0.45s !important;
}

/* ----- Mobile: nav center + dropdown overflow ----- */
@media screen and (max-width: 767px) {
  .menu-button__line {
    transition: transform var(--nav-default) var(--nav-smooth),
      background-color var(--nav-fast) ease !important;
  }

  /* Close: nav-center sinks back and fades */
  .nav-center {
    transition:
      transform var(--nav-default) var(--nav-smooth),
      opacity var(--nav-fast) ease !important;
    transform: translateY(-1em);
  }

  /* Open: rises into place after sheet starts expanding */
  [data-menu-status="open"] .nav-center {
    transform: translateY(0) !important;
    transition:
      transform var(--nav-long) var(--nav-smooth) 0.1s,
      opacity var(--nav-fast) ease 0.1s !important;
  }

  /* Dropdown overflow grid expand */
  .nav-dropdown__overflow {
    transition: grid-template-rows var(--nav-default) var(--nav-smooth) !important;
  }

  [data-dropdown-toggle="open"]+.nav-dropdown .nav-dropdown__overflow {
    transition: grid-template-rows var(--nav-long) var(--nav-smooth) 0.25s !important;
  }
}

/* ----- Snap-close during Barba navigation ----- */
body.is-navigating .nav,
body.is-navigating .nav-bg,
body.is-navigating .nav-center,
body.is-navigating .menu-button__line,
body.is-navigating .nav-dropdown,
body.is-navigating .nav-dropdown__overflow,
body.is-navigating .nav-dropdown__content-li,
body.is-navigating .nav-link__dropdown-icon {
  transition: none !important;
}

/* ----- Mobile: nav link label rise ----- */
@media screen and (max-width: 767px) {

  /* Text inside each nav link starts pushed below the clip mask and
     rises up to its natural position when the menu opens. Compounds
     with the existing dropdown li reveal — first the li container
     fades/scales in, then the text inside that li rises into view. */
  .nav-dropdown__link-label-inner {
    transform: translate(0, 110%);
    transition: transform var(--nav-long) var(--nav-smooth) !important;
  }

  /* Open state: text rises to natural position */
  [data-menu-status="open"] .nav-dropdown__link-label-inner,
  [data-dropdown-toggle="open"]+.nav-dropdown .nav-dropdown__link-label-inner {
    transform: translate(0, 0) !important;
  }

  /* Stagger each text reveal slightly behind its li container, so the
     text follows the container rather than competing with it. */
  [data-menu-status="open"] .nav-dropdown__content-li:nth-child(1) .nav-dropdown__link-label-inner {
    transition-delay: 0.25s !important;
  }

  [data-menu-status="open"] .nav-dropdown__content-li:nth-child(2) .nav-dropdown__link-label-inner {
    transition-delay: 0.31s !important;
  }

  [data-menu-status="open"] .nav-dropdown__content-li:nth-child(3) .nav-dropdown__link-label-inner {
    transition-delay: 0.37s !important;
  }

  [data-menu-status="open"] .nav-dropdown__content-li:nth-child(4) .nav-dropdown__link-label-inner {
    transition-delay: 0.43s !important;
  }

  [data-menu-status="open"] .nav-dropdown__content-li:nth-child(5) .nav-dropdown__link-label-inner {
    transition-delay: 0.49s !important;
  }

  [data-menu-status="open"] .nav-dropdown__content-li:nth-child(6) .nav-dropdown__link-label-inner {
    transition-delay: 0.55s !important;
  }
}

/* === Centered slider layout === */
/*.tricks_slider_wrap {*/
/*  overflow-x: clip;*/
/*}*/

/*.tricks_slider_wrap .tricks_slider {*/
/*  display: flex;*/
/*  flex-wrap: nowrap;*/
/*  align-items: stretch;*/
/*  overflow: visible;*/
/*}*/

/* cards per view — gap = --site--gutter (JS reads it for the wrap seam) */
/*.tricks_slider_wrap .tricks_slider_slide {*/
/*  flex: 0 0 auto;*/
/*  width: calc((100% - (2 * var(--site--gutter))) / 3);*/
/* 3 across */
/*  margin-right: var(--site--gutter);*/
/*}*/

/*@media (max-width: 991px) {*/
/*  .tricks_slider_wrap .tricks_slider_slide {*/
/*    width: calc((100% - var(--site--gutter)) / 2);*/
/*  }*/
/*}*/

/*@media (max-width: 767px) {*/
/*  .tricks_slider_wrap .tricks_slider_slide {*/
/*    width: 82%;*/
/*  }*/
/*}*/

/* dim side cards so the centered one pops */
/*.tricks_slider_wrap .tricks_slider:has(.tricks_slider_slide.active) .tricks_slider_slide:not(.active) {*/
/*  opacity: 0.45;*/
/*  transition: opacity 0.4s cubic-bezier(0.625, 0.05, 0, 1);*/
/*}*/

/* progress fill */
/*.tricks_slider_progress_fill {*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  transform-origin: left center;*/
/*}*/

/* hide native cursor over the track so only "DRAG" shows */
/*.tricks_slider,*/
/*.tricks_slider * {*/
/*cursor: none !important;*/
/*  cursor: grab;*/
/*}*/
/*}*/

/* === Drag cursor label === */
/*.drag-cursor {*/
/*  position: fixed;*/
/*  top: 0;*/
/*  left: 0;*/
/*  z-index: 9000;*/
/*  pointer-events: none;*/
/*  display: grid;*/
/*  place-items: center;*/
/*  width: 6em;*/
/*  height: 6em;*/
/*  border-radius: 100em;*/
/*  background: var(--_theme---text, #111);*/
/*  color: var(--_theme---background, #fff);*/
/*  font-size: 0.7rem;*/
/*  letter-spacing: 0.06em;*/
/*  text-transform: uppercase;*/
/*  opacity: 0;*/
/*  transition: opacity 0.25s ease;*/
/*  will-change: transform;*/
/*}*/

/*.drag-cursor.is-visible {*/
/*  opacity: 1;*/
/*}*/

/*@media (hover: none),*/
/*(pointer: coarse) {*/
/*  .drag-cursor {*/
/*    display: none;*/
/*  }*/
/*}*/

/* === Centered slider layout === */
.tricks_slider_wrap {
  overflow-x: clip;
}

.tricks_slider_wrap .tricks_slider {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  overflow: visible;
}

/* cards per view — gap = --site--gutter (JS reads it for the wrap seam) */
.tricks_slider_wrap .tricks_slider_slide {
  flex: 0 0 auto;
  width: calc((100% - (2 * var(--site--gutter))) / 3);
  margin-right: var(--site--gutter);
}

@media (max-width: 991px) {
  .tricks_slider_wrap .tricks_slider_slide {
    width: calc((100% - var(--site--gutter)) / 2);
  }
}

@media (max-width: 767px) {
  .tricks_slider_wrap .tricks_slider_slide {
    width: 82%;
  }
}

/* dim side cards so the centered one pops */
.tricks_slider_wrap .tricks_slider:has(.tricks_slider_slide.active) .tricks_slider_slide:not(.active) {
  opacity: 0.45;
  transition: opacity 0.4s cubic-bezier(0.625, 0.05, 0, 1);
}

/* progress fill */
.tricks_slider_progress_fill {
  width: 100%;
  height: 100%;
  transform-origin: left center;
}

/* native slider cursor */
.tricks_slider,
.tricks_slider * {
  cursor: grab;
}

/* native dragging cursor */
.tricks_slider:active,
.tricks_slider:active * {
  cursor: grabbing;
}

/* disable custom drag cursor */
.drag-cursor,
.drag-cursor.is-visible {
  display: none !important;
}