/* Deck - ported from Framer code component Deck.tsx
   A slide carousel. Slides sit on a flex track translated by -i*100%; the
   viewport holds a fixed height and both the track and the height animate over
   `duration` on the shared UNREEL ease. Navigation chrome is one of arrows |
   sides | dots | tabs | none. js/framer/deck.js auto-advances (pausing on hover
   and focus, answering the arrow keys) and stops under prefers-reduced-motion,
   which also freezes the slide and height transitions. Every colour/size the
   TSX exposed as a prop is a --fr-deck-* custom property. */
.fr-deck {
  --fr-deck-accent: var(--jifu-accent, #8B6D55);
  --fr-deck-ink: #FFFFFF;
  --fr-deck-arrow-color: var(--fr-deck-accent);
  --fr-deck-arrow-border: var(--jifu-rule, rgba(25, 25, 25, 0.16));
  --fr-deck-arrow-size: 46px;
  --fr-deck-side-inset: 6px;
  --fr-deck-nav-gap: 20px;
  --fr-deck-nav-height: 46px;
  --fr-deck-dur: 0.6s;
  --fr-deck-view-bg: transparent;
  --fr-deck-view-border: transparent;
  --fr-deck-view-radius: 0px;
  --fr-deck-height: 1276px;
  --fr-deck-tabs-pad: 20px;
  --fr-deck-tab-inactive-border: rgba(255, 255, 255, 0.22);
  --fr-deck-tab-inactive-color: rgba(255, 255, 255, 0.72);
  --fr-deck-ease: cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
}
.fr-deck:focus { outline: none; }

.fr-deck__view {
  position: relative;
  overflow: hidden;
  height: var(--fr-deck-height);
  transition: height var(--fr-deck-dur) var(--fr-deck-ease);
  background: var(--fr-deck-view-bg);
  border: 1px solid var(--fr-deck-view-border);
  border-radius: var(--fr-deck-view-radius);
  box-sizing: border-box;
}
.fr-deck__track {
  display: flex;
  height: 100%;
  width: 100%;
  transform: translate3d(0, 0, 0);
  transition: transform var(--fr-deck-dur) var(--fr-deck-ease);
}
.fr-deck__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Arrows (row and side variants share the base) */
.fr-deck__arrow {
  width: var(--fr-deck-arrow-size);
  height: var(--fr-deck-arrow-size);
  border-radius: 999px;
  border: 1px solid var(--fr-deck-arrow-border);
  background: transparent;
  color: var(--fr-deck-arrow-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transform: translateY(0);
  transition: border-color 0.22s var(--fr-deck-ease), background-color 0.22s var(--fr-deck-ease), color 0.22s var(--fr-deck-ease), transform 0.22s var(--fr-deck-ease);
}
.fr-deck__arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fr-deck__arrow--side { position: absolute; top: 50%; transform: translateY(-50%); }
.fr-deck__arrow--prev.fr-deck__arrow--side { left: var(--fr-deck-side-inset); }
.fr-deck__arrow--next.fr-deck__arrow--side { right: var(--fr-deck-side-inset); }

/* Arrows row (chrome=arrows) */
.fr-deck__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--fr-deck-nav-height);
  margin-top: var(--fr-deck-nav-gap);
  position: relative;
}
.fr-deck__nav.is-center { justify-content: center; }
.fr-deck__nav-dots { display: flex; flex: 1; justify-content: flex-start; }
.fr-deck__nav.is-center .fr-deck__nav-dots { justify-content: center; }
.fr-deck__nav-arrows { display: flex; gap: 10px; position: relative; right: 0; }
.fr-deck__nav.is-center .fr-deck__nav-arrows { position: absolute; right: 0; }

/* Dot row (chrome=dots|sides) */
.fr-deck__dotrow {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--fr-deck-nav-gap);
  height: var(--fr-deck-nav-height);
}

/* Dots */
.fr-deck__dots { display: flex; align-items: center; gap: 9px; }
.fr-deck__dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--fr-deck-accent);
  opacity: 0.28;
  box-shadow: none;
  transition: width 0.22s var(--fr-deck-ease), height 0.22s var(--fr-deck-ease), opacity 0.22s var(--fr-deck-ease), box-shadow 0.22s var(--fr-deck-ease);
}
.fr-deck__dot.is-active { width: 14px; height: 14px; opacity: 1; }

/* Tabs */
.fr-deck__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: var(--fr-deck-tabs-pad) 0;
}
.fr-deck__tab {
  padding: 9px 18px;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-family: var(--jifu-font-body, Montserrat, sans-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 21.7px;
  border: 1px solid var(--fr-deck-tab-inactive-border);
  color: var(--fr-deck-tab-inactive-color);
  transition: border-color 0.22s var(--fr-deck-ease), color 0.22s var(--fr-deck-ease), background-color 0.22s var(--fr-deck-ease);
}
.fr-deck__tab.is-active { border-color: var(--fr-deck-accent); color: var(--fr-deck-ink); }
.fr-deck__tab-dot {
  display: none;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--fr-deck-accent);
  margin-right: 12px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.fr-deck__tab.is-active .fr-deck__tab-dot { display: inline-block; }

.fr-deck__arrow:focus-visible,
.fr-deck__dot:focus-visible,
.fr-deck__tab:focus-visible { outline: 2px solid var(--fr-deck-accent); outline-offset: 3px; }

@media (hover: hover) {
  .fr-deck__arrow:hover {
    border-color: var(--fr-deck-accent);
    color: var(--fr-deck-accent);
    background: color-mix(in srgb, var(--fr-deck-accent) 9%, transparent);
    transform: translateY(-2px);
  }
  .fr-deck__arrow--side:hover { transform: translateY(calc(-50% - 2px)); }
  .fr-deck__dot:not(.is-active):hover {
    opacity: 0.6;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fr-deck-accent) 28%, transparent);
  }
  .fr-deck__tab:hover { background: color-mix(in srgb, var(--fr-deck-accent) 10%, transparent); }
  .fr-deck__tab:not(.is-active):hover {
    color: var(--fr-deck-ink);
    border-color: color-mix(in srgb, var(--fr-deck-accent) 40%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fr-deck__view, .fr-deck__track, .fr-deck__arrow { transition: none; }
  .fr-deck__arrow:hover { transform: translateY(0); }
  .fr-deck__arrow--side:hover { transform: translateY(-50%); }
}

/* Data-driven slides (Deck.tsx's built-in sets: wav, skin, omg, stm3d, gen3,
   pulse), generated by scripts/build_framer_decks.py. A slide is a container
   whose items are placed as percentages of it and whose type is sized in
   container units; css/framer/decks/<deck>.css holds each item's measured
   geometry per breakpoint. .fr-deck--data lets the view take the slide's own
   height instead of the fixed --fr-deck-height. */
.fr-dk { position: relative; width: 100%; margin-inline: auto; container-type: inline-size; overflow: hidden; }
.fr-dk__i { position: absolute; margin: 0; display: block; }
.fr-deck--data .fr-deck__view { height: auto; }
.fr-deck--data .fr-deck__track { height: auto; align-items: flex-start; }
.fr-deck--data .fr-deck__slide { height: auto; align-items: flex-start; }