/**
 * Site-wide corrections that belong to this build of the site rather than to
 * the template it came from. Loaded last on every page.
 *
 * The app hydrates here exactly as it does in production, so nothing in this
 * file fights the template's own entrance animations any more -- the earlier
 * opacity resets and artwork stand-ins were only ever there because the
 * export could not boot React, and they are gone.
 */

/**
 * The hero lays its container out as a grid item, and a grid item's automatic
 * minimum size is its min-content width. So the section cannot shrink below
 * the widest thing inside it, and the page grows a horizontal scrollbar
 * instead of the hero reflowing -- the template already did this by a few
 * pixels, and the borrow copy is longer than the copy it replaced.
 *
 * min-width:0 lets the side columns size to the space actually available. The
 * fixed middle column is untouched, so the hero keeps its proportions.
 */
section[class*="Hero"] > .container {
  min-width: 0;
}

/**
 * The two Spline scenes -- the object in the hero and the one beside the five
 * rules -- are compiled binaries, so their materials cannot be edited here.
 * Both were authored in the template's original green, which is the only
 * green left anywhere on the site now that the tokens are azure.
 *
 * A hue rotation moves them onto the accent. +105deg takes the object's
 * yellow-green (~95deg) to the azure the rest of the page is built from
 * (~200deg); the pale highlights and the shadow are near-neutral, so they
 * come through the rotation unchanged.
 */
[class*="Animation"] canvas,
canvas[data-spline],
main canvas {
  filter: hue-rotate(105deg);
}

/**
 * The borrow simulator's over-the-line state.
 *
 * It was the one red left anywhere on the site. It still has to read as "this
 * is not the normal state", so it does not simply become the accent: this is
 * a deeper, fully saturated blue that separates cleanly from
 * --interface-green (#3cf) against the dark panel while staying inside the
 * blue the rest of the page is built from.
 */
:root {
  --over-line: #1a63e8;
}

/**
 * The band artwork: the P, and only the P, in colour.
 *
 * The template stacks two copies of the same picture. The lower one is pushed
 * to grey with brightness(.5) grayscale(1); the upper one is punched through
 * a mask, so whatever the mask covers is the one thing that keeps its colour.
 *
 * The template's own mask is a puzzle-piece silhouette sized at 33% and
 * parked at 50% 36%, which lands a pair of rounded rectangles somewhere near
 * the letter rather than on it. This mask is the letter: it was traced from
 * the artwork itself, so it carries the eyes, the bevel and the notch the
 * fingertip takes out of the top edge.
 *
 * It shares the artwork's 1672x941 grid, and the picture under it is painted
 * object-fit:cover from its centre -- so cover/center here puts the two on
 * exactly the same geometry at any width, with no numbers to re-tune when the
 * band reflows.
 *
 * The :not() pair matters: a bare [class*="__Image"] also matches __ImageCont
 * and __ImageInner, and the rule would land on the wrong box.
 */
/**
 * Keep the colour copy above the grey one at every width.
 *
 * The two copies are siblings under the section: the container holding the
 * colour copy comes first, the grey copy last. The colour copy carries
 * z-index:1, which is enough to sit on top -- until the narrow breakpoint,
 * where the template sets scale:1 on that container. A scale is a transform,
 * a transform makes a stacking context, and the child's z-index is then
 * trapped inside it. The container itself is z-index:auto, so it paints at
 * level 0 and loses to the grey copy simply for being earlier in the DOM.
 *
 * The result was a band that showed the letter in colour above 1024px and
 * went entirely grey below it. Giving the container its own z-index puts the
 * ordering back where the template meant it to be, at any width.
 */
[class*="VideoAnimation"][class*="__ImageCont"] {
  z-index: 1;
}

[class*="VideoAnimation"][class*="__Image"]:not([class*="ImageCont"]):not([class*="ImageInner"]) {
  -webkit-mask-image: url(../images/video-mask-p.png);
          mask-image: url(../images/video-mask-p.png);
  /* the template animates mask-size inline, from 20% upwards, so the reveal
     grows its puzzle shape as the band scrolls in. An inline value beats a
     stylesheet one, and a growing window would not stay registered with the
     letter underneath it, so the geometry is pinned here. The element also
     animates its opacity from 0, and that is untouched -- so the letter still
     fades up into colour as the band arrives, it just does it at the one size
     that lands on the artwork. */
  -webkit-mask-size: cover !important;
          mask-size: cover !important;
  -webkit-mask-position: center !important;
          mask-position: center !important;

  /* Opacity is deliberately NOT pinned here. The template animates it inline
     from 0 as the band scrolls in, and that is the reveal -- the letter fades
     up out of the grey. It was pinned to 1 for a while when the band appeared
     to be dead, but the real fault was the stacking order fixed above, and
     with that sorted the reveal drives itself. Only the mask geometry stays
     pinned, because a mask that grows would not stay registered with the
     letter underneath it. */
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/**
 * The STOCKS card: the photograph, revealed on hover, across the whole card.
 *
 * The template already designed this: the picture sits absolutely over the
 * card at opacity 0 and scale 1.03, fades in and settles to scale 1 on hover,
 * and carries its own black scrim so the copy stays readable while it is
 * showing. Two later rules take it away again -- a blanket display:none on
 * every card, and a :first-of-type rule that turns this one into an inline
 * illustration with negative margins and switches its scrim off.
 *
 * So the job here is not to invent a treatment, it is to undo those two and
 * let the original behaviour run at full size. Opacity and transform are
 * deliberately untouched: they are what makes it appear on hover and stay
 * hidden otherwise, matching the other two cards.
 */
[class*="CtaGrid"] a > span:has(img[src*="slips-card-stocks"]) {
  position: relative;
  isolation: isolate;
}

[class*="CtaGrid"] a > span:has(img[src*="slips-card-stocks"]) [class*="__Image"] {
  display: block;                    /* undo the blanket display:none */
  position: absolute;                /* undo :first-of-type's position:relative */
  inset: 0;
  margin: 0;                         /* undo its -40px/-80px inline framing */
  aspect-ratio: auto;                /* undo its 1.3 ratio, which capped the height */
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;              /* hover belongs to the card, not the picture */
}

/* the scrim the :first-of-type rule switched off. It lives inside the picture,
   so it fades in and out with it rather than dimming a card showing no photo */
[class*="CtaGrid"] a > span:has(img[src*="slips-card-stocks"]) [class*="__Image"]::after {
  display: block !important;
}

[class*="CtaGrid"] a > span:has(img[src*="slips-card-stocks"]) [class*="__Image"] > div,
[class*="CtaGrid"] a > span:has(img[src*="slips-card-stocks"]) img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* the copy rides above the picture instead of being painted over by it */
[class*="CtaGrid"] a > span:has(img[src*="slips-card-stocks"]) > *:not([class*="__Image"]) {
  position: relative;
  z-index: 1;
}

/**
 * The header's X link and contract-address chip.
 *
 * Both sit in the header's button row next to Connect. They are sized off the
 * mono face the rest of the header furniture uses, so they read as part of it
 * rather than as something bolted on.
 */
.ponlix-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 100px;
  color: var(--black);
  border: 1px solid var(--light-grey);
  transition: color .15s, border-color .15s;
  flex: none;
}

.ponlix-x:hover {
  color: var(--interface-green);
  border-color: var(--interface-green);
}

.ponlix-ca {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  appearance: none;
  cursor: pointer;
  background: none;
  border: 1px solid var(--light-grey);
  border-radius: 100px;
  padding: 0 14px;
  height: 34px;
  font-family: var(--font-mono);
  font-size: var(--font-size-xx-small);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--black);
  white-space: nowrap;             /* the address must never wrap the header */
  transition: border-color .15s, color .15s;
}

.ponlix-ca:hover { border-color: var(--interface-green); }

/* nothing to copy while the address is unpublished, so it does not offer to */
.ponlix-ca[data-empty] { cursor: default; }
.ponlix-ca[data-empty]:hover { border-color: var(--light-grey); }

.ponlix-ca-k { color: var(--mid-grey); }
.ponlix-ca-k::after { content: " :"; }
.ponlix-ca-v { font-variant-numeric: tabular-nums; }

.ponlix-ca[data-state="ok"]  { border-color: var(--interface-green); color: var(--interface-green); }
.ponlix-ca[data-state="err"] { border-color: var(--over-line); color: var(--over-line); }

/* the row is tight on a laptop once three controls share it */
@media (max-width: 1180px) {
  .ponlix-ca-k { display: none; }
}

@media (max-width: 900px) {
  .ponlix-ca { display: none; }
}