/* RevoHub — futuristic-on-light behaviour layer.
   Tokens come from theme.json (--wp--preset--*, --wp--custom--*).
   This file holds only what theme.json cannot express: the decorative
   layers, glass fallbacks, keyframes, and the reduced-motion contract.

   Rule of the system: every effect below is decorative. Nothing here
   carries meaning that is not also in text, and nothing here reduces
   the measured contrast of the content above it. */

/* ============================================================
   1. Decorative layers — A: grid, E: mesh
   All aria-hidden and pointer-events:none in markup.
   ============================================================ */

/* Decorative layers are absolute EARLIER siblings of the content wrapper.
   Positioned elements paint above static content regardless of z-index, so the
   layers must be pinned to z-index 0 AND the content lifted to 1 (see the
   .rh-wrap rule in components.css). Without both, the white scrim veils the
   text it exists to protect. */
.rh-layer{position:absolute;inset:0;pointer-events:none;z-index:0}

/* A. Technical grid / HUD canvas. 44px pitch, fading out at the edges. */
.rh-grid{
  background-image:
    linear-gradient(to right, var(--wp--custom--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--wp--custom--grid-line) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 35%, #000 0%, transparent 100%);
          mask-image:radial-gradient(70% 70% at 50% 35%, #000 0%, transparent 100%);
}
.rh-grid--dots{
  background-image:radial-gradient(var(--wp--custom--grid-line) 1.5px, transparent 1.5px);
  background-size:24px 24px;
}

/* E. Gradient mesh + the white scrim that protects text contrast.
   The scrim is not optional — it is what keeps body copy at its measured ratio. */
.rh-mesh{background:var(--wp--preset--gradient--mesh-hero)}
.rh-mesh--soft{background:var(--wp--preset--gradient--mesh-section)}
.rh-scrim{background:var(--wp--custom--scrim)}

/* Slow-drifting blobs. Capped at two per screen; frozen under reduced motion. */
.rh-blob{
  position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;
  animation:rh-drift var(--wp--custom--duration--drift) ease-in-out infinite alternate;
}
.rh-blob--mint{background:radial-gradient(circle, rgba(110,231,183,.28), transparent 70%)}
.rh-blob--green{background:radial-gradient(circle, rgba(131,195,84,.22), transparent 70%);animation-delay:-14s}

@keyframes rh-drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(4%,-3%,0) scale(1.12)}
}

/* ============================================================
   2. B: signal line — skills -> pathway -> role
   ============================================================ */

.rh-signal{overflow:visible}
.rh-signal__line{
  fill:none;stroke:var(--wp--custom--signal-core);stroke-width:1.5;
  stroke-linecap:round;
  filter:drop-shadow(0 0 6px var(--wp--custom--signal-halo));
}
/* The "draw" — runs once when the section reveals. */
.rh-signal__line--draw{
  stroke-dasharray:var(--rh-len,600);
  stroke-dashoffset:var(--rh-len,600);
}
.is-revealed .rh-signal__line--draw{
  transition:stroke-dashoffset var(--wp--custom--duration--draw) var(--wp--custom--easing--out);
  stroke-dashoffset:0;
}
/* The "flow" — a short dash travelling the drawn path, 5s loop. */
.rh-signal__flow{
  fill:none;stroke:var(--wp--custom--signal-core);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:14 260;
  filter:drop-shadow(0 0 8px var(--wp--custom--signal-halo));
  animation:rh-flow 5s linear infinite;
}
@keyframes rh-flow{to{stroke-dashoffset:-274}}

.rh-signal__node{fill:var(--wp--custom--signal-core);filter:drop-shadow(0 0 6px var(--wp--custom--signal-halo))}

/* Thin animated divider between major sections. */
.rh-divider{height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,var(--wp--preset--color--green-200) 20%,var(--wp--preset--color--green-400) 50%,var(--wp--preset--color--green-200) 80%,transparent)}

/* ============================================================
   3. Glass / HUD surfaces — C
   ============================================================ */

.rh-glass{
  background:var(--wp--custom--glass-fill);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
          backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid var(--wp--custom--glass-border);
  border-radius:var(--wp--custom--radius--hud);
  box-shadow:var(--wp--preset--shadow--glow-strong);
}
/* Mandatory fallback: text must never sit on an unblurred transparent panel. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .rh-glass{background:var(--wp--preset--color--surface)}
}

/* HUD corner brackets — the L-shaped ticks. Decorative. */
.rh-hud{position:relative}
.rh-hud::before,.rh-hud::after{
  content:"";position:absolute;width:14px;height:14px;pointer-events:none;
  border-color:var(--wp--preset--color--green-400);border-style:solid;border-width:0;
}
.rh-hud::before{top:10px;left:10px;border-top-width:1.5px;border-left-width:1.5px}
.rh-hud::after{bottom:10px;right:10px;border-bottom-width:1.5px;border-right-width:1.5px}

/* ============================================================
   4. The mono "data voice"
   ============================================================ */

.rh-mono{
  font-family:var(--wp--preset--font-family--mono);
  font-size:var(--wp--preset--font-size--eyebrow);
  font-weight:600;
  letter-spacing:var(--wp--custom--letter-spacing--eyebrow);
  text-transform:uppercase;
  color:var(--wp--preset--color--green-700);
}
.rh-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:var(--wp--custom--radius--pill);
  background:var(--wp--preset--color--green-50);
  color:var(--wp--preset--color--green-800); /* 6.82:1 on green-50 — green-700 measures 4.32 and misses AA */
  font-family:var(--wp--preset--font-family--mono);
  font-size:12px;font-weight:500;letter-spacing:.04em;
}

/* ============================================================
   5. Two-tone heading — the signature
   Glow only on spans >= 28px so contrast is unaffected.
   ============================================================ */

.rh-em{color:var(--wp--preset--color--green-700)}
@media (min-width:640px){
  h1 .rh-em,h2 .rh-em{text-shadow:0 0 20px rgba(131,195,84,.35)}
}

/* ============================================================
   6. Meters, counters, shimmer — D
   ============================================================ */

.rh-meter{height:10px;border-radius:var(--wp--custom--radius--pill);background:var(--wp--preset--color--green-200);overflow:hidden}
.rh-meter__fill{
  height:100%;border-radius:inherit;
  background:var(--wp--preset--color--green-500);
  box-shadow:var(--wp--preset--shadow--glow-edge);
  width:var(--rh-value,0%);
  transition:width 900ms var(--wp--custom--easing--out);
}
/* Travelling sheen along the fill. */
.rh-meter__fill::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,var(--wp--custom--signal-halo),transparent);
  animation:rh-sheen 2.6s linear infinite;
}
.rh-meter__fill{position:relative}
@keyframes rh-sheen{from{transform:translateX(-100%)}to{transform:translateX(200%)}}

/* D. "AI analyzing" shimmer — plays once per card on first scroll-in. */
.rh-analyzing{position:relative;overflow:hidden}
.rh-analyzing::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(131,195,84,.16) 50%,transparent 70%);
  transform:translateX(-100%);
  animation:rh-sweep 1400ms var(--wp--custom--easing--out) 1 forwards;
}
.rh-analyzing.is-resolved::after{animation:none;opacity:0}
@keyframes rh-sweep{to{transform:translateX(100%)}}

/* ============================================================
   7. Cards, flip cards
   ============================================================ */

.rh-card{
  background:var(--wp--preset--color--surface);
  border:1px solid var(--wp--preset--color--green-200);
  border-radius:var(--wp--custom--radius--card);
  box-shadow:var(--wp--preset--shadow--md);
  transition:box-shadow var(--wp--custom--duration--fast) ease-out,
             transform var(--wp--custom--duration--fast) ease-out,
             border-color var(--wp--custom--duration--fast) ease-out;
}
.rh-card:hover{box-shadow:var(--wp--preset--shadow--lg);transform:translateY(-2px);border-color:var(--wp--preset--color--green-400)}

/* Signal line that lights along the top edge on hover. */
.rh-card--signal{position:relative;overflow:hidden}
.rh-card--signal::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1.5px;
  background:linear-gradient(90deg,transparent,var(--wp--custom--signal-core),transparent);
  box-shadow:var(--wp--preset--shadow--glow-edge);
  opacity:0;transition:opacity var(--wp--custom--duration--fast) ease-out;
}
.rh-card--signal:hover::before,.rh-card--signal:focus-within::before{opacity:1}

/* Flip card. Height comes from the front face, never a fixed value. */
.rh-flip{width:100%;display:flex;padding:0;border:0;background:none;cursor:pointer;perspective:1400px;text-align:left;font:inherit}
.rh-flip__inner{position:relative;display:flex;flex-direction:column;flex:1 1 auto;width:100%;
  transform-style:preserve-3d;transition:transform var(--wp--custom--duration--flip) var(--wp--custom--easing--flip)}
.rh-flip[aria-expanded="true"] .rh-flip__inner{transform:rotateY(180deg)}
.rh-flip__face{backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--wp--custom--radius--card)}
.rh-flip__face--front{position:relative;flex:1 1 auto;display:flex;flex-direction:column}
.rh-flip__face--back{position:absolute;inset:0;transform:rotateY(180deg);display:flex;flex-direction:column;
  background:var(--wp--preset--color--green-50);border:1px solid var(--wp--preset--color--green-400)}
/* The edge lights while the card is turning. */
.rh-flip:hover .rh-flip__inner,.rh-flip:focus-visible .rh-flip__inner{box-shadow:var(--wp--preset--shadow--glow-edge)}

/* ============================================================
   8. Focus — never removed, mint on dark panels
   ============================================================ */

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--wp--preset--color--green-700);outline-offset:2px;border-radius:4px;
}
.rh-panel-dark :where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline-color:var(--wp--preset--color--mint);
}

/* Dark HUD surface (footer, hero chrome). */
.rh-panel-dark{background:var(--wp--preset--color--hud-panel);color:var(--wp--preset--color--surface)}
.rh-panel-dark a{color:var(--wp--preset--color--green-100)}
.rh-panel-dark a:hover{color:var(--wp--preset--color--surface)}

/* ============================================================
   9. Section reveal — fade up + the underline that draws
   ============================================================ */

[data-reveal]{opacity:0;transform:translateY(16px);
  transition:opacity 500ms var(--wp--custom--easing--out), transform 500ms var(--wp--custom--easing--out)}
[data-reveal].is-revealed{opacity:1;transform:none}

.rh-underline{position:relative;padding-bottom:12px}
.rh-underline::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;
  background:var(--wp--custom--signal-core);box-shadow:var(--wp--preset--shadow--glow-edge);
  transition:width 700ms var(--wp--custom--easing--out) 150ms;
}
.is-revealed .rh-underline::after,.rh-underline.is-revealed::after{width:96px}

/* ============================================================
   10. Copilot pill — a visual promise, routed to the assessment
   ============================================================ */

.rh-copilot{white-space:nowrap;position:fixed;right:24px;bottom:24px;z-index:50;display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:12px 20px;border-radius:var(--wp--custom--radius--pill);
  background:var(--wp--custom--glass-fill);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--wp--custom--glass-border);box-shadow:var(--wp--preset--shadow--glow);
  color:var(--wp--preset--color--green-800);font-weight:600;font-size:15px;text-decoration:none}
.rh-copilot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--wp--custom--signal-core);
  box-shadow:0 0 0 0 var(--wp--custom--signal-halo);animation:rh-pulse 2.4s ease-out infinite}
@keyframes rh-pulse{to{box-shadow:0 0 0 12px rgba(110,231,183,0)}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .rh-copilot{background:var(--wp--preset--color--surface)}
}

/* ============================================================
   11. Marquee
   ============================================================ */

.rh-marquee{display:flex;gap:24px;width:max-content;animation:rh-marquee 70s linear infinite}
.rh-marquee__wrap:hover .rh-marquee,.rh-marquee__wrap:focus-within .rh-marquee{animation-play-state:paused}
@keyframes rh-marquee{to{transform:translateX(-50%)}}

/* ============================================================
   12. Responsive — shed futuristic load on small screens
   ============================================================ */

@media (max-width:767px){
  /* Blur is the expensive part on mobile GPUs; drop to solid surfaces. */
  .rh-glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--wp--preset--color--surface)}
  .rh-blob,.rh-nodes{display:none}
  .rh-grid{background-size:32px 32px;opacity:.6}
}

/* ============================================================
   13. prefers-reduced-motion — ship-blocking, disables everything
   The page must be complete and legible with zero motion.
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1 !important;transform:none !important}
  .rh-underline::after{width:96px}
  .rh-signal__line--draw{stroke-dashoffset:0}
  .rh-signal__flow,.rh-blob,.rh-meter__fill::after,.rh-analyzing::after{display:none;animation:none}
  .rh-meter__fill{transition:none}
  /* Flip becomes a cross-fade — no 3D rotation. */
  .rh-flip__inner{transform:none !important}
  .rh-flip__face{transition:opacity 1ms linear}
  .rh-flip__face--back{transform:none;opacity:0}
  .rh-flip[aria-expanded="true"] .rh-flip__face--front{opacity:0}
  .rh-flip[aria-expanded="true"] .rh-flip__face--back{opacity:1}
  .rh-copilot::before{animation:none}
}