/* ============================================================
   GTA METALS — copper wave band
   Used by copper.html only. Self-contained: this file, copper-wave.js
   and the .cu-wave block in the page. Nothing else on the site
   references any of it, and it references nothing else.

   A full-bleed transparent strip carrying the copper coil PNG, flexed
   by an SVG displacement filter, with an oxidised copy stacked over it
   that the cursor wipes away.

   COLOUR: the band paints no background — the cream page ground shows
   straight through, so there is no palette literal here to fall out of
   step with styles.css. The #000 stops below are mask alpha, not
   colour: in a mask-image, black means "keep" and transparent means
   "hide". They are not paint and must not be swapped for a token.
   ============================================================ */

/* Registered so --cu-r can be transitioned. Custom properties are
   otherwise untyped and jump rather than interpolate. Without @property
   the band still works; the reveal just snaps instead of easing. */
@property --cu-r  { syntax: "<length>";            inherits: true; initial-value: 0px }
@property --cu-mx { syntax: "<length-percentage>"; inherits: true; initial-value: 50% }
@property --cu-my { syntax: "<length-percentage>"; inherits: true; initial-value: 50% }

/* ---------- as the copper hero ---------- */
/* The band fills .mp-hero instead of running as a strip in the flow. Everything
   below this block is shared with the strip form and needs no changes.
   .mp-hero is shared by iron, manganese and lithium, so every rule here is
   scoped to .mp-hero-wave — copper is the only page that goes light. */
.mp-hero-wave .cu-wave {
  position: absolute;
  inset: 0;
  height: auto;                     /* the hero's own height governs */
  margin: 0;
  /* No horizontal mask any more. Earlier versions either veiled the coil with
     cream (which greyed it) or cut half of it away (which hid half the wave) —
     both were ways of clearing somewhere for the copy to sit, because there is
     no empty pocket in this frame: the emptiest block the size of the copy is
     still 47% covered. Putting the copy on an opaque card solves it properly,
     so the whole coil can run edge to edge and uncovered. The base rule's
     top/bottom feather still applies and is what dissolves it into the page. */
}

/* Espresso ink on cream. --mp-ink-rgb is declared on :root as a light triplet
   and consumed as rgb(var(--mp-ink-rgb) / .6) by the crumb, the standfirst and
   the spec rules — all descendants of this element, so redeclaring it here does
   re-derive them. (Unlike --rule and friends in styles.css, which are computed
   on :root and cannot be reached this way.) */
.mp-hero-wave {
  --mp-ink-rgb: var(--text-rgb);
}
.mp-hero-wave .mp-hero-inner { color: var(--text) }

/* No scrim. The shared rule lays a gradient over the imagery so copy can sit on
   it; the card below does that job instead, and any veil on top would only dull
   the coil it is meant to show. */
.mp-hero-wave .mp-hero-veil { background: none }

/* ---------- the headline card ---------- */
/* Built as .mp-plate is built — 1px hairline, warm gradient, one long soft
   shadow — because that is the site's existing premium surface and the only
   sanctioned exception to "no drop shadows" in the house style. Deliberately
   NOT a frosted or translucent panel: that is the glassmorphism the style rules
   out, and a translucent card would put the type straight back onto metal.
   Depth comes from the shadow being long and very soft (a 90px blur pulled back
   by a -58px spread, so it reads as lift rather than as a dark edge) plus a
   second, tight shadow that seats the card on the page. The 160deg gradient
   gives it a faint sheen across the face. */
.mp-hero-card {
  max-width: min(100%, 620px);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2.6vw, 38px);
  padding: clamp(30px, 3vw, 46px) clamp(28px, 3vw, 44px) clamp(26px, 2.6vw, 38px);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  /* 80% — 20% more transparent than the plate it is modelled on, so the coil
     reads faintly through the card and the two feel like one object. Mixed off
     the plate tokens rather than written as an rgba literal, so the card still
     follows the palette. NOT backdrop-filtered: a blurred panel is the frosted
     glass the house style rules out, and it is also the expensive one.
     Measured over the blackest part of the coil, espresso on the card face is
     7.9:1 at this alpha against a 4.5 requirement — so there is room to go
     further if you want it thinner. Below about 55% it stops clearing AA. */
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--mp-plate-cu-a) 80%, transparent) 0%,
    color-mix(in srgb, var(--mp-plate-cu-b) 80%, transparent) 100%);
  box-shadow:
    0 44px 90px -58px rgb(var(--mp-shadow-rgb) / .75),
    0 2px 5px -3px rgb(var(--mp-shadow-rgb) / .16);
}
/* Centred rather than pushed to the top and bottom edges: the card is one block
   now, so the shared space-between has nothing left to separate. */
.mp-hero-wave .mp-hero-inner { justify-content: center }

/* The card is ~530px of content, so the shared display scale is far too large
   for it — at 118px the headline would set two words to a line. These are the
   card's measures, not the hero's. */
.mp-hero.mp-hero-wave h1 {
  max-width: none;
  font-size: clamp(34px, 4.2vw, 62px);
}
.mp-hero-wave .mp-hero-copy { gap: 20px }
.mp-hero-wave .mp-hero-copy p { max-width: none }
.mp-hero-wave .mp-spec { gap: 30px; padding-top: 20px }
.mp-hero-wave .mp-spec dd { font-size: clamp(17px, 1.5vw, 25px) }
/* Gold is a fill colour; on cream at 11px it does not carry. The deeper copper
   is the legible one, per the accent rule in styles.css. */
.mp-hero-wave .mp-crumb span { color: var(--accent-deep) }

/* Narrow screens. The card needs no mask to protect it, so the coil still runs
   full-bleed; the card just goes full width and loses some of its inset.
   Matches the 900px breakpoint in mineral.css, where the hero switches to
   height:auto and the inner padding drops. */
@media (max-width: 900px) {
  .mp-hero-card {
    max-width: 100%;
    padding: 28px 24px 24px;
    box-shadow: 0 28px 60px -44px rgb(var(--mp-shadow-rgb) / .7);
  }
  .mp-hero-wave .mp-hero-inner { justify-content: flex-start }
}

/* ---------- the band ---------- */
.cu-wave {
  position: relative;
  height: clamp(340px, 45vh, 560px);
  /* Air above, so the band clears the foot of the hero. Below it the
     element plate brings its own top padding and lifts into it. */
  margin-block: clamp(24px, 5vw, 90px) clamp(8px, 2vw, 32px);
  overflow: hidden;                 /* clips the overscan on .cu-wave-warp */
  --cu-r: 0px;                      /* reveal radius; 0 = fully oxidised */
  transition: --cu-r 500ms cubic-bezier(.4, 0, .2, 1);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

/* The filter lives in a zero-size SVG so it takes no layout. */
.cu-wave-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none }

/* Overscanned so the swell below never walks an edge into view: 3% horizontally
   against a 2.4% travel, 2% vertically against 0.6%. */
.cu-wave-warp {
  position: absolute;
  top: -2%; bottom: -2%; left: -3%;
  width: 106%;
}

/* The swell. This is a pure translate and nothing else, which is the whole
   point: the coil moves, but every pixel of it stays exactly as rendered.
   What used to be here was `filter: url(#copper-wave)` — an feTurbulence
   driving an feDisplacementMap — which bent the image itself and read as heat
   haze over a desert road. Motion by displacement is the thing to avoid;
   motion by transform is free and stays sharp.
   The vertical component runs on a different phase to the horizontal one, so
   the wave rolls rather than slides side to side. 22s because the brief for
   this site is slow and subtle — at anything quicker it reads as a slideshow.
   Carried on the layer both copies share, so they cannot fall out of register
   with each other and break the reveal. */
.cu-wave-drift {
  position: absolute;
  inset: 0;
  animation: cu-swell 22s ease-in-out infinite;
  will-change: transform;
}

@keyframes cu-swell {
    0% { transform: translate3d(-2.4%,  0.6%, 0) }
   25% { transform: translate3d(-1.1%, -0.5%, 0) }
   50% { transform: translate3d( 2.4%,  0.4%, 0) }
   75% { transform: translate3d( 1.0%, -0.6%, 0) }
  100% { transform: translate3d(-2.4%,  0.6%, 0) }
}

.cu-wave-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The insulated sheath, punched through by a circle that follows the
   cursor to expose the bare conductor beneath. This is a second render of
   the same geometry rather than a filtered copy of the first, so no CSS
   filter belongs here — the material is real. The sheath is fractionally
   fatter than the conductor, as insulation is, which is why the reveal
   never opens a gap of cream at the rim.
   At --cu-r: 0px the gradient is degenerate and paints its last stop
   everywhere, which is opaque — so the resting state is fully sheathed,
   and nothing is revealed until a pointer arrives. */
.cu-wave-sheath {
  -webkit-mask-image: radial-gradient(circle var(--cu-r) at var(--cu-mx) var(--cu-my), transparent 0%, transparent 55%, #000 100%);
          mask-image: radial-gradient(circle var(--cu-r) at var(--cu-mx) var(--cu-my), transparent 0%, transparent 55%, #000 100%);
}

/* ---------- no cursor to follow ---------- */
/* Coarse pointers hold the reveal permanently open and let the script
   walk it across the band as the section scrolls through the viewport.
   Scroll rather than a timed loop: it is the only gesture a touch reader
   has here, so the wipe follows their intent instead of an arbitrary
   clock. If the script never runs they keep a static reveal at the
   centre, which is a reasonable picture rather than a broken one. */
@media (hover: none) {
  .cu-wave { --cu-r: 180px; transition: none }
}

/* ---------- reduced motion ---------- */
/* Stop the swell, and drop the sheath rather than easing it, leaving the bare
   copper standing — the warmer image, and the one the page is about. */
@media (prefers-reduced-motion: reduce) {
  .cu-wave { transition: none }
  .cu-wave-drift { animation: none; transform: none; will-change: auto }
  .cu-wave-sheath { display: none }
}