/* deepfake-defense.css — page overrides layered on solution.css.
   Loaded after solution.css (see pageCss array on the page). Scope is
   .p-solution.p-solution--deepfake-defense so any rule here wins over the
   base .p-solution rules at higher specificity, no !important needed.

   HERO — the on-device perspective illustration (Mike, 2026-08-07 r2).
   The template's three-phone fan is replaced by ONE bank asset:
   /use-cases/deepfake-defense-hero.svg — the page variant of
   /Illustration/ondevice.svg (layered phone planes in perspective, the
   person captured on the blue ring below, confirmed live on the green
   ring above; the age "+21" pill removed, #006AFF → #0054FF). The art
   floats gently on the aurora; reduced motion holds it still.

   Traveling phone: the shared solution behaviour (it rests in the hero and
   travels into how-it-works). */

/* The traveling phone is NOT hidden at rest here anymore (Mike 2026-08-10,
   Nacim: "the transition doesn't look good"). It used to be invisible so
   the orb could own the hero, which meant the phone materialised out of
   nothing mid-scroll. With the hero carrying the standard phone, the
   handover is the shared one: the phone rests in the hero and travels into
   the how-it-works stage, exactly like the sibling pages. */

/* ---- the capture lens (Mike 2026-08-10) — the hero now carries the SAME
   phone as step 01 of how-it-works (frame, size and Selfie3 screen all
   shared with the sibling pages, so the handover to the traveling phone is
   the standard one). What changes is what the lens shows: the failing-mask
   footage from the old orb — the chava's loop masked over the real caller,
   with the 7s glitch cycle — sits exactly over the screen's photo circle
   (Selfie3 geometry: center 195,313.5 · r 145.5 in a 390×844 box). ---- */
.p-solution--deepfake-defense .dd-cap {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.p-solution--deepfake-defense .dd-cap__lens {
  position: absolute;
  left: 12.69%;
  top: 19.91%;
  width: 74.62%;
  height: 34.48%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-white); /* white backdrop behind the fraudster */
}
.p-solution--deepfake-defense .dd-cap__vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the footage carries its own baked-in capture ring — zoom past it */
  transform: scale(1.3);
}
/* the fraudster zoomed out for breathing room; a red wash (below) tints him,
   so no dark multiply. gray fill matches the lens for any gap. */
.p-solution--deepfake-defense .dd-cap__vid--under {
  object-fit: contain;
  transform: scale(1.0) translateY(2%);
}
/* red overlay on the fraudster — only while HE is showing (fades inverse to
   the mask), so the woman stays untinted. Replaces the old dark look. */
.p-solution--deepfake-defense .dd-cap__redwash {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-red-brand);
  mix-blend-mode: multiply;
  opacity: 0;
  pointer-events: none;
  animation: dd-redwash 6s ease-in-out infinite;
}
@keyframes dd-redwash {
  0%, 18% { opacity: 0; }
  34%, 64% { opacity: 0.2; }
  82%, 100% { opacity: 0; }
}
/* the synthetic mask gently dissolves to reveal the real face beneath, then
   reforms — a calm crossfade instead of the old glitch (Mauricio 2026-08-17:
   "no glitches, they look tacky … something more elegant"). Scale stays put
   so there's no jitter. */
/* the woman zoomed out for breathing room, eyes on the same line as the
   fraudster. gray fill so any gap reads neutral, never red. */
.p-solution--deepfake-defense .dd-cap__vid--mask {
  /* the exact how-it-works woman (transparent head-shoulders cutout).
     contain + opaque gray backing: her full portrait letterboxes on gray
     (breathing room) and the gray fully covers the fraudster when she's up. */
  background: var(--color-blue-100);
  object-fit: contain;
  transform: scale(1.7) translate(2%, 3%);
  animation: dd-facefade 6s ease-in-out infinite;
}
/* the traveling phone runs the lens only on its resting screen — once the
   walk starts, its own step screens take over */
/* the traveling phone carries the lens only while it is RESTING in the
   hero — the moment the travel starts, the glitch gives way to the plain
   capture screen the walk owns (Mike 2026-08-10: "abajo deja el que ya
   estaba… cuando hagamos la transición, que se cambie el video") */
.p-solution--deepfake-defense .sol-phonecol__phone .dd-cap--rest {
  transition: opacity 0.35s ease;
}
.p-solution--deepfake-defense .sol-flow-wrap.is-scrolled .sol-phonecol__phone .dd-cap--rest { opacity: 0; }
@keyframes dd-facefade {
  0%, 18% { opacity: 1; }
  34% { opacity: 0; }   /* the fake layer melts away sooner — fraudster revealed */
  64% { opacity: 0; }
  82%, 100% { opacity: 1; }
}
}
.p-solution--deepfake-defense .dd-cap__scan { display: none; }

}

@media (prefers-reduced-motion: reduce) {
  .p-solution--deepfake-defense .dd-cap__vid--mask { animation: none; }
  .p-solution--deepfake-defense .dd-cap__redwash { animation: none; opacity: 0; }
}

/* HERO look only: this is the deepfake demo, so the capture reads as a
   THREAT scan — drop the "align your face" copy + silhouette and run a
   rotating RED gradient ring around the lens. Targets the hero's Selfie3 in
   BOTH forms: the inline reference phone (.sol-hero__phone) and the traveling
   phone's REST screen ([data-sol-screen="rest"]) — the latter is what's
   actually painted over the hero on desktop. The how-it-works steps (screen
   0-3) keep their normal blue capture. Mauricio 2026-08-17. */
.p-solution--deepfake-defense .sol-hero__phone .s3-silhouette,
.p-solution--deepfake-defense .sol-hero__phone .s3-caption,
.p-solution--deepfake-defense .sol-hero__phone .s3-caption-ready,
.p-solution--deepfake-defense svg[data-sol-screen="rest"] .s3-silhouette,
.p-solution--deepfake-defense svg[data-sol-screen="rest"] .s3-caption,
.p-solution--deepfake-defense svg[data-sol-screen="rest"] .s3-caption-ready {
  display: none;
}
.p-solution--deepfake-defense .sol-hero__phone .s3-scan-stop,
.p-solution--deepfake-defense svg[data-sol-screen="rest"] .s3-scan-stop {
  stop-color: var(--color-red-brand);
}
.p-solution--deepfake-defense .sol-hero__phone .s3-ring-scan,
.p-solution--deepfake-defense svg[data-sol-screen="rest"] .s3-ring-scan {
  display: inline;
  transform-box: fill-box;
  transform-origin: center;
  animation: co-ring-scan 2.4s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .p-solution--deepfake-defense .sol-hero__phone .s3-ring-scan,
  .p-solution--deepfake-defense svg[data-sol-screen="rest"] .s3-ring-scan {
    animation: none;
  }
}