/* ==========================================================================
   home.css — the "Oh!" frame. Graphite catalog; the products bring the color.
   Palette traceability: see NOTES-source-analysis.md §4.
   ========================================================================== */

/* ---- hero ------------------------------------------------------------------ */
.home-hero {
  padding-block: clamp(4rem, 12vh, 9rem) clamp(3rem, 8vh, 6rem);
}
.wordmark {
  font-size: clamp(5.5rem, 22vw, 15rem);
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: -0.04em;
  line-height: 0.85;
}
.wordmark .bang {
  color: var(--accent);
  position: relative;
  display: inline-block;
}
/* The WebGL glyph sits exactly on the CSS one's box, so layout never
   shifts; the CSS "!" is hidden only once the canvas is actually up. */
/* A canvas is a replaced element: with width:auto an absolutely positioned
   one keeps its intrinsic 300x150 and ignores right/bottom, so the box has
   to be stated explicitly. The extra size past the glyph's text box leaves
   room for the bevel highlight and light spill. */
.bang-gl {
  position: absolute;
  left: -26%;
  top: -9%;
  width: 152%;
  height: 118%;
}
.bang-mount.bang-gl-on { color: transparent; }

/* ---- the exclamation motif: one idea, used everywhere ---------------------- */
/* list bullets */
.bang-list { list-style: none; padding: 0; }
.bang-list li {
  position: relative;
  padding-inline-start: 1.4em;
}
.bang-list li::before {
  content: "!";
  position: absolute;
  left: 0;
  font-weight: 900;
  font-stretch: 125%;
  color: var(--accent);
}
/* nav hover marker */
.site-header nav a { position: relative; }
.site-header nav a::before {
  content: "!";
  position: absolute;
  left: -0.7em;
  font-weight: 900;
  color: var(--accent);
  opacity: 0;
  transform: translateY(0.15em);
  transition: opacity 0.14s ease-out, transform 0.14s ease-out;
}
.site-header nav a:hover::before,
.site-header nav a:focus-visible::before {
  opacity: 1;
  transform: translateY(0);
}
/* loading indicator: three marks pulsing in sequence */
.bang-loading {
  display: inline-flex;
  gap: 0.25em;
  font-weight: 900;
  color: var(--accent);
}
.bang-loading i {
  font-style: normal;
  animation: bang-pulse 1.1s ease-in-out infinite;
}
.bang-loading i:nth-child(2) { animation-delay: 0.16s; }
.bang-loading i:nth-child(3) { animation-delay: 0.32s; }
@keyframes bang-pulse {
  0%, 70%, 100% { opacity: 0.25; }
  35% { opacity: 1; }
}
.hero-line {
  margin-block-start: var(--space-3);
  font-size: var(--step-1);
  color: var(--muted);
  max-width: 44ch;
}

/* ---- product blocks: two large features, not cards ------------------------- */
.product-block { padding-block: var(--space-5); }
.product-block .container {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}
@media (min-width: 52rem) {
  .product-block .container { grid-template-columns: 5fr 7fr; }
  .block-comber .product-copy { order: 2; }
}
.product-block h2 { font-size: var(--step-3); margin-block: var(--space-1) var(--space-2); }
.product-block p { margin-block-end: var(--space-3); }

/* Chord block — the launch product. A hint of the Oh a Chord world: the
   app's graphite panel, cream legends, its orange accentLit, and the walnut
   the app derives its grain from (see css/chord.css). */
.block-chord {
  background: linear-gradient(#2e2e33, #2b2b30);   /* app panel gradient */
  border-block: 1px solid #1a1a1d;
  position: relative;
}
/* walnut edge, quoting the app's wood.base treatment */
.block-chord::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: linear-gradient(#8a5a37, #4a2e19);
}
.block-chord .kicker { color: #b9b2a2; }
.block-chord h2 { color: #ece5d5; }
.block-chord p { color: #b9b2a2; }
.block-chord .btn-ghost { background: transparent; color: #ece5d5; border-color: #85858e; }
.block-chord .btn-ghost:hover { border-color: #ece5d5; }
.block-chord .media-slot .frame {
  background: #232327;
  border-color: #1a1a1d;
}

/* the "coming soon" / "in the App Store soon" flag above a heading */
.status-flag {
  display: inline-block;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.25em 0.85em;
}
.product-block .status-flag,
.soon-card .status-flag {
  margin-block: var(--space-1) 0;
}
.block-chord .status-flag { color: #e0a33b; }

/* ---- coming soon: two quiet placeholders, deliberately smaller than the
   launch product above them ---------------------------------------------- */
.coming-soon {
  border-block-start: 1px solid var(--rule);
  padding-block: var(--space-5);
}
.coming-soon h2 { font-size: var(--step-2); }
.soon-intro {
  color: var(--muted);
  margin-block: var(--space-2) var(--space-4);
  max-width: 56ch;
}
.soon-grid {
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 46rem) {
  .soon-grid { grid-template-columns: 1fr 1fr; }
}
.soon-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
/* each card keeps its product's accent, at kicker scale only */
.card-synth .kicker,
.card-synth .status-flag { color: #ff5a3c; }
.card-comber .kicker,
.card-comber .status-flag { color: #4ade80; }
.soon-card .kicker {
  font-size: var(--step-0);
  letter-spacing: 0.12em;
}
.soon-blurb {
  color: var(--paper);
  margin-block: var(--space-1) var(--space-2);
}
.soon-card .form-fallback { margin-block-start: auto; }
.soon-card form { max-width: none; }
.soon-card .btn { background: var(--paper); color: var(--bg); }
.card-synth .btn { background: #ff5a3c; color: #141416; }
.card-comber .btn { background: #4ade80; color: #0a0f0d; }

/* ---- maker — deliberately small -------------------------------------------- */
.maker {
  padding-block: var(--space-5);
  text-align: center;
}
.maker p { margin-inline: auto; color: var(--muted); }
.maker a { color: var(--paper); }