/* self-hosted so the page doesn't depend on Google Fonts (OFL license
   is alongside the file in assets/fonts) */
@font-face {
  font-family: 'Comic Neue';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./assets/fonts/comic-neue-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

:root {
  --bg-deep: #1a0508;
  --crimson: #8f0d1e;
  --red: #ff2a3d;
  --steel: #d5dbe6;
  --gold: #ffd23f;
  --ink: #fff1f1;
  color-scheme: dark;
  scrollbar-color: var(--crimson) var(--bg-deep);
  -webkit-tap-highlight-color: rgba(255, 42, 61, 0.25);
}

::selection {
  background: var(--red);
  color: #1a0508;
}

html {
  background-color: var(--bg-deep);
}

html, body {
  height: 100%;
  overflow-x: hidden;
}

/* <picture> only swaps the animated gif for a static png under
   prefers-reduced-motion; it shouldn't add a layout box of its own */
picture {
  display: contents;
}

body {
  font-size: 0.875rem;
  color: var(--ink);
  background-color: var(--bg-deep);
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  isolation: isolate;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: url('./assets/satin-bg.png');
  background-repeat: repeat;
  background-size: 200px;
}

/* brushed diamond-plate rails down both sides, with a chrome edge */
.rail {
  position: fixed;
  top: 0;
  bottom: 0;
  width: clamp(20px, 5vw, 84px);
  background-image: url('./assets/plate-bg.png');
  background-repeat: repeat;
  background-size: 100% auto;
  z-index: -1;
  pointer-events: none;
}

.rail-left {
  left: 0;
  border-right: 3px solid var(--steel);
  box-shadow: 6px 0 18px rgba(0, 0, 0, 0.7), inset -8px 0 12px rgba(0, 0, 0, 0.55);
}

.rail-right {
  right: 0;
  border-left: 3px solid var(--steel);
  box-shadow: -6px 0 18px rgba(0, 0, 0, 0.7), inset 8px 0 12px rgba(0, 0, 0, 0.55);
}

main {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3.4vh, 28px);
  padding: clamp(16px, 4vh, 32px) var(--pad);
  padding-top: max(clamp(16px, 4vh, 32px), env(safe-area-inset-top, 0px));
  padding-bottom: max(clamp(16px, 4vh, 32px), env(safe-area-inset-bottom, 0px));
  text-align: center;

  /* --ring is the width of the link ring; the orbs, hero, logo and header
     text all scale from it. It's limited by the smaller of the width
     available and the height (the ring is .85 wide-to-tall and the header
     and spacing take about 300px), so any window shape gets a ring that
     fits. Bigger monitors raise --ring-max in the tiers below. */
  --pad: clamp(40px, 10vw, 110px);
  --ring-max: 500px;
  --ring: max(300px, min(var(--ring-max), calc((100vw - 2 * var(--pad)) * .96), calc((100vh - 300px) * .85)));
}

@supports (height: 100dvh) {
  main {
    --ring: max(300px, min(var(--ring-max), calc((100vw - 2 * var(--pad)) * .96), calc((100dvh - 300px) * .85)));
  }
}

header h1 {
  line-height: 0;
}

header h3 {
  font-family: 'Comic Neue', 'Comic Sans MS', 'Comic Sans', cursive;
  font-weight: 700;
  font-size: clamp(1rem, calc(var(--ring) * .033), 1.7rem);
  color: #fff;
  text-shadow: 0 0 6px rgba(26, 5, 8, 0.95), 0 0 12px var(--red), 0 0 22px var(--crimson);
}

header .logo {
  width: clamp(180px, calc(var(--ring) * .64), 560px);
  height: auto;
}

header .tagline {
  margin-top: 8px;
  font-family: 'Comic Neue', 'Comic Sans MS', 'Comic Sans', cursive;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(0.875rem, calc(var(--ring) * .038), 1.9rem);
  letter-spacing: 0.14em;
  line-height: 0;
  color: var(--steel);
  text-shadow: 0 0 6px rgba(26, 5, 8, 0.95), 0 0 12px rgba(26, 5, 8, 0.9), 0 0 22px rgba(26, 5, 8, 0.8);
}

.constellation {
  position: relative;
  width: var(--ring);
  aspect-ratio: .85;
  margin: clamp(24px, 6vh, 48px) auto 0;
}

/* browsers without aspect-ratio (Safari < 15) would collapse the ring to
   zero height, so fake it with padding, which resolves against width */
@supports not (aspect-ratio: 1) {
  .constellation {
    height: 0;
    padding-bottom: calc(100% / .85);
  }
}

.orbit-ring ul {
  list-style: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.hero {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: calc(var(--ring) * .48);
  width: auto;
  filter: drop-shadow(0 0 26px rgba(255, 42, 61, 0.55)) drop-shadow(0 0 46px rgba(213, 219, 230, 0.25));
}

.orbit-ring {
  position: absolute;
  inset: 0;
}

.orb {
  position: absolute;
  top: calc(50% + var(--y));
  left: calc(50% + var(--x));
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: clamp(46px, calc(var(--ring) * .2), 150px);
  padding: calc(var(--ring) * .02) calc(var(--ring) * .012);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(213, 219, 230, 0.94) 12%,
    rgba(255, 42, 61, 0.92) 34%,
    rgba(143, 13, 30, 0.92) 62%,
    rgba(26, 5, 8, 0.97) 88%);
  box-shadow: 0 0 18px rgba(80, 5, 15, 0.7);
  text-decoration: none;
  color: var(--ink);
  border: 0;
  transition: box-shadow 0.2s ease;
}

.disc {
  width: clamp(34px, calc(var(--ring) * .144), 108px);
  height: clamp(46px, calc(var(--ring) * .196), 148px);
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.15s ease;
}

.orb .label {
  display: inline-block;
  font-family: 'Comic Neue', 'Comic Sans MS', 'Comic Sans', cursive;
  font-weight: 700;
  font-size: clamp(0.75rem, calc(var(--ring) * .03), 1.5rem);
  letter-spacing: 0.04em;
  color: #edde02;
  text-shadow: 1px 1px 0 var(--crimson), -1px -1px 0 var(--crimson),
    1px -1px 0 var(--crimson), -1px 1px 0 var(--crimson),
    0 0 8px rgba(26, 5, 8, 0.9);
  transition: transform 0.15s ease;
}

/* hover only on devices that can actually hover, so a tap on a phone
   doesn't leave the orb stuck in its hover look */
@media (hover: hover) {
  .orb:hover {
    box-shadow: 0 0 30px rgba(255, 42, 61, 0.85);
    outline: 2px solid var(--steel);
  }

  .orb:hover .disc {
    transform: scale(1.1);
  }

  .orb:hover .label {
    transform: translateY(-2px);
  }
}

.orb:focus-visible {
  box-shadow: 0 0 30px rgba(255, 42, 61, 0.85);
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.orb:active {
  outline-color: var(--steel);
}

.orb:focus-visible .disc {
  transform: scale(1.1);
}

.orb:focus-visible .label {
  transform: translateY(-2px);
}

.orb:active .disc {
  transform: scale(0.92);
  transition: transform 0.08s ease;
}

.scatter {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.scatter-item {
  position: absolute;
  opacity: 0.8;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.6));
  transform: scale(var(--sprite-scale, 1));
}

.scatter-item.top-left     { top: var(--y);    left: var(--x);  transform-origin: top left; }
.scatter-item.top-right    { top: var(--y);    right: var(--x); transform-origin: top right; }
.scatter-item.bottom-left  { bottom: var(--y); left: var(--x);  transform-origin: bottom left; }
.scatter-item.bottom-right { bottom: var(--y); right: var(--x); transform-origin: bottom right; }

@media (max-height: 700px) {
  main {
    gap: 10px;
  }
}

/* big monitors: a larger ring, sprites and rails so the page doesn't sit
   tiny in the middle of the screen */
@media (min-width: 1600px) and (min-height: 900px) {
  main {
    --ring-max: 640px;
  }

  .scatter {
    --sprite-scale: 1.35;
  }

  .rail {
    width: 96px;
  }
}

@media (min-width: 2200px) and (min-height: 1200px) {
  main {
    --ring-max: 800px;
  }

  .scatter {
    --sprite-scale: 1.8;
  }

  .rail {
    width: 128px;
  }
}

/* tablets held upright: enough room for full-size orbs, but the sprites
   still need to back off */
@media (min-width: 641px) and (max-width: 900px) and (max-aspect-ratio: 3/4) {
  .scatter-item {
    opacity: .5;
  }

  .shrink-small {
    transform: scale(0.75);
  }
}

/* phones and other narrow windows (up to 640px). The ring here has its own
   width and denser orbs, so these override the --ring-based sizing above. */
@media (max-width: 640px) {
  main {
    padding-left: 12px;
    padding-right: 12px;
  }

  .constellation {
    width: 94%;
    max-width: 500px;
    aspect-ratio: .78;
  }

  /* the orbs are spaced by angle around the ring, so their size has to
     shrink with the ring on small screens or adjacent ones start clipping
     into each other */
  .orb {
    width: clamp(46px, 15vw, 64px);
    padding: 6px 4px;
  }

  .disc {
    width: clamp(34px, 11vw, 46px);
    height: clamp(46px, 15vw, 62px);
  }

  .hero {
    height: clamp(150px, 46%, 240px);
  }

  header .logo {
    width: clamp(180px, 50vw, 320px);
  }

  header h3 {
    font-size: 1.17em;
  }

  header .tagline {
    font-size: clamp(0.875rem, 3.6vw, 1.1875rem);
  }

  .orb .label {
    font-size: clamp(0.75rem, 3.1vw, 0.9375rem);
  }

  .shrink-small {
    transform: scale(0.6);
  }

  .scatter-item {
    opacity: .35;
  }

  .hide-small {
    display: none;
  }
}

/* between phone and desktop widths the ring can be wider than the window is
   tall, which pushes the bottom orbs off screen, so fit it to the height.
   The first width is the fallback for browsers without dvh. */
@media (min-width: 481px) and (max-width: 640px) {
  .constellation {
    width: max(320px, min(94%, 500px, calc((100vh - 270px) * .78)));
    width: max(320px, min(94%, 500px, calc((100dvh - 270px) * .78)));
  }
}

/* age gate */
.gate {
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 3vh, 24px);
  padding: clamp(20px, 4vh, 36px) clamp(18px, 5vw, 40px);
  border: 3px solid var(--steel);
  border-radius: 24px;
  background: rgba(26, 5, 8, 0.82);
  box-shadow: 0 0 34px rgba(255, 42, 61, 0.45), inset 0 0 22px rgba(0, 0, 0, 0.6);
}

.gate-age {
  font-family: 'Comic Neue', 'Comic Sans MS', 'Comic Sans', cursive;
  font-weight: 700;
  font-size: clamp(3.5rem, 16vw, 6rem);
  line-height: 1;
  color: var(--red);
  text-shadow: 2px 2px 0 var(--steel), 0 0 22px var(--red);
}

.gate-note {
  font-size: clamp(0.95rem, 2.6vw, 1.1rem);
  line-height: 1.5;
  color: var(--ink);
}

.gate-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.gate-btn {
  font-family: 'Comic Neue', 'Comic Sans MS', 'Comic Sans', cursive;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 0.55em 1.4em;
  border-radius: 999px;
  color: #edde02;
  text-shadow: 1px 1px 0 var(--crimson), -1px -1px 0 var(--crimson),
    1px -1px 0 var(--crimson), -1px 1px 0 var(--crimson);
  background: radial-gradient(circle at 50% 40%,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 42, 61, 0.95) 45%,
    rgba(143, 13, 30, 0.97) 100%);
  box-shadow: 0 0 16px rgba(255, 42, 61, 0.5);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.gate-btn.leave {
  color: #1a0508;
  text-shadow: none;
  background: linear-gradient(180deg, #f4f6fa, #aeb6c4 55%, #7c8494);
  box-shadow: 0 0 12px rgba(213, 219, 230, 0.3);
}

@media (hover: hover) {
  .gate-btn:hover {
    box-shadow: 0 0 30px rgba(255, 42, 61, 0.85);
    outline: 2px solid var(--steel);
    transform: translateY(-2px);
  }
}

.gate-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* 404 page */
.lost,
.lost-note,
.home {
  font-family: 'Comic Neue', 'Comic Sans MS', 'Comic Sans', cursive;
  font-weight: 700;
  text-shadow: 1px 1px 0 var(--crimson), -1px -1px 0 var(--crimson),
    1px -1px 0 var(--crimson), -1px 1px 0 var(--crimson),
    0 0 12px rgba(26, 5, 8, 0.95);
}

.lost {
  font-size: clamp(1.75rem, 8vw, 2.75rem);
  letter-spacing: 0.08em;
  color: var(--red);
}

.lost-note {
  font-size: 1.05rem;
  color: var(--steel);
}

.home {
  font-size: 1.15rem;
  color: #edde02;
  text-decoration: none;
  padding: 0.4em 1em;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 45%, rgba(255, 42, 61, 0.95), rgba(143, 13, 30, 0.95) 70%, rgba(26, 5, 8, 0.97));
}

.home:hover,
.home:focus-visible {
  outline: 2px solid var(--steel);
}

/* forced-colors (Windows high contrast): let the system palette win */
@media (forced-colors: active) {
  .orb,
  .gate-btn,
  .home {
    border: 2px solid LinkText;
  }
}

/* a still page for anyone who's asked for less motion; the animated gifs are
   already swapped for pngs in the markup */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}