/* This file is part of Chaos Accelerator, licensed under the Common Public
   Attribution License, Version 1.0 (CPAL-1.0) - see LICENSE in the project
   root, or https://chaosaccelerator.com/license for a hosted copy. */

/* The two pages that are documents rather than the app: index.html (the
   landing page) and other.html (other projects). They share the app's
   palette - the same custom properties physics.css declares, copied rather
   than imported so that neither page has to load the app's stylesheet for
   six colors - and its system font stack, and nothing else: the app's own
   sheets pin html/body to the window's height for a full-bleed canvas, which
   is exactly wrong for a page that scrolls. */
:root {
  --bg: #14161c;
  --bg-panel: #1b1e27;
  --border: #2c3040;
  --text: #e6e8ef;
  --text-dim: #9399ad;
  --accent: #5b8cff;
  --accent-hover: #75a0ff;
}

* { box-sizing: border-box; }

html { background: var(--bg); }
body {
  margin: 0;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

.page {
  max-width: 980px;
  margin: 0 auto;
  /* The safe-area insets: the app's pages run edge to edge on a phone (see
     chaos.html's viewport-fit=cover), and these keep the same meta tag. */
  padding: 56px max(20px, env(safe-area-inset-right)) 72px max(20px, env(safe-area-inset-left));
}

/* The landing page starts with its title hard against the top of the window
   (only a notch's own inset is kept). other.html keeps the padding: it opens
   with a small back link, which should not touch the edge. */
.page.flush-top { padding-top: env(safe-area-inset-top); }

/* ---- Masthead ---- */

.masthead { text-align: center; margin-bottom: 40px; }

.masthead h1 {
  margin: 0;
  font-size: clamp(38px, 7vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 800;
}
/* The title is the way in, and wears the Fractal-ize button's own gradient
   so the two read as the same invitation. */
.masthead h1 a {
  background: linear-gradient(135deg, #ffd23f, #ff6b35 55%, #ff2e63);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-decoration: none;
}
.masthead h1 a:hover { filter: brightness(1.12); text-decoration: none; }

.tagline {
  margin: 14px auto 0;
  max-width: 34em;
  font-size: clamp(17px, 2.4vw, 21px);
  color: var(--text);
}

.credits {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--text-dim);
}
.credits p { margin: 2px 0; }

/* ---- Sections ---- */

.section { margin-top: 48px; }

/* A line of ordinary text introducing what follows it, centered over it:
   "In depth video tutorial:", "How to:". Sentence case and body-sized. */
.section-lead {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 500;
  text-align: center;
  color: var(--text);
}

/* A 16:9 box the iframe fills. By aspect-ratio, NOT the old padding-top
   trick: a percentage padding is a percentage of the PARENT's width, so the
   moment this box is narrower than its parent (.video-narrow's max-width) the
   trick makes it 16:9 of the wrong width - which is exactly what it did, a
   532px-wide video 9/16ths of 940px tall. */
.video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #000;
}
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-narrow { max-width: 532px; margin: 0 auto; }

/* ---- The two steps ---- */

.steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
/* Stacked on a phone - the same 640px the app's own small-window layout
   switches at is a little early for two cards of text, so this goes first. */
@media (max-width: 720px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
}

.step {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-panel);
  color: var(--text);
}

/* Both screenshots are the same 896 x 782 and shown whole, at their own
   shape: the card is the picture with its caption under it, which is what
   makes the tile "squareish". The <img> tags carry those dimensions, so the
   browser holds the right space before a (lazy) image has loaded and the page
   does not jump; height: auto lets the width drive it. If the pictures are
   ever replaced by ones of another shape, change the numbers there - nothing
   here crops. */
.step img {
  display: block;
  width: 100%;
  height: auto;
  background: #0c0d11;
  border-bottom: 1px solid var(--border);
}
.step-body { padding: 16px 18px 20px; }
.step h3 { margin: 0 0 6px; font-size: 18px; line-height: 1.3; }
.step p { margin: 0; font-size: 15px; color: var(--text-dim); }

/* ---- The way in ---- */

.launch { margin-top: 56px; text-align: center; }
/* The same button again, straight under the tagline - for whoever needs no
   more convincing than that. Closer to what it follows than the one at the
   foot of the page, and with room under it for the pulse's glow. */
.launch-top { margin: 26px 0 30px; }

/* The Fractal-ize button, exactly: every declaration below is .fractalize-btn's
   own (physics.css), here on a link. Copied because this page does not load
   that sheet - if the button there changes, change this with it. */
.fractalize-btn {
  display: inline-block;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  padding: 14px 34px;
  border-radius: 999px;
  border: none;
  color: #200b00;
  background: linear-gradient(135deg, #ffd23f, #ff6b35 55%, #ff2e63);
  box-shadow: 0 4px 18px rgba(255, 107, 53, 0.55);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  animation: fractalizePulse 2.2s ease-in-out infinite;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.fractalize-btn:hover {
  color: #200b00;
  text-decoration: none;
  transform: translateY(-2px) scale(1.05);
  filter: brightness(1.08);
  box-shadow: 0 6px 26px rgba(255, 46, 99, 0.8);
}
.fractalize-btn:active { transform: translateY(0) scale(0.97); }
@keyframes fractalizePulse {
  0%, 100% { box-shadow: 0 4px 18px rgba(255, 107, 53, 0.55); }
  50% { box-shadow: 0 4px 30px rgba(255, 46, 99, 0.9); }
}
/* Large, as asked - the one place the copy departs from the original. */
.fractalize-btn.large { font-size: 22px; padding: 18px 48px; }
@media (prefers-reduced-motion: reduce) {
  .fractalize-btn { animation: none; }
}

/* ---- Other projects ---- */

.back-link { display: inline-block; margin-bottom: 28px; font-size: 14px; }

.project + .project { margin-top: 48px; }
.project h2 { margin: 0 0 4px; font-size: 22px; }
.project .sub { margin: 0 0 14px; font-size: 15px; color: var(--text-dim); }


/* ---- The license page ---- */

/* The LICENSE file's own text, as written: monospaced, its line breaks kept,
   but wrapped - it is hard-wrapped at ~75 columns, which a phone cannot show
   without either this or a sideways scroll. */
.license-text {
  margin: 0;
  padding: 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
}