/* SCENE: the portrait centrepiece and the verification sequence it conducts.
   LAYOUT places .scene (and its inline insets); everything inside lives here. */

/* --portrait-height is read by LAYOUT for the rail split, so it is defined on .hero. */
.hero {
  --portrait-height: 640px;
  --stage-top: 0px;          /* no band: the head starts at the top of the stage */
  --pill-top: 40px;          /* glass status pill floats over the hair */
}
@media (max-width: 759px) {
  .hero {
    --portrait-height: clamp(400px, 124vw, 560px);
    --stage-top: 0px;
    --pill-top: 20px;
  }
}

.scene {
  --scene-surface: #ffffff;
  /* Frosted glass pills (user request): translucent fill with a top sheen, strong blur,
     bright rim + hairline so they hold on white and over the portrait. */
  --scene-pill:
    linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%),
    linear-gradient(135deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .42));
  --scene-pill-pending:
    linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%),
    linear-gradient(135deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .36));
  --scene-pill-edge:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 0 0 1px rgba(255, 255, 255, .45),
    0 0 0 1px rgba(25, 25, 25, .09),
    0 12px 28px -16px rgba(25, 25, 25, .45);
  --pills-bottom: 22px;
  position: relative;
}

.scene-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: var(--stage-top);
  background: var(--scene-surface);
}

/* ---------- Confirmed face treatment (ported from the Codex reference) ---------- */
.portrait-frame { position: relative; width: 100%; height: var(--portrait-height); min-width: 0; }
.portrait-frame img {
  --face-dx: 0%;
  --face-dy: 0%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
  filter: grayscale(1) contrast(.94) brightness(1.035); /* .97 x 1.035 > 1: photo white lands on page white */
  mix-blend-mode: multiply;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, transparent calc(12% + var(--face-dx)), #0000001a calc(22% + var(--face-dx)), #00000026 calc(40% + var(--face-dx)), #00000080 calc(49% + var(--face-dx)), #000 calc(53.5% + var(--face-dx)), #000 calc(80% + var(--face-dx)), transparent 99%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 4%, #000 calc(60% + var(--face-dy)), transparent calc(84% + var(--face-dy)), transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, transparent calc(12% + var(--face-dx)), #0000001a calc(22% + var(--face-dx)), #00000026 calc(40% + var(--face-dx)), #00000080 calc(49% + var(--face-dx)), #000 calc(53.5% + var(--face-dx)), #000 calc(80% + var(--face-dx)), transparent 99%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 4%, #000 calc(60% + var(--face-dy)), transparent calc(84% + var(--face-dy)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
#candidate-photo:not([src]) { visibility: hidden; }

.portrait-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.face-markers {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  color: #8c8c8c;
}
.corner {
  position: absolute;
  width: 19px;
  height: 19px;
  border-style: solid;
  border-color: currentColor;
  border-width: 0;
  opacity: .7;
}
.corner-tl { left: 0; top: 0; border-top-width: 1px; border-left-width: 1px; }
.corner-tr { right: 0; top: 0; border-top-width: 1px; border-right-width: 1px; }
.corner-bl { left: 0; bottom: 0; border-bottom-width: 1px; border-left-width: 1px; }
.corner-br { right: 0; bottom: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* ---------- Verification pills (wireframe composition) ---------- */
.verification { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.scene .sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important;
  padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}

.v-heading-row,
.v-check,
.v-monitor {
  border-radius: 6px;
  background: var(--scene-pill);
  box-shadow: var(--scene-pill-edge);
  -webkit-backdrop-filter: blur(18px) saturate(1.5) brightness(1.08);
  backdrop-filter: blur(18px) saturate(1.5) brightness(1.08);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  white-space: nowrap;
}

.v-heading-row {
  position: absolute;
  top: var(--pill-top);
  left: 0;
  right: 0;
  margin-inline: auto;
  width: max-content;
  max-width: calc(100% - 24px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 10px;
  overflow: hidden;
  color: var(--ink);
}
.v-heading { margin: 0; font: inherit; color: inherit; }
.v-top-dot {
  width: 10px;
  height: 10px;
  border: 1.3px solid #555;
  border-right-color: transparent;
  border-radius: 50%;
  flex-shrink: 0;
  animation: v-spin .8s linear infinite;
}
.v-result-icon {
  display: none;
  place-items: center;
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: var(--signal);
  background: #16845e0d;
  border: 1px solid #16845e40;
  flex-shrink: 0;
}
.result-tick { display: block; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.is-verified .v-top-dot { display: none; }
.is-verified .v-result-icon { display: grid; animation: v-pop .55s var(--ease-out) both; }
.is-verified .result-tick path { stroke-dasharray: 18; animation: v-draw-lg .5s .12s ease-out both; }
.is-verified .v-result-icon::after {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid #16845e70;
  border-radius: inherit;
  animation: v-ring 2.4s ease-out .25s infinite;
}

/* Two centred rows: [face swaps][AI tools] / [avatars][camera]. */
.v-checks {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: var(--pills-bottom);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.v-checks::after { content: ''; order: 2; flex-basis: 100%; height: 0; }
.v-check:nth-child(-n+2) { order: 1; }
.v-check:nth-child(n+3) { order: 3; margin-top: 8px; }

.v-check {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px 8px 9px;
  overflow: hidden;
  color: var(--muted);
  transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.v-check[data-state='pending'] { background: var(--scene-pill-pending); }
.v-check[data-state='active'],
.v-check[data-state='complete'] { color: var(--ink); }
.v-row-title { display: block; }

.v-state-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border: 1px solid #c4c4c4;
  border-radius: 50%;
  flex-shrink: 0;
}
.v-state-icon svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.v-check[data-state='active'] .v-state-icon {
  border-color: var(--ink);
  border-right-color: transparent;
  animation: v-spin .8s linear infinite;
}
.v-check[data-state='complete'] .v-state-icon {
  color: var(--signal);
  border-color: #16845e66;
  background: #16845e0d;
  animation: v-pop .5s var(--ease-out) both;
}
.v-check[data-state='complete'] .v-state-icon svg { opacity: 1; }
.v-check[data-state='complete'] .v-state-icon svg path { stroke-dasharray: 14; animation: v-draw .45s ease both; }
.v-check[data-state='complete'] .v-state-icon::after {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid #16845e70;
  border-radius: 50%;
  animation: v-ring .75s ease-out both;
  pointer-events: none;
}

.v-monitor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--pills-bottom) + 21px);
  margin: 0 auto;
  width: max-content;
  max-width: calc(100% - 24px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 11px;
  color: var(--ink);
  visibility: hidden;
  opacity: 0;
}
.v-monitor > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  flex-shrink: 0;
  animation: v-blink 2.4s ease-in-out infinite;
}

/* Hidden until verification.js stages the entrance; failsafe if it never runs. */
.scene.is-staged .v-heading-row,
.scene.is-staged .v-check { opacity: 0; animation: v-failsafe 0s linear 4s forwards; }

/* ---------- Caption row under the stage ---------- */
.scene-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-top: 12px;
}
.scene-index,
.demo-caption {
  margin: 0;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.scene-index span { font-variant-numeric: tabular-nums; }

/* ---------- Narrow stages: compact 2 x 2 grid over the shoulders ---------- */
@media (max-width: 759px) {
  .scene { --pills-bottom: 12px; }
  .v-heading-row, .v-check, .v-monitor { font-size: 11px; }
  .v-checks {
    left: 10px;
    right: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .v-checks::after { display: none; }
  .v-check:nth-child(n+3) { margin-top: 0; }
  .v-check { white-space: normal; padding: 7px 9px 7px 8px; gap: 6px; min-height: 42px; }
  .v-monitor { white-space: normal; bottom: calc(var(--pills-bottom) + 24px); text-align: left; }
  .scene-index, .demo-caption { font-size: 9px; letter-spacing: .1em; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .v-heading-row, .v-check, .v-monitor { background: #fff; }
  .v-check[data-state='pending'] { background: #fbfbfb; }
}

/* Pause control, hidden tab and offscreen all freeze the CSS micro-motion. */
html[data-motion='paused'] .scene *,
html[data-motion='paused'] .scene *::before,
html[data-motion='paused'] .scene *::after,
.scene.is-idle *,
.scene.is-idle *::before,
.scene.is-idle *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .scene *, .scene *::before, .scene *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
  }
}

@keyframes v-spin { to { transform: rotate(360deg); } }
@keyframes v-pop {
  0% { transform: scale(.7); }
  65% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes v-ring {
  0% { transform: scale(1); opacity: .65; }
  70%, 100% { transform: scale(1.65); opacity: 0; }
}
@keyframes v-draw {
  from { stroke-dashoffset: 14; }
  to { stroke-dashoffset: 0; }
}
@keyframes v-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 #16845e21; }
  50% { opacity: .35; box-shadow: 0 0 0 4px #16845e00; }
}
@keyframes v-failsafe { to { opacity: 1; } }
@keyframes v-draw-lg {
  from { stroke-dashoffset: 18; }
  to { stroke-dashoffset: 0; }
}

/* Supervisor: pause control lives in the caption row (moved out of the header). */
.scene-meta { align-items: center; }
.scene-meta .demo-caption { margin-left: auto; }
.scene-meta .motion-control { width: 28px; height: 28px; }
.scene-meta .motion-control svg { width: 12px; height: 12px; }

/* Supervisor: on short desktop screens the stage is a little shorter so the eyes sit
   above the fold; the face effect re-projects from the frame size, so it stays exact. */
@media (min-width: 760px) and (max-height: 820px) {
  .hero { --portrait-height: 600px; --pill-top: 32px; }
}
@media (min-width: 760px) and (max-height: 700px) {
  .hero { --portrait-height: 560px; --pill-top: 28px; }
}

/* ---------- Resolve to human (supervisor) ----------
   A mirror of the live photo with a symmetric shoulder fade instead of the half-face
   mask. verification.js reveals it from the split line leftwards once verified. */
.portrait-frame img.portrait-resolved {
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(0% 0% 0% 50%);
  -webkit-mask-image:
    linear-gradient(to right, transparent calc(1% + var(--face-dx)), #000 calc(20% + var(--face-dx)), #000 calc(80% + var(--face-dx)), transparent 99%),
    linear-gradient(to bottom, transparent 0%, #000 4%, #000 calc(60% + var(--face-dy)), transparent calc(84% + var(--face-dy)), transparent 100%);
  mask-image:
    linear-gradient(to right, transparent calc(1% + var(--face-dx)), #000 calc(20% + var(--face-dx)), #000 calc(80% + var(--face-dx)), transparent 99%),
    linear-gradient(to bottom, transparent 0%, #000 4%, #000 calc(60% + var(--face-dy)), transparent calc(84% + var(--face-dy)), transparent 100%);
}
.face-markers { transition: color .6s var(--ease-out); }
.scene.is-resolved .face-markers { color: var(--signal); }

/* Supervisor: a bigger candidate on desktop (user request). The stage grows with the
   window and fills the height of the stat rails, so there is no dead white below it.
   The face effect re-projects from the frame size, so the treatment stays exact. */
@media (min-width: 1100px) {
  .hero { --portrait-height: clamp(640px, 100vh, 860px); } /* a full window tall: the candidate is the hero image */
}