/* Hallmark · route: custom (bespoke) · structure: quest-log single page · idea: "portfolio as 16-bit RPG quest log"
 * theme: custom · vibe: "cozy pixel tavern at night — hearth-brown wood, torchlight amber, roof red, ivy"
 * paper: oklch(15% 0.028 45) · accent: oklch(80% 0.15 72) · display: Press Start 2P · body: Space Grotesk
 * axes: dark / pixel-display / warm-amber ~72° · studied: no · context: user-provided
 */
@import url("tokens.css");

/* ------------------------------------------------------------- foundation */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  overflow-x: clip;
}

#bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  image-rendering: pixelated;
}

/* Fixed dock reserved for the camp scene; .scroll-area is capped to end above
 * it (JS on, motion allowed) so page content can never scroll under it. */

body {
  background-color: var(--color-paper);
  /* lantern glow from above + faint pixel-dither floor, like torchlight on stone */
  background-image:
    radial-gradient(ellipse 100% 60% at 50% -12%,
      oklch(80% 0.150 72 / 0.14),
      transparent 70%),
    repeating-conic-gradient(
      oklch(93% 0.028 90 / 0.025) 0% 25%,
      transparent 0% 50%);
  background-size: auto, 26px 26px;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  font-weight: 400;
}

/* No-JS / reduced-motion: the bonfire canvas never gets created, so the
 * page just scrolls normally with no reserved strip. */
.scroll-area {
  padding: var(--space-md);
  padding-inline: max(var(--space-md), env(safe-area-inset-left));
}

.js body {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.js .scroll-area {
  overflow-y: auto;
  overflow-x: clip;
  height: calc(100vh - 300px);
  height: calc(100dvh - 300px);
}

::selection {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

img,
svg {
  display: block;
  max-width: 100%;
}

.pixel-img {
  image-rendering: pixelated;
}

ul,
ol {
  list-style: none;
}

a {
  color: var(--color-ink);
  text-decoration-color: var(--color-rule);
  text-underline-offset: 3px;
  transition: color var(--dur-micro) var(--ease-out),
    text-decoration-color var(--dur-micro) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  a:hover {
    color: var(--color-accent);
    text-decoration-color: var(--color-accent);
  }
}

a:active {
  color: var(--color-accent);
}

/* ----------------------------------------------------------- pixel chrome */

.panel {
  --px: 6px;
  background: var(--color-paper-2);
  border: 2px solid var(--color-rule);
  /* candlelit top edge on the wood */
  box-shadow: inset 0 2px 0 oklch(80% 0.15 72 / 0.07);
  padding: var(--space-lg);
  clip-path: polygon(
    0 var(--px), var(--px) var(--px), var(--px) 0,
    calc(100% - var(--px)) 0, calc(100% - var(--px)) var(--px), 100% var(--px),
    100% calc(100% - var(--px)), calc(100% - var(--px)) calc(100% - var(--px)),
    calc(100% - var(--px)) 100%, var(--px) 100%, var(--px) calc(100% - var(--px)),
    0 calc(100% - var(--px))
  );
  filter: drop-shadow(6px 6px 0 var(--color-shadow));
}

.pixel-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- header */

.header {
  padding-block-start: var(--space-lg);
  padding-block-end: var(--space-xl);
}

.panel--header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
}

.header__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-md);
}

.header__avatar {
  flex: none;
  width: 132px;
  height: 132px;
  image-rendering: pixelated;
}

.header__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.header__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-md);
}

.header__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.header__class {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.header__tagline {
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: 1.6;
  max-width: 65ch;
}

/* --------------------------------------------------------- camp scene dock */

#camp-canvas {
  position: fixed;
  left: 50%;
  bottom: 8px;
  translate: -50% 0;
  width: min(92vw, 480px);
  height: auto;
  aspect-ratio: 2 / 1;
  z-index: -1;
  image-rendering: pixelated;
  pointer-events: none;
  background: transparent !important;
}

#bonfire-canvas {
  display: none;
}

/* ---------------------------------------------------------- quest menu */

.quest-menu__title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-block-end: var(--space-md);
}

.quest-menu__title::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--color-hearth);
}

.quest-menu__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  list-style: none;
  margin-block-end: var(--space-xl);
}

.quest-menu__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  flex: 1 1 0;
  min-width: 120px;
  padding: var(--space-md) var(--space-sm);
  background: var(--color-paper-2);
  border: 2px solid var(--color-rule);
  clip-path: polygon(
    4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, 100% 2px,
    100% calc(100% - 2px), calc(100% - 4px) calc(100% - 2px),
    calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 2px),
    0 calc(100% - 2px), 0 2px, 4px 2px
  );
  filter: drop-shadow(3px 3px 0 var(--color-shadow));
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
  text-align: center;
  font-family: inherit;
  font-size: inherit;
  color: var(--color-ink);
}

.quest-menu__item:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .quest-menu__item:hover {
    background: var(--color-paper-3);
    border-color: var(--color-accent);
    transform: translateY(-2px);
  }
}

.quest-menu__item:active {
  transform: translateY(0);
}

.quest-menu__item-num {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.2;
  color: var(--color-accent);
}

.quest-menu__item-title {
  font-size: var(--text-sm);
  line-height: 1.3;
  color: var(--color-ink-2);
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- sections */

.block {
  padding-block-end: var(--space-2xl);
}

.block__h {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-block-end: var(--space-lg);
  overflow-wrap: anywhere;
  min-width: 0;
}

.block__h::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--color-hearth);
}

/* ---------------------------------------------------------------- signboard */

.footer {
  padding-block-end: var(--space-xl);
}

.sign__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.sign__item + .sign__item {
  border-top: 2px dashed var(--color-rule-2);
}

.sign__link {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-md);
  padding-block: var(--space-md);
  text-decoration: none;
  transition: transform var(--dur-micro) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .sign__link:hover {
    transform: translateX(2px);
  }
  .sign__link:hover .sign__label {
    color: var(--color-accent);
  }
}

.sign__label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--color-ink);
  white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-out);
}

.sign__value {
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  min-width: 0;
  overflow-wrap: anywhere;
}

.sign__copy {
  margin-inline-start: auto;
  flex: none;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--color-muted);
  background: none;
  border: 1px solid var(--color-rule);
  padding: var(--space-2xs) var(--space-xs);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .sign__copy:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
  }
}

.sign__copy:active {
  transform: translateY(1px);
}

.sign__copy:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.sign__copy[data-state="copied"] {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.colophon {
  margin-block-start: var(--space-xl);
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* -------------------------------------------------------------- overlay */

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(0% 0 0 / 0.7);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  padding-block: var(--space-md);
  transition: opacity var(--dur-short) var(--ease-out),
    visibility 0s var(--dur-short);
}

.overlay--open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-short) var(--ease-out),
    visibility 0s 0s;
}

.overlay__close {
  position: fixed;
  top: var(--space-md);
  right: var(--space-md);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-paper-2);
  border: 2px solid var(--color-rule);
  color: var(--color-ink);
  font-size: var(--text-lg);
  cursor: pointer;
  z-index: 101;
  transition: background var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .overlay__close:hover {
    background: var(--color-paper-3);
    border-color: var(--color-accent);
  }
}

.overlay__stage {
  --scroll-size: min(96vw, 720px);
  --parchment-top: calc(var(--scroll-size) * 0.23);
  --parchment-height: calc(var(--scroll-size) * 0.52);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(98vw, 800px);
}

#scroll-canvas {
  width: var(--scroll-size);
  height: auto;
  aspect-ratio: 1 / 1;
  image-rendering: pixelated;
  position: relative;
  z-index: 0;
}

.overlay__parchment {
  position: absolute;
  top: var(--parchment-top);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: calc(var(--scroll-size) * 0.68);
  height: var(--parchment-height);
  padding: calc(var(--scroll-size) * 0.02) calc(var(--scroll-size) * 0.03);
  background: oklch(93% 0.025 85);
  color: oklch(15% 0.01 45);
  border-radius: 0;
  overflow-y: auto;
  opacity: 0;
  transition: opacity var(--dur-long) var(--ease-out);
}

.overlay__parchment::-webkit-scrollbar {
  width: 6px;
}

.overlay__parchment::-webkit-scrollbar-track {
  background: transparent;
}

.overlay__parchment::-webkit-scrollbar-thumb {
  background: oklch(60% 0.02 60 / 0.6);
  border-radius: 3px;
}

.overlay--content-shown .overlay__parchment {
  opacity: 1;
}

.overlay__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: oklch(15% 0.01 45);
  margin-block-end: var(--space-xs);
}

.overlay__era {
  font-size: var(--text-sm);
  color: oklch(40% 0.02 50);
  margin-block-end: var(--space-sm);
}

.overlay__objective {
  font-size: var(--text-base);
  line-height: 1.55;
  color: oklch(25% 0.015 50);
  margin-block-end: var(--space-sm);
}

.overlay__star {
  display: grid;
  gap: var(--space-sm);
  margin-block-end: var(--space-sm);
}

.overlay__star[hidden] {
  display: none;
}

.overlay__star dt {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: oklch(50% 0.02 55);
  line-height: 1.5;
  margin-block-end: var(--space-3xs);
}

.overlay__star dd {
  font-size: var(--text-base);
  line-height: 1.55;
  color: oklch(25% 0.015 50);
}

.overlay__meta {
  display: grid;
  gap: var(--space-xs);
  border-top: 1px solid oklch(60% 0.02 60);
  padding-block-start: var(--space-sm);
}

.overlay__meta dt {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: oklch(50% 0.02 55);
  line-height: 1.5;
  margin-block-end: var(--space-2xs);
}

.overlay__meta dd {
  color: oklch(25% 0.015 50);
  font-size: var(--text-sm);
}

.overlay__xp {
  color: oklch(45% 0.12 65);
  font-weight: 500;
}

.overlay__meta .tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.overlay__meta .tag {
  border: 1px solid oklch(60% 0.02 60);
  padding: var(--space-3xs) var(--space-xs);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: oklch(35% 0.02 50);
  white-space: nowrap;
}

/* ------------------------------------------------------------------- reveal */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(8px);
}

.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-long) var(--ease-out),
    transform var(--dur-long) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}

/* ------------------------------------------------------------------ layout */

@media (max-width: 40rem) {
  .overlay {
    align-items: flex-start;
  }

  .overlay__title {
    font-size: var(--text-sm);
  }

  .overlay__era,
  .overlay__meta dd,
  .overlay__meta .tag {
    font-size: var(--text-xs);
  }

  .overlay__objective,
  .overlay__star dd {
    font-size: var(--text-sm);
  }

  .overlay__meta {
    gap: var(--space-2xs);
    padding-block-start: var(--space-xs);
  }

  .panel--header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .header__avatar {
    width: 104px;
    height: 104px;
  }

  #camp-canvas {
    width: min(94vw, 380px);
  }
}

@media (min-width: 40rem) {
  .scroll-area {
    padding: var(--space-lg);
  }

  .header__name {
    font-size: var(--text-xl);
  }

  .header {
    padding-block-start: var(--space-xl);
  }
}

@media (min-width: 60rem) {
  .scroll-area {
    max-width: 56rem;
    margin-inline: auto;
    padding: var(--space-xl);
  }

  .header__name {
    font-size: var(--text-xl);
  }
}

/* ---------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }

  .js [data-reveal] {
    transform: none;
  }

  .js [data-reveal].is-revealed {
    transition: opacity 150ms linear;
  }

  .sign__link,
  a {
    transition: none;
  }

  .overlay {
    transition: none;
  }
}