/* ==========================================================================
   home.css - the front door's own styles
   --------------------------------------------------------------------------
   The companion to home.js, and its own file for the same reason: index.html
   is the biggest page in the lab, and a two line change to the hero board
   should not cost a push of the whole page.

   WHAT IS IN HERE. The sixteen week board, the drift on the three orbs
   behind the hero, and the chip that says how much XP arrived since the last
   visit. Nothing else on index.html is styled from here; the page keeps its
   own <style> block for everything that is only about that page's layout.

   THE RULES IT KEEPS, all of them the lab's rather than this file's:

     · Flat color, no gradient, no image file, which is the Jahez guideline
       rather than a preference. The depth in the blocks below is three flat
       tones, one per face, and not a shade. Every hue is already somewhere
       else on the page: red is a week with material, the dim white is a week
       without, and #FFB020 is "you are here", which is the amber the week
       card further down already uses for the current week.
     · Every duration and every curve is a brand.css token, so
       tests/uat-one-language.js finds nothing off the scale here.
     · Logical properties only, so tests/uat-rtl.js is satisfied and the
       Arabic side mirrors without a second stylesheet.
     · The resting state is the finished picture. Everything that moves is
       behind html.js-motion, which depth.css sets only once motion.js knows
       it can finish the job, and behind a reduced motion query under that.
       A browser that never reaches those rules gets the drawing, not an
       empty box.
   ========================================================================== */

/* ---- the sixteen week board ---------------------------------------------
   Sixteen blocks on a floor, drawn by home.js from WeekMap. Three flat
   polygons per block, one per face, and three flat tones per state: no
   gradient anywhere, because the Jahez guideline retires them, and a flat
   vector drawing is what the three faces add up to.

   The tones are lit as if from the upper left, which is the only rule the
   nine colors below follow: top face brightest, front a step darker, side a
   step darker again. The hues themselves are already on this page. Red is a
   week with material. Dim white is a week still to come. #FFB020 is "you are
   here", which is the amber the week card further down already uses. */
/* The drawing is 430 viewBox units wide and the column it sits in is about
   545 at a laptop width, so it is allowed to grow to 500 and no further: past
   that the eight pixel week numbers start to look like a headline, and the
   board stops being the second thing you read.

   On a screen under 901px the hero drops this column entirely, which is a
   rule index.html already carried and this keeps. The board is 161px tall on
   a 390px phone, the sign in field is the only thing that matters there, and
   the rail further down the page is the same navigation with more detail on
   it. A phone loses the picture and loses nothing else. */
.track16{max-width:500px;margin-inline-start:auto}
.track16 svg{display:block;width:100%;height:auto;overflow:visible}

/* the floor, and the depth lines across it */
.t16-ground{fill:rgba(255,255,255,.07)}
.t16-grid{stroke:rgba(255,255,255,.10);stroke-width:1}
.t16-edge{stroke:rgba(255,255,255,.22);stroke-width:1}

/* the phase ruler across the top, the phase name on the one the cohort is
   inside, and that same phase's band on the floor under its blocks */
.t16-rule{stroke:rgba(255,255,255,.18);stroke-width:2.5;stroke-linecap:butt}
.t16-rule.here{stroke:#FFB020}
.t16-tick{stroke:rgba(255,255,255,.18);stroke-width:1}
.t16-tick.here{stroke:rgba(255,176,32,.7)}
.t16-ph{fill:#FFB020;font-size:8px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}

/* A block. The three faces take their color from the state on the group, so
   a state is three declarations and not three rules per face. */
.t16-blk .t16-top{fill:rgba(255,255,255,.16)}
.t16-blk .t16-face{fill:rgba(255,255,255,.10)}
.t16-blk .t16-side{fill:rgba(255,255,255,.06)}
.t16-blk.open .t16-top{fill:#E60000}
.t16-blk.open .t16-face{fill:#B00000}
.t16-blk.open .t16-side{fill:#8A0000}
.t16-blk.now .t16-top{fill:#FFB020}
.t16-blk.now .t16-face{fill:#D18D14}
.t16-blk.now .t16-side{fill:#A76F0F}

/* the week number under its own block, and the readout under the row */
.t16-n{fill:#E4C4C4;font-size:8px;font-weight:700}
.t16-n.now{fill:#FFB020;font-size:9.5px;font-weight:800}
.t16-cap{fill:#fff;font-size:10.5px;font-weight:700}

/* ---- the board as navigation --------------------------------------------
   Every block is a link to that week's card in the rail below. The hit area
   is the whole group rather than the visible polygons, so the number under a
   block is part of the target and a thumb has something to land on.

   The lift on hover is the only hover in the drawing and it is four pixels,
   which is enough to say "this one" and not enough to make a row of sixteen
   look like it is breathing. */
.t16-hit{cursor:pointer;transform-box:fill-box;transform-origin:center bottom;
  transition:transform var(--t-press) var(--ease)}
.t16-hit:hover{transform:translateY(-4px)}
.t16-hit:hover .t16-n{fill:#fff}
.t16-hit:focus{outline:none}
.t16-hit:focus-visible{transform:translateY(-4px)}
.t16-hit:focus-visible .t16-top{stroke:#fff;stroke-width:1.5}
.t16-hit:focus-visible .t16-n{fill:#fff}

/* The card the board sends you to, marked for a moment so it is obvious
   which one you asked for. It fades itself out: see home.js, which removes
   the class when another block is picked, and the animation below, which
   takes the ring off after a second whether or not that happens. */
.wcard.lit{box-shadow:0 0 0 3px rgba(255,176,32,.55),var(--shadow)}
html.js-motion .wcard.lit{animation:w16lit var(--t-major) var(--ease) 3 alternate}
@keyframes w16lit{to{box-shadow:0 0 0 3px rgba(255,176,32,.12),var(--shadow)}}

/* The orbs get a few pixels of drift against the pointer, moved by home.js.
   The easing lives here rather than in that script so it is on the same
   scale as everything else. */
.deep .orb{transition:transform var(--t-slow) var(--ease-out)}

/* ---- the entrance --------------------------------------------------------
   The floor fades in, the blocks rise in week order, the labels follow. It
   runs once and then the page is still.

   Everything below is behind html.js-motion, which depth.css sets only once
   motion.js knows it can finish the job, so a browser that never reaches
   these rules gets the finished drawing rather than an empty box. The
   reduced motion query under them says the same thing a second time for a
   reader who has asked for less movement. */
html.js-motion .t16-rise{opacity:0;transform:translateY(14px);
  transform-box:fill-box;transform-origin:center bottom;
  animation:t16rise var(--t-slow) var(--ease-out) forwards;
  animation-delay:calc(var(--i,0)*38ms + 180ms)}
@keyframes t16rise{to{opacity:1;transform:none}}
html.js-motion .t16-fade{opacity:0;animation:t16fade var(--t-slow) var(--ease-out) forwards;
  animation-delay:calc(var(--i,0)*38ms + 300ms)}
@keyframes t16fade{to{opacity:1}}
/* THE LIFT AND THE ENTRANCE ARE ON DIFFERENT ELEMENTS ON PURPOSE. Both are a
   transform. An animation with fill forwards keeps hold of the property it
   animated for good, so a hover transition written on the same element would
   simply never be seen: the entrance would freeze the lift. So the rise runs
   on the block group inside the link, and the lift runs on the link itself.
   Two elements, two transforms, no fight. */
@media (prefers-reduced-motion: reduce){
  html.js-motion .t16-rise,html.js-motion .t16-fade{animation:none;opacity:1;transform:none}
  html.js-motion .wcard.lit{animation:none}
  .t16-hit,.t16-hit:hover,.t16-hit:focus-visible{transform:none;transition:none}
}

/* ---- the XP gain chip -------------------------------------------------- */
/* The chip that says what arrived since the last visit. It is empty and
   display:none until there is something to say, so a first visit, and a
   visit where nothing was earned, both show nothing rather than a zero. */
.xpgain{display:none;font-size:11.8px;font-weight:800;letter-spacing:.04em;
  color:#0E0505;background:#FCF500;border-radius:99px;padding:3px 9px;white-space:nowrap}
.xpgain.on{display:inline-block}
html.js-motion .xpgain.on{animation:xpgain var(--t-slow) var(--ease-out) var(--t-major) both}
@keyframes xpgain{from{opacity:0;transform:translateY(5px) scale(.9)}
  to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){html.js-motion .xpgain.on{animation:none}}