/* ================================================
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
------------------------------------------------ */
@font-face {
  font-family: "Aeonik Pro VF";
  src: url("https://cdn.prod.website-files.com/696cef697489aac1d3556e35/696cefcc48eea26c6c9cf0b1_AeonikPro-VF.woff2")
    format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  font-feature-settings: "ss02" 1;
}

@font-face {
  font-family: "Aeonik Pro VF";
  src: url("https://cdn.prod.website-files.com/696cef697489aac1d3556e35/696cefcc556a3a0264f0789d_AeonikPro-Italic-VF.woff2")
    format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  font-feature-settings: "ss02" 1;
}

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

  --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, #5498dc);
  --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 */
  }
}

@supports (color: color(display-p3 1 0 0)) {
  :root {
    /* Add Display-P3 tokens here if needed */
  }
}

/* ------------------------------------------------
  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;
}

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-color--light);
}

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

[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-y {
  animation: loopY var(--loop-y-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.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,
.v3-s-wrapper::before,
.v3-s-wrapper::after {
  display: none;
}