/* ============================================================================
   Reviews — THE WALL ANSWERS.  Loaded by reviews.html only.

   This page's signature and nobody else's (MOTION-CHARTER §3):
     - review cards arrive face-DOWN and turn face-up as they climb the screen
     - each card's star meter fills once it is face-up
     - the drafted reply writes itself in as a scan reveal, a light at the edge
   All three are a pure function of each card's position in the viewport. Stop
   scrolling and a half-turned card stays half-turned.

   Without JS (or under reduced motion) every card is face-up, every meter is
   full and every reply is fully written. The readouts show the final count.
   ========================================================================== */

/* --------------------------------------------------------- the readout ---- */
.fx-read{
  display:flex; flex-wrap:wrap; gap:8px 22px; margin:22px 0 0; padding:10px 14px;
  width:max-content; max-width:100%;
  border:1px solid rgba(var(--accent-rgb),.16); border-radius:8px;
  background:rgba(4,18,28,.35);
  font:600 10.5px/1.6 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:rgba(191,238,255,.62);
}
.fx-read b{ color:var(--accent); font-weight:700; font-variant-numeric:tabular-nums; }
.fx-read i{ font-style:normal; opacity:.55; }
.fx-read span{ white-space:nowrap; }

/* ---------------------------------------------------------- the big meter - */
.rv-meter{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; margin-top:26px; max-width:520px; }
.rv-meter .big{
  font:800 clamp(2.4rem,4vw,3.2rem)/1 var(--font-display); letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; color:#fff;
}
.rv-meter .big small{ font-size:.42em; color:#8fb0c4; font-weight:600; letter-spacing:0; margin-left:4px; }
.rv-meter .bar{ position:relative; height:10px; border-radius:5px; background:rgba(var(--accent-rgb),.12); overflow:hidden; }
.rv-meter .bar i{
  position:absolute; inset:0; border-radius:5px; transform-origin:left; transform:scaleX(var(--f,1));
  background:linear-gradient(90deg, var(--primary-light), var(--accent));
  box-shadow:0 0 14px rgba(var(--accent-rgb),.5);
}
.rv-meter .bar b{
  position:absolute; top:0; bottom:0; width:2px; left:0; transform:translateX(var(--fx,0px));
  background:#fff; box-shadow:0 0 12px 2px rgba(var(--accent-rgb),.8); opacity:var(--fo,0);
}
.rv-meter p{ margin:6px 0 0; font-size:13px; color:#8fb0c4; }

/* ------------------------------------------------------------- the steps -- */
.rv-steps{ list-style:none; margin:34px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.rv-steps li{
  display:grid; grid-template-columns:auto 1fr; gap:4px 14px; align-items:start;
  padding:14px 16px; border-radius:12px; border:1px solid rgba(var(--accent-rgb),.12);
  background:rgba(255,255,255,.025);
  transition: border-color .35s var(--ease-out), background .35s var(--ease-out), opacity .35s var(--ease-out);
}
.rv-steps .n{
  grid-row:1/3; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font:800 13px/1 var(--font-display);
  background:rgba(var(--accent-rgb),.10); border:1px solid rgba(var(--accent-rgb),.3); color:var(--accent);
  transition: background .35s var(--ease-out), color .35s var(--ease-out);
}
.rv-steps h3{ font-size:1rem; line-height:1.25; }
.rv-steps p{ margin:0; font-size:.9rem; line-height:1.45; color:#a8c4d5; }
.fx-on .rv-steps li{ opacity:.42; }
.fx-on .rv-steps li.on{ opacity:1; border-color:rgba(var(--accent-rgb),.42); background:rgba(var(--accent-rgb),.06); }
.fx-on .rv-steps li.on .n{ background:var(--accent); color:var(--dark); }

/* --------------------------------------------------------------- the wall - */
.rv-wall{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:34px;
  perspective:1600px;
}
.rv-card{ position:relative; }
.rv-flip{ position:relative; height:100%; transform-style:preserve-3d; will-change:transform; }
.rv-front, .rv-back{
  border-radius:14px; border:1px solid rgba(var(--accent-rgb),.18);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.rv-front{
  position:relative; height:100%; padding:18px 18px 16px;
  /* no backdrop-filter here on purpose: it defeats backface-visibility in
     Chrome and the front shows through, mirrored, while the card is turning */
  background:linear-gradient(165deg, rgba(34,72,96,.92), rgba(13,45,66,.94));
  box-shadow:0 24px 50px -26px rgba(0,0,0,.75);
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.rv-card:hover .rv-front{ border-color:rgba(var(--accent-rgb),.4); box-shadow:0 24px 50px -26px rgba(0,0,0,.75), 0 0 0 1px rgba(var(--accent-rgb),.12); }
.rv-back{
  position:absolute; inset:0; transform:rotateY(180deg);
  display:grid; place-items:center; align-content:center; gap:10px;
  background:
    radial-gradient(120% 90% at 50% 118%, rgba(var(--accent-rgb),.2), transparent 62%),
    linear-gradient(165deg, rgba(24,86,120,.5), rgba(7,27,41,.95));
  overflow:hidden;
}
.rv-back::after{         /* scanlines: the back is a plate, not a card */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(191,238,255,.05) 0 1px, transparent 1px 3px);
}
.rv-back .seal{ font-size:44px; line-height:1; color:var(--accent); filter:drop-shadow(0 0 16px rgba(var(--accent-rgb),.6)); }
.rv-back .tag{ font:600 10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:rgba(191,238,255,.6); background:none; padding:0; }

.rv-head{ display:flex; align-items:center; gap:12px; }
.rv-ava{
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center; flex:none;
  font:800 13px/1 var(--font-display); color:var(--dark);
  background:linear-gradient(135deg, var(--accent-pale), var(--accent-mid));
}
.rv-name{ display:block; font-weight:600; font-size:15px; color:#eaf4fa; }
.rv-src{ display:block; font:500 10px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:rgba(191,238,255,.5); margin-top:3px; }

.rv-stars{ position:relative; display:inline-block; margin-top:12px; font-size:18px; line-height:1; letter-spacing:3px; color:rgba(191,238,255,.2); user-select:none; }
.rv-stars-fill{
  position:absolute; inset:0; color:var(--accent); text-shadow:0 0 10px rgba(var(--accent-rgb),.55);
  clip-path:inset(0 calc(100% - var(--fill,100%)) 0 0);
}
.rv-text{ margin:12px 0 0; font-size:15px; line-height:1.55; color:#d6e6ef; }

.rv-reply{
  position:relative; margin-top:14px; padding:11px 12px 11px 14px; overflow:hidden;
  border-left:2px solid rgba(var(--accent-rgb),.5); background:rgba(var(--accent-rgb),.05); border-radius:0 10px 10px 0;
}
.rv-reply-k{ display:block; font:600 9.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:7px; }
.rv-reply p{ margin:0; font-size:13.5px; line-height:1.5; color:#b9d3e2; clip-path:inset(0 0 var(--cut,0%) 0); }
.rv-scan{
  position:absolute; left:0; right:0; top:0; height:2px; opacity:var(--so,0);
  transform:translateY(var(--sy,0px));
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow:0 0 18px 3px rgba(var(--accent-rgb),.65); pointer-events:none;
}
.rv-none{ margin-top:14px; font:500 11px/1.4 var(--mono); letter-spacing:.08em; color:rgba(191,238,255,.45); }

.rv-fine{ margin:18px 0 0; font-size:13px; color:#7f9db0; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width:1000px){ .rv-wall{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px){ .rv-steps{ grid-template-columns:1fr; } }
@media (max-width:640px){ .rv-wall{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){
  .rv-flip{ transform:none !important; }
  .rv-stars-fill{ clip-path:inset(0 calc(100% - var(--fill,100%)) 0 0) !important; }
  .rv-reply p{ clip-path:none !important; }
  .rv-scan{ display:none; }
  .rv-steps li{ opacity:1 !important; }
}