/* ------------------- Navbar Menu ------------------- */

.navbar--menu {
  display: none;
  pointer-events: none;
}

.navbar--menu.is--open {
  pointer-events: auto;
}

.navbar--menu-parent {
  will-change: transform;
}

/* ------------------- Vimeo Player ------------------- */

/* Cover */
.vimeo-player[data-vimeo-update-size="cover"] {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
}

/* Placeholder */
.vimeo-player[data-vimeo-activated="true"][data-vimeo-loaded="true"]
  .vimeo-player__placeholder {
  opacity: 0;
}

/* Dark (Overlay) */
.vimeo-player[data-vimeo-playing="false"] .vimeo-player__dark {
  opacity: 0.33;
}

.vimeo-player[data-vimeo-activated="false"][data-vimeo-playing="false"]
  .vimeo-player__dark {
  opacity: 0;
}

.vimeo-player[data-vimeo-activated="true"][data-vimeo-loaded="true"]
  .vimeo-player__dark {
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .vimeo-player[data-vimeo-hover="true"]:hover .vimeo-player__dark {
    opacity: 0.33 !important;
  }
}

/* Pause */
.vimeo-player .vimeo-player__pause {
  display: none;
}

.vimeo-player[data-vimeo-playing="true"] .vimeo-player__pause {
  display: flex;
}

.vimeo-player .vimeo-player__pause .vimeo-player__btn {
  opacity: 0;
}

.vimeo-player[data-vimeo-activated="true"][data-vimeo-playing="false"]
  .vimeo-player__pause
  .vimeo-player__btn,
.vimeo-player[data-vimeo-activated="true"][data-vimeo-hover="true"]:hover
  .vimeo-player__pause
  .vimeo-player__btn {
  opacity: 1;
}

@media (hover: none) and (pointer: coarse) {
  .vimeo-player[data-vimeo-activated="true"][data-vimeo-playing="true"]
    .vimeo-player__pause
    .vimeo-player__btn {
    opacity: 0 !important;
  }
}

/* Play */
.vimeo-player[data-vimeo-playing="true"] .vimeo-player__play {
  opacity: 0;
}

/* Loading */
.vimeo-player .vimeo-player__loading {
  opacity: 0;
}

.vimeo-player[data-vimeo-playing="true"] .vimeo-player__loading {
  opacity: 1;
}

.vimeo-player[data-vimeo-playing="true"][data-vimeo-loaded="true"]
  .vimeo-player__loading {
  opacity: 0;
}

/* Interface */
.vimeo-player .vimeo-player__interface {
  opacity: 0;
}

.vimeo-player[data-vimeo-activated="false"][data-vimeo-playing="false"]
  .vimeo-player__interface {
  opacity: 1;
}

.vimeo-player .vimeo-player__interface * {
  pointer-events: all; /* Make children of div clickable by user */
}

.vimeo-player[data-vimeo-activated="true"][data-vimeo-playing="false"]
  .vimeo-player__interface,
.vimeo-player[data-vimeo-activated="true"][data-vimeo-hover="true"]:hover
  .vimeo-player__interface {
  opacity: 1;
}

@media (hover: none) and (pointer: coarse) {
  .vimeo-player[data-vimeo-activated="true"][data-vimeo-playing="true"]
    .vimeo-player__interface {
    opacity: 0 !important;
  }
}

/* Interface - Variables */
.vimeo-player {
  --timeline-rounded-corners: 1.5em;
  --timeline-dot-height: 0.75em;
  --timeline-dot-color: var(--_colors---cream);
  --progress-bg: rgba(239, 238, 236, 0.2);
  --progress-fill-bg: var(--_colors---cream);
  --progress-height: 0.2em;
}

/* Interface - Timeline */
.vimeo-player progress::-webkit-progress-bar {
  border-radius: var(--timeline-rounded-corners);
  background-color: var(--progress-bg);
  box-shadow: 0;
}

.vimeo-player progress::-webkit-progress-value {
  background: var(--progress-fill-bg);
}

.vimeo-player progress::-moz-progress-bar {
  border-radius: var(--timeline-rounded-corners);
  background: var(--progress-fill-bg);
  box-shadow: 0;
}

.vimeo-player progress::-ms-fill {
  border-radius: var(--timeline-rounded-corners);
}

/* Interface - Range */
.vimeo-player [type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

.vimeo-player [type="range"]:focus {
  outline: none;
}

.vimeo-player [type="range"]::-ms-track {
  width: 100%;
  cursor: pointer;
  background-color: transparent;
  border-color: transparent;
  color: transparent;
}

.vimeo-player [type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: var(--progress-height);
  cursor: pointer;
  background-color: var(--progress-bg);
  border-radius: var(--timeline-rounded-corners);
  background-color: transparent;
  border-color: transparent;
  color: transparent;
}

.vimeo-player [type="range"]::-webkit-slider-thumb {
  box-shadow: 0;
  height: var(--timeline-dot-height);
  width: var(--timeline-dot-height);
  border-radius: var(--timeline-rounded-corners);
  background-color: var(--timeline-dot-color);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: calc(
    (var(--progress-height) / 2) - (var(--timeline-dot-height) / 2)
  );
}

.vimeo-player [type="range"]::-webkit-slider-runnable-track,
.vimeo-player [type="range"]:focus::-webkit-slider-runnable-track {
  background-color: transparent;
  border-color: transparent;
  color: transparent;
}

.vimeo-player [type="range"]::-moz-range-track {
  width: 100%;
  height: var(--progress-height);
  cursor: pointer;
  background: var(--progress-bg);
  border-radius: 0;
  border: 0;
  border-radius: var(--timeline-rounded-corners);
  overflow: hidden;
  opacity: 1 !important;
}

.vimeo-player [type="range"]::-moz-range-thumb {
  box-shadow: 0;
  border: 0;
  height: var(--timeline-dot-height);
  width: var(--timeline-dot-height);
  border-radius: var(--timeline-rounded-corners);
  background: var(--timeline-dot-color);
  cursor: pointer;
  box-shadow: 0;
}

/* Interface - Mute */
.vimeo-player .vimeo-player__mute svg:nth-child(2),
.vimeo-player[data-vimeo-muted="true"] .vimeo-player__mute svg:nth-child(1) {
  display: none;
}

.vimeo-player .vimeo-player__mute svg:nth-child(1),
.vimeo-player[data-vimeo-muted="true"] .vimeo-player__mute svg:nth-child(2) {
  display: block;
}

/* Interface - Fullscreen */
.vimeo-player .vimeo-player__fullscreen svg:nth-child(2),
.vimeo-player[data-vimeo-fullscreen="true"]
  .vimeo-player__fullscreen
  svg:nth-child(1) {
  display: none;
}

.vimeo-player .vimeo-player__fullscreen svg:nth-child(1),
.vimeo-player[data-vimeo-fullscreen="true"]
  .vimeo-player__fullscreen
  svg:nth-child(2) {
  display: block;
}

/* ------------------- Directional List Hover navbar ------------------- */

[data-directional-hover-tile] {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateY(-100%);
  will-change: transform;
}

/* ------------------- Loading Animation ------------------- */

/* load-split: mask + line structure (SplitText) */
[data-animation="load-split"] .load-split__line-mask,
[animation="load-split"] .load-split__line-mask,
[load-split] .load-split__line-mask {
  overflow: hidden;
  display: block;
}

[data-animation="load-split"] .load-split__line,
[animation="load-split"] .load-split__line,
[load-split] .load-split__line {
  display: block;
}

/* fade-split: mask + line structure (SplitText) */
[data-animation="fade-split"] .fade-split__line-mask,
[animation="fade-split"] .fade-split__line-mask,
[fade-split] .fade-split__line-mask {
  overflow: hidden;
  display: block;
}

[data-animation="fade-split"] .fade-split__line,
[animation="fade-split"] .fade-split__line,
[fade-split] .fade-split__line {
  display: block;
}

/* Hide content until loading finishes */
body:has(.loading--parent:not(.is--complete)) [data-animation="load"],
body:has(.loading--parent:not(.is--complete)) [animation="load"],
body:has(.loading--parent:not(.is--complete)) [load],
body:has(.loading--parent:not(.is--complete)) [data-animation="load-left"],
body:has(.loading--parent:not(.is--complete)) [animation="load-left"],
body:has(.loading--parent:not(.is--complete)) [load-left],
body:has(.loading--parent:not(.is--complete)) [data-animation="load-right"],
body:has(.loading--parent:not(.is--complete)) [animation="load-right"],
body:has(.loading--parent:not(.is--complete)) [load-right],
body:has(.loading--parent:not(.is--complete)) [data-animation="load-split"],
body:has(.loading--parent:not(.is--complete)) [animation="load-split"],
body:has(.loading--parent:not(.is--complete)) [load-split],
body:has(.loading--parent:not(.is--complete)) .navbar,
body.is--loading [data-animation="load"],
body.is--loading [animation="load"],
body.is--loading [load],
body.is--loading [data-animation="load-left"],
body.is--loading [animation="load-left"],
body.is--loading [load-left],
body.is--loading [data-animation="load-right"],
body.is--loading [animation="load-right"],
body.is--loading [load-right],
body.is--loading [data-animation="load-split"],
body.is--loading [animation="load-split"],
body.is--loading [load-split],
body.is--loading .navbar,
body.is--content-load [data-animation="load"],
body.is--content-load [animation="load"],
body.is--content-load [load],
body.is--content-load [data-animation="load-left"],
body.is--content-load [animation="load-left"],
body.is--content-load [load-left],
body.is--content-load [data-animation="load-right"],
body.is--content-load [animation="load-right"],
body.is--content-load [load-right],
body.is--content-load [data-animation="load-split"],
body.is--content-load [animation="load-split"],
body.is--content-load [load-split],
body.is--content-load .navbar {
  opacity: 0;
}

/* Mask for loading--start / loading--end slide-up */
.loading--wrapper {
  overflow: hidden;
}

.loading--start,
.loading--end {
  overflow: hidden;
}

/* When complete: hide text, keep image visible as full-screen background */
.loading--parent.is--complete .loading--start,
.loading--parent.is--complete .loading--end {
  opacity: 0;
  pointer-events: none;
}

.loading--img {
  width: 0px;
  height: 2em;
}

.loading--parent.is--complete .loading--img {
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  object-fit: cover;
}

/* Disable Scroll on Loading */
body.is--loading,
body.is--content-load {
  overflow: hidden;
}

main:has(.loading--parent:not(.is--complete)) {
  height: 100dvh;
}

/* Webflow Editor */
:is(.wf-design-mode, .wf-editor) .loading--parent.is--complete .loading--start,
:is(.wf-design-mode, .wf-editor) .loading--parent.is--complete .loading--end {
  opacity: 1;
}

/* ------------------- Dashed Outline ------------------- */
/* Native outline/border dashed style has no control over dash/gap.
   Use background gradients to simulate a dashed outline with full control. */

[data-dashed-outline],
.half--circle {
  --outline-width: 2px;
  --dash-length: 8px;
  --dash-gap: 6px;
  --outline-color: currentColor;
  --dash-total: calc(var(--dash-length) + var(--dash-gap));
  background-image: linear-gradient(
      to right,
      var(--outline-color) var(--dash-length),
      transparent var(--dash-length)
    ),
    linear-gradient(
      to right,
      var(--outline-color) var(--dash-length),
      transparent var(--dash-length)
    ),
    linear-gradient(
      to bottom,
      var(--outline-color) var(--dash-length),
      transparent var(--dash-length)
    ),
    linear-gradient(
      to bottom,
      var(--outline-color) var(--dash-length),
      transparent var(--dash-length)
    );
  background-size: var(--dash-total) var(--outline-width),
    var(--dash-total) var(--outline-width),
    var(--outline-width) var(--dash-total),
    var(--outline-width) var(--dash-total);
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}

/* Usage: add data-dashed-outline to any element, then override with custom properties:
   --outline-width: 3px;      thickness of the outline
   --dash-length: 12px;       length of each dash
   --dash-gap: 8px;           space between dashes
   --outline-color: #000;     color (default: currentColor) */

/* Infinite rotation for .outline */
@keyframes outline-rotate {
  to {
    transform: rotate(360deg);
  }
}

.outline {
  animation: outline-rotate 20s linear infinite;
}

/* ------------------- Project list ------------------- */

/* Each row holds two .project--item (inserted by script.js) */
.projects--row {
  width: 100%;
  align-items: stretch;
}

/* Project list: widths via classes (script toggles on ≥992px); transition matches site ease */
@media (min-width: 992px) {
  .project--item {
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* ------------------- Article slider ------------------- */
/* Desktop: arrows only. ≤991px: swipe + arrows (see script.js initArticleSlider). */

@media (max-width: 991px) {
  .article--slider {
    touch-action: pan-x;
    overscroll-behavior-x: contain;
  }
}

.article--slider-wrapper,
.artcle--slider-wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
}

.article--slide {
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  transform-origin: center center;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.article--slide.is--active {
  transform: scale(1);
  z-index: 1;
}

.article--slide:not(.is--active) {
  transform: scale(0.8);
}

.slider--arrows .slide--arrow {
  cursor: pointer;
}

.slider--arrows .slide--arrow.is--disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.35;
}

/* ------------------- Footer Parallax ------------------- */

/* Note: Both of the sets of CSS are not needed for the parallax effect */

/* ------------------------- Scaling System by Osmo [https://osmo.supply/] -------------------------  */

/* Desktop */
:root {
  --size-unit: 16; /* body font-size in design - no px */
  --size-container-ideal: 1440; /* screen-size in design - no px */
  --size-container-min: 992px;
  --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))
  );
}

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

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

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

/* ------------------------- Underline Link [https://osmo.supply/] -------------------------  */

[data-underline-link] {
  text-decoration: none;
  position: relative;
}

[data-underline-link]::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.1em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}

@media (hover: hover) and (pointer: fine) {
  [data-hover]:hover [data-underline-link]::before,
  [data-underline-link]:hover::before {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }
}

/* ------------------- Vimeo Background Video ------------------- */

/* Placeholder */
.vimeo-bg[data-vimeo-activated="true"][data-vimeo-loaded="true"]
  .vimeo-bg__placeholder {
  opacity: 0;
  transition-delay: 0.2s;
}

/* Play/Pause */
.vimeo-bg .vimeo-bg__pause {
  display: none;
}

.vimeo-bg[data-vimeo-playing="true"] .vimeo-bg__pause {
  display: flex;
}

.vimeo-bg[data-vimeo-playing="true"] .vimeo-bg__pause,
.vimeo-bg[data-vimeo-playing="false"] .vimeo-bg__play {
  opacity: 1;
}

.vimeo-bg[data-vimeo-playing="true"] .vimeo-bg__play,
.vimeo-bg[data-vimeo-playing="false"] .vimeo-bg__pause {
  opacity: 0;
}

/* ------------------- Button Character Stagger Animation ------------------- */

/* Characters */
.btn-animate-chars [data-button-animate-chars] {
  overflow: hidden;
  position: relative;
  display: inline-block;
}

.btn-animate-chars [data-button-animate-chars] span {
  display: inline-block;
  position: relative;
  text-shadow: 0px 1.3em currentColor;
  transform: translateY(0em) rotate(0.001deg);
  transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

.btn-animate-chars:hover [data-button-animate-chars] span {
  transform: translateY(-1.3em) rotate(0.001deg);
}

/* Background (directional reveal, same behavior as [data-directional-hover-tile]) */
.btn-animate-chars__bg {
  inset: 0;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateY(-100%);
  will-change: transform;
}

/* ------------------- Heading Style 120 ------------------- */

.heading-style-120 {
  white-space: nowrap;
}

/* ------------------- Project "View" Cursor Follower ------------------- */
/* .cursor follows the pointer (positioned via GSAP transforms in script.js).
   The inner .eyebrow--14.is--view only reveals while hovering a
   .project--image-wrapper. Hidden by default to avoid a flash before JS runs. */

.cursor-parent {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  will-change: transform;
  opacity: 0;
}

/* ------------------- Dashed rotating circles ------------------- */
/* A native `border: 1px dashed` can't control dash length/gap, so we fake
   the ring with a repeating-conic-gradient masked down to a thin band.
   Three knobs:
     --dash-stroke : ring thickness (the dash "width")
     --dash-len    : length of each dash, in degrees of the circle
     --dash-gap    : gap between dashes, in degrees of the circle */
.circle--rotate {
  --dash-stroke: 1px;
  --dash-len: 1.2deg;
  --dash-gap: 2deg;

  border: none;
  border-radius: 50%;
  background: repeating-conic-gradient(
    var(--_colors---gold) 0deg var(--dash-len),
    transparent var(--dash-len) calc(var(--dash-len) + var(--dash-gap))
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--dash-stroke)),
    #000 calc(100% - var(--dash-stroke))
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--dash-stroke)),
    #000 calc(100% - var(--dash-stroke))
  );
}