/* ==========================================================================
   Hand-written layer on top of the Webflow export (loaded after it).
   - page transition curtain
   - homepage entrance (blur out + scale in, timing from specos.design)
   - homepage card hover / hover-reveal (replaces the IX2 versions)
   - bottom index bar current state, blob background fix
   - Drupal Preview: intro video player, AI prototype embed
   ========================================================================== */

:root {
  --ease-pop: cubic-bezier(.075, .82, .165, 1);     /* card pop-in + hover */
  --ease-curtain: cubic-bezier(.86, 0, .07, 1);     /* page curtain */
  --curtain-duration: 700ms;
}

/* ---------- Page transition curtain ---------------------------------------
   Leave: the block rises from the bottom until it covers the screen.
   Enter: the block keeps rising and leaves through the top.
   It takes the colour of the page it covers / uncovers: white by default,
   black on dark pages (xkool: <html data-curtain="dark">). */

.pt-curtain {
  position: fixed;
  z-index: 10000;
  left: 0;
  right: 0;
  top: 0;
  height: 100vh;
  height: 100lvh;
  background-color: #fff;
  transform: translate3d(0, 101%, 0);
  pointer-events: none;
}

html.pt-curtain-dark .pt-curtain {
  background-color: #0a0a0a;
}

/* leaving: slide up to cover */
html.pt-leave .pt-curtain {
  transform: translate3d(0, 0, 0);
  transition: transform var(--curtain-duration) var(--ease-curtain);
  pointer-events: auto;
}

/* arriving: start covered (set by the inline <head> script, before first paint) */
html.pt-enter .pt-curtain {
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

html.pt-enter.pt-enter-go .pt-curtain {
  transform: translate3d(0, -101%, 0);
  transition: transform var(--curtain-duration) var(--ease-curtain);
  pointer-events: none;
}

/* ---------- Homepage entrance ---------------------------------------------
   Every widget starts blurred, transparent and scaled down, then pops in as it
   enters the viewport. Only active while <html> has .reveal-on, which the
   inline <head> script sets and js/custom.js clears if anything goes wrong. */

html.reveal-on [data-reveal] {
  opacity: 0;
  filter: blur(16px);
  transform: scale(.8);
}

html.reveal-on [data-reveal="nav"] {
  transform: scale(.7);
}

html.reveal-on [data-reveal].is-revealed {
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition:
    opacity 1s var(--ease-pop),
    filter 1s var(--ease-pop),
    transform 1s var(--ease-pop);
  transition-delay: var(--reveal-delay, .1s);
}

/* ---------- Homepage cards: hover --------------------------------------------
   Uses the individual `scale` property so it never fights the inline
   `transform` Webflow's IX2 writes on .card. Transitions are interruptible,
   so quick in/out no longer snaps. */

.home-project .card {
  transition: scale .6s var(--ease-pop);
}

@media (hover: hover) and (pointer: fine) {
  .home-project .card-hover-container:hover > .card {
    scale: .97;
  }
}

.home-project .card-hover-container:focus-within > .card {
  scale: .97;
}

/* Finflow / Fantastic Plastic: the text panel is folded away until the card is
   hovered. Desktop pointer only; touch screens and keyboard users always get it. */
.hover-reveal-inner {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .hover-reveal {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 0fr;
    opacity: 0;
    filter: blur(24px);
    transform: scale(.6);
    transform-origin: 50% 0;
    transition:
      grid-template-rows .4s var(--ease-pop),
      opacity .3s ease,
      filter .4s var(--ease-pop),
      transform .4s var(--ease-pop);
  }

  .hover-reveal > .hover-reveal-inner {
    min-height: 0;
    overflow: hidden;
  }

  .card-hover-container:hover .hover-reveal,
  .card-hover-container:focus-within .hover-reveal {
    grid-template-rows: 1fr;
    opacity: 1;
    filter: blur(0);
    transform: none;
    transition:
      grid-template-rows .45s var(--ease-pop),
      opacity .45s ease,
      filter .45s var(--ease-pop),
      transform .45s var(--ease-pop);
  }
}

/* ---------- Fixed background blobs ----------------------------------------
   The container had no size, so the blobs sat off-screen, and it painted
   above the cards and swallowed their hovers and clicks. */

.blob-container {
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* ---------- Bottom index bar ---------------------------------------------- */

.index-item[aria-current] {
  background-color: var(--_colors---border--translucent);
  color: var(--_colors---text--empiriecom--primary);
}

.index-item.dark[aria-current] {
  background-color: var(--_colors---border--dark);
  color: var(--_colors---text--dark--primary);
}

/* ---------- Intro video player (Drupal Preview) --------------------------- */

.intro-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #f0f0f0;
  overflow: hidden;
  isolation: isolate;
  font-family: var(--_fonts---font--primary);
  -webkit-tap-highlight-color: transparent;
}

.intro-player:focus-visible {
  outline: 2px solid var(--_colors---text--light--primary);
  outline-offset: -2px;
}

.intro-player__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

/* kept as separate rules: one unknown pseudo-class would drop a shared list */
.intro-player:fullscreen {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  background-color: #000;
}

.intro-player:-webkit-full-screen {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  background-color: #000;
}

.intro-player:fullscreen .intro-player__video {
  object-fit: contain;
}

.intro-player:-webkit-full-screen .intro-player__video {
  object-fit: contain;
}

.intro-player__glass {
  background-color: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .08);
  color: var(--_colors---text--light--primary);
}

.intro-player__big-play {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: opacity .3s ease, transform .3s cubic-bezier(.25, .46, .45, .94);
}

.intro-player__big-play:hover {
  transform: scale(.94);
}

.intro-player__big-play svg {
  width: 32px;
  height: 32px;
  margin-left: 4px;
}

.intro-player.is-playing .intro-player__big-play,
.intro-player.is-waiting .intro-player__big-play {
  opacity: 0;
  transform: scale(.8);
  pointer-events: none;
}

.intro-player__bar {
  position: absolute;
  z-index: 3;
  left: 24px;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 56px;
  padding: 0 8px;
  border-radius: 100px;
  transition: opacity .35s ease, transform .35s cubic-bezier(.25, .46, .45, .94);
}

.intro-player.is-idle .intro-player__bar {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

.intro-player.is-idle {
  cursor: none;
}

.intro-player__btn {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}

.intro-player__btn:hover {
  background-color: rgba(0, 0, 0, .06);
}

.intro-player__btn:active {
  transform: scale(.92);
}

.intro-player__btn:focus-visible,
.intro-player__big-play:focus-visible,
.intro-player__sound-hint:focus-visible {
  outline: 2px solid var(--_colors---text--light--primary);
  outline-offset: 2px;
}

.intro-player__btn svg {
  width: 20px;
  height: 20px;
}

.intro-player__btn [data-when] {
  display: none;
}

.intro-player:not(.is-playing) [data-when="paused"],
.intro-player.is-playing [data-when="playing"],
.intro-player.is-muted [data-when="muted"],
.intro-player:not(.is-muted) [data-when="sound"],
.intro-player:not(.is-fullscreen) [data-when="windowed"],
.intro-player.is-fullscreen [data-when="fullscreen"] {
  display: block;
}

.intro-player__time {
  flex: none;
  min-width: 92px;
  padding: 0 8px;
  font-family: var(--_fonts---font--display);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--_colors---text--light--secondary);
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}

/* range inputs, styled to match */
.intro-player__range {
  --fill: 0%;
  -webkit-appearance: none;
  appearance: none;
  height: 24px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.intro-player__range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--_colors---text--light--primary) var(--fill), rgba(0, 0, 0, .12) var(--fill));
}

.intro-player__range::-moz-range-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--_colors---text--light--primary) var(--fill), rgba(0, 0, 0, .12) var(--fill));
}

.intro-player__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  background: var(--_colors---text--light--primary);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9);
  transform: scale(0);
  transition: transform .2s ease;
}

.intro-player__range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: var(--_colors---text--light--primary);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9);
  transform: scale(0);
  transition: transform .2s ease;
}

.intro-player__range:hover::-webkit-slider-thumb,
.intro-player__range:focus-visible::-webkit-slider-thumb,
.intro-player__range:active::-webkit-slider-thumb {
  transform: scale(1);
}

.intro-player__range:hover::-moz-range-thumb,
.intro-player__range:focus-visible::-moz-range-thumb,
.intro-player__range:active::-moz-range-thumb {
  transform: scale(1);
}

.intro-player__range:focus-visible {
  outline: none;
}

.intro-player__range:focus-visible::-webkit-slider-runnable-track {
  box-shadow: 0 0 0 2px rgba(52, 53, 58, .25);
}

.intro-player__progress {
  flex: 1 1 auto;
  min-width: 40px;
  margin: 0 8px;
}

.intro-player__volume {
  flex: none;
  display: flex;
  align-items: center;
}

.intro-player__volume .intro-player__range {
  width: 0;
  opacity: 0;
  transition: width .3s cubic-bezier(.25, .46, .45, .94), opacity .2s ease, margin .3s ease;
}

.intro-player__volume:hover .intro-player__range,
.intro-player__volume:focus-within .intro-player__range {
  width: 80px;
  margin: 0 8px 0 4px;
  opacity: 1;
}

/* iOS ignores element.volume; only mute works there */
.intro-player.no-volume .intro-player__volume .intro-player__range {
  display: none;
}

.intro-player__sound-hint {
  position: absolute;
  z-index: 3;
  top: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px 0 12px;
  border: 0;
  border-radius: 100px;
  font-family: var(--_fonts---font--primary);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity .35s ease, transform .35s cubic-bezier(.25, .46, .45, .94);
}

.intro-player__sound-hint svg {
  width: 18px;
  height: 18px;
}

.intro-player__sound-hint[hidden] {
  display: flex;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

@media screen and (max-width: 767px) {
  .intro-player__bar {
    left: 12px;
    right: 12px;
    bottom: 12px;
    height: 48px;
    padding: 0 4px;
    gap: 0;
  }

  .intro-player__btn {
    width: 36px;
    height: 36px;
  }

  .intro-player__time {
    display: none;
  }

  .intro-player__big-play {
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
  }

  .intro-player__big-play svg {
    width: 24px;
    height: 24px;
  }

  .intro-player__sound-hint {
    top: 12px;
    right: 12px;
    height: 36px;
    font-size: 14px;
  }
}

/* too little room on phones: the mute button in the bar is enough */
@media screen and (max-width: 479px) {
  .intro-player__sound-hint {
    display: none !important;
  }
}

/* ---------- Project pages: hero starts below the fixed nav ----------------
   Leaves a nav-height gap at the top (80px, 64px below 992px) so the hero
   card doesn't sit under the navigation. */

.main-section.start {
  padding-top: 80px;
}

@media screen and (max-width: 991px) {
  .main-section.start {
    padding-top: 64px;
  }
}

/* ---------- Project pages: sections rise into place -----------------------
   Like specos.design: every section below the fold waits 160px lower and slides
   up into its place (800ms, ease-out-cubic) as it scrolls into view. Desktop and
   tablet only, set up by js/custom.js. */

.main-section.rise-wait {
  transform: translate3d(0, 160px, 0);
}

.main-section.rise-wait.rise-go {
  transform: translate3d(0, 0, 0);
  transition: transform .8s cubic-bezier(.215, .61, .355, 1);
}

/* ---------- Drupal Preview: horizontal-scroll preview on desktop -----------
   Both preview videos share one height (the AI Features video's 589.6px, less on
   small windows); the intro keeps 16:9. The leading spacer centres the intro
   video in the section until the horizontal scroll starts. */

@media screen and (min-width: 992px) {
  .main-section.preview {
    --pv-h: min(589.6px, calc((100vw - 96px) * 9 / 16), 72vh);
  }

  .preview .horizontal-spacing.start {
    width: calc(50vw - var(--pv-h) * 8 / 9);
  }

  .preview .project-video.empiriecom {
    width: calc(var(--pv-h) * 1000 / 737);
  }

  .preview .project-video.empiriecom.intro-slot {
    width: calc(var(--pv-h) * 16 / 9);
  }
}

/* ---------- Drupal Preview: horizontal-scroll preview on small screens -----
   The Webflow layout hides this section below 992px, which also hid the intro
   video. Stack it instead (video, text, video, text) and neutralise the IX2
   scroll transforms there. */

@media screen and (max-width: 991px) {
  .main-section.light-grey.preview {
    display: flex;
  }

  .preview .horizontal-scroll-wrapper {
    padding-bottom: 0;
  }

  .preview .horizontal-scroll-height {
    height: auto;
  }

  .preview .horizontal-scroll-camera {
    display: block;
    position: static;
    height: auto;
    margin-bottom: 0;
    overflow: visible;
  }

  .preview .horizontal-scroll-track {
    height: auto;
    transform: none !important;
  }

  .preview .horizontal-scroll-content {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    height: auto;
    margin-bottom: 0;
    padding: 0 16px;
  }

  .preview .horizontal-spacing,
  .preview .heading-1.background-deco {
    display: none;
  }

  .preview .project-video.empiriecom,
  .preview .horizontal-scroll-container {
    align-self: center;
    width: 100%;
    max-width: 720px;
  }

  .preview .horizontal-scroll-container {
    margin-bottom: 32px;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ---------- AI prototype embed (Drupal Preview) ---------------------------- */

.proto-card {
  overflow: hidden;
}

.proto-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 24px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--_colors---border--light);
}

/* always one line: js/custom.js swaps in a shorter hint when space runs out */
.proto-toolbar__hint {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  font-family: var(--_fonts---font--display);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--_colors---text--light--secondary);
  text-align: center;
}

.proto-seg {
  flex: none;
  display: inline-flex;
  padding: 4px;
  border-radius: 100px;
  background-color: #f0f0f2;
}

.proto-seg__btn {
  padding: 8px 18px;
  border: 0;
  border-radius: 100px;
  background: transparent;
  font-family: var(--_fonts---font--primary);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--_colors---text--light--secondary);
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}

.proto-seg__btn:hover {
  color: var(--_colors---text--light--primary);
}

.proto-seg__btn[aria-pressed="true"] {
  background-color: #fff;
  color: var(--_colors---text--light--primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

.proto-seg__btn:focus-visible {
  outline: 2px solid var(--_colors---text--light--primary);
  outline-offset: 2px;
}

.proto-seg__btn[disabled] {
  opacity: .35;
  cursor: not-allowed;
}

.proto-stage {
  position: relative;
  width: 100%;
  height: 680px;
  overflow: hidden;
  background-color: #262729;
}

.proto-stage[data-mode="light"] {
  background-color: #f6f6f6;
}

.proto-stage[data-view="mobile"],
.proto-stage[data-view="mobile"][data-mode="light"] {
  background-color: #f7f7f7;
}

.proto-stage iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  transform-origin: 0 0;
}

.proto-stage iframe[hidden] {
  display: none;
}

.proto-note {
  display: none;
}

@media screen and (max-width: 991px) {
  .proto-toolbar {
    flex-wrap: wrap;
  }

  .proto-toolbar__hint {
    order: 3;
    flex-basis: 100%;
  }
}

@media screen and (max-width: 767px) {
  .proto-toolbar {
    padding: 16px;
  }

  .proto-stage {
    height: min(640px, 82vh);
  }
}

/* ---------- Reduced motion ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html.reveal-on [data-reveal] {
    opacity: 1;
    filter: none;
    transform: none;
  }

  .home-project .card,
  .hover-reveal {
    transition: none !important;
  }
}

/* ---------- xkool research slider ----------------------------------------
   The dark "previous" button used to be the "next" arrow rotated 180°, and
   that rotate overrode its :hover scale. It now has its own left arrow. */

.swiper-pre-button.dark {
  transform: none;
}

.swiper-pre-button.dark:hover {
  transform: scale(.9);
}