/* =============================================================================
   Liquid hero — full-bleed fluid canvas behind the headline.
   Loaded after style.css, so everything here overrides the base hero rules.
   ============================================================================= */

/* The canvas bleeds 10% past the hero on every side; .hero already clips it. */
.hero-liquid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none; /* input is tracked on .hero itself */
  background: var(--bg);
}

/* Fallback shown until the GPU has the texture, and forever without WebGL. */
.hero-liquid > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .6s ease;
}

.hero-liquid.is-live > img {
  opacity: 0;
}

.hero-liquid .liquid-hover-canvas {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
}

/* Legibility scrim: heavy on the left where the copy sits, plus a floor
   gradient that hands off into the red marquee below. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(10, 10, 10, .88) 0%,
      rgba(10, 10, 10, .62) 30%,
      rgba(10, 10, 10, .18) 58%,
      rgba(10, 10, 10, .40) 100%
    ),
    linear-gradient(
      to top,
      rgba(10, 10, 10, .86) 0%,
      rgba(10, 10, 10, .22) 46%,
      rgba(10, 10, 10, 0) 76%
    );
}

/* The red brand tint that used to ride above the image is gone: this shot
   already carries the accent in the chair itself, so tinting it only muddied
   the blacks. The .hero-glow div was removed from index.html with it. */

.hero-content {
  z-index: 2;
}

/* -----------------------------------------------------------------------------
   Nav — dissolves over the hero so the fluid reads through it, and only
   materialises once you scroll past. main.js already toggles .scrolled.
   ----------------------------------------------------------------------------- */

.nav {
  transition: background .5s ease, backdrop-filter .5s ease, border-color .5s ease;
}

.nav:not(.scrolled):not(.menu-open) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

/* Mobile menu still needs an opaque panel behind it. */
.nav.menu-open {
  background: rgba(10, 10, 10, .93);
  backdrop-filter: blur(14px);
}

/* With no bar behind it, the nav gets its own soft ceiling for legibility. */
.hero-nav-fade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 190px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, .72) 0%,
    rgba(10, 10, 10, .34) 45%,
    rgba(10, 10, 10, 0) 100%
  );
}

/* The old floating square portrait is replaced by the full-bleed canvas. */
.hero .hero-img-wrap {
  display: none;
}

/* Hint that the frame is interactive. */
.hero-liquid-hint {
  position: absolute;
  left: clamp(20px, 5vw, 64px);
  bottom: clamp(22px, 4vw, 40px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(245, 244, 241, .55);
  pointer-events: none;
}

.hero-liquid-hint .bar {
  width: 34px;
  height: 1px;
  background: rgba(245, 244, 241, .3);
}

/* A phone has no hover — the effect only responds to a deliberate drag, so on
   touch the invitation has to name the gesture that actually works. */
.hero-liquid-hint .hint-touch {
  display: none;
}

@media (hover: none) {
  .hero-liquid-hint .hint-pointer {
    display: none;
  }

  .hero-liquid-hint .hint-touch {
    display: inline;
  }
}

/* No GPU, no texture, or a tainted source — the hero is a still frame, so
   don't invite an interaction that no longer exists. */
.hero-liquid.is-static ~ .hero-liquid-hint {
  display: none;
}

@media (max-width: 900px) {
  /* Portrait viewports crop the image hard, so lean on the scrim more. */
  .hero-scrim {
    background:
      linear-gradient(
        90deg,
        rgba(10, 10, 10, .9) 0%,
        rgba(10, 10, 10, .62) 55%,
        rgba(10, 10, 10, .45) 100%
      ),
      linear-gradient(
        to top,
        rgba(10, 10, 10, .95) 0%,
        rgba(10, 10, 10, .35) 48%,
        rgba(10, 10, 10, .1) 80%
      );
  }

  /* The hint used to be hidden here. It is the only thing telling a phone user
     the hero responds to touch at all, so it stays — just tighter. */
  .hero-liquid-hint {
    font-size: 10px;
    letter-spacing: 1.8px;
    gap: 9px;
  }

  .hero-liquid-hint .bar {
    width: 22px;
  }
}

/* Users who ask for less motion get the still frame. */
@media (prefers-reduced-motion: reduce) {
  .hero-liquid.is-live > img {
    opacity: 1;
  }

  .hero-liquid .liquid-hover-canvas {
    display: none;
  }

  .hero-liquid-hint {
    display: none;
  }
}