/* Arrow buttons on the three folder pages (Inside 1, 2, 3).
   Each button is drawn here (the .tab-go__art svg in index.html), not in the
   artwork, and it has a fixed pixel size like the Enter button on the title
   screen, so it stays the same size when the folder scales.
   Only its centre is placed as a percentage of the artwork (1042 x 721). */

.tab-go {
  /* Same units as the Enter button on the title screen (css/title.css):
     a real pixel size, no longer tied to the folder size.
     height 90px = 78px key + 12px lip, same as .title-enter. */
  --btn-h: 90px;
  --btn-w: 86px;                /* keeps the 96 : 101 shape of the original button */
  --k: calc(var(--btn-h) / 101);   /* one drawing unit in px, used by the click burst */

  position: absolute;
  width: var(--btn-w);
  height: var(--btn-h);
  left: var(--cx);
  top: var(--cy);
  transform: translate(-50%, -50%);   /* the centre sits on the spot below */
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 37%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Centre of each button on its page (x / 1042, y / 721), the colour it takes on hover,
   and how far it is tilted (--tilt: measured from the edge of the button shape; the
   click rays are turned by the same angle) */
.l1 .tab-go { --cx: 84.9329%; --cy: 49.4452%; --hover: #289E49; --tilt: -9deg; }   /* Inside 1: green */
.l2 .tab-go { --cx: 84.2611%; --cy: 63.6107%; --hover: #FF6638; --tilt: 2deg; }    /* Inside 2: orange */
.l3 .tab-go { --cx: 84.8369%; --cy: 56.7962%; --hover: #5B55B5; --tilt: -6deg; }   /* Inside 3: purple */

/* Only the opened page can be clicked on its button */
.layer:not(.active) .tab-go {
  pointer-events: none;
}

.tab-go:focus-visible {
  outline: 3px dashed var(--color-title-button-line);
  outline-offset: 6px;
}

/* Look, hover and press: same as the Enter button on the title screen.
   The lip is the paper colour and turns green on hover; pressing moves the
   key (and arrow) down. Shapes are drawn in a 96 x 101 unit box. */
.tab-go__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.tab-go__cover {
  display: none;   /* the button is no longer drawn in the artwork, nothing to hide */
}

.tab-go__lip,
.tab-go__top {
  stroke: var(--color-title-button-line);
  stroke-width: 2.5;                     /* same border as the Enter button */
  vector-effect: non-scaling-stroke;
}

.tab-go__lip {
  fill: var(--color-title-button-bg);
  transition: fill .15s ease;
}
.tab-go:hover .tab-go__lip,
.tab-go:focus-visible .tab-go__lip,
.tab-go.is-clicked .tab-go__lip { fill: var(--hover); }   /* lip takes this page's hover colour */
.tab-go__top { fill: var(--color-title-button-bg); }
.tab-go__arrow { fill: var(--color-title-button-line); }

.tab-go__key {
  transition: transform .08s ease;
}

.tab-go:active .tab-go__key {
  transform: translateY(9px);   /* the key is pressed down (9 units = 8px, like the Enter button) */
}

@media (prefers-reduced-motion: reduce) {
  .tab-go__key { transition: none; }
}

/* Click burst: same rays as the Enter button, placed around this button */
.tab-go__burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: rotate(var(--tilt, 0deg));   /* the rays turn with the button */
}

.tab-go__ray {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2.5px;                 /* ray thickness = button outline */
  margin: -1.25px 0 0 -6px;
  border-radius: 999px;
  background: var(--color-title-button-line);
  opacity: 0;
}

/* The rays are placed from the button itself, so they follow it:
   - they sit inside the button, so they move (and rotate / scale) with it
   - how far each one is from the centre is a share of the button's own
     width (--btn-w) and height (--btn-h), so change the button size and the
     rays move with it
   - each ray points straight away from the centre: its angle is worked out
     from its own position (atan2), so it turns when the button's shape changes
   (--r written out below is only a fallback for very old browsers) */
.tab-go__ray:nth-child(1) { --x: calc(var(--btn-w) * .6615);  --y: calc(var(--btn-h) * -.4396); --r: -35deg; }
.tab-go__ray:nth-child(2) { --x: calc(var(--btn-w) * .7031);  --y: 0px;                         --r: 0deg; }
.tab-go__ray:nth-child(3) { --x: calc(var(--btn-w) * .6615);  --y: calc(var(--btn-h) * .4396);  --r: 35deg; }
.tab-go__ray:nth-child(4) { --x: calc(var(--btn-w) * -.6615); --y: calc(var(--btn-h) * .4396);  --r: 145deg; }
.tab-go__ray:nth-child(5) { --x: calc(var(--btn-w) * -.7031); --y: 0px;                         --r: 180deg; }
.tab-go__ray:nth-child(6) { --x: calc(var(--btn-w) * -.6615); --y: calc(var(--btn-h) * -.4396); --r: -145deg; }

@supports (transform: rotate(atan2(1px, 1px))) {
  .tab-go__ray:nth-child(n) { --r: atan2(var(--y), var(--x)); }
}

.tab-go.is-clicked .tab-go__ray {
  animation: tab-go-ray-burst .6s cubic-bezier(.2, .8, .2, 1) forwards;
}

@keyframes tab-go-ray-burst {
  from {
    opacity: 0;
    transform: translate(var(--x), var(--y)) rotate(var(--r)) translateX(-6px) scaleX(.3);
  }
  25% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate(var(--x), var(--y)) rotate(var(--r)) translateX(12px) scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tab-go.is-clicked .tab-go__ray {
    animation: none;
  }
}