/* START Section: Masonry list base styles */
[data-masonry-list] {
  --masonry-col: 4;
  /* Control the amount of columns */
  --masonry-gap: 1em;
  /* The gap between all of the items */
}

@media screen and (max-width: 991px) {
  [data-masonry-list] {
    --masonry-col: 3;
    --masonry-gap: 1em;
  }
}

@media screen and (max-width: 767px) {
  [data-masonry-list] {
    --masonry-col: 2;
    --masonry-gap: 0.5em;
  }
}

/* END Section: Masonry list base styles */

/* START Section: Expanding Feature Pills */
/* Max width of expanded pill/content */
[data-feature-pills-init] {
  --content-item-expanded: 25em;
}

@media screen and (max-width: 991px) {
  [data-feature-pills-init] {
    --content-item-expanded: calc(50% - 0.5em);
  }
}

@media screen and (max-width: 767px) {
  [data-feature-pills-init] {
    --content-item-expanded: 100%;
  }
}

/* Default state + transition */
[data-feature-pills-button] {
  opacity: 1;
  transition: opacity 400ms ease-in-out 300ms;
}

[data-feature-pills-inner] {
  opacity: 0;
  transition: opacity 300ms ease-in-out 0ms;
}

[data-feature-pills-visual] {
  opacity: 0;
  transition: opacity 350ms ease-in-out;
}

[data-feature-pills-cover] {
  opacity: 1;
  transition: opacity 350ms ease-in-out;
}

/* Active Pill */
[data-feature-pills-item][data-active="true"] [data-feature-pills-button] {
  opacity: 0;
  transition: opacity 50ms ease-in-out 0ms;
}

[data-feature-pills-item][data-active="true"] [data-feature-pills-inner] {
  opacity: 1;
}

/* Active Visual */
[data-feature-pills-visual][data-active="true"] {
  opacity: 1;
}

[data-feature-pills-cover][data-active="false"] {
  opacity: 0;
}

/* Close button */
[data-feature-pills-close] {
  transform: scale(0) rotate(135deg);
  opacity: 0;
  pointer-events: none;
  transition: all 500ms cubic-bezier(.7, 0, .3, 1);
}

[data-feature-pills-active="true"] [data-feature-pills-close] {
  transform: scale(1) rotate(45deg);
  opacity: 1;
  pointer-events: auto;
}

/* 'edit' mode where buttons are hidden and inner content is shown */
[data-feature-pills-init][data-edit-mode="true"] [data-feature-pills-collection] {
  overflow: auto;
  justify-content: start;
}

[data-feature-pills-init][data-edit-mode="true"] [data-feature-pills-button] {
  display: none;
}

[data-feature-pills-init][data-edit-mode="true"] [data-feature-pills-content] {
  position: relative;
  pointer-events: auto;
}

[data-feature-pills-init][data-edit-mode="true"] [data-feature-pills-inner] {
  opacity: 1;
  transform: translate(0px, 0em);
}

/* END Section: Expanding Feature Pills */

/* START Section: Layout Grid Flip Filter */
[data-layout-status="large"] {
  --columns: 3;
  --column-gap: 1.5em;
}

[data-layout-status="small"] {
  --columns: 5;
  --column-gap: 1em;
}

[data-layout-grid-item] {
  width: calc((100% - (var(--columns) - 1) * var(--column-gap)) / var(--columns));
}

[data-layout-grid-item-title] {
  transition: all 0.8s cubic-bezier(0.65, 0, 0.1, 1);
}

/* Change card layout while we're in grid mode */
[data-layout-status="large"] [data-layout-grid-item] .layout-grid__card-sub {
  transition-delay: 0.6s;
}

/* Change card layout while we're in list mode */
[data-layout-status="small"] [data-layout-grid-item] .layout-grid__card-title {
  font-size: 1em;
}

[data-layout-status="small"] [data-layout-grid-item] .layout-grid__card-sub {
  opacity: 0;
  pointer-events: none;
}

/* Define layout sizes per breakpoint */
@media screen and (max-width: 767px) {
  [data-layout-status="large"] {
    --columns: 1;
    --column-gap: 0em;
  }

  [data-layout-status="small"] {
    --columns: 2;
    --column-gap: 1em;
  }
}

/* END Section: Layout Grid Flip Filter */

/* START Section: Two-step Scaling Navigation */

/* Bulletproof default: hide active logo regardless of nav state */
.site-logo--active {
  opacity: 0 !important;
  pointer-events: none;
}

[data-twostep-nav] {
  --cubic-default: cubic-bezier(0.625, 0.05, 0, 1);
  --animation-ease: 0.2s ease;

  --duration-default: 0.5s;
  --duration-default-long: 0.75s;
  --duration-default-half: 0.25s;

  --animation-default: var(--duration-default) var(--cubic-default);
  --animation-default-long: var(--duration-default-long) var(--cubic-default);
  --animation-default-half: var(--duration-default-half) var(--cubic-default);
}

[data-nav-ready="false"] * {
  transition: none !important;
}

/* Logo swap when nav opens */

/* Main logo (closed state) */

/* Default logo */
.site-logo--default {
  position: relative;
  display: block;
  opacity: 1;
  transition: opacity 0.3s ease 0s;
  z-index: 1;
}

/* Active logo */
.site-logo--active {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease 0s;
  z-index: 2;
  pointer-events: none;
  object-fit: contain;
}

/* Nav opening: default fades out first */
[data-twostep-nav][data-nav-ready="true"][data-nav-status="active"] .site-logo--default {
  opacity: 0 !important;
  transition: opacity 0.3s ease 0s;
}

/* Nav opening: active fades in after */
[data-twostep-nav][data-nav-ready="true"][data-nav-status="active"] .site-logo--active {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.3s ease 0.3s, visibility 0s ease 0.3s !important;
}

/* Nav closing: active fades out first */
[data-twostep-nav][data-nav-status="not-active"] .site-logo--default {
  opacity: 1 !important;
  transition: opacity 0.3s ease 0.3s;
}

/* Nav closing: default fades in after */
[data-twostep-nav][data-nav-status="not-active"] .site-logo--active {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease 0s, visibility 0s ease 0.3s !important;
}

/* Menu button */
.twostep-nav__toggle-bar {
  transition: transform var(--animation-default);
  transform: translateY(-0.25em) rotate(0.001deg);
}

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

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

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

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

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

/* Logo swap when nav opens */

.site-logo-wrapper {
  position: relative;
  display: inline-block;
}

/* Default logo defines wrapper size */
.site-logo--default {
  position: relative;
  display: block;
  opacity: 1;
  /* default: visible */
  transition: opacity var(--animation-default);
  z-index: 1;
}

/* Active logo overlays and MUST be sized */
.site-logo--active {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease 0s, visibility 0s ease 0.3s;
  z-index: 2;
  pointer-events: none;
  object-fit: contain;
}

/* Nav open: swap (only when nav is ready AND active) */
[data-twostep-nav][data-nav-ready="true"][data-nav-status="active"] .site-logo--default {
  opacity: 0 !important;
}

[data-twostep-nav][data-nav-ready="true"][data-nav-status="active"] .site-logo--active {
  opacity: 1 !important;
}

/* Closed state (ready or not) – default logo only */
[data-twostep-nav][data-nav-status="not-active"] .site-logo--default {
  opacity: 1 !important;
}

[data-twostep-nav][data-nav-status="not-active"] .site-logo--active {
  opacity: 0 !important;
}

/* Page dark overlay */
.twostep-nav__bg {
  transition: opacity var(--animation-default), visibility var(--animation-default);
}

[data-nav-status="active"] .twostep-nav__bg {
  opacity: 1;
  visibility: visible;
}

/* Inner bar grow */
.twostep-nav__bar {
  transition: max-width var(--animation-default-long) 0.2s;
}

[data-nav-status="active"] .twostep-nav__bar {
  transition: max-width var(--animation-default) 0s;
  max-width: 100%;
}

/* Thin line in nav bar */
.twostep-nav__top-line {
  transition: all var(--animation-default) 0s;
  opacity: 0;
}

[data-nav-status="active"] .twostep-nav__top-line {
  transition: all var(--animation-default) 0.1s;
  opacity: 1;
}

@media screen and (max-width: 767px) {
  .twostep-nav__top-line {
    inset: auto 1em -0.5em;
  }

  [data-nav-status="active"] .twostep-nav__top-line {
    transition: all var(--animation-default) 0.2s;
    inset: auto 0em -0.5em;
  }
}

/* Nav bar background */
.twostep-nav__bar__bg,
[data-nav-status="active"] .twostep-nav__back-bg {
  transition: background-color var(--animation-ease);
}

.twostep-nav__back {
  transition: all var(--animation-default);
  inset: 0em;
}

[data-nav-status="active"] .twostep-nav__back {
  inset: -0.25em;
}

@media screen and (max-width: 767px) {
  [data-nav-status="active"] .twostep-nav__back {
    inset: -1.25em;
  }
}

/* Nav bottom */
.twostep-nav__bottom {
  transition: grid-template-rows var(--animation-default) 0s;
}

[data-nav-status="active"] .twostep-nav__bottom {
  transition: grid-template-rows var(--animation-default-long) 0.25s;
  grid-template-rows: 1fr;
}

@media screen and (max-width: 767px) {
  .twostep-nav__bottom {
    transition: grid-template-rows var(--animation-default) 0s, transform var(--animation-default) 0s;
    transform: translateY(-0.625em);
  }

  [data-nav-status="active"] .twostep-nav__bottom {
    transition: grid-template-rows var(--animation-default-long) 0.25s, transform var(--animation-default) 0.25s;
    transform: translateY(0em);
  }
}

/* Nav columns reveal */
.twostep-nav__bottom-row>* {
  transition: all var(--animation-default) 0s;
  transform: translateY(2em);
  opacity: 0;
}

.twostep-nav__bottom-row>*:nth-child(2) {
  transition-delay: 0.075s;
}

[data-nav-status="active"] .twostep-nav__bottom-row>* {
  transition: all var(--animation-default-long) 0.5s;
  transform: translateY(0em);
  opacity: 1;
}

[data-nav-status="active"] .twostep-nav__bottom-row>*:nth-child(2) {
  transition-delay: 0.575s;
}

/* END Section: Two-step Scaling Navigation */

/* START Section: Background Video Bunny Player */
/* Animation */
[data-bunny-background-init] :is(.bunny-bg__placeholder, .bunny-bg__loading) {
  transition: opacity 0.3s linear, visibility 0.3s linear;
}

/* Placeholder */
[data-bunny-background-init][data-player-status="playing"] .bunny-bg__placeholder,
[data-bunny-background-init][data-player-status="paused"] .bunny-bg__placeholder,
[data-bunny-background-init][data-player-activated="true"][data-player-status="ready"] .bunny-bg__placeholder {
  opacity: 0;
  visibility: hidden;
}

/* Play/Pause */
[data-bunny-background-init][data-player-status="playing"] .bunny-bg__play-svg,
[data-bunny-background-init][data-player-status="loading"] .bunny-bg__play-svg {
  display: none;
}

[data-bunny-background-init][data-player-status="playing"] .bunny-bg__pause-svg,
[data-bunny-background-init][data-player-status="loading"] .bunny-bg__pause-svg {
  display: block;
}

/* Loading */
[data-bunny-background-init][data-player-status="loading"] .bunny-bg__loading {
  opacity: 1;
  visibility: visible;
}

/* Always hide Bunny loading spinner */
[data-bunny-background-init] .bunny-bg__loading {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* END Section: Background Video Bunny Player */