.mark { position: relative; }
.ad-intro { display: block; position: relative; }
.ad-letters { display: none; }
@media (prefers-reduced-motion: no-preference) {
  main:has(.ad-intro) { overflow-x: clip; }
  .intro-ready .ad-intro { animation: ad-settle 1.8s ease-in-out both; }
  .intro-ready .ad-intro img { animation: ad-final .18s linear 1.14s backwards; }
  .intro-ready .ad-letters {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;

  }
  .ad-a { animation: ad-left 1.18s cubic-bezier(.35,0,.18,1) both, ad-hide .18s linear 1.14s forwards; }
  .ad-d { animation: ad-right 1.18s cubic-bezier(.35,0,.18,1) both, ad-hide .18s linear 1.14s forwards; }
  .intro-ready nav { animation: ad-final .4s ease 1.75s backwards; }
  .mark:focus-within nav { animation: none; }
  @keyframes ad-left { from { transform: translateX(calc(-50vw - 100%)); } to { transform: none; } }
  @keyframes ad-right { from { transform: translateX(calc(50vw + 100%)); } to { transform: none; } }
  @keyframes ad-final { from { opacity: 0; } to { opacity: 1; } }
  @keyframes ad-hide { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
  @keyframes ad-settle { 0%,66% { transform: translateY(var(--entry-y)); } 100% { transform: none; } }
}