/* ---------------------------------------------------------------------------
   Illustration: Flight 811, the route and the door (slug route811).
   Chapter II, The Fall; designed for data-theme="night".
   Panel A: a schematic map. The path out from Honolulu (bone), the point where the
   forward cargo door separated (violet), the 180-degree left turn and the way home
   (brass), and a time bar drawn to scale from the NTSB times.
   Panel B: a Boeing 747 seen from the right side and from above, with the forward
   cargo door in violet and the two engines that brought the airplane home in brass.
   Color = meaning: violet = the door that failed; brass = home, the engines that held.
   Motion: one-shot when site.js adds .is-in (figure for panel A, the inner .reveal
   panel for panel B, so on phones B plays when it is scrolled to). The default (no JS,
   reduced motion) is the finished drawing. Timeline, all done by 3.0s:
     A: out path .25-1.25s, door mark 1.2-1.7s, way home 1.6-2.9s, labels follow the path.
     B: door outline .6-1.3s, glow 1.1-1.8s, projection 1.5-2.0s, plan door 1.9-2.2s,
        engines 3 and 4 dim 2.0-2.6s.
   --------------------------------------------------------------------------- */
.illus--route811 { margin: clamp(3rem, 7vw, 5.5rem) 0 0; display: grid; gap: clamp(2.25rem, 4vw, 3rem); }
@media (min-width: 900px) {
  .illus--route811 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
  .illus--route811 .il-route811-cap { grid-column: 1 / -1; }
}
.il-route811-panel { min-width: 0; }
.il-route811-head { margin: 0 0 1rem; }
.il-route811-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Type: sizes in viewBox px (>= 17 / 14+), bumped on phones below */
.illus--route811 text { paint-order: stroke; stroke: rgba(10, 14, 20, .88); stroke-width: 4px; stroke-linejoin: round; }
.illus--route811 .lf-label { font-size: 18px; }
.illus--route811 .lf-small { font-size: 15px; }
.illus--route811 .il-route811-onland { stroke: #262a31; }

/* ---------- Panel A: the map ---------- */
.il-route811-sea { fill: url(#il-route811-sea); stroke: var(--hair); stroke-width: 1; }
.il-route811-grid line { stroke: rgba(240, 237, 232, .04); stroke-width: 1; }
.il-route811-insetcard { fill: rgba(9, 12, 17, .72); stroke: rgba(240, 237, 232, .14); stroke-width: 1; }
.il-route811-insetland { fill: #2c3139; }
.il-route811-planned { fill: none; stroke: rgba(240, 237, 232, .55); stroke-width: 1.6; stroke-dasharray: 4 5; stroke-linecap: round; }
.il-route811-city { fill: #0b0f15; stroke: rgba(240, 237, 232, .75); stroke-width: 1.6; }
.il-route811-city--home { fill: url(#il-route811-brass); stroke: none; }
.il-route811-shore { fill: none; stroke: rgba(240, 237, 232, .06); stroke-width: 12; stroke-linejoin: round; }
.il-route811-island { fill: url(#il-route811-land); stroke: rgba(240, 237, 232, .26); stroke-width: 1.3; stroke-linejoin: round; }
.il-route811-case { fill: none; stroke: #0d121a; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.il-route811-out { fill: none; stroke: rgba(240, 237, 232, .8); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.il-route811-back { fill: none; stroke: url(#il-route811-brass); stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; }
.il-route811-homering { fill: none; stroke: #c8b89a; stroke-width: 2; }
.il-route811-tlead { stroke: rgba(240, 237, 232, .4); stroke-width: 1.2; stroke-linecap: round; }
.il-route811-homedot { fill: url(#il-route811-brass); stroke: #0d121a; stroke-width: 2; }
.il-route811-ring { fill: rgba(182, 156, 240, .12); stroke: var(--accent); stroke-width: 2.4; }
.il-route811-dot { fill: var(--accent); filter: drop-shadow(0 0 6px rgba(182, 156, 240, .6)); }
.il-route811-track { fill: rgba(240, 237, 232, .08); }
.il-route811-seg--out { fill: rgba(240, 237, 232, .62); }
.il-route811-seg--back { fill: url(#il-route811-brass); }
.il-route811-tick { fill: #0d121a; stroke: rgba(240, 237, 232, .8); stroke-width: 2; }
.il-route811-tick--event { fill: var(--accent); stroke: #0d121a; stroke-width: 2.5; filter: drop-shadow(0 0 5px rgba(182, 156, 240, .55)); }
.il-route811-tick--home { fill: url(#il-route811-brass); stroke: #0d121a; stroke-width: 2; }

/* ---------- Panel B: the airplane ---------- */
.il-route811-body { fill: url(#il-route811-skin); stroke: rgba(255, 255, 255, .18); stroke-width: 1.2; }
.il-route811-bodyplan { fill: url(#il-route811-skintop); stroke: rgba(255, 255, 255, .18); stroke-width: 1.2; }
.il-route811-fin, .il-route811-hstab, .il-route811-wingside, .il-route811-wingplan { fill: url(#il-route811-wing); stroke: rgba(255, 255, 255, .15); stroke-width: 1.1; stroke-linejoin: round; }
.il-route811-cockpit { fill: #0e1115; stroke: rgba(255, 255, 255, .3); stroke-width: 1; }
.il-route811-windows { stroke: rgba(240, 237, 232, .42); stroke-width: 2.4; stroke-dasharray: 1.6 3.6; }
.il-route811-pax { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1; }
.il-route811-spine { stroke: rgba(255, 255, 255, .1); stroke-width: 1; }
.il-route811-nac rect { fill: url(#il-route811-nac); stroke: rgba(255, 255, 255, .2); stroke-width: 1.1; }
.il-route811-nac ellipse { fill: #121418; stroke: rgba(255, 255, 255, .32); stroke-width: 1; }
.il-route811-pylon { fill: #34373e; }
.il-route811-nac--on rect { stroke: url(#il-route811-brass2); stroke-width: 2.2; }
.il-route811-nac--off { opacity: .5; }
.il-route811-aft { fill: rgba(255, 255, 255, .04); stroke: rgba(240, 237, 232, .5); stroke-width: 1.5; }
.il-route811-aftplan { stroke: rgba(240, 237, 232, .5); stroke-width: 3.5; stroke-linecap: round; }
.il-route811-door { fill: rgba(182, 156, 240, .18); stroke: var(--accent); stroke-width: 2.6; }
.il-route811-doorglow { fill: rgba(182, 156, 240, .28); filter: blur(5px); }
.il-route811-doorplan { stroke: var(--accent); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(182, 156, 240, .6)); }
.il-route811-leader { stroke: var(--accent); stroke-width: 1.4; opacity: .75; }
.il-route811-proj { stroke: rgba(182, 156, 240, .5); stroke-width: 1.2; stroke-dasharray: 3 5; }

/* Caption */
.il-route811-cap { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--muted); max-width: 52rem; }
.il-route811-cap__lead { display: block; margin-bottom: .5rem; font-size: 1.05rem; line-height: 1.6; color: var(--fg); }

/* Phones: each SVG renders at ~0.64x at 390px, so labels are set larger to land >= 12px on screen */
@media (max-width: 600px) {
  .illus--route811 .lf-label { font-size: 21px; }
  .illus--route811 .lf-small { font-size: 19px; }
}

/* ---------- Motion (once; only with JS and no reduced-motion preference) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Panel A: the route draws out, the door is marked, the way home draws back */
  .js .illus--route811 .il-route811-out, .js .illus--route811 .il-route811-case--out { stroke-dasharray: 1 2; stroke-dashoffset: 1; transition: stroke-dashoffset 1000ms cubic-bezier(.5, 0, .3, 1) 250ms; }
  .js .illus--route811 .il-route811-back, .js .illus--route811 .il-route811-case--back { stroke-dasharray: 1 2; stroke-dashoffset: 1; transition: stroke-dashoffset 1300ms cubic-bezier(.45, 0, .25, 1) 1600ms; }
  .js .illus--route811 .il-route811-seg { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); }
  .js .illus--route811 .il-route811-seg--out { transition: transform 1000ms cubic-bezier(.5, 0, .3, 1) 250ms; }
  .js .illus--route811 .il-route811-seg--back { transition: transform 1300ms cubic-bezier(.45, 0, .25, 1) 1600ms; }
  .js .illus--route811 .il-route811-planned { opacity: 0; transition: opacity 700ms ease 100ms; }
  .js .illus--route811 .il-route811-event, .js .illus--route811 .il-route811-tick--event { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transform: scale(.35); transition: opacity 400ms ease 1200ms, transform 600ms var(--ease-out) 1200ms; }
  .js .illus--route811 .il-route811-homering, .js .illus--route811 .il-route811-tick--home { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transform: scale(1.8); transition: opacity 300ms ease 2650ms, transform 350ms var(--ease-out) 2650ms; }
  .js .illus--route811 .il-route811-panel--route .il-route811-lab { opacity: 0; transform: translateY(6px); transition: opacity 500ms ease, transform 600ms var(--ease-out); }
  .js .illus--route811 .il-route811-panel--route .il-route811-lab--takeoff { transition-delay: 450ms; }
  .js .illus--route811 .il-route811-panel--route .il-route811-lab--event { transition-delay: 1350ms; }
  .js .illus--route811 .il-route811-panel--route .il-route811-lab--turn { transition-delay: 1950ms; }
  .js .illus--route811 .il-route811-panel--route .il-route811-lab--back { transition-delay: 2200ms; }
  .js .illus--route811 .il-route811-panel--route .il-route811-lab--land { transition-delay: 2450ms; }
  .js .illus--route811.is-in .il-route811-out, .js .illus--route811.is-in .il-route811-case--out,
  .js .illus--route811.is-in .il-route811-back, .js .illus--route811.is-in .il-route811-case--back { stroke-dashoffset: 0; }
  .js .illus--route811.is-in .il-route811-seg, .js .illus--route811.is-in .il-route811-event, .js .illus--route811.is-in .il-route811-tick--event,
  .js .illus--route811.is-in .il-route811-homering, .js .illus--route811.is-in .il-route811-tick--home { opacity: 1; transform: none; }
  .js .illus--route811.is-in .il-route811-planned, .js .illus--route811.is-in .il-route811-panel--route .il-route811-lab { opacity: 1; transform: none; }

  /* Panel B: the door outline draws in violet and glows, projects onto the plan view, then engines 3 and 4 dim */
  .js .il-route811-panel--plane .il-route811-door { stroke-dasharray: 1 2; stroke-dashoffset: 1; fill: rgba(182, 156, 240, 0); transition: stroke-dashoffset 700ms cubic-bezier(.5, 0, .3, 1) 600ms, fill 600ms ease 1100ms; }
  .js .il-route811-panel--plane .il-route811-doorglow { opacity: 0; transition: opacity 700ms ease 1100ms; }
  .js .il-route811-panel--plane .il-route811-leader, .js .il-route811-panel--plane .il-route811-lab--door { opacity: 0; transition: opacity 500ms ease 1200ms; }
  .js .il-route811-panel--plane .il-route811-proj { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); transition: transform 500ms cubic-bezier(.5, 0, .3, 1) 1500ms; }
  .js .il-route811-panel--plane .il-route811-doorplan { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transform: scaleX(.2); transition: opacity 300ms ease 1900ms, transform 400ms var(--ease-out) 1900ms; }
  .js .il-route811-panel--plane .il-route811-nac--off { opacity: 1; transition: opacity 600ms ease 2000ms; }
  .js .il-route811-panel--plane .il-route811-lab--eng { opacity: 0; transition: opacity 500ms ease 2100ms; }
  .js .il-route811-panel--plane.is-in .il-route811-door { stroke-dashoffset: 0; fill: rgba(182, 156, 240, .18); }
  .js .il-route811-panel--plane.is-in .il-route811-doorglow, .js .il-route811-panel--plane.is-in .il-route811-leader,
  .js .il-route811-panel--plane.is-in .il-route811-lab--door, .js .il-route811-panel--plane.is-in .il-route811-lab--eng { opacity: 1; }
  .js .il-route811-panel--plane.is-in .il-route811-proj, .js .il-route811-panel--plane.is-in .il-route811-doorplan { opacity: 1; transform: none; }
  .js .il-route811-panel--plane.is-in .il-route811-nac--off { opacity: .5; }
}