/* A Bunch of Actors · styles only its pages use, loaded after /shared/deep-dive.css. */

/* the chasing marquee (hero of 4 · Outsiders can understand us, drawn by
   docs/drawing/publicity-outsiders-can-understand-us.py): the bulbs along the marquee's face carry
   bk-c0, bk-c1 or bk-c2 by their place in the row, and a third of them are bright at a time, so the
   light seems to run round the face. The site's first moving picture: one slow movement, stilled for
   anyone whose device asks for reduced motion, and never printed (heroes aren't). */
@keyframes bk-chase{0%,32%{opacity:1}36%,96%{opacity:.4}100%{opacity:1}}
.hero .bk-c0,.hero .bk-c1,.hero .bk-c2{animation:bk-chase 1.8s linear infinite}
.hero .bk-c1{animation-delay:-1.2s}
.hero .bk-c2{animation-delay:-.6s}
@media (prefers-reduced-motion:reduce){.hero .bk-c0,.hero .bk-c1,.hero .bk-c2{animation:none}}

/* the line the news moved (2 · A bunch of actors, drawn by docs/drawing/publicity-membership-line.py):
   AA's membership as one line, in the diagram-and-list form, with the stories as its numbered pins */
.bk-grid{stroke:var(--line);stroke-width:1}
.bk-axis{stroke:var(--line-2);stroke-width:1.5}
.bk-ax{font:400 calc(21px*var(--ts,1)) var(--sans);fill:var(--ink-2)}
.bk-line{fill:none;stroke:var(--accent);stroke-width:4;stroke-linejoin:round;stroke-linecap:round}
.bk-more{fill:none;stroke:var(--accent);stroke-width:3;stroke-dasharray:2 9;stroke-linecap:round}
.bk-dot{fill:var(--accent);stroke:var(--mat);stroke-width:3}
.bk-val{font:700 calc(21px*var(--ts,1)) var(--sans);fill:var(--ink)}
.bk-lead{fill:none;stroke:var(--ink-2);stroke-width:1.5}
.bk-mark{fill:var(--ink-2)}
.house .bk-chart .hs-pin text{font-size:calc(22px*(1 + (var(--ts,1) - 1)*0.9))}

/* the station log (3 · On the air): AA on the radio as a broadcast log, the date in a column beside
   what went out. Phones: the date above. From 700px: side by side. */
.bk-log{list-style:none;margin:28px 0 0;padding:0;border-top:2px solid var(--ink)}
.bk-log li{display:grid;gap:4px;padding:16px 0 18px;border-bottom:1px solid var(--line-2)}
.bk-when{margin:0;font:400 calc(13px*var(--ts,1))/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.bk-what{margin:0;font-size:calc(20px*var(--ts,1));line-height:1.3}
.bk-body{margin:4px 0 0;font:400 calc(16px*var(--ts,1))/1.55 var(--sans);color:var(--ink-2)}
@media (min-width:700px){
  .bk-log li{grid-template-columns:170px minmax(0,1fr);column-gap:28px;padding:20px 0 22px}
  .bk-when{padding-top:6px}
}

/* the lights going by (hero of 1 · Six articles, drawn by docs/drawing/publicity-six-articles.py): the
   town's lights outside the train window are one group, drawn twice side by side, that slides one
   pattern's width (760 drawing units) to the left and starts over */
@keyframes bk-pass{from{transform:translateX(0)}to{transform:translateX(-760px)}}
.hero .bk-pass{animation:bk-pass 16s linear infinite}
@media (prefers-reduced-motion:reduce){.hero .bk-pass{animation:none}}

/* the snow (hero of 2 · A bunch of actors, drawn by docs/drawing/publicity-a-bunch-of-actors.py): the
   flakes are one group, drawn three times one above another 360 drawing units apart, that slides down
   one pattern's height and starts over */
@keyframes bk-snow{from{transform:translateY(-360px)}to{transform:translateY(0)}}
.hero .bk-snow{animation:bk-snow 12s linear infinite}
@media (prefers-reduced-motion:reduce){.hero .bk-snow{animation:none}}

/* the second hand (hero of 3 · On the air, drawn by docs/drawing/publicity-on-the-air.py): the studio
   clock's second hand turns once a minute about the clock's center (its group carries an unpainted
   circle round the pivot, so the group's box is centered there) */
@keyframes bk-sweep{to{transform:rotate(360deg)}}
.hero .bk-sec{transform-box:fill-box;transform-origin:center;animation:bk-sweep 60s linear infinite}
@media (prefers-reduced-motion:reduce){.hero .bk-sec{animation:none}}

/* the tally light (hero of 5 · Masks, drawn by docs/drawing/publicity-masks.py): the studio camera's red
   light glows and dims, as if the camera were on the air */
@keyframes bk-tally{0%,100%{opacity:1}50%{opacity:.4}}
.hero .bk-tally{animation:bk-tally 2.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.hero .bk-tally{animation:none}}

/* the reels (hero of 6 · In shadow, drawn by docs/drawing/publicity-in-shadow.py): the film camera's two
   reels turn about their hubs (each group carries an unpainted circle the size of its reel, so the
   group's box is centered on the hub) */
@keyframes bk-reel{to{transform:rotate(360deg)}}
.hero .bk-reel{transform-box:fill-box;transform-origin:center;animation:bk-reel 3s linear infinite}
@media (prefers-reduced-motion:reduce){.hero .bk-reel{animation:none}}

/* the red ink circle (hero of 7 · My Name Is Bill W., drawn by docs/drawing/publicity-my-name-is-bill-w.py):
   the circle round the listing draws itself once, a moment after the page opens, and stays drawn. Its
   path has pathLength 1, so one dash of length 1 covers it. The one movement here that animates
   something other than opacity or transform: a single small stroke, drawn once. With reduced motion
   it is shown whole at once. */
@keyframes bk-ring{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.hero .bk-ring{stroke-dasharray:1;stroke-dashoffset:0;animation:bk-ring 2.2s ease-in-out .8s both}
@media (prefers-reduced-motion:reduce){.hero .bk-ring{animation:none;stroke-dashoffset:0}}

/* the screens (Legacy · Who's on the screen): AA's own films and spots, one screen each in the order
   they were made, with what a viewer saw in large type, the year and title in a band along its foot,
   and a line under it. Screens from before 1980 are 4:3 with a picture tube's round corners, later
   ones 16:9. Phones: one column. From 700px: two. From 1100px: three. In print the night tokens turn
   to ink on white, so each screen prints as an outlined box. */
.bk-screens{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:30px;align-items:start}
@media (min-width:700px){.bk-screens{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 24px}}
@media (min-width:1100px){.bk-screens{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px;margin-top:36px}}
.bk-scr{display:flex;flex-direction:column;gap:10px}
.bk-tv{position:relative;aspect-ratio:16/9;border-radius:6px;border:1px solid var(--night-edge);background:radial-gradient(ellipse at 50% 42%,var(--night-line),var(--night) 72%);color:var(--night-ink);display:flex;align-items:center;justify-content:center;overflow:hidden}
.bk-tv.crt{aspect-ratio:4/3;border-radius:26px/30px}
.bk-saw{margin:0;padding:0 18px 30px;font:400 calc(clamp(28px,7vw,36px)*(1 + (var(--ts,1) - 1)*0.6))/1.1 var(--display);text-align:center}
@media (min-width:700px){.bk-saw{font-size:calc(clamp(26px,3vw,34px)*(1 + (var(--ts,1) - 1)*0.7))}}
.bk-low{position:absolute;left:0;right:0;bottom:0;margin:0;padding:8px 14px;background:var(--night-line);color:var(--night-ink);font:600 calc(14px*var(--ts,1))/1.3 var(--sans)}
.bk-tv.crt .bk-low{padding-inline:22px}
.bk-yr{margin-right:8px;font:700 calc(13px*var(--ts,1)) var(--mono);letter-spacing:.04em;color:var(--gold)}
.bk-tag{position:absolute;top:10px;right:12px;font:600 calc(11px*var(--ts,1))/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--night-2)}
.bk-said{margin:0;font:400 calc(16px*var(--ts,1))/1.55 var(--sans)}
.bk-scr .go{display:flex;align-items:center;gap:8px;min-height:44px;font:600 calc(14px*var(--ts,1)) var(--sans);text-decoration:none}
@media print{.bk-tv{background:none}.bk-low{border-top:1px solid var(--line)}}

/* the long line (the entrance, How the world heard): the same chart as 2 · A bunch of actors, run to
   today on a scale that goes up by tens (docs/drawing/publicity-lobby-line.py), under the dated list */
.bk-long{margin-top:48px}
.bk-intro{margin:12px 0 0;max-width:720px;font-size:calc(17px*var(--ts,1));line-height:1.55}
@media (min-width:900px){.bk-long{margin-top:64px}}

/* the radio's needle (hero of the entrance, How the world heard, drawn by
   docs/drawing/publicity-lobby.py): the tuning needle drifts slowly back and forth across the lit
   dial, pausing here and there, as if someone were looking for a station */
@keyframes bk-tune{0%,8%{transform:translateX(-44px)}40%,50%{transform:translateX(18px)}66%{transform:translateX(6px)}92%,100%{transform:translateX(52px)}}
.hero .bk-dial{animation:bk-tune 14s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.hero .bk-dial{animation:none}}

/* the steam (hero of Legacy, drawn by docs/drawing/publicity-legacy.py): the two wisps over the coffee
   sway slowly from side to side, out of step, pivoting at the cup */
@keyframes bk-sway{0%,100%{transform:translateX(-5px) skewX(4deg)}50%{transform:translateX(5px) skewX(-4deg)}}
.hero .bk-steam,.hero .bk-steam2{transform-box:fill-box;transform-origin:50% 100%;animation:bk-sway 5s ease-in-out infinite}
.hero .bk-steam2{animation-duration:6.5s;animation-delay:-2s}
@media (prefers-reduced-motion:reduce){.hero .bk-steam,.hero .bk-steam2{animation:none}}