/* Home · the lamp on the London statement, and one highlight behind Why King's (home-calm.js) */
.ext .lamp { position: absolute; left: 50%; top: -2px; width: min(1400px, 140vw); height: 78%; margin-left: min(-700px, -70vw); pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 46% 100% at 50% 0, rgba(143,193,255,.55), rgba(143,193,255,.14) 40%, rgba(143,193,255,0) 72%);
  transform-origin: 50% 0; transform: scaleY(.04); opacity: 0; transition: transform 1800ms var(--ease-out), opacity 1200ms var(--ease-out); will-change: transform; }
[dir="rtl"] .ext .lamp { margin-left: min(-700px, -70vw); }
.ext.lit .lamp { transform: none; opacity: 1; }
.ext .wrap { position: relative; z-index: 1; }
/* the beam's own line on the hem */
.ext .lamp::before { content: ""; position: absolute; left: 20%; right: 20%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(143,193,255,.9), #fff, rgba(143,193,255,.9), transparent); opacity: .8; }

.why-grid { position: relative; }
.why-hi { position: absolute; left: 0; top: 0; z-index: 0; border-radius: calc(var(--r-card) + 6px); margin: -6px; padding: 6px; box-sizing: content-box; pointer-events: none;
  background: rgba(143,193,255,.16); box-shadow: inset 0 0 0 1px rgba(44,107,176,.22); opacity: 0;
  transition: transform 320ms var(--ease-out), width 320ms var(--ease-out), height 320ms var(--ease-out), opacity 220ms var(--ease-out); will-change: transform; }
.why-hi.on { opacity: 1; }
.why-card, .why-end { position: relative; z-index: 1; }
.why-card { transition: border-color 300ms var(--ease-out), translate 320ms var(--ease-out); }
.why-card.on { translate: 0 -2px; border-color: rgba(11,36,67,.28); }
@media (prefers-reduced-motion: reduce) { .ext .lamp { transition: none; } .why-hi { transition: none; } .why-card.on { translate: none; } }
html.rm .ext .lamp, html.rm .why-hi { transition: none; } html.rm .why-card.on { translate: none; }