/* ================================================
Blankboard Studio - Global Styles
================================================ */

/* ------------------------------------------------
00. Webflow font-face override (Aeonik default ss02)
Place here so it loads after Webflow CSS when added in Head code
------------------------------------------------ */

/* ------------------------------------------------
    01. Token Hub
    ------------------------------------------------ */
:root {
  /* Scaling System */
  --size-unit: 16; /* Body font-size in design units (no px) */
  --size-container-ideal: 1440;
  --size-container-min: 1280px;
  --size-container-max: 22400px;

  --size-container: clamp(
    var(--size-container-min),
    100vw,
    var(--size-container-max)
  );

  --size-font: calc(
    var(--size-container) / (var(--size-container-ideal) / var(--size-unit))
  );

  font-size: var(--size-font);

  /* Color aliases (still uses your existing --_colors---* vars) */
  --color-accent: var(--_colors---accent, #e04f22);
  --color-bg-dark: var(--_colors---bg--dark, #0b0e14);
  --color-text-light: var(--_colors---text-color--light, #f2f5ff);

  /* Existing tokens (kept as-is) */
  --base---box-opacity: 50%;
  --shadow-blur: 3em;
  --address-icon-fill: var(--color-accent);

  /* Motion + timing */
  --ease-bbs: cubic-bezier(0.65, 0.05, 0, 1);
  --dur-bbs: 735ms;

  /* Underline effect */
  --underline-top: 92%;
  --underline-height: 1px;
  --inline-underline-opacity: 0.48;

  /* Loops */
  --loop-x-duration: 60s;
  --loop-y-duration: 32s;

  /* SVG dash */
  --svg-dash-duration: 8s;
  --svg-dash-offset: 600;

  /* Zoom */
  --image-zoom-scale: 1.12;
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 834;
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 430;
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 430;
    --size-container-min: 320px;
    --size-container-max: 428px;
  }
}

/* ------------------------------------------------
          02. Color System: OKLCH and Display-P3 Fallback
          ------------------------------------------------ */
@supports (color: oklch(50% 0.2 280)) {
  :root {
    /* Add OKLCH tokens here if needed */
    --_colors---vermillion: oklch(61.83% 0.1951 34.47);
    --_colors---black: oklch(0% 0 0);
    --_colors---ink: oklch(11.67% 0.0281 34.29);
    --_colors---grey: oklch(57.74% 0.0066 41.46);
    --_colors---silver: oklch(90.14% 0 0);
    --_colors---smoke: oklch(96.67% 0 0);
    --_colors---snow: oklch(98.2% 0 0);
  }
}

@supports (color: color(display-p3 1 0 0)) {
  :root {
    /* Add Display-P3 tokens here if needed */
    --_colors---vermillion: color(display-p3 0.878431 0.309804 0.133333 / 1);
    --_colors---black: color(display-p3 0 0 0 / 1);
    --_colors---ink: color(display-p3 0.047059 0.015686 0.003922 / 1);
    --_colors---grey: color(display-p3 0.490196 0.47451 0.466667 / 1);
    --_colors---silver: color(display-p3 0.870588 0.870588 0.870588 / 1);
    --_colors---smoke: color(display-p3 0.956863 0.956863 0.956863 / 1);
    --_colors---snow: color(display-p3 0.976471 0.976471 0.976471 / 1);
  }
}

/* ------------------------------------------------
          03. Reset & Box Model
          ------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  text-size-adjust: 100%;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 8%;
  text-underline-offset: -8%;
  text-underline-position: from-font;
}

html {
  scroll-behavior: initial;
  scrollbar-width: none; /* Firefox */
  -webkit-font-smoothing: antialiased;
}

html.is-cursor-hidden,
html.is-cursor-hidden *,
html.is-cursor-hidden *::before,
html.is-cursor-hidden *::after {
  cursor: none !important;
}

body {
  width: 100vw;

  /* IMPORTANT: one declaration only (second line was overriding the first) */
  font-feature-settings: "liga" 1, "calt" 1;

  -ms-overflow-style: none; /* IE & Edge */
}

/* Hide scrollbars universally */
body::-webkit-scrollbar,
body ::-webkit-scrollbar {
  display: none;
}

svg {
  max-width: none;
  height: auto;
  box-sizing: border-box;
  vertical-align: middle;
}

a {
  color: inherit;
}

/* ------------------------------------------------
          04. Typography Utilities
          ------------------------------------------------ */
/* Same behavior, lower specificity so Webflow overrides stay easy */
.rte :where(> :first-child, > div:first-child > :first-child) {
  margin-top: 0;
}
.rte :where(> :last-child, > div:first-child > :last-child) {
  margin-bottom: 0;
}

/* ------------------------------------------------
          05. Utility Attributes
          ------------------------------------------------ */
[scroll-show="false"] {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
[scroll-show="false"]::-webkit-scrollbar {
  display: none;
}

/* Truncate Text Utility (single core rule + variable override) */
[data-truncate] {
  --truncate-lines: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-line-clamp: var(--truncate-lines);
}

[data-truncate="1"] {
  --truncate-lines: 1;
}
[data-truncate="2"] {
  --truncate-lines: 2;
}

/* Selection Highlight */
@supports (background-color: color-mix(in srgb, black 10%, transparent)) {
  ::selection {
    background-color: color-mix(in srgb, currentColor 12%, transparent);
    color: var(--color-accent);
    text-shadow: none;
  }
  ::-moz-selection {
    background-color: color-mix(in srgb, currentColor 12%, transparent);
    color: var(--color-accent);
    text-shadow: none;
  }
}

[data-theme="dark"] {
  background-color: var(--color-bg-dark);
  color: var(--color-text-light);
}
[data-theme="dark-transparent"] {
  color: var(--color-text-light) !important;
}

[data-gradient] {
}

[data-gradient-text] {
  -webkit-background-clip: text;
  background-clip: text;
  background-repeat: repeat-x;
  -webkit-text-fill-color: transparent;
  color: inherit;
}

/* ------------------------------------------------
          06. Interactive Link Effects
          ------------------------------------------------ */
.link-underline {
  position: relative;
}
.link-underline::after {
  content: "";
  position: absolute;
  top: var(--underline-top);
  left: 0%;
  height: var(--underline-height);
  width: 0%;
  background: currentColor;
  transition: width var(--dur-bbs) var(--ease-bbs);
}
.link-underline:hover::after {
  width: 100%;
}
.link-underline:not(:hover)::after {
  left: auto;
  right: 0%;
  width: 0%;
}

.inline-link-underline {
  position: relative;
}
.inline-link-underline::after {
  content: "";
  position: absolute;
  top: var(--underline-top);
  left: 0%;
  height: var(--underline-height);
  width: 100%;
  background: currentColor;
  opacity: var(--inline-underline-opacity);
  transition: opacity var(--dur-bbs) var(--ease-bbs);
}
.inline-link-underline:hover::after {
  opacity: 1;
}

/* ------------------------------------------------
          07. Animations
          ------------------------------------------------ */
@keyframes loopX {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes loopY {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-100%);
  }
}

.loop-animate-x {
  animation: loopX var(--loop-x-duration) linear infinite;
  will-change: transform;
}
.loop-animate-x.reverse {
  animation: loopX var(--loop-x-duration) linear infinite reverse;
  will-change: transform;
}
.loop-animate-y {
  animation: loopY var(--loop-y-duration) linear infinite;
  will-change: transform;
}
.loop-animate-y.reverse {
  animation: loopY var(--loop-y-duration) linear infinite reverse;
  will-change: transform;
}

.svg-animate-line {
  stroke-dasharray: 10 10 !important;
  animation: svgDash var(--svg-dash-duration) linear infinite;
}
.svg-animate-line.reverse {
  animation: svgDash var(--svg-dash-duration) linear infinite reverse;
}

@keyframes svgDash {
  to {
    stroke-dashoffset: var(--svg-dash-offset);
  }
}

/* Motion respect */
@media (prefers-reduced-motion: reduce) {
  .loop-animate-x,
  .loop-animate-y,
  .svg-animate-line {
    animation: none !important;
  }

  .image-w img,
  .link-underline::after,
  .inline-link-underline::after {
    transition-duration: 1ms !important;
  }
}

/* ------------------------------------------------
          08. Components / Patterns
          ------------------------------------------------ */
.image-w img {
  transition: transform var(--dur-bbs) var(--ease-bbs);
}
.image-w:hover img {
  transform: scale(var(--image-zoom-scale));
}

.s-wrapper::before,
.s-wrapper::after {
  display: none;
}

:root {
  --padding-gsap-mask: 0.08em;
}

.gsap_split_letter,
.gsap_split_line {
  padding-right: var(--padding-gsap-mask);
  padding-left: var(--padding-gsap-mask);
  margin-right: calc(-1 * var(--padding-gsap-mask));
  margin-left: calc(-1 * var(--padding-gsap-mask));
  padding-bottom: var(--padding-gsap-mask);
  margin-bottom: calc(-1 * var(--padding-gsap-mask));
}
.u-cond .gsap_split_letter,
.u-cond .gsap_split_line {
  --padding-gsap-mask: 0.1em;
  padding-top: var(--padding-gsap-mask);
  margin-top: calc(-1 * var(--padding-gsap-mask));
}

.is_serif,
.is_serif > * {
  font-weight: 400 !important;
}

.has_indent > *:first-child {
  text-indent: var(--indent);
}
/* .projects-cms-list:hover .projects-cms-item {
        transform: scale(1);
        opacity: 0.24;
        z-index: 1;
        filter: blur(2px);
      }
      
      .projects-cms-item:hover {
        transform: scale(1.015) !important;
        opacity: 1 !important;
        filter: blur(0px) !important;
        z-index: 99;
      } */
@media screen and (min-width: 2239px) {
  .projects-cms-list {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.g-navigation.is-shrunk .g-nav-block.is_reel-player {
  opacity: 0;
  transform: scale(0);
  pointer-events: none !important;
  z-index: 1;
}
.g-navigation.is-shrunk .g-nav-block.is_home-link {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto !important;
}

body:hover .custom-cursor-w {
  opacity: 1;
}

body.is-link-hover .custom-cursor-dot {
  border-radius: 16px;
  transform: rotate(0deg);
  height: 32px;
  width: 32px;
}
body.is-link-hover .custom-cursor-dot .icon {
  opacity: 1;
}

body.is-link-hover .custom-cursor-dot-follower {
  opacity: 0;
}

.project-card-project-slogan > .gsap_split_line,
.project-card-project-slogan > .gsap_split_line > .gsap_split_line {
  display: flex !important;
  width: 100%;
  padding: 0;
  margin: 0;
}

.gallery-main-video {
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-thumb-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body:has(.funnel-block-row.gene:hover) .funnel-line:nth-child(1) {
  fill-opacity: 0;
}
body:has(.funnel-block-row.cond:hover) .funnel-line:nth-child(2) {
  fill-opacity: 0;
}
body:has(.funnel-block-row.conv:hover) .funnel-line:nth-child(3) {
  fill-opacity: 0;
}
body:has(.funnel-block-row.nutr:hover) .funnel-line:nth-child(4) {
  fill-opacity: 0;
}