/* =================================================================
   Particle-title component styles.
   Class prefix: rvt-pt-
   Loaded by app_home_prototype/_particle_title.html.

   Progressive-enhancement model:
     1. The <h1> contains real, crawlable, screen-reader-readable HTML
        text styled to match the canvas paint (same font, weight,
        per-part theme colors).
     2. A transparent <canvas> sits absolutely on top.
     3. The particle JS paints the canvas after the font loads, then
        adds `.is-ready` to the <h1>. From that moment the underlying
        HTML text fades to 0 (transition for smoothness) and only the
        canvas effect is visible. Text stays in the DOM for SEO + AT.
   ================================================================= */

.rvt-pt-domain {
  position: relative;
  z-index: 1;
  display: block;
  line-height: 1;
  margin: 0;
}

.rvt-pt-canvas-wrap {
  position: relative;
  display: inline-block;
  width:  clamp(380px, 56vw, 620px);
  /* Never exceed the host column. At certain browser-zoom levels the left
     column narrows below the clamp width, and the canvas (which does not
     reflow like text) used to overflow into the doc-card preview on the
     right. The JS resize handler re-renders and auto-shrinks the font to the
     capped width, so the title scales to fit like real text instead. */
  max-width: 100%;
  height: clamp(76px,  9.2vw, 124px);
  vertical-align: baseline;
}

/* The real H1 text — present in the DOM (crawlers + screen readers see
   it), but visually hidden by default to eliminate the font-load FOUC
   (otherwise the user briefly sees the text render in the fallback
   font, then in Bricolage Grotesque, then fade to canvas — three
   visual states in ~200ms = jarring).
   The <noscript> override below makes it visible for no-JS users, and
   crawlers index the H1's text content regardless of CSS opacity. */
.rvt-pt-text {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-family: 'Bricolage Grotesque', var(--font-sans);
  font-size: clamp(64px, 8.8vw, 110px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}
.rvt-pt-text-part {
  display: inline-block;
}

.rvt-pt-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

/* `.is-ready` is added by the JS after first canvas paint. Currently no
   visual styling hangs off it (the text is already hidden by default),
   but the hook is kept for any future state-dependent rules. */

/* ---- Size modifiers ----------------------------------------------------
   Add one of these as `size_class` when including the partial to override
   the default clamped dimensions for narrower or wider surfaces. The JS
   auto-shrinks the canvas font if rendered text overflows; the underlying
   .rvt-pt-text follows the same font-size rules so the pre-paint render
   matches the post-paint render at all viewport sizes. */
.rvt-pt-domain--lg .rvt-pt-canvas-wrap {
  width:  clamp(460px, 76vw, 880px);
  height: clamp(92px,  10.4vw, 152px);
}
.rvt-pt-domain--lg .rvt-pt-text {
  font-size: clamp(72px, 9.6vw, 134px);
}

.rvt-pt-domain--md .rvt-pt-canvas-wrap {
  width:  clamp(300px, 44vw, 480px);
  height: clamp(58px,  7vw,    92px);
}
.rvt-pt-domain--md .rvt-pt-text {
  font-size: clamp(48px, 6.6vw, 84px);
}

.rvt-pt-domain--sm .rvt-pt-canvas-wrap {
  width:  clamp(240px, 36vw, 380px);
  height: clamp(44px,  5.4vw, 70px);
}
.rvt-pt-domain--sm .rvt-pt-text {
  font-size: clamp(36px, 5vw, 62px);
}