/* Motion layer for Elite Space Studio.
   Only motion lives here. No colours beyond the brand five, no new fonts,
   no rounded corners, no gradients. Every rule is either a mask used by a
   reveal, a transform hook GSAP writes to, or the custom cursor. */

/* Brand palette, repeated here only so the motion layer can reference it. */
:root {
  --es-sage: #a4bbb1;
  --es-pale: #eef3f1;
  --es-ink: #2f3b38;
  --es-rule: #4f6b63;
  --es-white: #ffffff;
}

/* --- Line masks ------------------------------------------------------- */
/* JS wraps each line of a heading in .es-line > .es-line-in. The outer box
   clips, the inner box is pushed down and slides up. Vertical padding keeps
   descenders and Cormorant's tall ascenders from being shaved off. */
.es-line {
  display: block;
  overflow: hidden;
  padding-block: 0.14em;
  margin-block: -0.14em;
}
.es-line-in {
  display: block;
  will-change: transform;
}

/* --- Reveal overlay --------------------------------------------------- */
/* A solid panel over a photograph that wipes upward off the image. Its
   colour is set inline per section so it always matches the section behind. */
.es-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-origin: bottom center;
  pointer-events: none;
}

/* Element GSAP parallaxes. Oversized so the scrub never exposes an edge. */
.es-parallax-frame {
  position: absolute;
  left: 0;
  width: 100%;
  top: -9%;
  height: 118%;
  overflow: hidden;
}

/* --- Nav underline ---------------------------------------------------- */
.es-navlink {
  position: relative;
}
.es-navlink > .es-navrule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--es-rule);
  transform: scaleY(0);
  transform-origin: bottom center;
  pointer-events: none;
}

/* --- Custom cursor ---------------------------------------------------- */
/* Only ever built on a fine pointer with motion allowed. */
.es-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  pointer-events: none;
  mix-blend-mode: normal;
  transform: translate3d(-100px, -100px, 0);
}
.es-cursor__ring {
  position: absolute;
  top: -33px;
  left: -33px;
  width: 66px;
  height: 66px;
  border: 1px solid var(--es-sage);
  border-radius: 50%;
  background: rgba(164, 187, 177, 0.14);
  transform: scale(0);
  display: flex;
  align-items: center;
  justify-content: center;
}
.es-cursor__dot {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--es-rule);
}
.es-cursor__label {
  font: 500 10px Jost, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--es-ink);
  opacity: 0;
  text-align: center;
  line-height: 1.2;
  max-width: 58px;
}
html.es-has-cursor,
html.es-has-cursor * {
  cursor: none !important;
}

/* --- Intro curtain ---------------------------------------------------- */
.es-intro {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--es-ink);
  align-items: center;
  justify-content: center;
}
/* Only ever shown while the page is held, so no-JS and reduced-motion
   visitors never meet a curtain that has nothing to lift it. */
html.es-loading .es-intro {
  display: flex;
}
.es-intro img {
  width: 78px;
  display: block;
}

/* Before the intro timeline runs, hold the page still so nothing flashes
   into place behind the curtain. Removed by JS on load, and never applied
   at all when JS is off or motion is reduced. */
html.es-loading body {
  overflow: hidden;
}

/* --- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .es-line-in {
    transform: none !important;
  }
  .es-veil,
  .es-intro {
    display: none !important;
  }
  .es-cursor {
    display: none !important;
  }
}

/* ====================================================================== */
/* Second pass: hero sequence, and motion on the parts that were still    */
/* holding still. Same five colours, same two typefaces, same geometry.   */
/* ====================================================================== */

/* --- Hero sequence ---------------------------------------------------- */
/* Four photographs stacked in the frame. Only the top one is clipped open;
   the rest wait underneath at full size, so a wipe never reveals a gap. */
.es-slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 0 100% 0);
}
.es-slide:first-child {
  clip-path: inset(0 0 0% 0);
}
.es-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Slide counter. The digits ride inside a mask so they can roll. */
.es-count {
  display: block;
  overflow: hidden;
  height: 1.15em;
  line-height: 1.15;
}
.es-count > span {
  display: block;
  line-height: 1.15;
}
.es-count-rail {
  display: block;
  position: relative;
  width: clamp(48px, 7vw, 82px);
  height: 1px;
  background: rgba(164, 187, 177, 0.55);
  overflow: hidden;
}
.es-count-bar {
  position: absolute;
  inset: 0;
  background: #a4bbb1;
  transform: scaleX(0);
  transform-origin: left center;
}

/* --- Scroll progress -------------------------------------------------- */
/* One hairline along the bottom edge of the header. */
.es-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: #4f6b63;
  transform: scaleX(0);
  transform-origin: left center;
}

/* --- Rules that draw on hover ---------------------------------------- */
/* Laid over the existing border, never instead of it, so the row still
   reads correctly with no JavaScript. */
.es-row-rule {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: #4f6b63;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
.es-field-rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #2f3b38;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* --- Arrows ----------------------------------------------------------- */
/* Clipped so an arrow can leave to the right and return from the left. */
.es-arrow {
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  line-height: 1;
  padding: 0.1em 0;
}

/* --- Work tile label -------------------------------------------------- */
.es-tile-cta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  background: #a4bbb1;
  color: #2f3b38;
  font: 500 12px Jost, sans-serif;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 15px 18px;
  transform: translateY(101%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .es-slide {
    clip-path: none !important;
  }
  .es-slide:not(:first-child) {
    display: none !important;
  }
  .es-count-bar,
  .es-progress,
  .es-row-rule,
  .es-field-rule {
    display: none !important;
  }
  .es-tile-cta {
    display: none !important;
  }
  /* One photograph, so a "01 — 04" counter would be a lie. */
  [data-hero-count] {
    display: none !important;
  }
}