:root {
  --nocod-logo-width: 1780px;
  --nocod-logo-aspect: 2854 / 443;
  --nocod-liquid-canvas-bleed: clamp(120px, 11vw, 260px);
  --nocod-project-title-size: clamp(45px, 5.175vw, 102px);
}

.nocod-liquid-logo {
  position: relative;
  display: block;
  width: min(100%, var(--nocod-logo-width));
  aspect-ratio: var(--nocod-logo-aspect);
  overflow: visible;
  isolation: isolate;
}

.nocod-liquid-logo__fallback,
.nocod-liquid-logo__canvas {
  position: absolute;
  display: block;
  pointer-events: none;
}

.nocod-liquid-logo__fallback {
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
}

.nocod-liquid-logo__canvas {
  inset: calc(var(--nocod-liquid-canvas-bleed) * -1);
  z-index: 2;
  width: calc(
    100% + var(--nocod-liquid-canvas-bleed) + var(--nocod-liquid-canvas-bleed)
  );
  height: calc(
    100% + var(--nocod-liquid-canvas-bleed) + var(--nocod-liquid-canvas-bleed)
  );
  opacity: 0;
  transition: opacity 160ms ease;
}

.nocod-liquid-logo.is-webgl-ready .nocod-liquid-logo__canvas {
  opacity: 1;
}

.nocod-liquid-logo.is-webgl-ready .nocod-liquid-logo__fallback {
  opacity: 0;
}

.nocod-project-hover-zone {
  --project-title-left: 50%;
  --project-title-top: 50%;

  position: relative;
  background: #fff;
  background: transparent !important;
}

.nocod-project-hover-title {
  --title-gap-left: 0px;
  --title-gap-right: 0px;
  --title-magnet-x: 0px;
  --title-magnet-y: 0px;
  --title-fit-scale: 1;

  position: absolute;
  left: var(--project-title-left);
  top: var(--project-title-top);
  z-index: 30;
  display: block;
  width: max-content;
  max-width: none;
  padding: 0;
  color: #fff;
  font-family: "avenir_black", sans-serif;
  font-size: 90px;
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: 5px;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  /* Fade out: opacity transitions first, visibility hides only after it completes */
  transition:
    opacity 0.25s ease,
    visibility 0s linear 0.25s;
  mix-blend-mode: difference;
  transform: translate(
      calc(-50% + var(--title-magnet-x)),
      calc(-50% + var(--title-magnet-y))
    )
    scale(var(--title-fit-scale));
  transform-origin: center center;
  overflow: visible;
  will-change: left, top, transform, opacity;
}

.nocod-project-hover-zone.is-project-hovering .nocod-project-hover-title {
  opacity: 1;
  visibility: visible;
  /* Fade in: both properties start immediately */
  transition:
    opacity 0.25s ease,
    visibility 0s linear 0s;
}

.nocod-project-hover-zone .nocod-project-hover-fallback {
  display: none !important;
}

.nocod-project-hover-title__blend,
.nocod-project-hover-title__gap {
  display: block;
  overflow-wrap: normal;
}

.nocod-project-hover-title__blend {
  position: relative;
  z-index: 1;
  color: #fff;
}

/*
 * Gap layer: white text clipped to the white space between the two images.
 * Because mix-blend-mode: difference is on the parent (which has transform,
 * creating a stacking context), the gap text must be #fff — difference(white,
 * white_gap) = 0 = black → readable. With #050505 it would produce near-white
 * after difference against the white backdrop, which would be invisible.
 */
.nocod-project-hover-title__gap {
  position: absolute;
  inset: 0;
  z-index: 2;
  color: #fff;
  clip-path: inset(
    0 calc(100% - var(--title-gap-right)) 0 var(--title-gap-left)
  );
}

@supports not (mix-blend-mode: difference) {
  .nocod-project-hover-title__blend,
  .nocod-project-hover-title__gap {
    color: #050505;
  }
}

/* Two-line title: big title on first line, small title below — both centered, same size, uppercase */
.nocod-project-hover-title .title-line {
  display: block;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .nocod-project-hover-title {
    max-width: none;
    white-space: nowrap;
  }
}

/* Touch devices: title always visible, no hover interaction needed */
@media (hover: none) {
  .nocod-project-hover-title {
    font-size: 20px;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
  }
}