/* ============================================================
   CASE-STUDY HERO · corner eyebrow, grid lines, fades
   (plus, at the foot of this file, the dark treatment of the sparkle divider
   and the next-project section, which share the hero's palette)
   Loaded on the four case studies after each page's own <style>, so these
   rules win ties against the .wv-hero-* rules written there. Paired with
   case-hero.js, which adds .ch-in to .wv-hero when the hero arrives (same
   beat as the copy's line reveal) so the grid can draw itself in.
   ============================================================ */

/* ── Height ────────────────────────────────────────────────
   100svh, not 100vh. On a phone `vh` is the LARGE viewport, measured as if
   the browser bars were hidden, so the hero ran 60–100px below the visible
   screen and its bottom-anchored text followed it down under the fixed nav.
   The small viewport is the stable, visible one. The 720px floor is dropped
   on phones for the same reason: a floor taller than the screen is the same
   overflow by another route. */
.wv-hero {
  height: 100vh;
  height: 100svh;
}

@media (max-width: 900px) {
  .wv-hero { min-height: 0; }
}

/* ── Grid geometry ────────────────────────────────────────
   Desktop: a horizontal rule under the top band (22px inset + the 60px music
   cluster + 22px), a divider from the top edge down to it at 33% — the same
   x as the homepage's vertical, so the two heroes share a grid — and a
   vertical from the rule to the foot at 80%, clear of the widest title.
   Phone: the eyebrow sits 32px down and is 18px tall, so the rule sits 32px
   under it — the same air above and below. The one vertical runs from the
   rule to the foot 20px from the right edge, i.e. just outside the copy's
   24px column, so no wrapped title or tagline can ever reach it. */
.wv-hero {
  --ch-rule: 104px;
  --ch-x-divider: 33%;
  --ch-x-right: 80%;
  --ch-mark-w: clamp(34px, 4.2vw, 53px);
}

@media (max-width: 900px) {
  .wv-hero {
    --ch-rule: calc(32px + 18px + 32px);
    --ch-x-right: calc(100% - 20px);
    --ch-mark-w: clamp(26px, 8vw, 44px);
  }
}

/* ── Eyebrow ──────────────────────────────────────────────
   Out of the title group and into the corner. Desktop: top-left, on the same
   vertical centre as the music cluster (22px + 30px) so the two read as one
   band above the rule. Phone: top-right, where the homepage's subtitle sits
   on the left. z-index 3 matches .wv-hero-content. */
.wv-hero-label {
  position: absolute;
  z-index: 3;
  top: 52px;
  left: 60px;
  transform: translateY(-50%);
  margin: 0;
}

@media (max-width: 900px) {
  .wv-hero-label {
    top: 32px;
    left: auto;
    right: 24px;
    transform: none;
  }
}

/* ── Fades ────────────────────────────────────────────────
   Short and quiet: a little more contrast for the eyebrow at the top and the
   title at the foot, on every viewport. Above the video and the light streaks
   (DOM order), below the lines and the copy. */
.ch-fade {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}

.ch-fade-top {
  top: 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0));
}

.ch-fade-bottom {
  bottom: 0;
  height: 160px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0));
}

/* ── Lines ────────────────────────────────────────────────
   Same 1px --lines grey as the homepage. Each line is scaled from the mark it
   grows out of, so the reveal reads as the gate's does: the rule sweeps from
   the left, the divider drops from the top edge to meet it, the right vertical
   falls away from it. */
.ch-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  color: var(--lines, #A2A2A2);
}

.ch-line {
  position: absolute;
  background: currentColor;
}

.ch-h {
  left: 0;
  right: 0;
  top: var(--ch-rule);
  height: 1px;
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.ch-v-top {
  top: 0;
  height: var(--ch-rule);
  left: var(--ch-x-divider);
  width: 1px;
  transform: scaleY(0);
  transform-origin: 50% 0;
}

.ch-v-right {
  top: var(--ch-rule);
  bottom: 0;
  left: var(--ch-x-right);
  width: 1px;
  transform: scaleY(0);
  transform-origin: 50% 0;
}

/* ── Marks ────────────────────────────────────────────────
   Both junctions are T's, so both take the half-cross, flat edge on the rule,
   pointing into the line it marks: up into the divider, down into the right
   vertical. The +0.5px lands the flat edge on the 1px rule's true centre, as
   the homepage's phone grid does. Position lives on the wrapper, the reveal
   (scale + opacity) on the svg, so the two transforms never fight. */
.ch-mark {
  position: absolute;
  top: var(--ch-rule);
  width: var(--ch-mark-w);
  line-height: 0;
}

.ch-mark svg {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 100%;
  transform: scale(0.4);
  opacity: 0;
}

.ch-mark-a {
  left: var(--ch-x-divider);
  transform: translate(calc(-50% + 0.5px), calc(-100% + 0.5px));
}

.ch-mark-b {
  left: var(--ch-x-right);
  transform: translate(calc(-50% + 0.5px), 0.5px) rotate(180deg);
}

@media (max-width: 900px) {
  .ch-v-top,
  .ch-mark-a { display: none; }
}

/* ── Reveal ───────────────────────────────────────────────
   The gate's line easing. The rule reaches 80% of its width at roughly 450ms
   on this curve, which is when the right vertical and its mark set off; the
   divider lands on the rule at about a second, and its mark blooms then. */
.wv-hero.ch-in .ch-h {
  transform: scaleX(1);
  transition: transform 1500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.wv-hero.ch-in .ch-v-top {
  transform: scaleY(1);
  transition: transform 1000ms cubic-bezier(0.16, 1, 0.3, 1) 150ms;
}

.wv-hero.ch-in .ch-v-right {
  transform: scaleY(1);
  transition: transform 1300ms cubic-bezier(0.16, 1, 0.3, 1) 450ms;
}

.wv-hero.ch-in .ch-mark svg {
  transform: scale(1);
  opacity: 1;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--ch-mark-d, 0ms),
              opacity 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--ch-mark-d, 0ms);
}

.ch-mark-a { --ch-mark-d: 850ms; }
.ch-mark-b { --ch-mark-d: 400ms; }

@media (prefers-reduced-motion: reduce) {
  .wv-hero.ch-in .ch-line,
  .wv-hero.ch-in .ch-mark svg { transition: none; }
}

/* ── Sparkle divider and next-project section ─────────────
   Both on the chrome green (#202a22 — the gate, the curtain, the bars), with
   the gate's cream for the star and the copy. The next-project card keeps its
   frosted-glass idea, cut from the nav's glass instead of white. */
.wv-sparkle-divider {
  background: #202a22;
  color: #f2ecdf;
  opacity: 1;
}

.wv-next {
  background: #202a22;
}

.wv-next-eyebrow { color: rgba(242, 236, 223, 0.55); }

.wv-next-link {
  background: linear-gradient(150deg, rgba(255, 247, 226, 0.08) 0%, rgba(255, 247, 226, 0.03) 100%);
  border-color: rgba(242, 236, 223, 0.18);
  color: #f2ecdf;
}

.wv-next-link {
  position: relative;
  overflow: hidden;
  /* The pages' own hover lifts the card 4px under a drop shadow. Not here. */
  transition: border-color 0.5s ease;
}

.wv-next-link:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(242, 236, 223, 0.3);
}

/* ── Hover: a rule draws itself, a star lands ─────────────
   The hero grid's grammar, in the card. A 1px --lines rule grows from the
   card's left padding along the foot of the copy on the gate's easing, and a
   four-point star (the hero's cross) blooms at its tip as the line reaches it.
   The arrow slides a little way along with it. Leaving reverses the order the
   gate uses: the star goes first, then the line withdraws into where it was.
   Pointer devices only; a tap has no hover to speak of. */
.wv-next-link::before,
.wv-next-link::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.wv-next-link::before {
  left: 68px;
  right: calc(68px + 30px + 48px);   /* stops 48px short of the arrow */
  bottom: 34px;
  height: 1px;
  background: var(--lines, #A2A2A2);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1) 0.15s;   /* out: after the star */
}

.wv-next-link::after {
  width: 18px;
  height: 18px;
  right: calc(68px + 30px + 48px - 9px);
  bottom: calc(34px + 0.5px - 9px);
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 53 53%22%3E%3Cpath d=%22M26.5 0L27.5605 19.7695C27.7247 22.8304 30.1696 25.2753 33.2305 25.4395L53 26.5L33.2305 27.5605C30.1696 27.7247 27.7247 30.1696 27.5605 33.2305L26.5 53L25.4395 33.2305C25.2753 30.1696 22.8304 27.7247 19.7695 27.5605L0 26.5L19.7695 25.4395C22.8304 25.2753 25.2753 22.8304 25.4395 19.7695L26.5 0Z%22 fill=%22%23f2ecdf%22/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.35s ease-in, transform 0.35s ease-in;   /* out: first */
}

@media (hover: hover) and (pointer: fine) {
  .wv-next-link:hover::before {
    transform: scaleX(1);
    transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .wv-next-link:hover::after {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.5s,
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;   /* as the rule arrives */
  }
  .wv-next-link:hover .wv-next-arrow { transform: translateX(8px); }
}

.wv-next-arrow { transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); }

@media (max-width: 900px) {
  /* One centred column on phones: name, subline and arrow stacked on the
     card's axis. The pages' own rule pins the arrow to the end; overridden. */
  .wv-next-link {
    justify-items: center;
    text-align: center;
    row-gap: 28px;
  }
  .wv-next-link > div { width: 100%; }
  .wv-next-arrow { justify-self: center; }

  .wv-next-link::before { left: 28px; right: 28px; bottom: 20px; }
  .wv-next-link::after { right: calc(28px - 9px); bottom: calc(20px + 0.5px - 9px); }
}

.wv-next-name { color: #f2ecdf; }
.wv-next-name .accent { color: #9ab89d; }   /* the studies' lighter sage; reads on the green */
.wv-next-sub { color: rgba(242, 236, 223, 0.6); }

/* The arrow is the music player's glyph, mirrored to point right. */
.wv-next-arrow {
  color: #f2ecdf;
  line-height: 0;
}

.wv-next-arrow svg {
  display: block;
  width: 30px;
  height: auto;
  transform: scaleX(-1);
}