/* Accelerate brand mark + landing intro (Jeff 2026-10-29, motion identity).
   The top-bar brand is the still mark; the intro is the same artwork moving. */

.topbar-brand { display: flex; align-items: center; padding: 10px 20px 10px 0; }
.topbar-brand .accel-mark { height: 32px; width: auto; display: block; }
body.accel-intro-on .topbar-brand .accel-mark { visibility: hidden; }

.accel-intro { position: fixed; inset: 0; z-index: 10000; cursor: pointer; }
.accel-intro .ai-door { position: absolute; top: 0; bottom: 0; width: 50.5%; background: #1E2A3A;
  transition: transform .9s cubic-bezier(.7,0,.2,1); }
.accel-intro .ai-l { left: 0; } .accel-intro .ai-r { right: 0; }
.accel-intro .ai-seam { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px;
  background: #F26522; box-shadow: 0 0 24px 6px rgba(242,101,34,.55); opacity: 0; }
.accel-intro .ai-mark { position: absolute; left: 50%; top: 50%; width: min(36vw, 420px);
  transform: translate(-50%, -50%); transform-origin: center; }
.accel-intro .ai-mark svg { width: 100%; height: auto; display: block; overflow: visible; }
.accel-intro .ai-mark.ai-dock { transition: transform .8s cubic-bezier(.6,0,.2,1) .15s; }

.accel-intro.ai-play .ai-seam { animation: ai-seam 1.1s ease-out 1.35s forwards; }
.accel-intro.ai-open .ai-l { transform: translateX(-101%); }
.accel-intro.ai-open .ai-r { transform: translateX(101%); }

.accel-intro .m-lane { stroke-dasharray: 130; stroke-dashoffset: 130; }
.accel-intro.ai-play .m-lane { animation: ai-draw .7s cubic-bezier(.6,0,.3,1) forwards; }
.accel-intro.ai-play .m-lane.b { animation-delay: .1s; }
.accel-intro.ai-play .m-lane.c { animation-delay: .2s; }
.accel-intro .m-chev { opacity: 0; transform-box: fill-box; transform-origin: center; }
.accel-intro.ai-play .m-chev { animation: ai-chev 1.1s cubic-bezier(.55,0,.2,1) forwards; }
.accel-intro.ai-play .m-chev.a { animation-delay: .55s; }
.accel-intro.ai-play .m-chev.b { animation-delay: .68s; }
.accel-intro.ai-play .m-chev.c { animation-delay: .81s; }
.accel-intro .m-dot { opacity: 0; transform-box: fill-box; transform-origin: center; }
.accel-intro.ai-play .m-dot { animation: ai-dot 1.3s cubic-bezier(.7,0,.25,1) .35s forwards; }

@keyframes ai-draw { to { stroke-dashoffset: 0; } }
@keyframes ai-chev {
  0% { opacity: 0; transform: translateX(-40px) scaleX(.6); }
  35% { opacity: 1; transform: translateX(0) scaleX(1); }
  55% { opacity: 1; transform: translateX(-5px) scaleX(.82); }
  100% { opacity: 1; transform: translateX(0) scaleX(1); }
}
@keyframes ai-dot {
  0% { opacity: 0; transform: translate(-80px, 22px) scale(.4); }
  15% { opacity: 1; }
  70% { opacity: 1; transform: translate(-6px, 6px) scale(1); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes ai-seam { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) { .accel-intro:not(.ai-forced) { display: none; } }
.topbar-brand { cursor: pointer; background: none; border: 0; margin: 0; font: inherit; color: inherit; }
.topbar-brand:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 6px; }
.topbar-brand:hover .accel-mark { filter: brightness(1.15); }

/* 30 Oct (Jeff): the doors were navy over a navy hero, so their opening could not
   be seen. Each door now carries a glowing orange leading edge and a shadow, so
   you watch it part from the middle; the opening is a little slower (1.2s). */
.accel-intro .ai-door { background: linear-gradient(90deg, #1E2A3A, #24344A); transition: transform 1.2s cubic-bezier(.65,0,.25,1); }
.accel-intro .ai-l { box-shadow: 18px 0 40px rgba(0,0,0,.45); }
.accel-intro .ai-r { box-shadow: -18px 0 40px rgba(0,0,0,.45); }
.accel-intro .ai-l::after, .accel-intro .ai-r::before { content: ""; position: absolute; top: 0; bottom: 0; width: 3px;
  background: #F26522; box-shadow: 0 0 22px 6px rgba(242,101,34,.65); opacity: 0; transition: opacity .25s; }
.accel-intro .ai-l::after { right: 0; }
.accel-intro .ai-r::before { left: 0; }
.accel-intro.ai-open .ai-l::after, .accel-intro.ai-open .ai-r::before { opacity: 1; }

/* InFlight page change: the landing door closing to the middle, then opening (Jeff 30 Oct) */
.accel-doors { position: fixed; inset: 0; z-index: 9000; pointer-events: auto; }
.accel-doors .ai-door { position: absolute; top: 0; bottom: 0; width: 50.5%; background: linear-gradient(90deg, #1E2A3A, #24344A);
  transition: transform .38s cubic-bezier(.65,0,.25,1); }
.accel-doors .ai-l { left: 0; transform: translateX(-101%); box-shadow: 18px 0 40px rgba(0,0,0,.45); }
.accel-doors .ai-r { right: 0; transform: translateX(101%); box-shadow: -18px 0 40px rgba(0,0,0,.45); }
.accel-doors .ai-l::after, .accel-doors .ai-r::before { content: ""; position: absolute; top: 0; bottom: 0; width: 3px;
  background: #F26522; box-shadow: 0 0 22px 6px rgba(242,101,34,.65); }
.accel-doors .ai-l::after { right: 0; } .accel-doors .ai-r::before { left: 0; }
.accel-doors.ad-close .ai-l, .accel-doors.ad-close .ai-r { transform: translateX(0); }
.accel-doors.ad-open .ai-door { transition-duration: .55s; }
.accel-doors.ad-open .ai-l { transform: translateX(-101%); }
.accel-doors.ad-open .ai-r { transform: translateX(101%); }

/* M11 (30 Oct): reduced motion gets the still version, and every version has a Skip button */
.accel-intro .ai-art { position: absolute; inset: 0; }
.accel-intro .ai-skip { position: absolute; right: 24px; bottom: 24px; z-index: 2; font: inherit; font-size: 12px; font-weight: 700;
  color: #fff; background: #2B3A4E; border: 1px solid #6B7A8E; border-radius: 6px; padding: 8px 14px; cursor: pointer; }
.accel-intro .ai-skip:hover { background: #34465C; }
.accel-intro .ai-skip:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.accel-intro.ai-open .ai-skip { opacity: 0; transition: opacity .3s; }
.accel-intro.ai-still { background: #1E2A3A; transition: opacity .3s linear; }
.accel-intro.ai-still .ai-door, .accel-intro.ai-still .ai-seam { display: none; }
.accel-intro.ai-still .ai-mark, .accel-intro.ai-still .ai-mark * { animation: none !important; transition: none !important; }
.accel-intro.ai-still .m-lane { stroke-dashoffset: 0; } .accel-intro.ai-still .m-chev, .accel-intro.ai-still .m-dot { opacity: 1; }
.accel-intro.ai-still .ai-mark { opacity: 0; animation: ai-still-in .3s linear forwards !important; }
.accel-intro.ai-still.ai-fade { opacity: 0; }
@keyframes ai-still-in { to { opacity: 1; } }