/* Site-wide motion curve (matches GSAP CustomEase in script.js) */
:root {
  --eol-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

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

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

/* ------------------- Theme Tab System ------------------- */

/* Only night content fades in/out (day switches instant) */
[data-theme="night"] {
  transition: opacity 0.3s var(--eol-ease);
}

[data-theme-trigger] {
  cursor: pointer;
}

/* Discover vision — hidden after GSAP out animation (Vimeo play) */
.discover--vision-wrapper.is-hidden {
  display: none;
}

/* ------------------- 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: #65d6c3;
  --progress-bg: rgba(239, 238, 236, 0.2);
  --progress-fill-bg: #65d6c3;
  --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;
}

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

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

[data-directional-hover-tile] {
  transition: transform 0.5s var(--eol-ease);
  transform: translateY(-100%);
  will-change: transform;
}

/* ------------------- Body fade-in (GSAP drives 0 → 1; avoids first-paint flash) ------------------- */
/* :has() limits scope to pages that include the loader; use plain `body { opacity: 0 }` if every page runs this bundle. */
html:has(body .loading--parent) {
  background-color: var(--eol-load-veil-bg, #0c0c0c);
}

body:has(.loading--parent) {
  opacity: 0;
}

/* ------------------- Loading sequence (.loading--parent) ------------------- */

.loading--parent {
  box-sizing: border-box;
  pointer-events: none;
}

/* Stack above in-flow hero so the intro reads even when the loader is nested inside sections */
.loading--parent:not(.is--complete) {
  position: absolute;
  z-index: 50;
}

/* t=0: tall strip, zero width → then thumb → full viewport (JS adds is--seq-* on a timer) */
.loading--parent:not(.is--complete) .loading--img {
  display: block;
  box-sizing: border-box;
  max-width: none;
  object-fit: cover;
  overflow: hidden;
  height: 10em;
  width: 0;
  transition: width 0.6s var(--eol-ease), height 1s var(--eol-ease);
}

.loading--parent.is--seq-thumb .loading--img {
  width: 10em;
}

.loading--parent.is--seq-full .loading--img {
  width: 100vw;
  height: 100vh;
}

/* t=0.5s: letters in (opacity 0 / y 1em → visible) */
.loading--parent .willem__letter {
  opacity: 0;
  transform: translateY(1em);
  transition: opacity 0.55s var(--eol-ease), transform 0.55s var(--eol-ease);
}

.loading--parent.is--seq-willem .willem__letter,
.loading--parent.is--complete .willem__letter {
  opacity: 1;
  transform: translateY(0);
}

.loading--parent.is--complete {
  pointer-events: none;
}

.loading--parent.is--complete .loading--start,
.loading--parent.is--complete .loading--end {
  opacity: 0;
  pointer-events: none;
}

.loading--parent.is--complete .loading--img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  min-height: 100svh;
  min-height: 100dvh;
  max-width: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  transition: none;
}

/* ------------------- Content reveal (load-split stagger) ------------------- */

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

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

/* During loading sequence + stagger: hide main UI */
body.is--loading [data-animation="load"],
body.is--loading [data-animation="load-split"],
body.is--loading .navbar,
body.is--content-load [data-animation="load"],
body.is--content-load [data-animation="load-split"],
body.is--content-load .navbar {
  opacity: 0;
}

html:has(body.is--content-load) {
  overflow-x: hidden;
}

/* Scroll lock only during GSAP content reveal — not during .is--loading (avoids layout/size issues). */
body.is--content-load {
  overflow: hidden;
}

/* ----------------------------- FAQ Accordion ----------------------------- */

.faq--response {
  overflow: hidden;
  transition: max-height 0.2s var(--eol-ease), opacity 0.2s var(--eol-ease);
}

.faq-item .icon--faq,
.faq-item .faq--icon {
  transition: transform 0.2s var(--eol-ease);
}

/* ------------------- Lightbox ------------------- */

/* Closed overlay must not sit above the marquee (steals hover + clicks) */
.lightbox-wrap:not(.is-active) {
  pointer-events: none !important;
}

.lightbox-wrap.is-active {
  pointer-events: auto !important;
}

/* Active Classes */
.lightbox-wrap.is-active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.lightbox-img__item.is-active {
  visibility: visible;
}

/* Force containment of image */
.lightbox-img__item img {
  object-fit: contain !important;
  min-width: auto;
  width: auto;
  max-height: min(85vh, 100%);
  max-width: min(90vw, 100%);
}

/* Simple Hover on Lightbox Buttons */
.lightbox-nav__button:hover .lightbox-nav__dot {
  transform: translate(-100%, 0px);
}
.lightbox-nav__button:nth-of-type(2):hover .lightbox-nav__dot {
  transform: translate(100%, 0px);
}