/*! Made with care and love by Mina Vian */
/* Memoir's website: the clock, very large, on black, and MEMOIR under it in Unbounded, each letter
   thickening into place. Quiet white light at the sides: a soft glow and a beam. One screen, nothing
   else. */
@font-face {
  font-family: "Memoir Unbounded";
  src: url("../fonts/Unbounded-subset.woff2") format("woff2");
  font-weight: 200 900;
  font-display: block;
}
/* Inter, Memoir's own (rsms/inter 4.1, Open Font License, with the plain 1 in tabular digits): the download's words */
@font-face {
  font-family: "Memoir Inter";
  src: url("../fonts/InterVariable-memoir.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --clock: min(56vh, 78vw);
  --word: min(15vw, 16.5vh);
  /* the wordmark as Memoir's own on Dark: platinum, a fine grain, a tight glow */
  --wm-fill: linear-gradient(76deg, #a4a4ac, #dedee3 30%, #fff 55%, #e9e9ee 78%, #fff);
  --wm-glow: 0 0 0.045em rgba(255, 255, 255, 0.32), 0 0 0.16em rgba(255, 255, 255, 0.12);
}
@supports (height: 1svh) {
  :root { --clock: min(56svh, 78vw); --word: min(15vw, 16.5svh); }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: #000; color: #f5f5f7; -webkit-font-smoothing: antialiased; }
::selection { background: rgba(255, 255, 255, 0.2); }

.stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

/* ---------- the clock and the word ---------- */
.mark {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--clock) * 0.085);
  margin-top: -2vh;
}
.clock { position: relative; width: var(--clock); aspect-ratio: 1; }
.clock .logo { width: 100%; }

/* MEMOIR, a letter to a box: site.js sets each box to its letter's width at the heaviest weight, so as
   the weight changes a letter thickens and thins in its own place and the word never shifts. Each
   letter is a slice of the one wordmark: --wm-w is the whole word's width and --wm-x the letter's
   offset in it, so the platinum and the grain run on across the letters as one. */
.word {
  display: flex;
  margin: 0;
  font-family: "Memoir Unbounded", sans-serif;
  font-size: var(--word);
  font-weight: 900;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}
.word .l {
  position: relative;
  display: block;
  text-align: center;
  color: transparent;
  text-shadow: var(--wm-glow);
}
.word .l::after {
  content: attr(data-t);
  content: attr(data-t) / "";
  position: absolute;
  inset: 0;
  text-shadow: none;
  background:
    url("../img/grain.png") var(--wm-x, 0px) 0 / 96px 96px,
    linear-gradient(rgba(255, 255, 255, 0.1), transparent 45%, rgba(0, 0, 0, 0.1) 80%, rgba(255, 255, 255, 0.04)),
    var(--wm-fill) var(--wm-x, 0px) 0 / var(--wm-w, 100%) 100% no-repeat;
  background-blend-mode: soft-light, normal, normal;
  -webkit-background-clip: text;
  background-clip: text;
}

/* nothing shows until the font is in and the light is drawn (site.js) */
html:not(.ready) .word,
html:not(.ready) .lights { visibility: hidden; }

/* ---------- the light ---------- */
.lights { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
canvas { display: block; }

/* a wide glow off each side */
.ambient { position: absolute; top: 0; width: 50%; height: 100%; }
.ambient.left { left: 0; }
.ambient.right { right: 0; scale: -1 1; }

/* a soft beam from each side: it comes in at (--x, --y), runs --w long at the angle --a and opens
   to --h wide */
.shaft {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  translate: 0 -50%;
  rotate: var(--a);
  transform-origin: 0 50%;
}
.shaft.left  { --x: -3%;  --y: 86%; --w: 60vmax; --h: 32vmax; --a: -22deg; }
.shaft.right { --x: 103%; --y: 80%; --w: 58vmax; --h: 30vmax; --a: -155deg; }


/* ---------- the clock as the download (door.js) ---------- */
/* Hovered, the clock's disc turns white, its ring and knob fade, and its two hands swing into the black head of a
   down arrow, whose shaft grows up out of their meeting point. Pressed, the circle becomes a rounded box holding the
   access code's six boxes, then a taller one holding the two files. Sizes are in the clock's own width (--clock). */
@property --door-solid { syntax: "<number>"; inherits: true; initial-value: 1; }
.door {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.door:disabled { cursor: default; }
.door:focus-visible { outline: none; }
.clock.open .door { pointer-events: none; }
/* the hands, held as the arrow's head once they've swung there (stronger than the live clock's own motion, which
   keeps running underneath so the clock is on time again the moment it comes back) */
.clock.arrow .lg-min { transform: rotate(-45deg) scaleX(0.738) !important; rotate: 0deg !important; translate: 0px 0px !important; }
.clock.arrow .lg-hour { transform: rotate(225deg) !important; rotate: 0deg !important; translate: 0px 0px !important; }
/* the minute hand's fade toward its tip (logo.css's own stops while --door-solid is 1) evens out as it becomes one
   arm of the arrow, so the two arms match */
.clock .lg-min {
  background: linear-gradient(90deg, rgb(var(--lg-ink)) 9.322%, rgb(var(--lg-ink) / calc(1 - 0.08 * var(--door-solid))) 33.729%,
    rgb(var(--lg-ink) / calc(1 - 0.487 * var(--door-solid))) 90.678%);
}
/* the arrow's shaft: up from where the hands meet, as thick as they are; hidden until the button grows it */
.lg-shaft {
  left: 46.726%;
  top: 18.76%;
  width: 6.548%;
  height: 39.27%;
  border-radius: 99px;
  background: rgb(var(--lg-ink));
  transform-origin: 50% 91.7%;
  transform: scaleY(0);
  opacity: 0;
}
/* the arrow is centred in the button by moving the clock's face about the arrow's own middle */
.lg-clock { transform-origin: 50% 38.4%; }

.door-code,
.door-files {
  position: absolute;
  z-index: 3;
  color: #111114;
}
.door-code { top: 31%; height: 38%; left: 3%; right: 3%; display: flex; align-items: center; justify-content: center; margin: 0; }
.door-code[hidden], .door-files[hidden] { display: none; }
.door-boxes { position: relative; display: flex; gap: calc(var(--clock) * 0.022); cursor: text; }
.door-boxes .box {
  display: grid;
  place-items: center;
  width: calc(var(--clock) * 0.1);
  height: calc(var(--clock) * 0.15);
  border-radius: calc(var(--clock) * 0.036);
  background: rgba(17, 17, 20, 0.07);
  box-shadow: inset 0 0 0 1.5px transparent;
  font: 800 calc(var(--clock) * 0.075) / 1 "Memoir Unbounded", sans-serif;
  transition: background-color 0.25s ease, box-shadow 0.2s ease;
}
.door-boxes .box i { font-style: normal; transform: translateY(18%); animation: star-in 0.4s cubic-bezier(0.32, 1.24, 0.5, 1) backwards; }
@keyframes star-in { from { opacity: 0; transform: translateY(18%) scale(0.3); } }
.door-boxes .box.now { box-shadow: inset 0 0 0 1.5px rgba(17, 17, 20, 0.45); }
.door-boxes .box.now::after { content: ""; width: 2px; height: 36%; border-radius: 1px; background: #111114; animation: blink 1.1s ease-in-out infinite alternate; }
@keyframes blink { to { opacity: 0.15; } }
.door-boxes input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  color: transparent;
  caret-color: transparent;
  font-size: 16px;
  cursor: text;
}
.door-code.checking .box { background: rgba(17, 17, 20, 0.13); }
.door-code.wrong .box { background: rgba(255, 59, 48, 0.14); box-shadow: inset 0 0 0 1.5px rgba(255, 59, 48, 0.6); }
.door-code.right .box { background: rgba(52, 199, 89, 0.16); box-shadow: inset 0 0 0 1.5px rgba(52, 199, 89, 0.65); }

/* the two files, as two rows in the taller box with a hairline between them: an icon on a dark tile, what it is
   and for what, and a round download button that fills in on hover */
.door-files {
  top: 17%;
  height: 66%;
  left: 2%;
  right: 2%;
  display: flex;
  flex-direction: column;
  padding: calc(var(--clock) * 0.026);
}
.door-files a {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: calc(var(--clock) * 0.036);
  padding: 0 calc(var(--clock) * 0.032) 0 calc(var(--clock) * 0.03);
  border-radius: calc(var(--clock) * 0.05);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.door-files a + a::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--clock) * 0.03);
  right: calc(var(--clock) * 0.03);
  height: 1px;
  background: rgba(17, 17, 20, 0.09);
  transition: opacity 0.2s ease;
}
.door-files:hover a + a::before, .door-files:focus-within a + a::before { opacity: 0; }
.door-files a:hover, .door-files a:focus-visible { background: rgba(17, 17, 20, 0.05); outline: none; }
.door-files .tile {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(var(--clock) * 0.13);
  height: calc(var(--clock) * 0.13);
  border-radius: calc(var(--clock) * 0.036);
  background: #111114;
  color: #fff;
}
.door-files .tile svg { width: 56%; height: 56%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.door-files .what { display: flex; flex-direction: column; gap: calc(var(--clock) * 0.009); min-width: 0; flex: 1; }
.door-files b { font: 650 max(14px, calc(var(--clock) * 0.046)) / 1.15 "Memoir Inter", system-ui, sans-serif; letter-spacing: -0.015em; }
.door-files small { font: 450 max(11.5px, calc(var(--clock) * 0.03)) / 1.3 "Memoir Inter", system-ui, sans-serif; color: rgba(17, 17, 20, 0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.door-files .go {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(var(--clock) * 0.085);
  height: calc(var(--clock) * 0.085);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(17, 17, 20, 0.22);
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.door-files .go svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.door-files a:hover .go, .door-files a:focus-visible .go { background: #111114; color: #fff; box-shadow: inset 0 0 0 1.5px #111114; }

.door-say {
  position: absolute;
  z-index: 3;
  top: 72%;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  color: #a1a1a6;
  font: 500 max(12.5px, calc(var(--clock) * 0.032)) / 1.3 "Memoir Inter", system-ui, sans-serif;
  user-select: text;
  -webkit-user-select: text;
}
.clock.files .door-say { top: 86%; }
.door-say.bad { color: #ff6961; }

/* a code that opens only the Windows app: its one row, in a box as tall as the code's, with the words where they were */
.clock.one .door-files { top: 31%; height: 38%; }
.clock.files.one .door-say { top: 72%; }