/* [x-choreo] the site's callouts: site/scroll.css and cinema.css, copied (design px in the 1277x959 frame) */
@font-face { font-family: Archivo; src: url('assets/fonts/Archivo.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@property --enter { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
#callouts { --amber: #ffaf43; --cream: #f0dfc4; --ease: cubic-bezier(.22,1,.36,1); position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 3; pointer-events: none; overflow: hidden; font-family: Archivo, 'Helvetica Neue', Arial, sans-serif; color: var(--cream); }
.capture #callouts, .still #callouts { position: absolute; }
.co-frame { position: absolute; left: 0; top: 0; width: 1277px; height: 959px; transform-origin: 0 0; perspective: 1100px; }
.co-frame svg { position: absolute; left: 0; top: 0; overflow: visible; }
.co-line { fill: none; stroke: var(--amber); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .22s ease-in; }
.co-dot { fill: var(--amber); transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .18s ease-in; }
g.on .co-dot { transform: scale(1); transition: transform .32s cubic-bezier(.34,1.56,.64,1); }
g.on .co-line { stroke-dashoffset: 0; transition: stroke-dashoffset .42s var(--ease) .12s; }
g.on .co-branch { transition: stroke-dashoffset .3s var(--ease) .5s; }
.co-box { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 12px 12px;
  background: rgba(0,0,0,.75); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid var(--amber);
  box-shadow: 0 0 16px #000, -1px 0 4px #00000080, 0 0 4px #000; translate: 0 -50%; transform: rotateY(var(--enter));
  clip-path: inset(-30px 100% -30px -30px); opacity: 0; --enter: 0deg;
  transition: clip-path .2s ease-in, opacity .2s ease-in, --enter .2s ease-in; }
.co-box[data-side=right] { border-right: 0; transform-origin: left center; --enter: -38deg; }
.co-box[data-side=left] { border-left: 0; transform-origin: right center; clip-path: inset(-30px -30px -30px 100%); --enter: 38deg; }
.co-box.on { clip-path: inset(-30px -30px -30px -30px); opacity: 1; --enter: 0deg; transition: clip-path .42s var(--ease) .5s, opacity .2s linear .5s, --enter .7s var(--ease) .5s; }
.co-title { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: .16px; line-height: normal; color: var(--amber); white-space: nowrap; }
.co-body { font-size: 10px; font-weight: 300; letter-spacing: .4px; line-height: 1.5; color: var(--cream); }
.co-body p { margin: 0 0 15px; } .co-body p:last-child { margin: 0; }
.co-body p.co-note { margin: 6px 0 0; font-size: 8px; line-height: 1.4; letter-spacing: .3px; opacity: .62; } /* [v3] the footnote under ATS-friendly*: small and quieter, inside the box */ .co-body b { font-weight: 700; }
.co-title, .co-body { opacity: 0; translate: 0 4px; transition: opacity .15s ease-in, translate .15s ease-in; }
.co-box.on .co-title { opacity: 1; translate: 0 0; transition: opacity .3s ease-out .78s, translate .4s var(--ease) .78s; }
.co-box.on .co-body { opacity: 1; translate: 0 0; transition: opacity .35s ease-out .92s, translate .45s var(--ease) .92s; }
#callouts.instant *, #callouts.instant g * { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .co-box { --enter: 0deg !important; } }
/* [y-ch0304, judge fix 6] ?costyle=lite: a proposal for Q (see callouts.js): no SVG filter, no backdrop blur */
#callouts.lite .co-halo { stroke: #000; stroke-width: 4; stroke-opacity: .55; stroke-linecap: round; }
#callouts.lite .co-dot { stroke: #000; stroke-width: 1.5; stroke-opacity: .5; paint-order: stroke; }
#callouts.lite .co-box { background: rgba(0,0,0,.84); backdrop-filter: none; -webkit-backdrop-filter: none; }
/* [now-2] (QA) as on the site (site/scroll.css, scroll.js calloutsWanted): no callouts at 800 px wide and below */
@media (max-width: 800px) { #callouts { display: none; } }
/* [now-2] nor on a portrait window wider than that (900x1600: the boxes came out 120 px wide, their text 7 px) */
@media (max-aspect-ratio: 1/1) { #callouts { display: none; } }
/* [ch04] chapter 04's link (cup to app, Q's Figma 51:654): the box hangs under the line, an amber top edge only; it swings
   down into place from that edge (as the side boxes swing out from theirs) */
.co-box[data-side=down] { translate: 0 0; border: 0; border-top: 1px solid var(--amber); padding: 18px 16px 16px; gap: 9px;
  transform-origin: center top; transform: rotateX(var(--enter)); --enter: -42deg; clip-path: inset(-30px -30px 100% -30px); }
.co-box[data-side=down].on { clip-path: inset(-30px -30px -30px -30px); --enter: 0deg; }
.co-box[data-side=down] .co-title { white-space: normal; text-wrap: balance; }
.co-box[data-side=down] .co-body { text-wrap: pretty; }
/* [ch04] no room under the line (the HUD's bottom rows): the box sits over it, its amber edge at the bottom */
.co-box[data-side=up] { translate: 0 0; border: 0; border-bottom: 1px solid var(--amber); padding: 16px 16px 18px; gap: 9px;
  transform-origin: center bottom; transform: rotateX(var(--enter)); --enter: 42deg; clip-path: inset(100% -30px -30px -30px); }
.co-box[data-side=up].on { clip-path: inset(-30px -30px -30px -30px); --enter: 0deg; }
.co-box[data-side=up] .co-title { white-space: normal; text-wrap: balance; }
.co-box[data-side=up] .co-body { text-wrap: pretty; }