/* The Wii Menu: channel shelf, dock, name tag, and the channel preview */

.home {
  --dock-h: 219px;     /* height of the bottom bar */
  --title-s: 1;        /* scale of the curved "Wii Menu" bar */
  --button-s: 1;       /* scale of the round dock buttons */
  --side-pad: 80px;
  --top-pad: calc(3 * var(--vh));
  width: 100%;
  height: var(--screen-h);
  background: lightgrey url(../img/menu-stripes.png);
  transform-origin: var(--zoom-at, 50% 50%);
  transition: transform 450ms var(--ease-zoom), opacity 300ms;
}

/* opening a channel: zoom into its tile and fade (js/home.js sets --zoom and --zoom-at) */
.is-previewing .home {
  transform: scale(var(--zoom, 4));
  opacity: 0;
  visibility: hidden;
  transition: transform 500ms var(--ease-zoom), opacity 500ms ease-in, visibility 0s 500ms;
}

.home-top {
  box-sizing: border-box;
  height: calc(100% - var(--dock-h));
  padding: var(--top-pad) var(--side-pad) 0;
}

/* ---------- shelf: a clipped window over a sliding track of pages ---------- */

.shelf {
  --tile-w: min(20.2vw, calc(40 * var(--vh)), 439px);
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
}

.shelf-window {
  overflow: hidden;
  touch-action: pan-y;
}

.shelf-track {
  display: flex;
  transition: transform 450ms cubic-bezier(0.45, 0, 0.25, 1);
}

.shelf-track.is-dragging { transition: none; }

.shelf-page {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  row-gap: calc(2 * var(--vh));
  padding: calc(2 * var(--vh)) 0 calc(1 * var(--vh));
}

.tile {
  position: relative;
  display: block;
  width: var(--tile-w);
  height: calc(var(--tile-w) * 0.55);
}

.tile::after,
.tile--empty::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
}

.tile::after {
  background-image: url(../img/tile-frame.png);
  pointer-events: none;
}

.tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(2% 7%, 6% 2%, 52% 1%, 95% 3%, 98% 8%, 100% 49%, 98% 92%, 95% 97%, 50% 99%, 5% 97%, 2% 93%, 0 50%);
}

/* empty slot: three frames of TV static (about 8 fps) under a faint AM logo */
.tile--empty {
  background: url(../img/tile-static.png?v=2) 0 0 / 300% 100%;
  animation: static 0.375s steps(3) infinite;
}

.tile--empty::before { background-image: url(../img/tile-logo.png?v=5); }

.shelf-page:not(.is-current) .tile--empty { animation-play-state: paused; }
.is-previewing .tile--empty { animation: none; }

@keyframes static {
  to { background-position-x: calc(300% - 1px); }
}

/* the cyan selection ring over a channel */
.tile-btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  background: url(../img/tile-ring.png) 0 0 / 100% 100%;
  opacity: 0;
  transform: scale(0.94);
  filter: drop-shadow(0 0 6px rgba(95, 208, 255, 0.85));
  transition: opacity 200ms ease, transform 200ms ease;
}

.tile-btn:hover, .tile-btn:focus-visible {
  opacity: 1;
  transform: scale(1.02);
  outline: none;
  transition-duration: 120ms;
}

.is-previewing .tile-btn { display: none; }

/* ---------- page arrows ---------- */

.pager {
  position: absolute;
  top: 50%;
  right: -72px;
  z-index: 100;
  width: 56px;
  height: 72px;
  margin-top: -36px;
  background: url(../img/arrow.svg) center / 40px auto no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms, visibility 200ms, transform 150ms, filter 150ms;
}

.pager--prev {
  right: auto;
  left: -72px;
  transform: scaleX(-1);
}

/* with a mouse they appear as the pointer nears their edge (js/home.js sets data-edge on <body>) */
[data-edge=left] .pager--prev,
[data-edge=right] .pager--next,
.pager:focus-visible {
  opacity: 1;
  visibility: visible;
}

/* keyboard focus anywhere in the shelf shows the arrows that can be used (pure CSS, no script needed) */
.shelf:has(:focus-visible) .pager:not(:disabled) {
  opacity: 1;
  visibility: visible;
}

.pager:hover, .pager:focus-visible {
  transform: scale(1.15);
  filter: var(--glow);
}

.pager--prev:hover, .pager--prev:focus-visible { transform: scale(-1.15, 1.15); }

/* no page that way, or a channel is open */
.shelf .pager:disabled,
.is-previewing .shelf .pager {
  opacity: 0;
  visibility: hidden;
}

/* ---------- channel name tag (positioned by js/home.js) ---------- */

.name-tag {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  padding: 0.35em 1em 0.4em;
  background: white;
  border: 2px solid #c9ced3;
  border-radius: 1.2em;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
  color: #555;
  font-family: var(--font);
  font-size: clamp(16px, 2.4vmin, 26px);
  letter-spacing: -0.5px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% + 6px));
  transition: opacity 150ms, transform 150ms;
}

.name-tag::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  background: white;
  border: solid #c9ced3;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.name-tag.is-shown {
  opacity: 1;
  transform: translate(-50%, -100%);
}

/* ---------- dock: the bottom bar with the clock, date and round buttons ---------- */

.dock {
  height: var(--dock-h);
  background: #d2d6db url(../img/dock-fill.png);
}

.dock-curve {
  position: relative;
  width: 1200px;
  height: 220px;
  margin: 0 auto;
  background-image: url(../img/dock-curve.png?v=2);
}

.clock {
  position: absolute;
  top: calc(14px * var(--title-s));
  left: 0;
  right: 0;
  color: #5c5f63;
  font-family: var(--font);
  font-size: calc(68px * var(--title-s));
  line-height: 1;
  letter-spacing: -1px;
  text-align: center;
  white-space: nowrap;
}

.clock-ampm {
  margin-left: 0.2em;
  font-size: 0.42em;
  letter-spacing: 0;
}

.clock-colon { animation: blink 1s step-end infinite; }

@keyframes blink {
  50% { opacity: 0; }
}

.dock-date {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  color: #5c5f63;
  font-family: var(--font);
  font-size: 40px;
  letter-spacing: -1px;
}

.dock-pod {
  position: absolute;
  bottom: 42px;
  width: 185px;
  height: 135px;
  background-size: 100% 100%;
}

.dock-side--left .dock-pod { left: 0; background-image: url(../img/pod-left.png); }
.dock-side--right .dock-pod { right: 0; background-image: url(../img/pod-right.png); }

.round-btn {
  position: absolute;
  bottom: 60px;
  width: 100px;
  height: 105px;
  background-size: 100% 100%;
  transition: transform 200ms, filter 200ms;
}

.round-btn--home { left: 60px; background-image: url(../img/button-am.png); }
.round-btn--mail { right: 60px; z-index: 999; background-image: url(../img/button-mail.png); }

.round-btn:hover, .round-btn:focus-visible {
  transform: scale(1.08);
  filter: var(--glow);
  transition-duration: 120ms;
}

/* ---------- channel preview: banner, button bar and corner trim ---------- */

/* starts shrunk onto the clicked tile (--shrunk, from js/home.js) and grows to fill the top */
.preview {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  height: calc(80 * var(--vh));
  overflow: hidden;
  transform: var(--shrunk, none);
  transform-origin: 0 0;
  visibility: hidden;
}

.is-previewing .preview {
  visibility: visible;
  transform: none;
  transition: transform 500ms var(--ease-zoom);
}

.is-closing .preview {
  visibility: visible;
  opacity: 0;
  transition: transform 450ms var(--ease-zoom), opacity 150ms 300ms;
}

.preview-art {
  width: 100%;
  height: 100%;
  background: center / cover;
}

.is-previewing .preview-art, .is-closing .preview-art {
  animation: drift 8s ease-in-out infinite alternate;
}

@keyframes drift {
  to { transform: scale(1.06) translate(-1%, 1%); }
}

.preview-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 99;
  box-sizing: border-box;
  width: 100%;
  height: calc(20 * var(--vh));
  background: lightgrey url(../img/preview-bar.png);
  border-top: 2px solid black;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 200ms ease-in, visibility 0s 200ms;
}

.is-previewing .preview-bar {
  transform: none;
  visibility: visible;
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1) 400ms;
}

.preview-actions {
  box-sizing: border-box;
  width: 50%;
  height: calc(20 * var(--vh));
  margin: 0 auto;
  padding-top: calc(4.1 * var(--vh));
  text-align: center;
}

.preview-blurb {
  position: absolute;
  left: 25%;
  right: 25%;
  bottom: calc(2.6 * var(--vh));
  margin: 0;
  overflow: hidden;
  color: #4a4a4a;
  font-family: var(--font);
  font-size: max(16px, min(1.15vw, calc(2.1 * var(--vh))));
  letter-spacing: 0.02em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* a rounded button: a stretched middle with an end cap either side */
.pill {
  --h: 5vw;
  --cap: 2.2vw;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: flex-start;
  width: 15vw;
  height: var(--h);
  margin: 0 4.5vw;
  /* one stretched slice, not a repeating 4px tile: the tile edges left hairline seams */
  background: url(../img/pill-mid.png) 0 0 / 100% 100% no-repeat;
  color: #474747;
  font-family: var(--font);
  font-size: 2.2vw;
  line-height: calc(4.5vw + 5px);
  transition: 150ms ease;
}

.pill::before, .pill::after {
  content: '';
  position: absolute;
  top: 0;
  width: var(--cap);
  height: var(--h);
  background: 0 0 / 100% 100% no-repeat;
}

.pill::before { left: calc(var(--cap) * -1); width: calc(var(--cap) + 1px); background-image: url(../img/pill-left.png); }
.pill::after { right: calc(var(--cap) * -1); width: calc(var(--cap) + 1px); background-image: url(../img/pill-right.png); }

.pill:hover, .pill:focus-visible { transform: scale(1.1); }

.corner {
  position: absolute;
  z-index: 9991;
  width: 306px;
  height: 230px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms, visibility 0s 200ms;
}

.corner--tl { top: 0; left: 0; background-image: url(../img/corner-tl.png); }
.corner--tr { top: 0; right: 0; background-image: url(../img/corner-tr.png); }
.corner--bl { bottom: 0; left: 0; background-image: url(../img/corner-bl.png); }
.corner--br { bottom: 0; right: 0; background-image: url(../img/corner-br.png); }

.is-previewing .corner {
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms 400ms;
}

/* ---------- touch screens: nothing stays stuck in its hover look after a tap ---------- */

@media (hover: none) {
  .tile-btn:hover:not(:focus-visible) {
    opacity: 0;
    transform: scale(0.94);
  }

  .round-btn:hover:not(:focus-visible),
  .pill:hover:not(:focus-visible) {
    transform: none;
    filter: none;
  }

  .pager:hover:not(:focus-visible) {
    transform: none;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
  }

  .pager--prev:hover:not(:focus-visible) { transform: scaleX(-1); }
}

/* ---------- short desktop windows: a slimmer dock ---------- */

@media (max-height: 718px) {
  .home { --dock-h: 130px; }

  .dock { background-image: url(../img/dock-fill-short.png); }

  .dock-curve {
    transform: scale(0.65);
    transform-origin: top;
  }

  .dock-side--left { transform: scale(0.6); transform-origin: left; }
  .dock-side--right { transform: scale(0.6); transform-origin: right; }
  .dock-pod { bottom: 180px; }
  .round-btn { bottom: 197px; }

  .dock-date {
    bottom: 17px;
    font-size: 22px;
  }
}

@media (max-height: 640px) {
  .shelf { transform: scale(0.9); }
}

@media (min-width: 1720px) {
  .home-top { transform: scale(0.9); }
}

/* ---------- compact layout: portrait screens and landscape phones get a 2x2 shelf
   (js/home.js uses the same media query) ---------- */

@media (orientation: portrait), (max-height: 500px) {
  .home {
    --dock-h: 170px;
    --title-s: 0.64;
    --button-s: 0.6;
    --side-pad: 36px;
    --top-pad: 0px;
  }

  .home-top { transform: none; }

  .shelf {
    --tile-w: min(calc((100vw - 86px) / 2), calc((var(--screen-h) - var(--dock-h) - 48px) / 1.1), 340px);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: none;
  }

  .shelf-page {
    grid-template-columns: repeat(2, var(--tile-w));
    justify-content: center;
    gap: 14px;
    padding: 8px 0;
  }

  /* no pointer to summon them, so they always show */
  .pager {
    right: -36px;
    width: 44px;
    height: 64px;
    margin-top: -32px;
    background-size: 32px auto;
    opacity: 1;
    visibility: visible;
  }

  .pager--prev { left: -36px; }

  .dock {
    position: relative;
    overflow: hidden;
    /* the fill is scaled with the curve so their gradients meet at the sides */
    background: #d0d3d8 url(../img/dock-fill.png) repeat-x 0 0 / auto calc(219px * var(--title-s));
  }

  .dock-curve {
    width: calc(1200px * var(--title-s));
    height: calc(220px * var(--title-s));
    margin-left: calc(50% - 600px * var(--title-s));
    background-size: 100% 100%;
    transform: none;
  }

  .dock-side--left, .dock-side--right { transform: none; }

  .dock .dock-pod {
    width: calc(185px * var(--button-s));
    height: calc(135px * var(--button-s));
    bottom: calc(42px * var(--button-s));
  }

  .dock .round-btn {
    width: calc(100px * var(--button-s));
    height: calc(105px * var(--button-s));
    bottom: calc(60px * var(--button-s));
  }

  .dock .round-btn--home { left: calc(60px * var(--button-s)); }
  .dock .round-btn--mail { right: calc(60px * var(--button-s)); }

  .dock-date {
    bottom: calc(32px * var(--button-s));
    font-size: calc(40px * var(--button-s));
  }
}

/* phones held upright: tiles fill the width, arrows sit under the grid */
@media (orientation: portrait) and (max-width: 600px) {
  .home {
    --dock-h: 140px;
    --title-s: 0.42;
    --button-s: 0.5;
    --side-pad: 16px;
  }

  .clock {
    top: 3px;
    font-size: 34px;
  }

  .dock-date {
    bottom: 20px;
    font-size: 24px;
  }

  .shelf {
    --tile-w: min(calc((100vw - 46px) / 2), calc((var(--screen-h) - var(--dock-h) - 140px) / 1.1), 340px);
    box-sizing: border-box;
    padding-bottom: 64px;
  }

  .pager {
    top: calc(50% - 32px + var(--tile-w) * 0.55 + 24px);
    right: 0;
    margin-top: 0;
  }

  .pager--prev { left: 0; }
}

/* phones held sideways */
@media (max-height: 500px) {
  .home {
    --dock-h: 100px;
    --title-s: 0.55;
    --button-s: 0.45;
    --side-pad: 64px;
  }

  .shelf {
    --tile-w: min(calc((100vw - 156px) / 2), calc((var(--screen-h) - var(--dock-h) - 40px) / 1.1), 340px);
  }

  .shelf-page {
    gap: 12px 24px;
    padding: 6px 0;
  }

  .pager { right: -60px; }
  .pager--prev { left: -60px; }

  .dock-date {
    bottom: 10px;
    font-size: 20px;
  }

  .preview-blurb { display: none; }
}

/* top spacing on shorter and very wide screens (applies to every layout) */
@media (max-height: 826px) {
  .home { --top-pad: 1em; }
}

@media (min-width: 1720px) {
  .home { --top-pad: 0px; }
}

/* ---------- preview on small screens ---------- */

/* upright screens show the whole banner width on white rather than cropping it */
@media (orientation: portrait) and (max-width: 900px) {
  .preview { background: white; }

  .preview-art {
    background-size: 160% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
}

@media (orientation: portrait) and (max-width: 600px) {
  .preview-art { background-size: 200% auto; }
}

@media (max-width: 900px), (max-height: 500px) {
  .corner {
    width: 122px;
    height: 92px;
    background-size: 100% 100%;
  }

  .preview-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 64px;
    width: 100%;
    height: 100%;
    padding: 0 16px;
  }

  .pill {
    --h: 48px;
    --cap: 21px;
    flex: none;
    width: 112px;
    margin: 0;
    font-size: 20px;
    line-height: 46px;
  }

  /* the corner trim covers the bottom of the bar here, so the blurb moves above the buttons */
  .preview-blurb {
    top: 12px;
    bottom: auto;
    left: 16px;
    right: 16px;
    font-size: 16px;
    line-height: 1.3;
    white-space: normal;
  }
}

@media (orientation: portrait) and (max-width: 600px) {
  .preview-blurb { font-size: 15px; }
}

/* tablets held upright: the blurb and the buttons form one group, centred in the bar */
@media (orientation: portrait) and (min-width: 601px) and (max-width: 900px) {
  .preview-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 16px;
  }

  .preview-actions { height: auto; flex: none; }

  .preview-blurb {
    position: static;
    order: -1;
    margin: 0 16px;
  }
}