/* Frosted-glass lens on the hero title. Default veiled; cursor wipes it clear. */
@property --lr{syntax:'<length>';inherits:true;initial-value:0px}
.opening-title.lens-host{position:relative}
.lens-veil{position:absolute;top:-10px;bottom:-10px;left:-3vw;right:-3vw;pointer-events:none;z-index:2;background:transparent;
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  --lx:50%;--ly:50%;--lr:0px;transition:--lr .7s ease,opacity 1s ease;
  -webkit-mask-image:radial-gradient(circle var(--lr) at var(--lx) var(--ly),transparent 0,transparent 55%,#000 100%),linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:radial-gradient(circle var(--lr) at var(--lx) var(--ly),transparent 0,transparent 55%,#000 100%),linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in,source-in;mask-composite:intersect}
.lens-host.is-near .lens-veil{--lr:190px;transition:--lr .45s ease,opacity 1s ease}
.lens-host.is-clear .lens-veil{opacity:0}
@media(prefers-reduced-motion:reduce){.lens-veil{display:none}}
/* keep the title drifting while hovered */
.opening-title:hover .opening-line{animation-play-state:running!important}