/* ============================================================================
   Reddenda — PERF ULTRA LAYER · perf-ultra.css
   ----------------------------------------------------------------------------
   The "extraordinary" visual layer for the /perf-* pages. Pairs with
   perf-ultra.js. It is a PURE PROGRESSIVE-ENHANCEMENT skin layered ON TOP of
   ros-v3.css + perf.css + perf-motion.css. It introduces only NEW pu-*
   namespaced hooks, so it can never double-bind or restyle anything owned by
   ros-v3-motion.js, perf-nav.js, or perf-motion.js.

   CONTRACT (binding, same as the rest of the perf stack)
     • LIGHT THEME ONLY. Every color resolves from the ros-v3 light keystone
       (--cc-* / --ros3-* / --teal-cta) so the page stays the one visible white
       version. No dark surface is ever painted.
     • TRANSFORM / OPACITY ONLY for motion (compositor-friendly, 60fps). No
       layout-thrash properties are animated.
     • REDUCED-MOTION SAFE. Under prefers-reduced-motion every decorative motion
       is neutralised and every final state is shown. Nothing is ever hidden by
       this file without JS — these rules only "arm" once JS adds html.pu-on.
     • UNIVERSAL DEVICE. 320px → 1440px, no horizontal scroll, all the heavy
       cursor/tilt/particle effects are gated to (hover:hover)+(pointer:fine)
       by the JS, so touch devices get the calm version.
     • NO em dashes baked into rendered content (this is CSS; copy lives in HTML).

   PALETTE (resolved from the keystone, with safe fallbacks)
       teal CTA   #077A70     accent   #0FB5A6     deep   #0A8E83
   ========================================================================== */

:root{
  --pu-teal:var(--teal-cta,#077A70);
  --pu-accent:var(--ros3-accent,#0FB5A6);
  --pu-deep:var(--ros3-accent-2,#0A6B5F);
  --pu-ink:var(--cc-fg,#0B1220);
  --pu-faint:var(--cc-fg-faint,#4D545D);
  --pu-line:rgba(7,122,112,.16);
  --pu-glow:rgba(15,181,166,.32);
}

/* These rules only take effect once JS has booted and added html.pu-on, so a
   no-JS or reduced-motion visitor never sees a half-built state. */

/* ── 1. SCROLL PROGRESS BAR (top edge) ─────────────────────────────────────
   A 2px gradient bar that fills left→right with scroll depth. Injected by JS
   as <div class="pu-progress">. Fixed, pointer-events:none, never intercepts.  */
.pu-progress{
  position:fixed;top:0;left:0;right:0;height:2.5px;z-index:9999;
  pointer-events:none;transform-origin:0 50%;
  transform:scaleX(var(--pu-p,0));
  background:linear-gradient(90deg,var(--pu-teal),var(--pu-accent) 60%,var(--pu-deep));
  box-shadow:0 0 12px var(--pu-glow);
  opacity:0;transition:opacity .4s ease;
}
html.pu-on .pu-progress{opacity:1}

/* ── 2. SPOTLIGHT CURSOR (fine-pointer only) ───────────────────────────────
   A soft radial glow that trails the cursor, painted UNDER content via a fixed
   layer with mix-blend so it warms the white page without obscuring text. JS
   only mounts it on (hover:hover)+(pointer:fine), and removes it under
   reduced-motion.                                                             */
.pu-spotlight{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:0;transition:opacity .5s ease;
  background:radial-gradient(220px circle at var(--pu-mx,50%) var(--pu-my,50%),
    rgba(15,181,166,.10), rgba(15,181,166,.045) 40%, transparent 62%);
  mix-blend-mode:multiply;
}
html.pu-on.pu-fine .pu-spotlight{opacity:1}

/* ── 3. MAGNETIC BUTTONS ───────────────────────────────────────────────────
   JS adds .pu-magnetic to eligible CTAs and drives --pu-tx/--pu-ty (px) as the
   cursor nears. We layer a sheen sweep + lift. We deliberately do NOT restyle
   color/background (that is owned by .ph-btn--primary / .btn--primary), only
   transform + a decorative ::after sheen, so the CTA's AA contrast is intact.  */
.pu-magnetic{
  position:relative;
  transform:translate3d(var(--pu-tx,0),var(--pu-ty,0),0);
  transition:transform .22s cubic-bezier(.22,.61,.36,1),
             box-shadow .22s ease;
  will-change:transform;
}
.pu-magnetic::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.42) 50%,transparent 70%);
  background-size:240% 100%;background-position:140% 0;
  opacity:0;transition:opacity .3s ease;
}
.pu-magnetic:hover::after{opacity:1;animation:pu-sheen 1.1s ease forwards}
@keyframes pu-sheen{from{background-position:140% 0}to{background-position:-40% 0}}

/* ── 4. 3D TILT CARDS ──────────────────────────────────────────────────────
   JS tags eligible cards .pu-tilt and drives --pu-rx/--pu-ry (deg) from the
   cursor position, plus --pu-gx/--pu-gy for a glare highlight. The perspective
   is set on the element itself so siblings are unaffected.                    */
.pu-tilt{
  transform:perspective(900px)
            rotateX(var(--pu-rx,0deg))
            rotateY(var(--pu-ry,0deg))
            translateZ(0);
  transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s ease;
  transform-style:preserve-3d;will-change:transform;
}
.pu-tilt.is-tilting{box-shadow:0 26px 60px -28px rgba(10,107,95,.45)}
.pu-tilt > .pu-glare{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(180px circle at var(--pu-gx,50%) var(--pu-gy,50%),
    rgba(255,255,255,.55),transparent 60%);
  opacity:0;transition:opacity .25s ease;mix-blend-mode:soft-light;
}
.pu-tilt.is-tilting > .pu-glare{opacity:.9}

/* ── 5. HERO CANVAS (particle / rate-intelligence field) ───────────────────
   A low-density connected-dot canvas painted behind the hero copy. JS injects
   <canvas class="pu-hero-canvas"> as the first child of the hero. It sits at
   z-index 0 so all hero copy (z-index 1+) stays on top and clickable.         */
.pu-hero-canvas{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.1s ease;
}
html.pu-on .pu-hero-canvas{opacity:.62}
/* the host hero gets a positioning context + keeps its own copy above */
.pu-hero-host{position:relative}
.pu-hero-host > :not(.pu-hero-canvas):not(.pu-hero-grid){position:relative;z-index:1}

/* faint engineered grid wash behind the hero (pseudo, zero markup risk) */
.pu-hero-grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  transition:opacity 1s ease;
  background-image:
    linear-gradient(var(--pu-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--pu-line) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 35%,transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 0%,#000 35%,transparent 78%);
}
html.pu-on .pu-hero-grid{opacity:1}

/* ── 6. DATA-VIZ PANEL (live rate-intelligence mini-chart) ─────────────────
   JS appends a compact "rate intelligence" bar panel — median vs P90 vs your
   rate — to the hero (or a designated [data-pu-dataviz] slot). It is purely
   illustrative of the RateScore concept (local peer median → P90 target) and
   carries the mandatory "Modeled, not guaranteed" disclaimer.                 */
.pu-dataviz{
  margin-top:26px;max-width:520px;padding:18px 18px 14px;
  border:1px solid var(--pu-line);border-radius:16px;
  background:linear-gradient(180deg,#fff, #F6FBFA);
  box-shadow:0 18px 50px -30px rgba(10,107,95,.35);
  opacity:0;transform:translateY(14px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1);
}
.pu-dataviz.is-in{opacity:1;transform:none}
.pu-dataviz__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 12px}
.pu-dataviz__title{font:700 13px/1.2 'Inter',system-ui,sans-serif;color:var(--pu-ink);letter-spacing:.01em}
.pu-dataviz__badge{font:600 11px/1 'Inter',system-ui,sans-serif;color:var(--pu-deep);
  background:rgba(15,181,166,.12);border:1px solid var(--pu-line);border-radius:999px;padding:5px 9px}
.pu-dv-row{display:grid;grid-template-columns:118px 1fr 64px;align-items:center;gap:10px;margin:9px 0}
.pu-dv-row__label{font:600 12px/1.2 'Inter',system-ui,sans-serif;color:var(--pu-faint)}
.pu-dv-track{position:relative;height:10px;border-radius:999px;background:rgba(7,122,112,.10);overflow:hidden}
.pu-dv-fill{position:absolute;inset:0 100% 0 0;border-radius:999px;
  transition:right 1.1s cubic-bezier(.22,.61,.36,1)}
.pu-dataviz.is-in .pu-dv-fill{right:calc(100% - var(--pu-w,0%))}
.pu-dv-fill--median{background:linear-gradient(90deg,#9FB3AE,#7E9B95)}
.pu-dv-fill--you{background:linear-gradient(90deg,#C98A2E,#E0A23C)}
.pu-dv-fill--p90{background:linear-gradient(90deg,var(--pu-teal),var(--pu-accent))}
.pu-dv-row__val{font:700 12px/1.2 'Inter',system-ui,sans-serif;color:var(--pu-ink);text-align:right}
.pu-dataviz__foot{margin:12px 0 0;font:500 10.5px/1.45 'Inter',system-ui,sans-serif;color:var(--pu-faint)}
.pu-dataviz__foot b{color:var(--pu-deep);font-weight:700}

/* ── 7. SCRAMBLE / DECODE TEXT ─────────────────────────────────────────────
   JS adds .pu-scramble to a chosen number/word and animates a brief glyph
   decode on first view. The container reserves width so there is no layout
   shift while it settles. Reduced-motion shows the final text immediately.    */
.pu-scramble{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── 8. SECTION REVEAL POLISH (additive, opt-in) ───────────────────────────
   A gentle clip+rise for nodes JS tags .pu-rise that ros-v3/perf-motion did
   not already claim. Never applied to a node already owning [data-v3-reveal]
   or .pf-cascade (the JS checks).                                             */
.pu-rise{opacity:0;transform:translateY(20px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.pu-rise.is-in{opacity:1;transform:none}

/* ── REDUCED MOTION + COARSE POINTER: neutralise everything decorative ─────── */
@media (prefers-reduced-motion: reduce){
  .pu-progress,.pu-spotlight,.pu-hero-canvas{display:none!important}
  .pu-magnetic,.pu-tilt{transform:none!important;transition:none!important}
  .pu-magnetic::after,.pu-tilt > .pu-glare{display:none!important}
  .pu-dataviz,.pu-rise{opacity:1!important;transform:none!important;transition:none!important}
  .pu-dataviz .pu-dv-fill{transition:none!important}
}
/* coarse / no-hover: kill the cursor-driven flourishes, keep the calm reveals */
@media (hover:none),(pointer:coarse){
  .pu-spotlight{display:none!important}
  .pu-magnetic{transform:none!important}
  .pu-magnetic::after{display:none!important}
  .pu-tilt{transform:none!important}
  .pu-tilt > .pu-glare{display:none!important}
}

/* hard safety: never allow this layer to create horizontal scroll */
.pu-progress,.pu-spotlight,.pu-hero-canvas,.pu-hero-grid{max-width:100vw}