/* Become - the launch landing page (Pages/Index.cshtml).
 *
 * The design tool's page keeps its per-element styling in style="" attributes, and those are kept
 * as they are in the markup: they are the design. What is here is only what a style attribute
 * cannot express -
 *
 *   * the wide/phone switch. The design reads window.innerWidth < 760 and renders one of two
 *     trees; here both trees are in the markup and this is what chooses between them, so the page
 *     is laid out correctly at phone width before any script has run. 760 is the design's number.
 *   * the states a visitor moves through: which health clip is showing, which topic chip is
 *     chosen, whether the panel is open.
 *   * the entrance of the hero quotation, and the respect for a visitor who has asked for less
 *     motion.
 *
 * Nothing here fetches anything from another host. The typefaces are self-hosted - see
 * fonts-become.css - and there is no third-party script on the page. */

:root {
  --lp-bg: #100D0A;
  --lp-card: #17130F;
  --lp-line: #2E2620;
  --lp-line-strong: #3A2E24;
  --lp-gold: #C7A27C;
  --lp-text: #EFE7DA;
  --lp-muted: #B8A690;

  /* The design's breakpoint, named here so the one place it is expressed in CSS is the one place
     it is read from. page-launch.js carries the same number for the tab/bar choice. */
  --lp-wide-min: 760px;
}

/* The master layout's body is the light default; this page is dark to the edges, so the area
   behind the sticky header and past the end of the document would flash white. The rule is safe to
   write here because this stylesheet is linked by this one page. */
body {
  margin: 0;
  background: #100D0A;
}

/* The design's own two global rules, kept as the design has them: gold, no underline, lighter on
   hover. The panel sits outside #lp, so it is named too. */
#lp a,
#lp-panel a {
  color: var(--lp-gold);
  text-decoration: none;
}

#lp a:hover,
#lp-panel a:hover {
  color: #E8C9A0;
}

/* ── The wide / phone switch ────────────────────────────────────────────────────────────────────
   Both trees are rendered. `.lp-wide` is the wide layout, `.lp-narrow` the phone one; the stack
   variants are for the two regions whose children are laid out as a column (the health
   demonstration), which is why they are declared before the query rather than inside it. */

.lp-wide {
  display: block;
}

.lp-narrow {
  display: none;
}

.lp-wide-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (max-width: 759.98px) {
  .lp-wide {
    display: none;
  }

  .lp-narrow {
    display: block;
  }

  .lp-narrow-stack {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
}

/* ── The hero quotation ─────────────────────────────────────────────────────────────────────────
   The design animates it in on load. Same idea, in CSS, and skipped entirely for a visitor who
   has asked the system for less motion. */

@media (prefers-reduced-motion: no-preference) {
  .lp-quote {
    animation: lp-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .lp-quote p + p {
    animation: lp-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) 180ms both;
  }

  html {
    scroll-behavior: smooth;
  }
}

@keyframes lp-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ── The health demonstration ───────────────────────────────────────────────────────────────────
   Which clip is showing is one fact - data-lp-active on #lp-health - and the tabs read the same
   fact back through aria-selected. Neither is a second copy of the other. */

#lp-health [data-lp-healthclip] {
  opacity: 0;
  transition: opacity 400ms ease;
}

#lp-health[data-lp-active="0"] [data-lp-healthclip="0"],
#lp-health[data-lp-active="1"] [data-lp-healthclip="1"],
#lp-health[data-lp-active="2"] [data-lp-healthclip="2"] {
  opacity: 1;
}

.lp-health-tab {
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: none;
  border-top: 2px solid var(--lp-line-strong);
  padding: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--lp-text);
}

.lp-health-tab .lp-num {
  font-size: 12px;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--lp-gold);
}

.lp-health-tab .lp-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.1;
}

.lp-health-tab .lp-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--lp-muted);
}

.lp-health-tab[aria-selected="true"] {
  border-top-color: var(--lp-gold);
}

.lp-health-tab[aria-selected="true"] .lp-title {
  color: var(--lp-gold);
}

/* ── The topic chips ──────────────────────────────────────────────────────────────────────────── */

.lp-chip {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--lp-line-strong);
  background: transparent;
  color: var(--lp-muted);
}

.lp-chip[aria-pressed="true"] {
  background: var(--lp-gold);
  border-color: var(--lp-gold);
  color: #1A140F;
  font-weight: 600;
}

/* ── The "Help shape Become" panel ──────────────────────────────────────────────────────────────
   Hidden by the attribute until it is opened, so a visitor with no JavaScript never sees a panel
   they cannot close. When it opens, the module removes the attribute and adds .lp-open on the next
   frame, which is what lets the slide have something to slide from. */

#lp-overlay {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: rgba(10, 8, 6, 0.62);
}

#lp-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--lp-bg);
  border-left: 1px solid var(--lp-line);
  box-shadow: -30px 0 80px -40px rgba(0, 0, 0, 0.9);
  transform: translateX(101%);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* An author rule, so the attribute wins over the display:flex above rather than losing to it. */
#lp-panel[hidden] {
  display: none;
}

#lp-panel.lp-open {
  transform: translateX(0);
}

.lp-panel-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* The page behind the panel does not scroll while it is open. Set by the module, removed on
   close - including when it closes because the visitor pressed Escape. */
body.lp-locked {
  overflow: hidden;
}

/* ── The little stacks ────────────────────────────────────────────────────────────────────────── */

.lp-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lp-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lp-note-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Everything the module hides with the attribute. The attribute needs naming here: on its own the
   agent's [hidden] rule loses to an author display:, so a hidden note form would still be laid
   out. Both sides are author rules, so the id wins. */
#lp-note[hidden],
#lp-sent[hidden],
#lp-follow-form[hidden],
#lp-follow-done[hidden] {
  display: none;
}

/* ── The "Have your say" tab and bar ────────────────────────────────────────────────────────────
   The module chooses which of the two exists past the hero, by the same 760 the stylesheet uses.
   These two rules are the belt to that braces: whichever one a mistake leaves showing still
   obeys the width. */

@media (max-width: 759.98px) {
  #lp-tab {
    display: none;
  }
}

@media (min-width: 760px) {
  #lp-bar {
    display: none;
  }
}

/* ── Shared behaviour ─────────────────────────────────────────────────────────────────────────── */

#lp :focus-visible,
#lp-panel :focus-visible {
  outline: 2px solid var(--lp-gold);
  outline-offset: 2px;
}

#lp a,
#lp-panel a {
  color: var(--lp-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

#lp ::placeholder {
  color: #6E6152;
}

#lp-panel ::placeholder {
  color: #6E6152;
}

@media (prefers-reduced-motion: reduce) {
  #lp-panel {
    transition: none;
  }

  #lp-health [data-lp-healthclip] {
    transition: none;
  }
}