/* The intro: a white page, Artemis's ring in liquid metal, melting into a terminal window on Enter.
   Same fonts as the site (Rethink Sans, Atkinson Hyperlegible Mono), self-hosted. */
@font-face { font-family: "Rethink"; src: url("fonts/rethink-sans.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Atkinson Mono"; src: url("fonts/atkinson-hyperlegible-mono.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root { --ink: #16161a; --soft: #6b6b74; --line: rgba(0, 0, 0, .08); color-scheme: light; }
* { box-sizing: border-box; }
html { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
html, body { margin: 0; height: 100%; background: #fff; color: var(--ink); font: 400 1rem/1.5 "Rethink", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid #7c5ce6; outline-offset: 4px; border-radius: 10px; }

.stage { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 0; padding: 2rem 1rem 5rem; overflow: hidden; }
.metal { position: relative; width: 100vw; height: min(560px, 66vh); }
.metal canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* the terminal: plain HTML over the metal, shown once the ring has melted into a window */
.term { position: absolute; left: 13%; top: 14%; right: 13%; font: 400 clamp(.7rem, 1.6vw, .86rem)/1.9 "Atkinson Mono", ui-monospace, monospace;
  color: rgba(255, 255, 255, .92); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); opacity: 0; transition: opacity .5s ease .1s; pointer-events: none; }
.term .dots { display: flex; gap: 6px; margin-bottom: .6rem; }
.term .dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.term .line { margin: 0; white-space: nowrap; overflow: hidden; }
.term .dim { color: rgba(255, 255, 255, .62); }
.term .caret { display: inline-block; width: .55em; height: 1.05em; vertical-align: -.15em; background: #fff; margin-left: 1px; }
.metal.open .term { opacity: 1; }

/* the bar under the shape: the one action */
.bar { width: min(640px, 92vw); margin-top: -1.5rem; display: flex; align-items: center; gap: .75rem; padding: .45rem .45rem .45rem 1rem;
  border-radius: 12px; background: rgba(255, 255, 255, .86); border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(20, 20, 30, .08); backdrop-filter: blur(12px); position: relative; z-index: 2; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.metal.open + .bar { transform: translateY(-5.5rem); }
.hint { flex: 1; color: var(--soft); font-size: .92rem; }
kbd { font: 500 .86rem "Atkinson Mono", ui-monospace, monospace; color: var(--ink); background: #f1f1f3; border: 1px solid #e3e3e7; border-radius: 6px; padding: .12em .5em; }
.run { font: 600 .92rem "Rethink", system-ui, sans-serif; color: var(--ink); cursor: pointer; padding: .55rem 1rem; border-radius: 9px;
  border: 1px solid rgba(0, 0, 0, .14); background: linear-gradient(180deg, #fff, #e9e9ee);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08); }
.run:active { transform: translateY(1px); }

.skip { position: absolute; left: 1rem; top: -4rem; background: var(--ink); color: #fff; padding: .5rem 1rem; border-radius: 999px; z-index: 5; }
.skip:focus { top: 1rem; }
.skip-corner { position: fixed; right: 1.5rem; bottom: 1.25rem; color: var(--soft); font-size: .9rem; text-decoration: none; }
.skip-corner:hover { color: var(--ink); }

/* no WebGL: a still ring drawn with CSS, so the page never shows an empty box */
.metal.still { background: radial-gradient(closest-side, transparent 52%, #1b1d2b 53%, #f4f4f7 63%, #ffb547 66%, #c9cbd6 70%, #1b1d2b 77%, transparent 78%); border-radius: 50%; }

@media (prefers-reduced-motion: reduce) { .term, .bar { transition: none; } }
.cmd { flex: 1; font: 500 .82rem/1.4 "Atkinson Mono", ui-monospace, monospace; color: var(--ink); white-space: nowrap; overflow-x: auto; scrollbar-width: none; }

/* scroll: the hero is tall and its content stays pinned, so scrolling carries the wordmark through the ring */
.hero { min-height: 100vh; position: relative; }
.pin { position: relative; min-height: 100vh; padding: 1rem 0 2rem; display: grid; place-items: center; align-content: center; overflow-x: clip; }
.get { display: grid; justify-items: center; gap: .9rem; margin-top: -3rem; position: relative; z-index: 2; }
.bar { width: min(900px, 94vw); margin: 0; padding: .4rem .5rem .4rem .4rem; gap: .9rem; background: #f4f4f6; border: 1px solid #e6e6ea; border-radius: 14px; box-shadow: none; backdrop-filter: none; transform: none !important; }
.getbtn { flex: none; display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.2rem; border-radius: 10px; background: #fff; color: var(--ink);
  font: 600 1rem "Rethink", system-ui, sans-serif; text-decoration: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px rgba(0, 0, 0, .06); }
.getbtn:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, .1), 0 0 0 1px rgba(0, 0, 0, .08); }
.cmd { font-size: .88rem; }
.cmd .k { color: #c2410c; }
.cmd .op { color: #2563eb; }
.copy { flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 8px; background: transparent; color: #6b6b74; cursor: pointer; }
.copy:hover { background: #e9e9ee; color: var(--ink); }
.docs { margin: 0; color: var(--soft); font-size: .95rem; }
.docs a { color: var(--ink); text-underline-offset: .2em; }
.scroll-hint { display: none; position: absolute; bottom: 1.5rem; color: var(--soft); font-size: .85rem; letter-spacing: .02em; }

/* the information below: why it matters, and the team */
.info { max-width: 760px; margin: 0 auto; padding: 5rem 1.25rem; }
.info h2 { font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: -.04em; line-height: 1.05; margin: 0 0 1.25rem; font-weight: 650; }
.lead { color: #3f3f46; font-size: 1.1rem; line-height: 1.65; margin: 0 0 1rem; }
.holds { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .9rem; }
.holds li { padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: 14px; color: #3f3f46; }
.holds strong { color: var(--ink); }
.info-team { max-width: 1180px; }
.team { list-style: none; padding: 0; margin: 2rem 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.team li { display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; padding: 1.2rem; border: 1px solid var(--line); border-radius: 16px; }
@media (max-width: 960px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .team { grid-template-columns: 1fr; } }
.team img { border-radius: 50%; object-fit: cover; flex: none; background: #f1f1f3; }
.team strong { display: block; font-size: 1.05rem; }
.team span { color: #52525b; font-size: .96rem; line-height: 1.55; }
@media (max-width: 560px) { .getbtn { padding: .6rem .8rem; font-size: .92rem; } .cmd { font-size: .8rem; } }
.copy.done { color: #16a34a; }
.tagline { margin: 0; text-align: center; font-size: clamp(2.3rem, 5.2vw, 4.2rem); line-height: 1.02; letter-spacing: -.045em; font-weight: 650; color: var(--ink); }
.tagline span { display: block; color: #9a9aa3; font-weight: 500; font-size: .62em; letter-spacing: -.035em; margin-top: .25rem; }
.sub { margin: -.3rem 0 2.6rem; text-align: center; color: var(--soft); font-size: clamp(.95rem, 1.4vw, 1.05rem); line-height: 1.5; }

/* the footer: the other pages */
.foot { border-top: 1px solid var(--line); padding: 2rem 1.25rem 3rem; }
.foot ul { list-style: none; margin: 0 auto; padding: 0; max-width: 1180px; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; justify-content: center; }
.foot a { color: var(--ink); text-underline-offset: .2em; }
.cmd:focus-visible { outline-offset: 2px; border-radius: 6px; }

/* Black and purple: the same studio look as the rest of the site (styles.css: --bg #000, --iris #b794ff). */
:root { --ink: #f5f5f7; --soft: #a1a1aa; --line: rgba(255, 255, 255, .1); --iris: #b794ff; color-scheme: dark; }
html, body { background: #000; color: var(--ink); }
:focus-visible { outline-color: var(--iris); }
.bar { background: #0e0e11; border-color: rgba(255, 255, 255, .1); }
.getbtn { background: var(--iris); color: #0b0a0f; box-shadow: 0 6px 22px rgba(183, 148, 255, .25); }
.getbtn:hover { box-shadow: 0 8px 28px rgba(183, 148, 255, .35); }
.cmd .k { color: #fb923c; }
.cmd .op { color: var(--iris); }
.copy { color: var(--soft); }
.copy:hover { background: rgba(255, 255, 255, .08); color: var(--ink); }
.copy.done { color: #4ade80; }
kbd { background: #1a1a1f; border-color: #2e2e36; }
.run { color: var(--ink); border-color: rgba(255, 255, 255, .14); background: linear-gradient(180deg, #24242b, #16161b);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 6px rgba(0, 0, 0, .4); }
.skip { background: var(--iris); color: #0b0a0f; }
.docs a, .foot a { color: var(--iris); }
.tagline span { color: #8b8b95; }
.lead, .holds li { color: #c4c4cc; }
.team span { color: #a1a1aa; }
.team img { background: #1a1a1f; }
.holds li, .team li { background: linear-gradient(180deg, #0e0e11, #08080a); }
.tagline .accent { font-style: normal; color: var(--iris); }
.metal.still { background: radial-gradient(closest-side, transparent 52%, #1a1029 53%, #f4f0ff 63%, #b794ff 66%, #c9bde8 70%, #1a1029 77%, transparent 78%); }
.info h2 { color: var(--ink); }
.info h2::after { content: ""; display: block; width: 2.5rem; height: 3px; margin-top: .9rem; border-radius: 2px; background: var(--iris); }
.holds strong, .team strong { color: var(--ink); }
.holds li { border-color: rgba(183, 148, 255, .18); }