/* Figma Sites Base CSS - Extracted and Modified for Self-Hosting */

/* Google Fonts Import */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,700&family=Passion+One:wght@700&display=swap");

/* CSS Layers */
@layer figreset, figoverridable, reset, theme, base, figutils, components, utilities;

@layer figoverridable {
  :root {
    font-synthesis: none;
  }
}

@layer figutils {
  :root {
    --banner-height: 48px;
    --banner-height-v2: 40px;
    --full-height-with-banner: calc(100dvh - var(--banner-height));
  }

  @media (max-width: 600px) {
    .banner-v2-container {
      left: 0 !important;
      right: 0 !important;
      margin: 0 auto !important;
    }
  }

  .wrapper-with-banner .min-h-screen {
    min-height: var(--full-height-with-banner);
  }

  .wrapper-with-banner .h-screen {
    height: var(--full-height-with-banner);
  }
}

@layer figreset {
  :root {
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }

  html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    width: 100%;
  }

  body {
    margin: 0;
    width: 100%;
  }

  body:has([data-page-overflowx="hidden"]) {
    overflow-x: hidden;
  }

  body:has([data-page-overflowx="auto"]) {
    overflow-x: auto;
  }
}

@layer figutils {
  #container {
    width: 100%;
  }
}

@layer figreset {
  *,
  *:before,
  *:after {
    box-sizing: border-box;
  }

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

  button {
    border: none;
    background: none;
    padding: 0;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    font-size: inherit;
    font-weight: inherit;
  }

  blockquote,
  dl,
  dd,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  hr,
  figure,
  p,
  pre {
    margin: 0;
  }

  ol,
  ul,
  menu {
    list-style: none;
    margin: 0;
    padding-inline-start: 0;
  }
}

@layer figreset {
  #container .textContents {
    color: #ffffff00;
  }
}

@layer figutils {
  :is(.textContents ul, ul.textContents) > li:before {
    content: "\2022";
    margin-left: -1.5em;
    display: inline-block;
    text-align: center;
    width: 1.5em;
    -webkit-background-clip: var(--list-marker-background-clip);
    -webkit-text-fill-color: var(--list-marker-text-fill-color);
    background-clip: var(--list-marker-background-clip);
    background-image: var(--list-marker-background-image);
    color: var(--list-marker-color);
    font-size: var(--list-marker-font-size);
    line-height: var(--list-marker-line-height);
    mix-blend-mode: var(--list-marker-mix-blend-mode);
    vertical-align: var(--list-marker-vertical-align);
  }

  :is(.textContents ol, ol.textContents) > li::marker {
    color: var(--list-marker-color);
    font-size: var(--list-marker-font-size);
    line-height: var(--list-marker-line-height);
    vertical-align: var(--list-marker-vertical-align);
  }

  :is(.textContents, .textContents *).adjustLetterSpacing:after {
    content: "";
    margin-left: calc(var(--letter-spacing) * -1);
  }
}

@layer figutils {
  #container .textClip {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent !important;
  }

  #container .textClip > * {
    -webkit-text-fill-color: initial;
  }
}

@layer figutils {
  #container .embed {
    border: none;
  }
}

@layer figutils {
  #container .marquee-container {
    overflow-x: hidden;
    display: flex;
    flex-direction: row;
    position: relative;
    width: var(--width);
    transform: var(--transform);
  }

  #container .marquee-container:hover div {
    animation-play-state: var(--pause-on-hover);
  }

  #container .marquee-container:active div {
    animation-play-state: var(--pause-on-click);
  }

  #container .marquee-container:focus-within > * {
    animation-play-state: paused !important;
  }

  #container .marquee {
    flex: 0 0 auto;
    min-width: var(--min-width);
    display: flex;
    flex-direction: row;
    align-items: center;
    animation: scroll var(--duration) linear var(--delay) var(--iteration-count);
    animation-delay: var(--delay);
    animation-direction: var(--direction);
    animation-timing-function: var(--timing-function);
  }

  #container .marquee.reduced-motion {
    @media (prefers-reduced-motion: reduce) {
      animation: none;
    }
  }

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

  #container .marquee-initial-child-container {
    flex: 0 0 auto;
    display: flex;
    min-width: auto;
    flex-direction: row;
    align-items: center;
  }

  #container .marquee-child {
    transform: var(--transform);
  }
}

@layer figutils {
  .code-behavior-wrapper > * {
    width: 100%;
    height: 100%;
  }
}

@layer figreset {
  :root {
    --100dvw: 100vw;
    --100dvh: 100vh;
  }

  @supports (width: 100dvw) {
    :root {
      --100dvw: 100dvw;
      --100dvh: 100dvh;
    }
  }
}

@layer figutils {
  .bypass-link {
    position: fixed;
    top: 16px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
  }

  .bypass-link:focus-within {
    opacity: 1;
    z-index: 10000;
  }

  .bypass-link > a {
    background-color: #000;
    color: #fff;
    border: 1px solid #fff;
    padding: 12px 16px;
    font-size: 16px;
    border-radius: 12px;
    pointer-events: auto;
  }
}

@layer figreset {
  :root {
    text-align: left;
  }

  :root button {
    text-align: left;
  }
}

/* Body Background */
body {
  background-color: #fff;
}

/* Body Background for Different Breakpoints */
@media (max-width: 799px) {
  body:has([data-breakpoint-id="node-0_6"]),
  body:has([data-breakpoint-id="node-7_997"]),
  body:has([data-breakpoint-id="node-7_4490"]) {
    background-color: #fff;
  }
}

@media (min-width: 800px) and (max-width: 1279px) {
  body:has([data-breakpoint-id="node-1_1520"]),
  body:has([data-breakpoint-id="node-7_969"]),
  body:has([data-breakpoint-id="node-7_4358"]) {
    background-color: #fff;
  }
}

@media (min-width: 1280px) {
  body:has([data-breakpoint-id="node-0_4"]),
  body:has([data-breakpoint-id="node-7_941"]),
  body:has([data-breakpoint-id="node-7_4226"]) {
    background-color: #fff;
  }
}

/* Breakpoint Visibility CSS */
/* Mobile: 375px — hide above 800px */
@media (min-width: 800px) {
  [data-breakpoint-id="node-0_6"],
  [data-breakpoint-id="node-7_997"],
  [data-breakpoint-id="node-7_4490"] {
    display: none !important;
  }
}

/* Tablet: 800px — hide below 800px and above 1280px */
@media (max-width: 799px), (min-width: 1280px) {
  [data-breakpoint-id="node-1_1520"],
  [data-breakpoint-id="node-7_969"],
  [data-breakpoint-id="node-7_4358"] {
    display: none !important;
  }
}

/* Desktop: 1280px — hide below 1280px */
@media (max-width: 1279px) {
  [data-breakpoint-id="node-0_4"],
  [data-breakpoint-id="node-7_941"],
  [data-breakpoint-id="node-7_4226"] {
    display: none !important;
  }
}

/* ==========================================================================
   Scroll Animations
   Based on Figma Sites animation parameters:
   - Duration: 600ms
   - Easing: cubic-bezier(0, 0, 0.2, 1) (ease-out)
   - Transform: translateY(50px) -> translateY(0)
   - Opacity: 0 -> 1
   ========================================================================== */

/* Animation CSS variables - matched to Figma */
:root {
    --animate-duration: 600ms;
    --animate-easing: cubic-bezier(0, 0, 0.2, 1);
    --animate-distance: 50px;
    --animate-stagger: 200ms;
  }

  /* Base animation state - hidden (use #container for specificity) */
  #container [data-animate] {
    opacity: 0;
    transform: translateY(var(--animate-distance));
    transition:
      opacity var(--animate-duration) var(--animate-easing),
      transform var(--animate-duration) var(--animate-easing);
  }

  /* Animated state - visible */
  #container [data-animate].is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Animation variants */
  #container [data-animate="fade"] {
    transform: none;
  }

  #container [data-animate="fade-up"] {
    transform: translateY(var(--animate-distance));
  }

  #container [data-animate="fade-down"] {
    transform: translateY(calc(var(--animate-distance) * -1));
  }

  #container [data-animate="fade-left"] {
    transform: translateX(var(--animate-distance));
  }

  #container [data-animate="fade-right"] {
    transform: translateX(calc(var(--animate-distance) * -1));
  }

  #container [data-animate="zoom-in"] {
    transform: scale(0.9);
  }

  /* Visible state transforms */
  #container [data-animate="fade"].is-visible {
    transform: none;
  }

  #container [data-animate="fade-up"].is-visible,
  #container [data-animate="fade-down"].is-visible {
    transform: translateY(0);
  }

  #container [data-animate="fade-left"].is-visible,
  #container [data-animate="fade-right"].is-visible {
    transform: translateX(0);
  }

  #container [data-animate="zoom-in"].is-visible {
    transform: scale(1);
  }

/* Stagger delays for sequential animations */
#container [data-animate-delay="1"] { transition-delay: calc(var(--animate-stagger) * 1); }
#container [data-animate-delay="2"] { transition-delay: calc(var(--animate-stagger) * 2); }
#container [data-animate-delay="3"] { transition-delay: calc(var(--animate-stagger) * 3); }
#container [data-animate-delay="4"] { transition-delay: calc(var(--animate-stagger) * 4); }
#container [data-animate-delay="5"] { transition-delay: calc(var(--animate-stagger) * 5); }
#container [data-animate-delay="6"] { transition-delay: calc(var(--animate-stagger) * 6); }

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  #container [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}