/* Hallmark · route: custom (bespoke) · structure: one-screen diagonal split, two physical push-buttons · idea: "an arcade button and a keycap"
 * paper: oklch(88% 0.17 96) / oklch(92% 0.03 250) · accent: oklch(57% 0.22 28) + oklch(46% 0.21 264) · display: Bowlby One · body: IBM Plex Mono
 * axes: light / display-heavy / warm+cool · studied: no
 * pre-emit critique: P5 H4 E4 S5 R4 V5
 */
@import url("fonts/fonts.css");
@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; color: var(--color-ink); font: 400 var(--text-base)/1.55 var(--font-body); }
a { color: inherit; }
a:focus-visible { outline: 4px solid var(--color-ink); outline-offset: 4px; }

/* ---------- Front page: one sheet cut on a diagonal ---------- */

.page--gate, .page--gate body { height: 100%; overflow: clip; }
.page--gate body { background: var(--color-games); }

.gate { position: relative; height: 100vh; height: 100dvh; overflow: hidden; }

.field { position: absolute; inset: 0; overflow: hidden; }
.field::before { content: ""; position: absolute; inset: calc(var(--tile) * -1); }
.field--games { background: var(--color-games); }
.field--games::before {
  background-image: radial-gradient(circle, var(--color-games-deep) 0 20%, transparent 22%);
  background-size: var(--tile) var(--tile);
  animation: drift-games 9s linear infinite;
}
.field--apps { background: var(--color-apps); clip-path: var(--cut-apps); animation: slide-in var(--dur-long) var(--ease-out) backwards; }
.field--apps::before {
  background-image:
    linear-gradient(var(--color-apps-deep) 0 2px, transparent 2px),
    linear-gradient(90deg, var(--color-apps-deep) 0 2px, transparent 2px);
  background-size: var(--tile) var(--tile);
  animation: drift-apps 14s linear infinite;
}

.seam { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; animation: fade-in var(--dur-long) var(--ease-out) 260ms backwards; }
.seam line { stroke: var(--color-ink); stroke-width: 5; vector-effect: non-scaling-stroke; }
.seam__tall { display: none; }
@media (max-aspect-ratio: 1/1) {
  .seam__wide { display: none; }
  .seam__tall { display: inline; }
}

.door { position: absolute; inset: 0; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.door--games { clip-path: var(--cut-games); }
.door--apps  { clip-path: var(--cut-apps); }
.door:focus-visible { outline: none; }
.door:focus-visible .btn { outline: 4px solid var(--color-ink); outline-offset: 1.1rem; }

.door__in {
  position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--lift) + var(--space-lg)); padding: var(--space-lg);
}
.door--games .door__in { inset: 0 50% 0 0; }
.door--apps  .door__in { inset: 0 0 0 50%; }
@media (max-aspect-ratio: 1/1) {
  .door--games .door__in { inset: 0 0 50% 0; padding-top: 3.5rem; }
  .door--apps  .door__in { inset: 50% 0 0 0; padding-bottom: 3rem; }
}

/* The button: a collar on the ground, a side wall, and a cap that travels. */
.btn {
  position: relative; display: block; width: var(--btn); height: var(--btn); flex: none;
  box-shadow: 0 0 0 0.45rem var(--color-ink), 0.7rem 0.9rem 0 0.45rem var(--shadow);
  background: var(--side);
  animation: drop var(--dur-long) var(--ease-out) var(--delay) backwards;
}
.btn__cap {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--cap); color: var(--color-cap-text);
  box-shadow: inset 0 0 0 calc(var(--btn) * 0.05) var(--cap-hi), 0 0 0 0.2rem var(--color-ink);
  font-family: var(--font-display); font-style: normal; font-size: calc(var(--btn) * 0.2); line-height: 1;
  letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap;
  transform: translateY(calc(var(--lift) * -1));
  transition: transform var(--dur-micro) var(--ease-out);
  animation: press 900ms var(--ease-in-out) calc(var(--delay) + 420ms) backwards;
}
.btn--round, .btn--round .btn__cap { border-radius: 50%; }
.btn--key,   .btn--key .btn__cap   { border-radius: 22%; }
.btn--round { --cap: var(--color-red);    --cap-hi: var(--color-red-hi);    --side: var(--color-red-side);    --shadow: var(--color-games-deep); --delay: 180ms; }
.btn--key   { --cap: var(--color-cobalt); --cap-hi: var(--color-cobalt-hi); --side: var(--color-cobalt-side); --shadow: var(--color-apps-deep);  --delay: 320ms; }

@media (hover: hover) {
  .door:hover .btn__cap { transform: translateY(calc(var(--lift) * -1.3)); }
  .door:hover .door__arrow { transform: translateX(0.35rem); }
}
.door:active .btn__cap { transform: translateY(calc(var(--lift) * -0.18)); }

.door__note { font-weight: 600; white-space: nowrap; animation: fade-in var(--dur-long) var(--ease-out) 700ms backwards; }
.door__arrow { display: inline-block; transition: transform var(--dur-micro) var(--ease-out); }

.mark {
  margin: 0; font-family: var(--font-display); font-style: normal; font-weight: 400; font-size: var(--text-md); line-height: 1;
  text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap;
}
.gate .mark { position: absolute; top: var(--space-md); left: var(--space-md); pointer-events: none; }
.gate .contact { position: absolute; right: var(--space-md); bottom: var(--space-md); margin: 0; font-size: var(--text-sm); text-decoration: none; }

/* ---------- Games / Apps pages: one field, a shelf of entries ---------- */

.page--games { --field: var(--color-games); --field-deep: var(--color-games-deep); }
.page--apps  { --field: var(--color-apps);  --field-deep: var(--color-apps-deep); }
.page--games body, .page--apps body { background: var(--field); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

.page--games body::before, .page--apps body::before { content: ""; position: fixed; inset: calc(var(--tile) * -1); z-index: -1; background-size: var(--tile) var(--tile); }
.page--games body::before {
  background-image: radial-gradient(circle, var(--field-deep) 0 20%, transparent 22%);
  animation: drift-games 9s linear infinite;
}
.page--apps body::before {
  background-image:
    linear-gradient(var(--field-deep) 0 2px, transparent 2px),
    linear-gradient(90deg, var(--field-deep) 0 2px, transparent 2px);
  animation: drift-apps 14s linear infinite;
}

.wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--space-md); }

.bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-md); }

/* Small version of the other section's button. */
.swap { display: inline-block; flex: none; margin-top: 0.3rem; background: var(--side); box-shadow: 0 0 0 0.15rem var(--color-ink); text-decoration: none; }
.swap__cap {
  display: block; padding: 0.4rem 0.9rem; background: var(--cap); color: var(--color-cap-text);
  box-shadow: 0 0 0 0.15rem var(--color-ink);
  font-family: var(--font-display); font-style: normal; font-size: var(--text-base); line-height: 1.2; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap;
  transform: translateY(-0.3rem); transition: transform var(--dur-micro) var(--ease-out);
}
.swap--round, .swap--round .swap__cap { border-radius: 999px; }
.swap--key,   .swap--key .swap__cap   { border-radius: 0.55rem; }
.swap--round { --cap: var(--color-red);    --side: var(--color-red-side); }
.swap--key   { --cap: var(--color-cobalt); --side: var(--color-cobalt-side); }
@media (hover: hover) { .swap:hover .swap__cap { transform: translateY(-0.4rem); } }
.swap:active .swap__cap { transform: translateY(-0.05rem); }
.swap:focus-visible { outline-offset: 0.6rem; }

.shelf { flex: 1; padding-block: var(--space-xl) var(--space-2xl); }
.shelf__title {
  margin: 0; font-family: var(--font-display); font-style: normal; font-weight: 400; font-size: var(--text-display); line-height: 0.95;
  text-transform: uppercase; letter-spacing: 0.01em; overflow-wrap: anywhere; min-width: 0;
}
.shelf__lede { margin: var(--space-sm) 0 0; font-weight: 600; }
.shelf__list { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; gap: var(--space-lg); }

.item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-md); align-items: center;
  padding: var(--space-md); background: var(--color-card); border: 0.2rem solid var(--color-ink); border-radius: 1.25rem;
  box-shadow: 0.5rem 0.6rem 0 var(--field-deep); text-decoration: none;
  transition: transform var(--dur-micro) var(--ease-out);
}
.item__icon { grid-row: span 3; width: 5rem; height: 5rem; border-radius: 22%; border: 0.15rem solid var(--color-ink); }
.item__name { font-weight: 600; font-size: var(--text-md); line-height: 1.2; }
.item__what { font-size: var(--text-sm); }
.item__state { margin-top: var(--space-xs); font-size: var(--text-sm); font-weight: 600; }
@media (hover: hover) { a.item:hover { transform: translateY(-0.2rem); } }
a.item:active { transform: translateY(0.15rem); }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-lg); padding-block: var(--space-lg); font-size: var(--text-sm); }
.foot p { margin: 0; }

/* ---------- Motion ---------- */

@keyframes drift-games { to { transform: translate(var(--tile), var(--tile)); } }
@keyframes drift-apps  { to { transform: translate(calc(var(--tile) * -1), var(--tile)); } }
@keyframes slide-in { from { transform: var(--slide-apps); } }
@keyframes fade-in  { from { opacity: 0; } }
@keyframes drop     { from { opacity: 0; transform: translateY(-2.5rem); } }
@keyframes press {
  0%, 100% { transform: translateY(calc(var(--lift) * -1)); }
  45%      { transform: translateY(calc(var(--lift) * -0.18)); }
}

@media (prefers-reduced-motion: reduce) {
  .field::before, .field--apps, .seam, .btn, .btn__cap, .door__note,
  .page--games body::before, .page--apps body::before { animation: none; }
  .btn__cap, .door__arrow, .swap__cap, .item { transition: none; }
}