:root {
  --black: #000;
  --gold-hi: #fff3b0;
  --gold: #e7b52c;
  --gold-lo: #8f5f08;
  --silver-hi: #ffffff;
  --silver: #bcc6d2;
  --silver-lo: #66748a;
  --ink-gold: #231500;
  --ink-silver: #111a28;
  --cut: 20px;
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 16px;
  background:
    radial-gradient(60vmax 44vmax at 22% -6%, rgba(231, 181, 44, .24), transparent 70%),
    radial-gradient(60vmax 44vmax at 78% -6%, rgba(188, 198, 210, .2), transparent 70%),
    var(--black);
  color: #fff;
  font-family: "Chakra Petch", "Trebuchet MS", sans-serif;
  font-weight: 700;
}

main {
  margin-block: auto;
  width: min(100%, 460px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.credit {
  margin-top: 24px;
  font-size: .875rem;
  color: var(--silver);
}

.credit a {
  color: var(--gold);
  text-underline-offset: 3px;
}

.credit a:hover { color: var(--gold-hi); }

.credit a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Logo */
.logo {
  display: block;
  width: auto;
  max-width: min(100%, 360px);
  max-height: 34svh;
  /* The logo has a black background: screen drops it, so no square shows on the lit page */
  mix-blend-mode: screen;
  /* JPEG noise in the black corners would still hint at the square, so fade them out */
  -webkit-mask-image: radial-gradient(circle closest-side, #000 94%, transparent);
  mask-image: radial-gradient(circle closest-side, #000 94%, transparent);
}

.wordmark {
  margin-bottom: 18px;
  font-size: clamp(2.6rem, 12vw, 4rem);
  line-height: 1;
  letter-spacing: -.01em;
  text-align: center;
  background: linear-gradient(100deg, var(--gold-hi), var(--gold) 38%, var(--silver-hi) 62%, var(--silver));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Chunky game lettering in the logo's colours: silver into gold */
.soon {
  position: relative;
  isolation: isolate;
  margin-bottom: 6px;
  font-family: "Luckiest Guy", "Chakra Petch", sans-serif;
  font-size: clamp(1.6rem, 7.4vw, 2.4rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .03em;
  text-align: center;
}

.soon span {
  position: relative;
  background-image:
    linear-gradient(105deg, transparent 42%, #fff 50%, transparent 58%),
    linear-gradient(100deg, var(--silver), #dfe5ec 46%, var(--gold) 56%, #d9a520 100%);
  background-size: 250% 100%, 100% 100%;
  background-position: 100% 0, 0 0;
  background-repeat: no-repeat;
  animation: shine 3.5s ease-in-out infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* A band of light runs over the letters, then a pause before the next one.
   Runs even with reduced motion: it is the requested effect, and only light moves, not the layout. */
@keyframes shine {
  0% { background-position: 100% 0, 0 0; }
  45%, 100% { background-position: 0% 0, 0 0; }
}

/* Gradient text can't carry its own outline, so a copy behind the span does */
.soon::before {
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute;
  inset: 0;
  z-index: -1;
  color: var(--gold-lo);
  -webkit-text-stroke: .15em var(--gold-lo);
  text-shadow: .05em .09em 0 #3d2803;
}

/* Buttons */
.links { display: contents; }

.plate {
  --mx: 50%;
  --my: 50%;
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  display: block;
  width: 100%;
  height: clamp(84px, 13svh, 104px);
  color: inherit;
  text-decoration: none;
  transform: perspective(700px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .25s ease-out, filter .25s ease-out;
  filter: drop-shadow(0 8px 18px var(--glow));
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.plate.is-live { transition: filter .25s ease-out; }

.plate:hover,
.plate:focus-visible { filter: drop-shadow(0 10px 30px var(--glow-strong)); }

.plate:active { transform: perspective(700px) rotateX(var(--rx)) rotateY(var(--ry)) scale(.98); }

.plate:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

.edge,
.face {
  position: absolute;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

.edge { inset: 0; background: var(--edge); }

.face {
  inset: 2px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-left: 30px;
  background: var(--metal);
}

.motif {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 62%;
  pointer-events: none;
}

/* Holo foil: follows the pointer */
.foil {
  position: absolute;
  inset: 0;
  opacity: 0;
  mix-blend-mode: overlay;
  transition: opacity .25s ease-out;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .95), transparent 42%),
    repeating-linear-gradient(112deg,
      #ff7a9c 0, #ffd76a 9%, #7dffb0 18%, #6fd3ff 27%, #b98cff 36%, #ff7a9c 45%);
  background-size: 100% 100%, 220% 100%;
  background-position: 0 0, var(--mx) 0;
}

.plate:hover .foil,
.plate:focus-visible .foil,
.plate.is-live .foil { opacity: 1; }

/* One band of light, crossing each plate once when the page opens */
.sheen {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
  transform: translateX(-160%) skewX(-22deg);
  animation: sweep 1s cubic-bezier(.3, .1, .3, 1) both;
  animation-delay: calc(.25s + var(--i) * .2s);
  pointer-events: none;
}

@keyframes sweep {
  to { transform: translateX(420%) skewX(-22deg); }
}

.label {
  position: relative;
  font-size: clamp(1.6rem, 6.6vw, 2.05rem);
  line-height: 1;
  color: var(--ink);
  text-shadow: var(--engrave);
}

/* Gold: Ho-Oh, a fan of feathers */
.gold {
  --i: 0;
  --glow: rgba(231, 181, 44, .28);
  --glow-strong: rgba(255, 205, 70, .75);
  --spark: var(--gold-hi);
  --ink: var(--ink-gold);
  --engrave: 0 1px 0 rgba(255, 245, 190, .65);
  --edge: linear-gradient(120deg, var(--gold-hi), var(--gold-lo) 45%, var(--gold-hi) 80%, var(--gold-lo));
  --metal: linear-gradient(105deg, #f8d65c 0%, #fff0a6 24%, #e7b52c 52%, #c98f14 76%, #f2c744 100%);
}

/* Silver: Lugia, swept dorsal fins over a wave */
.silver {
  --i: 1;
  --glow: rgba(188, 198, 210, .24);
  --glow-strong: rgba(214, 228, 245, .7);
  --spark: #fff;
  --ink: var(--ink-silver);
  --engrave: 0 1px 0 rgba(255, 255, 255, .75);
  --edge: linear-gradient(120deg, #fff, var(--silver-lo) 45%, #fff 80%, var(--silver-lo));
  --metal: linear-gradient(105deg, #dfe5ec 0%, #ffffff 24%, #bcc6d2 54%, #94a2b5 76%, #d5dce5 100%);
}

/* Black with gold rings: Umbreon */
.shadow {
  --i: 2;
  --glow: rgba(231, 181, 44, .16);
  --glow-strong: rgba(231, 181, 44, .55);
  --spark: var(--gold);
  --ink: var(--gold-hi);
  --engrave: 0 0 14px rgba(231, 181, 44, .5);
  --edge: linear-gradient(120deg, var(--gold), #2a2110 45%, var(--silver) 80%, #2a2110);
  --metal: linear-gradient(105deg, #000 0%, #1d1d21 30%, #000 62%, #15151a 100%);
}

.shadow .foil { mix-blend-mode: soft-light; }

.ring {
  fill: none;
  stroke: var(--gold);
  transform-box: fill-box;
  transform-origin: center;
  transition: stroke .25s ease-out, filter .25s ease-out, transform .35s ease-out;
}

.plate:hover .ring,
.plate:focus-visible .ring,
.plate.is-live .ring {
  stroke: var(--gold-hi);
  filter: drop-shadow(0 0 5px var(--gold));
  transform: scale(1.06);
}

/* Burst when a button is pressed */
.spark {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 9px;
  height: 9px;
  background: var(--spark);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  pointer-events: none;
  animation: spark .65s ease-out forwards;
}

@keyframes spark {
  from { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0) rotate(120deg); opacity: 0; }
}

/* Touch screens have no hover, so the foil catches the light by itself now and then */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .sheen {
    animation-name: sweep-loop;
    animation-duration: 9s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: calc(.25s + var(--i) * .6s);
  }

  @keyframes sweep-loop {
    0% { transform: translateX(-160%) skewX(-22deg); }
    11%, 100% { transform: translateX(420%) skewX(-22deg); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .plate, .foil, .ring { transition: none; }
  .sheen, .spark { display: none; }
}