/* Review Shield promo player (2026-10-30). Loaded only on pages that show the video.
   Uses the site tokens from site.css (--ink, --accent, --mono …). Amber = the video's
   "private note" color; blue = Google/accent. No green: one accent + the video's amber. */

@property --rsv-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.rsv {
  --rsv-a1: var(--accent, #5c9bff);
  --rsv-a2: var(--accent-2, #86b4ff);
  --rsv-amber: #ffb86b;
  --rsv-ink: var(--ink, #100f0d);
  --rsv-radius: var(--r-lg, 22px);
  --rsv-border: 3px;
  position: relative;
  margin: 0;
  isolation: isolate;
}

/* ---------- Frame: slow-turning light border + glow ---------- */
.rsv__frame {
  position: relative;
  padding: var(--rsv-border);
  border-radius: calc(var(--rsv-radius) + var(--rsv-border));
  background: conic-gradient(from var(--rsv-angle),
    var(--rsv-a1) 0deg, rgba(92,155,255,.15) 70deg, var(--rsv-amber) 150deg,
    rgba(255,184,107,.12) 215deg, var(--rsv-a2) 290deg, var(--rsv-a1) 360deg);
  animation: rsv-spin 10s linear infinite;
  box-shadow: var(--shadow, 0 24px 60px rgba(0,0,0,.45));
}
.rsv__frame::before {           /* glow */
  content: "";
  position: absolute;
  inset: 6% 3% -3%;
  z-index: -1;
  border-radius: inherit;
  background: inherit;
  filter: blur(40px);
  opacity: .35;
  transition: opacity .4s;
}
.rsv:hover .rsv__frame::before { opacity: .55; }
.rsv.is-playing .rsv__frame, .rsv.is-playing .rsv__ring, .rsv.is-playing .rsv__phone, .rsv.is-playing .rsv__disc { animation-play-state: paused; }
.rsv.is-playing .rsv__frame::before { opacity: .18; }
@keyframes rsv-spin { to { --rsv-angle: 360deg; } }

/* corner ticks, like a viewfinder */
.rsv__frame::after {
  content: "";
  position: absolute;
  inset: -10px;
  pointer-events: none;
  border-radius: calc(var(--rsv-radius) + 10px);
  --c: rgba(255,236,214,.35);
  background:
    linear-gradient(var(--c),var(--c)) top left / 18px 1px, linear-gradient(var(--c),var(--c)) top left / 1px 18px,
    linear-gradient(var(--c),var(--c)) top right / 18px 1px, linear-gradient(var(--c),var(--c)) top right / 1px 18px,
    linear-gradient(var(--c),var(--c)) bottom left / 18px 1px, linear-gradient(var(--c),var(--c)) bottom left / 1px 18px,
    linear-gradient(var(--c),var(--c)) bottom right / 18px 1px, linear-gradient(var(--c),var(--c)) bottom right / 1px 18px;
  background-repeat: no-repeat;
}

.rsv__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--rsv-radius);
  overflow: hidden;
  background: #070b16;
}
.rsv__video { display: block; width: 100%; height: 100%; object-fit: cover; background: #070b16; }

/* ---------- Poster overlay + "tap to play" ---------- */
.rsv__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  cursor: pointer;
  color: var(--text, #f5f1ea);
  background: radial-gradient(70% 80% at 50% 50%, rgba(7,11,22,0) 30%, rgba(7,11,22,.55));
  transition: opacity .45s ease, visibility .45s;
  -webkit-tap-highlight-color: transparent;
}
.rsv.is-playing .rsv__overlay { opacity: 0; visibility: hidden; pointer-events: none; }
.rsv:not(.is-ready) .rsv__overlay { display: none; } /* no JS: native controls instead */
.rsv__overlay:focus-visible { box-shadow: none; outline: none; }
.rsv__overlay:focus-visible .rsv__disc { box-shadow: 0 0 0 3px var(--rsv-ink), 0 0 0 6px var(--rsv-a1); }

.rsv__tap { position: relative; display: grid; place-items: center; width: clamp(130px, 30%, 240px); aspect-ratio: 1; }

/* NFC ripples */
.rsv__ring {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  border: 1.5px solid rgba(134,180,255,.9);
  opacity: 0;
  animation: rsv-ripple 2.8s cubic-bezier(.2,.7,.3,1) infinite;
}
.rsv__ring:nth-child(2) { animation-delay: .93s; border-color: rgba(255,184,107,.85); }
.rsv__ring:nth-child(3) { animation-delay: 1.86s; }
@keyframes rsv-ripple { 0% { transform: scale(.6); opacity: .95; } 100% { transform: scale(1.55); opacity: 0; } }
.rsv__overlay:hover .rsv__ring { animation-duration: 1.6s; }

/* glass play disc */
.rsv__disc {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 54%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(245,241,234,.94);
  box-shadow: 0 18px 40px -10px rgba(0,0,0,.7), 0 0 0 8px rgba(245,241,234,.12);
  transition: transform .45s cubic-bezier(.3,1.6,.5,1), box-shadow .3s;
}
.rsv__disc::before {            /* inner gradient core */
  content: "";
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--rsv-a2), var(--rsv-a1) 55%, #3a6fe0);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 6px 18px -4px rgba(92,155,255,.8);
}
.rsv__disc svg { position: relative; width: 34%; height: 34%; margin-left: 8%; fill: #fff; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.rsv__overlay:hover .rsv__disc { transform: scale(1.08); box-shadow: 0 22px 46px -10px rgba(0,0,0,.75), 0 0 0 12px rgba(134,180,255,.18); }

/* a phone swoops in and "taps" the button every few seconds */
.rsv__phone {
  position: absolute;
  z-index: 3;
  top: 2%;
  right: 4%;
  width: 24%;
  aspect-ratio: 9 / 19;
  border-radius: 24%/11.5%;
  background: linear-gradient(165deg, #2b3242, #0b0e15 70%);
  border: 1.5px solid rgba(245,241,234,.9);
  box-shadow: 0 10px 22px -6px rgba(0,0,0,.7);
  opacity: 0;
  pointer-events: none;
  transform: translate(70%, -60%) rotate(22deg);
  animation: rsv-phone 4.6s cubic-bezier(.55,0,.2,1) 1.4s infinite;
}
.rsv__phone::before { content: ""; position: absolute; top: 7%; left: 50%; width: 36%; height: 4.5%; border-radius: 99px; background: rgba(245,241,234,.3); transform: translateX(-50%); }
@keyframes rsv-phone {
  0%, 50%  { transform: translate(70%, -60%) rotate(22deg); opacity: 0; }
  62%      { transform: translate(-28%, 34%) rotate(12deg); opacity: 1; }
  68%      { transform: translate(-24%, 30%) rotate(12deg); opacity: 1; }
  82%, 100%{ transform: translate(70%, -60%) rotate(22deg); opacity: 0; }
}
/* the disc reacts when the phone lands (same 4.6 s loop) */
.rsv__disc { animation: rsv-bump 4.6s ease-out 1.4s infinite; }
@keyframes rsv-bump { 0%, 61% { scale: 1; } 64% { scale: .93; } 70% { scale: 1.04; } 76%, 100% { scale: 1; } }

/* label pill */
.rsv__label {
  position: absolute;
  left: 50%;
  bottom: clamp(10px, 6%, 26px);
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .5em .95em;
  border-radius: 999px;
  background: rgba(16,15,13,.66);
  border: 1px solid var(--line-2, rgba(255,236,214,.18));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: clamp(12px, 1.3vw, 13px);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rsv__label b { font-weight: 500; color: var(--rsv-a2); }
.rsv__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rsv-amber); animation: rsv-live 1.8s infinite; }
@keyframes rsv-live { 0% { box-shadow: 0 0 0 0 rgba(255,184,107,.7); } 100% { box-shadow: 0 0 0 9px rgba(255,184,107,0); } }

/* ---------- Click: the "tap" moment ---------- */
.rsv.is-tapping .rsv__disc { animation: rsv-press .4s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes rsv-press { 0% { scale: 1.08; } 40% { scale: .86; } 100% { scale: 1.15; } }
.rsv.is-tapping .rsv__phone { animation: none; opacity: 0; }
.rsv__burst { position: absolute; inset: 20%; z-index: 1; border-radius: 50%; pointer-events: none; opacity: 0; }
.rsv.is-tapping .rsv__burst { animation: rsv-burst .6s ease-out forwards; }
@keyframes rsv-burst {
  0%   { opacity: 1; transform: scale(.6); box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 30px 6px rgba(92,155,255,.8); }
  100% { opacity: 0; transform: scale(3.2); box-shadow: 0 0 0 1px rgba(255,255,255,0), 0 0 60px 20px rgba(92,155,255,0); }
}

/* ---------- Floating chips (approved on-screen/VO copy only) ---------- */
.rsv__chips { list-style: none; margin: 0; padding: 0; }
.rsv__chip {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  max-width: 250px;
  padding: .6em .9em .6em .6em;
  border-radius: 14px;
  background: rgba(29,26,22,.9);
  border: 1px solid var(--line-2, rgba(255,236,214,.18));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text, #f5f1ea);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.005em;
  box-shadow: 0 16px 30px -14px rgba(0,0,0,.7);
  animation: rsv-float 6.5s ease-in-out infinite;
  transition: opacity .4s, translate .4s;
}
.rsv__chip i {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-style: normal;
  font-size: 13px;
  color: var(--on-accent, #07101f);
  background: var(--rsv-a1);
}
.rsv__chip--1 { top: -20px; left: -20px; }
.rsv__chip--2 { bottom: -24px; right: -18px; animation-delay: -2.2s; }
.rsv__chip--2 i { background: var(--rsv-amber); }
.rsv__chip--3 { top: -20px; right: 28px; animation-delay: -4.4s; }
.rsv__chip--3 i { background: var(--rsv-a2); }
@keyframes rsv-float { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-7px) rotate(.8deg); } }
.rsv.is-playing .rsv__chip { opacity: 0; translate: 0 6px; pointer-events: none; }

/* figure caption (matches .fig) */
.rsv__stage { position: relative; }
.rsv__cap { display: block; margin-top: 44px; }
/* wider video column on the Review Shield page hero */
@media (min-width: 900px) { .p-hero.rsv-hero { grid-template-columns: .82fr 1.18fr; } }

/* ---------- End screen ---------- */
.rsv__end {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  padding: 20px;
  text-align: center;
  background: rgba(16,15,13,.84);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s, visibility 0s .4s;
}
.rsv.is-ended .rsv__end { opacity: 1; visibility: visible; transition: opacity .4s; }
.rsv__end p { font-size: clamp(18px, 2.4vw, 26px); font-weight: 600; letter-spacing: var(--tracking, -.03em); text-wrap: balance; }
.rsv__end .row-actions { margin-top: 0; justify-content: center; }
.rsv__replay { background: none; border: 0; color: var(--text-2, #cfc7ba); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: var(--tap, 44px); }

/* ---------- Chips stack under the frame below 1100px ---------- */
@media (max-width: 1100px) {
  .rsv__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
  .rsv__chip { position: static; animation: none; font-size: 13px; max-width: none; padding: .45em .75em .45em .45em; }
  .rsv__chip i { width: 22px; height: 22px; font-size: 11px; }
  .rsv.is-playing .rsv__chip { opacity: 1; translate: none; }
  .rsv__cap { margin-top: 16px; }
}
@media (max-width: 899px) { .rsv__chip--3 { display: none; } }

/* ---------- Phones ---------- */
@media (max-width: 899px) {
  .rsv { --rsv-radius: 16px; }
  .rsv__frame::after { display: none; }
  .rsv__cap { margin-top: 14px; }
  .rsv__end .btn { min-height: 44px; padding: 0 16px; font-size: 15px; }
}

/* ---------- Home: compact trigger + lightbox ---------- */
.rsv-trigger {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap, 44px);
  padding: 5px 18px 5px 5px;
  border-radius: 999px;
  border: 1px solid var(--line-2, rgba(255,236,214,.18));
  background: rgba(255,236,214,.04);
  color: var(--text, #f5f1ea);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, transform .15s;
}
.rsv-trigger:hover { background: rgba(255,236,214,.08); }
.rsv-trigger:active { transform: translateY(1px); }
.rsv-trigger__icon { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(140deg, var(--accent-2, #86b4ff), var(--accent, #5c9bff)); }
.rsv-trigger__icon::before, .rsv-trigger__icon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--accent, #5c9bff); animation: rsv-ripple 2.4s ease-out infinite; }
.rsv-trigger__icon::after { border-color: #ffb86b; animation-delay: 1.2s; }
.rsv-trigger__icon svg { width: 12px; height: 12px; margin-left: 2px; fill: var(--on-accent, #07101f); }
.rsv-trigger .mono { font-size: 13px; color: var(--text-3, #a0968a); font-weight: 400; }

.rsv-dialog { width: min(1080px, 92vw, calc((100vh - 150px) * 16 / 9)); width: min(1080px, 92vw, calc((100dvh - 150px) * 16 / 9)); max-width: none; max-height: none; padding: 0; border: 0; background: transparent; color: var(--text, #f5f1ea); overflow: visible; }
.rsv-dialog::backdrop { background: rgba(10,9,8,.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.rsv-dialog[open] { animation: rsv-pop .38s cubic-bezier(.3,1.4,.5,1); }
@keyframes rsv-pop { from { transform: scale(.94) translateY(10px); opacity: 0; } }
.rsv-dialog .rsv__chips { display: none; }
.rsv-dialog__close {
  position: absolute;
  top: -56px;
  right: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-2, rgba(255,236,214,.18));
  background: var(--ink-3, #1d1a16);
  color: var(--text, #f5f1ea);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.rsv-dialog__close:focus-visible { border-radius: 50%; }
@media (max-height: 560px) { .rsv-dialog__close { top: 10px; right: 10px; z-index: 6; background: rgba(16,15,13,.75); } }

/* paused while off-screen (set by rs-video.js) */
.rsv.is-offscreen, .rsv.is-offscreen *, .rsv.is-offscreen *::before, .rsv.is-offscreen *::after { animation-play-state: paused !important; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .rsv__frame, .rsv__ring, .rsv__phone, .rsv__disc, .rsv__chip, .rsv__dot,
  .rsv-trigger__icon::before, .rsv-trigger__icon::after, .rsv-dialog[open] { animation: none !important; }
  .rsv__phone, .rsv__ring { display: none; }
  .rsv__disc, .rsv__overlay { transition: none; }
}