/* P&P De Schoonmaak APK — "dirty from the start" glass treatment.
   Loaded LAST so it layers a persistent grime film over the whole .shell card
   from the opening screen. Metaphor: your cleaning is grimy now → at the e-mail
   gate the squeegee wipes it (quickscan-ui.css) and .shell-clean dissolves this
   film → the card goes spotless. The payoff only lands if the dirt was there all along.

   Readability rule: grime is concentrated at the EDGES / CORNERS via radial
   gradients that fade to transparent before the centre, so questions, options and
   inputs (which sit in the middle column) stay perfectly legible. Pointer-events
   off so it never blocks taps. Pure CSS, honours prefers-reduced-motion. */

:root {
  --dg-grime: rgba(120, 110, 86, .14);
  --dg-grime-soft: rgba(95, 105, 90, .11);
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* The card needs a stacking context so the film sits above the white background
   but below the content. .shell already has overflow:hidden + radius. */
.shell { position: relative; isolation: isolate; }

/* ── Layer 1: cornered grime smudges (the bulk of the "dirty" read) ── */
.shell::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(150px 120px at 4% 3%,   var(--dg-grime) 0%, transparent 62%),
    radial-gradient(180px 150px at 97% 5%,  var(--dg-grime-soft) 0%, transparent 60%),
    radial-gradient(170px 150px at 2% 97%,  var(--dg-grime-soft) 0%, transparent 60%),
    radial-gradient(200px 160px at 99% 96%, var(--dg-grime) 0%, transparent 60%),
    radial-gradient(120px 100px at 50% 102%, var(--dg-grime-soft) 0%, transparent 65%);
  transition: opacity 1.2s var(--ease);
}

/* ── Layer 2: faint diagonal streaks + a greasy sheen for "unwiped glass" ── */
.shell::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image:
    repeating-linear-gradient(118deg,
      rgba(140, 130, 110, 0) 0px,
      rgba(140, 130, 110, .05) 2px,
      rgba(140, 130, 110, 0) 5px,
      rgba(140, 130, 110, 0) 26px),
    linear-gradient(135deg,
      rgba(255, 255, 255, .05) 0%,
      rgba(210, 220, 232, .06) 48%,
      rgba(120, 110, 86, .05) 100%);
  /* Fade the streaks out across the centre so they never cross the text column. */
  -webkit-mask-image: radial-gradient(120% 120% at 50% 50%, transparent 30%, #000 92%);
  mask-image: radial-gradient(120% 120% at 50% 50%, transparent 30%, #000 92%);
  opacity: .9;
  transition: opacity 1.2s var(--ease);
}

/* Keep content above both grime layers. */
.shell > * { position: relative; z-index: 1; }

/* ── The payoff: card wipes spotless when the gate is submitted. ── */
.shell.shell-clean::before,
.shell.shell-clean::after { opacity: 0; }

/* Reduced motion: dirt stays present (the metaphor survives) but is calmer and
   the clean-up is instant — no fade. Result screen is always reachable. */
@media (prefers-reduced-motion: reduce) {
  .shell::before,
  .shell::after { transition: none; }
  .shell::after { opacity: .55; }
}

/* Embed (modal) — the film follows the card, no change needed, but soften slightly
   so it never fights a small phone modal's legibility. */
body.qs-embed .shell::before { opacity: .8; }