/* "You can add that": the iPhone opening blur + handwritten words (public/youcan.js). */
.youcan {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) var(--sab) env(safe-area-inset-left);
  background: color-mix(in srgb, var(--wall, #f4f6fb) 30%, transparent);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  opacity: 0;
  transition: opacity .35s ease, backdrop-filter .35s ease, -webkit-backdrop-filter .35s ease;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
}
.youcan.in {
  opacity: 1;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.youcan.out {
  opacity: 0;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition-duration: .65s;
  pointer-events: none;
}
.youcan svg {
  width: min(94vw, 640px);
  height: auto;
  overflow: visible;
  transform: rotate(-4deg);
}
.youcan path {
  fill: none;
  stroke: var(--red, #1259d3);
  stroke-width: 40;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.youcan-nib { fill: var(--red, #1259d3); opacity: 0; }