/* ===================================================================
   One tile language for the whole site.

   The homepage sponsor board is the reference. Read off it, the
   language is four things:

     depth   a stacked hard shadow, so a tile reads as a card sitting
             on the page rather than a rectangle drawn on it
     bloom   a radial highlight that follows the pointer across the face
     yaw     alternating rotateY across a row, on a perspective parent
     charge  a lift into a bright cyan edge with layered inner and outer
             glow on hover, and the same edge warming as the section
             scrolls into view

   Most of this already existed in pieces — polish.css blooms the .card
   family, visual-system.css blooms .v-panel, visual-motion.css lights
   the edge and lifts .v-panel. This sheet extends those pieces to the
   whole registry instead of restating them, and adds the two the site
   did not have anywhere but the sponsor board: depth and yaw.

   Two palettes, one behaviour. The same component appears on white and
   on navy across the site, so visual-motion.js measures each tile's
   section background and tags .v-tile-light or .v-tile-dark. Only
   colour changes between them; the geometry and timing do not.

   Loaded late so it wins over the component sheets, but before
   flow.css, which is last by design.
   =================================================================== */

:root {
  --tile-lift: -8px;
  --tile-yaw: 5deg;

  /* Light sections: the depth is a paper stack, the glow a cool blue. */
  --tile-depth: -5px 5px 0 #e7f0ff, 0 10px 0 #edf6ff, 0 16px 24px #0737631c;
  --tile-edge-hot: #00aaff;
  --tile-glow-hot:
    inset 0 0 18px #00aaff1a, 0 0 6px #75cfff, 0 0 26px #0098ff4d,
    0 14px 30px #0737632b;
  --tile-num: #147ad5;
  --tile-num-hot: #0062bf;
  --tile-num-glow: drop-shadow(0 0 6px #0098ff66);
}

/* The sponsor board's own values, so a dark tile anywhere on the site
   matches the section this language was taken from. */
.v-tile-dark {
  --tile-depth: -6px 6px 0 #0b1f38, 0 12px 0 #02101f, 0 17px 22px #00000088;
  --tile-edge-hot: #69efff;
  --tile-glow-hot:
    inset 0 0 20px #008cff55, 0 0 8px #00caff, 0 0 32px #007aff88,
    0 16px 35px #00000099;
  --tile-num: #6edcfc;
  --tile-num-hot: #00b7ff;
  --tile-num-glow: drop-shadow(0 0 7px #009dff);
}

/* ----------------------------- bloom ------------------------------

   polish.js sets --mx/--my on every .v-electric now, so the highlight
   tracks the pointer on all of them. .v-bloom is only on tiles that do
   not already carry one: five have it on ::before from polish.css,
   .v-panel has its own on --v-mx, and .v-phone uses ::before for the
   earpiece. Painted on ::after for the rest, which almost nothing
   uses. */
.v-bloom {
  position: relative;
  /* A stacking context, so the z-index:-1 wash below is guaranteed to
     paint inside this tile — above its own background box, beneath its
     content. Without one, a tile that has no background of its own
     (the prize tiles, two umpire cards, three on Players) lets the
     negative layer fall back past the tile and hide behind whatever
     ancestor paints the section, and the bloom simply never shows.
     `isolation` does this with no layout or paint cost of its own. */
  isolation: isolate;
}
.v-bloom::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Behind the tile's content but above its background, the way
     polish.css has always done its own bloom. The first version of this
     sheet used z-index:0 and promoted every child to `position:
     relative; z-index:1` to sit above it — which turned
     .v6-step-outline, an absolutely positioned SVG that draws the
     stepped border on the umpire "Paid assignments" card, into a grid
     item. It took the first cell, pushed the copy into the second and
     knocked the photo out of the grid entirely. Nothing is promoted
     now, so nothing positioned gets clobbered. */
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  background: radial-gradient(
    380px circle at var(--mx, 50%) var(--my, 0%),
    var(--tile-bloom, #0098ff2e),
    transparent 62%
  );
}
.v-tile-dark.v-bloom::after {
  --tile-bloom: #007aff40;
}
.v-bloom:hover::after,
.v-bloom:focus-within::after,
.v-bloom.v-hover-lit::after {
  opacity: 1;
}

/* ------------------------ depth and yaw ---------------------------

   Three or more tiles sharing a parent is a set, and gets the sponsor
   board's presentation. A pair or a lone tile keeps the flat resting
   shadow that visual-motion.css already gives it — at that count the
   yaw reads as a mistake rather than an arrangement. */
.v-tile-row {
  perspective: 1500px;
}
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .v-tile-row > .v-electric {
    box-shadow: var(--tile-depth);
    /* `rotate`, not `transform`: several surfaces carry their own
       matrix from the tilt runtime, and the individual property
       composes with it instead of replacing it. */
    rotate: y var(--tile-yaw);
  }
  .v-tile-row > .v-electric:nth-child(even) {
    rotate: y calc(var(--tile-yaw) * -1);
  }
  /* Square up and come forward under the pointer. */
  .v-tile-row > .v-electric:hover,
  .v-tile-row > .v-electric:focus-within,
  .v-tile-row > .v-electric.v-hover-lit {
    rotate: y 0deg;
  }
}

/* --------------------------- shaped tiles --------------------------

   visual-motion.js tags any tile with a clip-path. The shape is the
   design — an edge cannot follow it and a yaw shears it out of
   register with whatever it was cut around. These keep the bloom and
   the lift, which work on any silhouette, and take their charge from
   the background instead of a border. */
.v-tile-shaped,
.v-tile-row > .v-tile-shaped {
  rotate: none !important;
  box-shadow: none !important;
}
.v-tile-shaped:hover,
.v-tile-shaped:focus-within,
.v-tile-shaped.v-hover-lit {
  box-shadow: none !important;
}

/* ------------------------------ lift ------------------------------

   `translate` for the same reason as the rule this extends in
   visual-motion.css: it composes with a surface's own transform rather
   than replacing it.

   .v-wired-node is NOT excluded any more. It used to be, because the
   connectors are drawn from measured geometry and lifting an endpoint
   pulled it off the line. visual-motion.js now re-measures for the
   length of the transition, so a wired tile can lift like any other. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .v-electric:hover,
  .v-electric:focus-within,
  .v-electric.v-hover-lit {
    translate: 0 var(--tile-lift);
  }
  /* A tile nested in another surface rides with its parent instead of
     lifting a second time on top of it. */
  .v-electric .v-electric:hover,
  .v-electric .v-electric:focus-within,
  .v-electric .v-electric.v-hover-lit {
    translate: 0 0;
  }
}

/* ----------------------------- charge -----------------------------

   The hot edge. visual-motion.css already states this for the dark
   palette; this re-points it at the token so a light section gets a
   blue edge instead of cyan on white. Same selector list, so it wins
   on load order rather than by escalating specificity. */
.v-electric:hover,
.v-electric:focus-visible,
.v-electric:focus-within,
.v-electric[aria-pressed="true"],
.v-electric.v-hover-lit {
  border-color: var(--tile-edge-hot) !important;
  box-shadow: var(--tile-glow-hot) !important;
}

/* ----------------------------- numbers ----------------------------

   Every numeral that labels a step, round or stage — visual-motion.js
   tags them .v-num by content, because there are a dozen class names
   for the same thing across the site and the path panels use none.

   Resting appearance is deliberately untouched. The championship cycle
   draws its 01-04 at 19% alpha as a hollow outline, and the prize tiles
   draw theirs as a solid disc; forcing a token colour on both would
   flatten two different designs into one. What is shared is the
   response: a numeral brightens and picks up the glow when its tile
   charges on scroll or takes the pointer, on the same curve as the
   tile's own edge. brightness() rather than a colour so it lifts a
   translucent outline and a solid disc alike. */
.v-num {
  transition:
    filter var(--surface-dur, 360ms) ease,
    color var(--surface-dur, 360ms) ease;
}
.v-charged .v-num,
.v-electric:hover .v-num,
.v-electric:focus-within .v-num,
.v-electric.v-hover-lit .v-num,
.v-scroll-lit .v-charged .v-num {
  filter: var(--tile-num-glow) brightness(1.3);
}

/* ------------------------- motion is opt-out ----------------------- */
@media (prefers-reduced-motion: reduce) {
  .v-tile-row > .v-electric,
  .v-tile-row > .v-electric:nth-child(even) {
    rotate: none;
  }
  .v-electric:hover,
  .v-electric:focus-within,
  .v-electric.v-hover-lit {
    translate: 0 0;
  }
  .v-bloom::after {
    display: none;
  }
}
.motion-paused .v-tile-row > .v-electric,
.motion-paused .v-electric {
  rotate: none;
  translate: 0 0;
  transition: none;
}
.motion-paused .v-bloom::after {
  display: none;
}