/* Indian Tribe — the clock menu
 * -----------------------------------------------------------------------------
 * Lifted out of portfolio.html verbatim so the home deck and the portfolio are
 * running one definition rather than two that drift apart. Values are the
 * originals — the 620x330 box whose centre sits on the floor, the 154px label
 * ring, the 210/330 grey hands, the 151px red one.
 *
 * --clock-lift raises the whole instrument off the bottom of the screen; the
 * portfolio leaves it at 0, the deck lifts it clear of the scroll cue.
 */

.clock-nav{
  position:absolute; z-index:4;
  left:50%; bottom:calc(-165px + var(--clock-lift, 0px));
  width:620px; height:330px;
  transform:translateX(-50%);
  pointer-events:none; overflow:visible;
}
.clock-face{ position:absolute; inset:0; border:0; border-radius:0; opacity:1; }
.clock-face:before{ display:none; }
.ticks{ position:absolute; inset:0; }
/* The spokes are gone; the origin is a dot. Small and nearly black, the way the
   reference draws it - it reads as a point the hands hang from rather than a
   grey blob sitting among them. */
.clock-pivot{
  position:absolute; left:50%; top:50%;
  /* the dot grows with the hands, or a bigger dial hangs off a speck */
  width:calc(5px * var(--clock-scale, 1)); height:calc(5px * var(--clock-scale, 1));
  border-radius:50%;
  background:#2b2b28;
  transform:translate(-50%,-50%);
  z-index:4;
}
/* Measured off the reference at six times magnification: the hands are thin,
   a plain mid grey, and they meet AT the dot - there is no gap between them and
   the origin. (An earlier pass put 9px of daylight there; the reference has
   none, so it is gone.) */
.clock-hand{
  position:absolute; left:50%; top:50%;
  height:1.7px;
  background:#8f8f8a;
  transform-origin:0 50%;
  pointer-events:none;
  z-index:2;
}
/* Two hands, and both point at whatever is selected - a narrow V, rather than
   one pointer and two ornaments. Their angle is set from script; the turn lives
   here, so choosing another option carries them round together. Neither reaches
   the words, which sit at a radius of 118. */
/* Short enough to clear the categories. The long one reached 112px, which put
   its tip past ALL and drew the hand straight across the chip on the way. They
   point at the word; they do not have to arrive at it.

   --clock-scale is how much further out the words have gone: the portfolio
   works its label radius out from where the belt is, so it differs with the
   window, and the hands grow by the same amount. The whole instrument keeps
   its proportions; only its size answers to the screen. */
/* Measured off the mark on the screenshot: the long hand was reaching 0.56 of
   the way from the dot to the word and was asked for 0.81, so both grow by
   1.44 and keep the ratio they had to each other. The tip passes just under
   the word and stops - it points at it, it does not arrive. */
.clock-hand.short{ width:calc(66px * var(--clock-scale, 1)); }
.clock-hand.long { width:calc(89px * var(--clock-scale, 1)); }
.clock-hand{ height:calc(1.7px * var(--clock-scale, 1)); }
.clock-hand.short, .clock-hand.long{
  transition:transform 1.15s cubic-bezier(.33,0,.18,1);
}
/* kept so a page still carrying the old element draws nothing odd */
.clock-hand.pick{ display:none; }

/* The deck used to seat its one word closer in and cut its hands to match.
   Both screens are sized the same way now - see deckLabelR in js/deck.js - so
   there is nothing left to override: the hands above, scaled, serve both. */

.radial-item{
  position:absolute;
  /* the labels are buttons; portfolio.html reset button chrome globally and the
     home page does not, so the reset belongs with the component */
  -webkit-appearance:none; appearance:none;
  border:0; background:none; padding:0; margin:0;
  pointer-events:none;
  z-index:1;
  white-space:nowrap;
  font:23px/1 Georgia,'Times New Roman',serif;
  letter-spacing:-.04em;
  color:#d0d0cb;
  transform:translate(-50%,-50%);
  transition:color .2s ease;
  will-change:left,top;
}
.radial-item.active{ color:#111; }
.radial-item:hover{ color:#222; }
.arc-runner{ display:none; }

/* the nav's own pivot and hands are decoration only — the HUD layer draws the
   live ones, seated on the floor rather than in the middle of the box */
.clock-nav > .clock-pivot,
.clock-nav > .clock-hand{ display:none; }

.clock-hit-layer{
  position:absolute; z-index:50;
  left:50%; bottom:calc(-165px + var(--clock-lift, 0px));
  width:620px; height:330px;
  transform:translateX(-50%);
  pointer-events:none; overflow:visible;
}
.clock-hit{
  position:absolute;
  -webkit-appearance:none; appearance:none;
  padding:0; margin:0;
  pointer-events:auto;
  width:140px; height:56px;
  transform:translate(-50%,-50%);
  background:transparent; color:transparent; border:0;
  cursor:pointer;
}
.clock-hud{
  position:absolute; z-index:45;
  left:50%; bottom:var(--clock-lift, 0px);
  width:620px; height:330px;
  transform:translateX(-50%);
  pointer-events:none; overflow:visible;
}
.clock-hud .clock-pivot{ left:50%; top:100%; }
.clock-hud .clock-hand { left:50%; top:100%; }

.radial-hover-label{
  position:absolute; z-index:60;
  display:none;
  transform:translate(-50%,-50%);
  /* a default only: clock.js copies the word's own computed face onto this,
     so the two can never print in different type */
  font:23px/1 Georgia,'Times New Roman',serif;
  letter-spacing:-.04em;
  color:#111;
  white-space:nowrap;
  pointer-events:none;
}
.clock-hit:hover + .radial-hover-label{ display:block; }
/* The label is a second copy of the word drawn over the first, so the first
   steps aside while it shows - left in place, the two print over each other.
   The engine that sets this also gives the label the word's own size and
   weight, so hovering darkens the word where it stands. */
.clock-nav .radial-item.is-hovered{ visibility:hidden; }

@media (max-width:900px){
  .clock-nav, .clock-hit-layer{
    transform:translateX(-50%) scale(.78);
    transform-origin:center bottom;
    bottom:calc(-165px + var(--clock-lift, 0px));
  }
  .clock-hud{ transform:translateX(-50%) scale(.78); transform-origin:center bottom; }
  .radial-item, .radial-hover-label{ font-size:18px; }
}