/* ==========================================================================
   framerless.css — support styles for the motion system in framerless.js.

   The animations themselves are driven from JS via the Web Animations API
   (see framerless.js), so there are no transition classes here. This file
   only covers the things CSS has to own: the mobile menu's open state, the
   ticker/carousel containers, and the reduced-motion fallback.
   ========================================================================== */

/* --- Reduced motion ------------------------------------------------------ */
/* framerless.js skips its animations when this is set, but any element that
   ships hidden must still end up visible.                                    */
@media (prefers-reduced-motion: reduce) {
  [data-framer-appear-id],
  [style*="opacity:0"] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- Social icons -------------------------------------------------------- */
/* The icons ship as bare <svg>; the build wraps each one in a link. Keep the
   anchor out of the layout's way and let the whole icon be the hit target.  */
/* inline-flex, not display:contents — the anchor needs a box of its own so it
   is hit-testable, focusable and exposed to assistive tech. */
a.bi-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  cursor: pointer;
}
a.bi-social > svg {
  cursor: pointer;
  transition: opacity 0.3s ease;
}
a.bi-social:hover > svg {
  opacity: 0.6;
}

/* --- Custom cursor ------------------------------------------------------- */
/* A glowing dot that replaces the pointer, matching the original: a 32px
   box centred on the pointer holding a 12px white dot with a soft halo.
   Only on devices that actually have a pointer — never hide the cursor on
   touch, and never when reduced motion is asked for.                        */
@media (hover: hover) and (pointer: fine) {
  body.bi-cursor-none,
  body.bi-cursor-none * {
    cursor: none;
  }
}

.bi-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  z-index: 13;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.bi-cursor.is-visible {
  opacity: 1;
}
.bi-cursor__dot {
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 100px;
  opacity: 0.9;
  box-shadow: rgba(255, 255, 255, 0.45) 0 0 14px 5px,
              rgba(255, 255, 255, 0.85) 0 0 3px 1px;
  /* Shrinks while the mouse is held down, then grows back. */
  transition: transform 120ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

@media (prefers-reduced-motion: reduce) {
  .bi-cursor { display: none; }
  body.bi-cursor-none,
  body.bi-cursor-none * { cursor: auto; }
}

/* --- Smooth scrolling ---------------------------------------------------- */
/* framerless.js eases the scroll position itself; native smooth behaviour
   would fight it, so keep the browser's own scrolling instant.              */
html {
  scroll-behavior: auto;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --- Button label roll --------------------------------------------------- */
/* The two stacked label copies must be clipped to the short window; Framer's
   own CSS already sets this, but keep it explicit so the roll can't leak.   */
[data-framer-name="Text Container"] {
  overflow: hidden;
}

/* --- Ticker -------------------------------------------------------------- */
/* The marquee track is cloned and translated by JS; keep it on one line and
   off the compositor's critical path.                                        */
section[style*="mask-image"] > ul {
  flex-wrap: nowrap !important;
  will-change: transform;
}
section[style*="mask-image"] > ul > li {
  flex-shrink: 0;
}

/* --- Review carousel ----------------------------------------------------- */
.framer-slideshow-axis-x > div > ul,
.framer-slideshow-axis-x ul {
  flex-wrap: nowrap !important;
  will-change: transform;
}

/* --- Hero background layers ---------------------------------------------- */
/* JS stacks one layer per background photo inside the existing wrapper.      */
[data-framer-name="Hero section"] [data-framer-name="Image"] [data-framer-background-image-wrapper] {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* --- Mobile navigation menu ---------------------------------------------- */
/* Closed state is a 64px pill with overflow:hidden; opening reveals the
   stacked links panel that is already in the DOM.                            */
nav[data-framer-name="Mobileclosed"] {
  transition: height 0.45s cubic-bezier(0.44, 0, 0.2, 1),
              background-color 0.3s ease;
}
/* Open, the bar becomes a solid black panel — without it the links sit
   straight on top of the page content behind them. The original does the
   same: the nav itself turns black, the panel inside stays transparent. */
nav[data-framer-name="Mobileclosed"].is-open {
  height: auto !important;
  overflow: visible !important;
  background-color: var(--token-f861e579-2e12-4363-acbe-3e6c47e8f962, #000) !important;
}

/* Hamburger -> X */
nav[data-framer-name="Mobileclosed"] [data-framer-name="line 1"],
nav[data-framer-name="Mobileclosed"] [data-framer-name="line2"],
nav[data-framer-name="Mobileclosed"] [data-framer-name="line3"] {
  transition: transform 0.4s cubic-bezier(0.44, 0, 0.2, 1),
              opacity 0.25s ease;
}
nav[data-framer-name="Mobileclosed"].is-open [data-framer-name="line 1"] {
  top: calc(51.6129% - 1px) !important;
  bottom: unset !important;
  transform: rotate(45deg) !important;
}
nav[data-framer-name="Mobileclosed"].is-open [data-framer-name="line2"] {
  opacity: 0 !important;
}
nav[data-framer-name="Mobileclosed"].is-open [data-framer-name="line3"] {
  top: calc(51.6129% - 1px) !important;
  bottom: unset !important;
  transform: rotate(-45deg) !important;
}