/*
   * One theme on purpose.
   *
   * The subject is light drawn on a dark building in December. A light mode
   * would be a page about laser projection rather than a page that looks like
   * it - so every colour is painted explicitly and nothing is inherited from
   * the host.
   *
   * The palette is a winter night over a town square, not a nightclub: deep
   * indigo rather than black, and the accent is the warm gold of a light
   * string - GOLD 255,190,40 from src/core/figures.ts, the exact colour the
   * projector draws.
   */
  :root {
    color-scheme: dark;
    --night:   #0A0F1E;
    --raised:  #111A2E;
    --edge:    #1E2942;
    --snow:    #EDF1F8;
    --muted:   #8A94AB;
    --gold:    #F0BE45;
    --ember:   #FF8A63;
    --pine:    #6FDCA0;
    --measure: 34rem;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--night);
    color: var(--snow);
    font: 400 17px/1.6 Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
  }

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

  .shell { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; }

  /* ---------- Hero ---------- */

  .hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--edge); }
  .hero-img {
    width: 100%; height: clamp(20rem, 62vh, 34rem); object-fit: cover;
    object-position: 50% 34%; opacity: .85;
  }
  .hero-veil {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,15,30,.72) 0%, rgba(10,15,30,.30) 42%, rgba(10,15,30,.95) 100%);
  }
  .hero-text {
    position: absolute; inset: auto 0 0 0;
    padding: 0 1.5rem 2.6rem;
  }
  .hero-inner { max-width: 68rem; margin: 0 auto; }

  .mark {
    font-family: Newsreader, Georgia, serif;
    font-weight: 300; font-size: clamp(2.6rem, 9vw, 5rem);
    line-height: 1; letter-spacing: .01em; margin: 0 0 .1em;
    color: var(--snow);
  }
  .mark span { color: var(--gold); }

  .tagline {
    font-family: Newsreader, Georgia, serif;
    font-weight: 400; font-size: clamp(1.15rem, 3.2vw, 1.6rem);
    line-height: 1.35; margin: 0; max-width: 30rem;
    color: var(--snow); text-wrap: balance;
  }

  .kicker {
    font-size: .74rem; font-weight: 600; letter-spacing: .18em;
    text-transform: uppercase; color: var(--gold); margin: 0 0 1rem;
  }

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

  section { padding: 4.5rem 0; border-bottom: 1px solid var(--edge); }
  section:last-of-type { border-bottom: 0; }

  h2 {
    font-family: Newsreader, Georgia, serif;
    font-weight: 400; font-size: clamp(1.6rem, 4.4vw, 2.2rem);
    line-height: 1.2; margin: 0 0 1.4rem; text-wrap: balance;
  }
  h3 { font-size: 1rem; font-weight: 600; margin: 0 0 .35rem; }

  p { margin: 0 0 1rem; max-width: var(--measure); }
  p:last-child { margin-bottom: 0; }
  .lead { font-size: 1.12rem; color: var(--snow); }
  .muted { color: var(--muted); }

  /* ---------- The demo generator ---------- */

  .demo { background: var(--raised); border: 1px solid var(--edge); border-radius: 4px; padding: 2rem 1.75rem; }
  .demo-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
  .demo input {
    flex: 1 1 14rem; min-width: 0;
    font: 500 1.05rem Archivo, sans-serif; letter-spacing: .04em; text-transform: uppercase;
    color: var(--snow); background: var(--night);
    border: 1px solid var(--edge); border-radius: 3px; padding: .8rem .9rem;
  }
  .demo input::placeholder { color: var(--muted); text-transform: none; letter-spacing: 0; }
  .demo input:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  .go {
    font: 600 1rem Archivo, sans-serif; text-decoration: none; white-space: nowrap;
    background: var(--gold); color: #17140A;
    border: 1px solid var(--gold); border-radius: 3px; padding: .8rem 1.5rem;
    display: inline-flex; align-items: center; cursor: pointer;
  }
  .go:hover { background: #FFD066; border-color: #FFD066; }

  #sim {
    display: block; width: 100%; height: clamp(9rem, 26vw, 13rem);
    margin-top: 1.1rem; background: var(--night);
    border: 1px solid var(--edge); border-radius: 3px;
  }
  .simnote { color: var(--muted); font-size: .87rem; margin: .8rem 0 0; max-width: 32rem; }

  /* ---------- Three claims ---------- */

  .claims { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2.2rem; }
  .claims p { color: var(--muted); font-size: .97rem; margin: 0; }
  .claims .n {
    font-family: Newsreader, Georgia, serif; font-size: 1.5rem;
    color: var(--gold); display: block; margin-bottom: .5rem; line-height: 1;
  }

  .tagline .sub { display: block; margin-top: .5rem; font-size: .72em; color: var(--gold);
    font-family: Archivo, sans-serif; font-weight: 500; letter-spacing: .01em; }

  /* The facts list above set a two-column grid on any dl > div; these rows are
     stacked, so every inherited part of that has to be undone explicitly. */
  dl.lessons { margin: 2rem 0 0; display: grid; gap: 1.7rem; max-width: 42rem; }
  dl.lessons > div { display: grid; grid-template-columns: 1fr; gap: .3rem;
    padding: 0; border-bottom: 0; }
  dl.lessons dt { font-weight: 600; font-size: 1.02rem; color: var(--snow); text-align: left; }
  dl.lessons dd { margin: 0; color: var(--muted); font-size: .97rem; font-weight: 400;
    text-align: left; max-width: var(--measure); }

  .close { margin-top: 2.6rem; padding-top: 1.5rem; border-top: 1px solid var(--edge);
    max-width: 38rem; }
  .close p { font-size: 1.06rem; margin-bottom: .9rem; }
  .close b { color: var(--snow); font-weight: 600; }
  .close strong { color: var(--gold); font-weight: 600; }
  .close .last { font-family: Newsreader, Georgia, serif; font-size: 1.35rem; line-height: 1.3;
    color: var(--snow); margin: 1.3rem 0 0; }

  /* ---------- Proof ---------- */

  .plates { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem; margin-top: 2rem; }
  figure { margin: 0; }
  figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; border: 1px solid var(--edge); }
  figcaption { color: var(--muted); font-size: .89rem; margin-top: .6rem; }
  figcaption b { color: var(--snow); font-weight: 600; }

  /* ---------- Facts ---------- */

  dl { margin: 0; max-width: 40rem; }
  dl > div {
    display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: baseline;
    padding: .8rem 0; border-bottom: 1px solid var(--edge);
  }
  dl > div:last-child { border-bottom: 0; }
  dt { color: var(--muted); }
  dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

  /* ---------- Safety ---------- */

  .safety { border-left: 2px solid var(--pine); padding-left: 1.3rem; }
  .safety h2 { margin-bottom: 1rem; }

  /* ---------- Contact ---------- */

  .contact a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(240,190,69,.35); }
  .contact a:hover { border-bottom-color: var(--gold); }

  footer { padding: 2.5rem 0 4rem; color: var(--muted); font-size: .86rem; }

  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

  /* Applications, and the one-supplier argument. */
  .scene h2 { font-size: clamp(1.9rem, 5.5vw, 2.9rem); line-height: 1.12; }
  .scene .lead { font-size: 1.2rem; line-height: 1.55; max-width: 34rem; }
  .punch { margin-top: 1.8rem; padding-top: 1.3rem; border-top: 1px solid var(--edge);
    font-family: Newsreader, Georgia, serif; font-size: 1.5rem; line-height: 1.3;
    color: var(--snow); max-width: 34rem; }
  .punch strong { color: var(--gold); font-weight: 400; }

  .uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 2rem 2.4rem; margin-top: 2.2rem; }
  .uses h3 { font-family: Newsreader, Georgia, serif; font-weight: 400; font-size: 1.25rem;
    color: var(--gold); margin: 0 0 .45rem; }
  .uses p { margin: 0; color: var(--muted); font-size: .96rem; max-width: 22rem; }

  ol.chain { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.5rem;
    max-width: 42rem; counter-reset: step; }
  ol.chain > li { display: grid; grid-template-columns: 2.2rem 1fr; gap: 1rem; align-items: baseline; }
  ol.chain > li::before { counter-increment: step; content: counter(step);
    font-family: Newsreader, Georgia, serif; font-size: 1.5rem; color: var(--gold); line-height: 1; }
  ol.chain h3 { font-size: 1rem; font-weight: 600; margin: 0 0 .25rem; }
  ol.chain p { margin: 0; color: var(--muted); font-size: .96rem; }

  .whole { margin-top: 2.4rem; padding: 1.5rem 1.6rem; background: var(--raised);
    border: 1px solid var(--edge); border-left: 3px solid var(--gold); border-radius: 3px; }
  .whole p { margin: 0; font-size: 1.05rem; max-width: 36rem; }
  .whole strong { color: var(--gold); font-weight: 600; }

/* ---------- The traced wordmark ---------- */

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

#heroLaser { cursor: pointer;
  display: block; width: 100%; height: clamp(3rem, 11vw, 9rem);
  margin: 0 0 .3rem -1.5%;
}

/* ---------- Scroll-driven reveals ----------
   Native in every current browser: the animation is driven by the element's
   own position in the viewport, on the compositor, so it costs nothing on the
   main thread and holds 60fps on a phone.

   The range ends early and fills forwards, so a section is fully readable well
   before it reaches the middle of the screen - a reveal that needs scrolling to
   finish is a reveal that hides content. */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    main > section {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
    @keyframes rise {
      from { opacity: 0; transform: translateY(1.6rem); }
      to   { opacity: 1; transform: none; }
    }

    /* The three figures count in one after another rather than as a block. */
    .claims > div { animation: rise linear both; animation-timeline: view();
      animation-range: entry 0% entry 55%; }
    .claims > div:nth-child(2) { animation-range: entry 4% entry 60%; }
    .claims > div:nth-child(3) { animation-range: entry 8% entry 65%; }
  }
}

/* ---------- The fan of beams ----------
   Additive light over the photograph: screen blending so it can only ever add,
   which is the one thing a laser can do and the one thing it cannot undo. */

#heroBeams {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; mix-blend-mode: screen;

  /* The beams belong in the air over the building, not across the reader's
     eye: the layer is masked away where the title and the line of copy sit. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 38%, rgba(0,0,0,.30) 70%, rgba(0,0,0,.06) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 38%, rgba(0,0,0,.30) 70%, rgba(0,0,0,.06) 100%);
}

/* ---------- Price ---------- */

.price h2 { color: var(--gold); }
.price p { max-width: 36rem; }

/* ---------- Reaching a person ---------- */

.reach {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem;
  margin-top: 1.6rem; font-size: 1.05rem;
}
/* .contact a paints every link gold; on the filled button that is gold on gold. */
.reach .go { text-decoration: none; color: #17140A; border-bottom: 0; }
.reach .go:hover { color: #17140A; }
.who { margin-top: 1.4rem; color: var(--muted); font-size: .95rem; max-width: 34rem; }

/* ---------- Page-to-page ----------
   The move to the simulator is a cross-fade instead of a white flash. Browsers
   without it navigate exactly as before. */

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Fewer orphans and better break points, everywhere it is supported. */
p, li, dd, figcaption { text-wrap: pretty; }