/* Validated.Directory 2.0.0 · reviews and AI (DIR 2.0.0 part D, BEA-432). Loads after scene.css. The main act, at night:
   your own website beside three made-up reviews, and an AI assistant's answer that takes its facts from your pages and
   its one-sentence gist from the reviews, the specific review counting for more than the vague one. guide.js pins the
   run and sets each step's progress (--u1 to --u5) on the stage; this file turns those into motion, under html.m only.
   Still (reduced motion, scripts off): the finished picture. */

.rv { background: var(--canvas); color: var(--cream); }
.rv .gs-stage > .sky { z-index: 0; }
.rv .gs-stage > :not(.sky) { position: relative; z-index: 1; }
.rv .gs-head h2 { max-width: 16ch; color: var(--white); }
.rv .gs-tag { background: transparent; border-color: rgba(240, 230, 207, 0.5); color: var(--cream); }
.rv .gs-n { color: var(--cream-2); }
.rv .gs-k, .rv .gs-t { color: var(--cream); }
.rv .gs-steps > li { border-top-color: rgba(240, 230, 207, 0.22); }
.m .rv .gs-out { border-top-color: rgba(240, 230, 207, 0.24); }
.m .rv .gs-tk i { background: rgba(240, 230, 207, 0.2); }
.m .rv .gs-tk i.on { background: var(--gold-bright); }

.rv-art { width: min(100%, 560px); }
.rv-fx { display: none; }
.js .rv-fx { display: block; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.rv-pair { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 12px; }
.rv-k { font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }

/* Your website: the facts. */
.rv-site { position: relative; padding: 9px 10px 10px; background: var(--paper-hi); color: var(--ink); border: 1px solid rgba(35, 31, 26, 0.45); box-shadow: 0 26px 50px -28px rgba(0, 0, 0, 0.85); }
.rv-name { margin-top: 4px; font: 400 19px/1.1 var(--display); }
.rv-kind { margin-top: 3px; font: 600 11.5px/1.3 var(--sans); color: var(--ink-2); }
.rv-ls { display: grid; margin-top: 6px; }
.rv-ls > div { display: grid; gap: 2px; padding: 5px 0; border-top: 1px solid var(--rule-ink); }
.rv-ls dt { font: 500 9.5px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.rv-ls dd { font: 500 11.5px/1.25 var(--mono); }
.rv-ls dd .gv { display: inline-block; padding: 0 3px; margin-left: -3px; }

/* What customers say: three short reviews. */
.rv-revs { display: grid; gap: 7px; }
.rv-k2 { color: var(--cream-2); }
.rv-r { padding: 7px 9px 8px; background: var(--paper-hi); color: var(--ink); border: 1px solid rgba(35, 31, 26, 0.45); box-shadow: 0 20px 40px -26px rgba(0, 0, 0, 0.85); transition: opacity 0.45s, transform 0.45s, box-shadow 0.4s, border-color 0.4s; }
.rv-rk { font: 500 10px/1.2 var(--mono); letter-spacing: 0.06em; color: var(--ink-2); }
.rv-t { margin-top: 3px; font: 400 14.5px/1.22 var(--display); }
.rv-hl { padding: 0 2px; transition: background-color 0.35s, box-shadow 0.35s; }
.rv-hl.on, html:not(.m) .rv-hl { background: rgba(244, 196, 90, 0.4); box-shadow: inset 0 -1px 0 var(--gold-ink); }
.rv-spec.on { border-color: var(--gold-ink); }
.m .rv .gs-stage[data-k="4"] .rv-spec, .m .rv .gs-stage[data-k="5"] .rv-spec, html:not(.m) .rv-spec { border-color: var(--gold-ink); box-shadow: 0 0 0 1px var(--gold-bright), 0 20px 40px -26px rgba(0, 0, 0, 0.85); }
.m .rv .gs-stage[data-k="4"] #rv-1, .m .rv .gs-stage[data-k="5"] #rv-1 { opacity: 0.55; }

/* What the AI assistant answers: the facts line, then the gist, then the specific. */
.rv-ai { z-index: 2; margin-top: 44px; border-color: rgba(244, 196, 90, 0.5); }
.rv-q { margin-top: 5px; font: 400 16px/1.25 var(--display); color: var(--cream); }
.rv-f { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(240, 230, 207, 0.18); font: 500 11.5px/1.45 var(--mono); color: var(--cream); }
.rv-f b { font-weight: 500; color: var(--gold-bright); }
.rv-a { margin-top: 6px; font: 400 17px/1.28 var(--display); color: var(--white); }
.rv-a2 { font-size: 15px; color: var(--cream); }
.rv-src { display: inline-block; margin-left: 4px; padding: 1px 5px 2px; border: 1px solid rgba(244, 196, 90, 0.7); font: 500 9.5px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-bright); vertical-align: 2px; white-space: nowrap; }

/* Motion, from the scroll: the website arrives with step 1, its facts light and run to the answer. */
.m .rv .gs-stage { --a1: clamp(0, calc(var(--u1, 0) * 1.8), 1); }
.m .rv-site, .m .rv-k2 { opacity: var(--a1); transform: translateY(calc((1 - var(--a1)) * 14px)); }
.m .rv-ai { opacity: clamp(0, calc(var(--a1) * 2 - 0.6), 1); }

@media (max-width: 380px) {
  .rv-pair { gap: 9px; }
  .rv-site, .rv-r { padding-inline: 8px; }
  .rv-name { font-size: 17px; }
  .rv-ls dd { font-size: 10.5px; }
  .rv-t { font-size: 13.5px; }
  .rv-ai { margin-top: 38px; }
}
@media (max-width: 899px) and (max-height: 760px) {
  .m .rv .gs-head h2 { max-width: 20ch; }
  .m .rv-ai { margin-top: 34px; }
}
@media (min-width: 900px) {
  .rv .gs-stage { max-width: none; padding-left: var(--read-x); padding-right: var(--read-x); }
  .rv-art { width: min(100%, 700px); }
  .rv-pair { gap: 22px; }
  .rv-site { padding: 12px 14px 13px; }
  .rv-k { font-size: 11.5px; }
  .rv-name { font-size: 27px; }
  .rv-kind { font-size: 13.5px; }
  .rv-ls > div { padding: 7px 0; }
  .rv-ls dt { font-size: 10.5px; }
  .rv-ls dd { font-size: 14.5px; }
  .rv-revs { gap: 10px; }
  .rv-r { padding: 9px 12px 10px; }
  .rv-rk { font-size: 11px; }
  .rv-t { font-size: 18px; }
  .rv-ai { margin-top: 58px; padding: 14px 18px 16px; }
  .rv-q { font-size: 21px; }
  .rv-f { font-size: 13.5px; }
  .rv-a { font-size: 23px; }
  .rv-a2 { font-size: 19px; }
  .rv-src { font-size: 10.5px; }
}