/* =============================================================================
   PAGONI — DECK CHROME & COLOUR

   Two jobs:
     1. Dress the page as a deck — a presenter bar and a safe-area frame — so
        that what this company makes is legible before a word is read.
     2. Put the rest of the palette back. The site had drifted into one colour:
        everything was teal-green on teal-green, and four of the six threads
        were doing nothing. Each block now carries an accent from the chart.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. SECTION ACCENTS

   --accent is a per-block colour, taken from the thread chart and cycled so no
   two neighbours share one. Rules reference the variable, never the value, so
   re-colouring a block is one line here.

   NOT gradients. Flat colour, in small quantities, on the parts of a block that
   are already asking to be looked at: the eyebrow, the rule, the numbers.
   ----------------------------------------------------------------------------- */
[data-section]            { --accent: var(--raw-mint-500); }
[data-section="product"]  { --accent: var(--raw-chart-400); }
[data-section="uses"]     { --accent: var(--raw-royal-800); --accent-lit: #4d6fd4; }
[data-section="manifesto"]{ --accent: var(--raw-chart-400); }
[data-section="integrations"] { --accent: var(--raw-jade-700); --accent-lit: #23c98c; }
[data-section="pricing"]  { --accent: var(--raw-olive-600); --accent-lit: var(--raw-chart-400); }
[data-section="proof"]    { --accent: var(--raw-royal-800); --accent-lit: #4d6fd4; }
[data-section="faq"]      { --accent: var(--raw-mint-500); }
[data-section="outro"]    { --accent: var(--raw-chart-400); }

/* A readable version of the accent, for type. Royal blue at its thread value is
   too dark to set text in on this ground, so blocks that use it declare a lit
   variant above and this falls back to the accent everywhere else. */
[data-section] { --accent-text: var(--accent-lit, var(--accent)); }

/* The eyebrow is the one place every block already had a colour. It now carries
   the block's own. */
.sectionHead__eyebrow { color: var(--accent-text); }

/* -----------------------------------------------------------------------------
   2. THE SAFE-AREA FRAME
   Four corner ticks, the way a slide editor marks the edge of the canvas. It is
   the quietest possible way to say "you are looking at a slide".
   ----------------------------------------------------------------------------- */
.deckframe {
  position: fixed;
  inset: 1.25rem 1.25rem 3.5rem;
  z-index: 30;
  pointer-events: none;
}
.deckframe__tick {
  position: absolute;
  width: 0.75rem;
  height: 0.75rem;
  border: 1px solid var(--raw-ink-050-a16);
}
.deckframe__tick--tl { top: 0;    left: 0;  border-right: 0; border-bottom: 0; }
.deckframe__tick--tr { top: 0;    right: 0; border-left: 0;  border-bottom: 0; }
.deckframe__tick--bl { bottom: 0; left: 0;  border-right: 0; border-top: 0; }
.deckframe__tick--br { bottom: 0; right: 0; border-left: 0;  border-top: 0; }

/* -----------------------------------------------------------------------------
   3. THE PRESENTER BAR
   Slide number, progress, slide name. Exactly what presenter software puts at
   the bottom of the screen, because that is the point.
   ----------------------------------------------------------------------------- */
.deckbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
  display: flex;
  align-items: center;
  gap: var(--raw-spacing-md);
  padding: 0.75rem var(--raw-spacing-page);
  pointer-events: none;

  font-family: var(--typeface-mono);
  font-size: var(--raw-text-micro);
  letter-spacing: var(--raw-tracking-micro);
  text-transform: uppercase;

  background: linear-gradient(to top, rgb(3 12 11 / 0.86), transparent);
}

.deckbar__count { flex: none; color: var(--accent-text, var(--foreground-signal)); }
.deckbar__num { font-size: 0.8125rem; }
.deckbar__of { color: var(--foreground-faint); margin-left: 0.25rem; }

.deckbar__track {
  flex: 1;
  height: 1px;
  background: var(--raw-ink-050-a16);
  overflow: hidden;
}
.deckbar__fill {
  display: block;
  height: 100%;
  background: var(--accent-text, var(--foreground-signal));
  transform-origin: left;
  transform: scaleX(0);
}

.deckbar__name {
  flex: none;
  min-width: 9rem;
  text-align: right;
  color: var(--foreground-muted);
}
.deckbar__name.is-swapping { animation: deckName 0.32s var(--raw-ease-entrance) both; }
@keyframes deckName {
  from { opacity: 0; transform: translateY(0.35rem); }
  to   { opacity: 1; transform: none; }
}

/* The bar reads the accent of whatever slide you are on. */
html[data-slide="product"]      .deckbar { --accent-text: var(--raw-chart-400); }
html[data-slide="uses"]         .deckbar { --accent-text: #4d6fd4; }
html[data-slide="manifesto"]    .deckbar { --accent-text: var(--raw-chart-400); }
html[data-slide="integrations"] .deckbar { --accent-text: #23c98c; }
html[data-slide="pricing"]      .deckbar { --accent-text: var(--raw-chart-400); }
html[data-slide="proof"]        .deckbar { --accent-text: #4d6fd4; }
html[data-slide="faq"]          .deckbar { --accent-text: var(--raw-mint-500); }

/* -----------------------------------------------------------------------------
   4. SLIDE NUMBERS ON THE SECTIONS
   Each block wears its own number, bottom-left, the way a slide does.
   ----------------------------------------------------------------------------- */
.flow__section { counter-increment: slide; }
.flow { counter-reset: slide; }

.flow__section::after {
  content: counter(slide, decimal-leading-zero);
  position: absolute;
  left: var(--raw-spacing-page);
  bottom: 3.5rem;
  z-index: 4;
  font-family: var(--typeface-mono);
  font-size: var(--raw-text-micro);
  letter-spacing: var(--raw-tracking-micro);
  color: var(--foreground-faint);
  opacity: 0.55;
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
   NARROW
   ----------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .deckframe { display: none; }
  .deckbar__name { display: none; }
  .flow__section::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .deckbar__name.is-swapping { animation: none; }
}