/* Agents Bank - the opening, a short film. See templates/agents/_intro.html.
   Nothing here shows unless <html> carries .play-intro (set once per session,
   only when motion is allowed). The page under it is complete either way.

   One clock, in seconds. The canvas (js/film.js) keys its own beats to the
   same numbers, so if one moves, move it there too.

   0.00  the first photograph fades up; circuits start laying themselves
   0.90  the C writes itself, a bright tip riding its pen      (pulses run IN)
   2.30  the N rises inside it: left stem, the sweep, right stem
   3.40  the pixels burst off the N's corner and settle         (shockwave;
                                                                  pulses run OUT)
   4.50  "Imagine It," . 5.30 "State It" . 6.00 "& We Build It"
   7.10  AGENTS BANK flips in, letter by letter, and is underlined
   9.30  the layer lifts away (9.90 gone)

   Photographs: circuit 0-3.4, servers 2.5-5.9, code 5.0-8.4, network 7.5-end,
   each crossfading under the next while it pans.                            */

.ab-intro { display: none; }

.play-intro { overflow: hidden; }
.play-intro .ab-intro {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  overflow: hidden;
  color: #fff;
  background: #050d27;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  animation: ai-lift .6s cubic-bezier(.7, 0, .84, 0) 9.3s forwards;
}
.intro-out .ab-intro { animation: ai-out .36s cubic-bezier(.4, 0, 1, 1) forwards; }

/* -- the footage ------------------------------------------------------------ */
.ab-film { position: absolute; inset: 0; overflow: hidden; }
.ab-shot {
  position: absolute;
  inset: -5%;
  background: #06102e center / cover no-repeat;
  opacity: 0;
  animation: ai-shot 3.4s linear both;
}
.ab-shot.s1 { background-image: url("../img/film-circuit.8aabbd5c6ed9.webp");
  --x0: -2%; --y0: 2%; --x1: 2%; --y1: -1%; --s0: 1.16; --s1: 1.04; }
.ab-shot.s2 { background-image: url("../img/film-servers.9769b806302d.webp"); animation-delay: 2.5s;
  --x0: 3%; --y0: 0%; --x1: -3%; --y1: 1%; --s0: 1.06; --s1: 1.16; }
.ab-shot.s3 { background-image: url("../img/film-code.ef9c14f7c1ee.webp"); animation-delay: 5s;
  --x0: 0%; --y0: 3%; --x1: -2%; --y1: -2%; --s0: 1.14; --s1: 1.05; }
.ab-shot.s4 { background-image: url("../img/film-network.edf17a8b71e1.webp");
  --x0: -1%; --y0: -2%; --x1: 1%; --y1: 2%; --s0: 1.04; --s1: 1.14;
  animation: ai-shot-last 2.4s linear 7.5s both; }

.ab-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(56% 40% at 50% 40%, rgba(5, 13, 39, .82) 0%, rgba(5, 13, 39, .5) 55%, rgba(5, 13, 39, 0) 100%),
    linear-gradient(180deg, rgba(5, 13, 39, .55) 0%, rgba(5, 13, 39, .15) 30%, rgba(5, 13, 39, .3) 65%, rgba(5, 13, 39, .9) 100%),
    linear-gradient(rgba(169, 185, 224, .05) 1px, transparent 1px) 50% 50% / 24px 24px,
    linear-gradient(90deg, rgba(169, 185, 224, .05) 1px, transparent 1px) 50% 50% / 24px 24px;
}
.ab-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* -- the stage: a slow push-in, the camera moving toward the mark ----------- */
.ab-stage {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(14px, 2.6vh, 26px);
  width: min(100%, 560px);
  animation: ai-dolly 9.3s cubic-bezier(.33, 0, .2, 1) both;
}
.ab-mark { width: min(52vw, 34vh, 260px); height: auto; overflow: visible; }
.ab-mark * { transform-box: fill-box; }

/* -- the C ---------------------------------------------------------------- */
.ai-c { stroke-dasharray: 1 2; stroke-dashoffset: 1;
  animation: ai-draw 1.5s cubic-bezier(.65, 0, .35, 1) .9s forwards; }
.ai-tip { stroke-dasharray: .05 2; stroke-dashoffset: .05; opacity: 0;
  filter: drop-shadow(0 0 18px #19a3ff);
  animation: ai-tip 1.5s cubic-bezier(.65, 0, .35, 1) .9s forwards,
             ai-tipfade .4s ease 2.36s forwards; }

/* -- the N ---------------------------------------------------------------- */
.ai-ls, .ai-rs { transform-origin: 50% 100%; transform: scaleY(0); }
.ai-ls { animation: ai-rise .7s cubic-bezier(.16, 1, .3, 1) 2.3s forwards; }
.ai-rs { animation: ai-rise .7s cubic-bezier(.16, 1, .3, 1) 2.8s forwards; }
.ai-dg { stroke-dasharray: 1 2; stroke-dashoffset: 1;
  animation: ai-draw .6s cubic-bezier(.16, 1, .3, 1) 2.55s forwards; }
.ai-n { animation: ai-flash .9s ease 3.4s both; }

/* -- the pixels, and the sparks they throw -------------------------------- */
.ai-p { opacity: 0; transform-origin: 50% 50%;
  animation: ai-burst .9s cubic-bezier(.2, .9, .25, 1) calc(3.4s + var(--d)) forwards; }
.ai-sparks rect { fill: #8fd0ff; opacity: 0; transform-origin: 50% 50%;
  filter: drop-shadow(0 0 6px #19a3ff);
  animation: ai-spark 1s cubic-bezier(.12, .8, .3, 1) 3.4s forwards; }
.ai-sparks rect:nth-child(even) { fill: #fff; animation-delay: 3.47s; }
.ai-ring { opacity: 0; transform-origin: 50% 50%;
  animation: ai-ring .9s cubic-bezier(.16, 1, .3, 1) 3.38s forwards; }

/* -- Imagine It, State It & We Build It ----------------------------------- */
.ab-tag {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: .1em;
  font: 600 clamp(1.15rem, 4.8vw, 1.7rem)/1.15 "Onest", system-ui, sans-serif;
  letter-spacing: -.01em;
  color: #dbe6ff;
  text-shadow: 0 2px 18px rgba(5, 13, 39, .9);
}
.ab-tag .ph { position: relative; display: inline-block; padding: 0 .1em;
  clip-path: inset(0 100% 0 0); }
.ab-tag .ph3 { color: #fff; font-weight: 700; }
.ab-tag .ph::after {           /* the pixel that builds the line */
  content: ""; position: absolute; top: 50%; left: 0;
  width: .42em; height: .42em; margin-top: -.21em;
  background: #19a3ff; box-shadow: 0 0 14px #19a3ff;
  opacity: 0;
}
.ab-tag .ph1 { animation: ai-build .7s cubic-bezier(.45, 0, .2, 1) 4.5s forwards; }
.ab-tag .ph2 { animation: ai-build .6s cubic-bezier(.45, 0, .2, 1) 5.3s forwards; }
.ab-tag .ph3 { animation: ai-build .8s cubic-bezier(.45, 0, .2, 1) 6s forwards; }
.ab-tag .ph1::after { animation: ai-cursor .7s cubic-bezier(.45, 0, .2, 1) 4.5s forwards; }
.ab-tag .ph2::after { animation: ai-cursor .6s cubic-bezier(.45, 0, .2, 1) 5.3s forwards; }
.ab-tag .ph3::after { animation: ai-cursor .8s cubic-bezier(.45, 0, .2, 1) 6s forwards; }

/* -- AGENTS BANK ------------------------------------------------------------ */
.ab-title {
  position: relative;
  margin: .1em 0 0;
  perspective: 600px;
  font: 800 clamp(2.9rem, 14vw, 5.6rem)/.9 "Big Shoulders Display", "Onest", system-ui, sans-serif;
  letter-spacing: .05em;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 4px 30px rgba(5, 13, 39, .8);
}
.ab-title span { display: inline-block; transform-origin: 50% 0;
  transform: rotateX(-100deg); opacity: 0;
  animation: ai-flap .6s cubic-bezier(.22, 1, .36, 1) calc(7.1s + var(--i) * 70ms) forwards; }
.ab-title .sp { width: .28em; }
.ab-title::after {
  content: ""; position: absolute; left: .02em; right: .07em; bottom: -.16em;
  height: .09em; background: #19a3ff; transform: scaleX(0); transform-origin: 0 50%;
  box-shadow: 0 0 18px rgba(25, 163, 255, .7);
  animation: ai-bar .5s cubic-bezier(.16, 1, .3, 1) 8.35s forwards;
}
.ab-maker {
  margin: .5em 0 0;
  font: 600 .72rem/1 "Onest", system-ui, sans-serif;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #a9b9e0;
  opacity: 0;
  animation: ai-fade .6s ease 8.55s forwards;
}

/* -- skip, and the reel running along the bottom like a player's bar -------- */
.ab-skip {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px;
  padding: 0 12px 0 14px;
  border: 1px solid rgba(169, 185, 224, .35);
  border-radius: 4px;
  background: rgba(5, 13, 39, .55);
  color: #dbe6ff;
  font: 600 .74rem/1 "Onest", system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  animation: ai-fade .5s ease .6s forwards;
  transition: background-color .15s, border-color .15s, color .15s;
}
.ab-skip svg { width: 16px; height: 16px; }
.ab-skip:hover { background: rgba(25, 163, 255, .18); border-color: rgba(25, 163, 255, .7); color: #fff; }
.ab-skip:focus-visible { outline: 2px solid #19a3ff; outline-offset: 2px; }
/* Sound: offered top left, since a browser plays nothing before a tap. */
.ab-sound {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px 0 11px;
  border: 1px solid rgba(169, 185, 224, .35); border-radius: 4px;
  background: rgba(5, 13, 39, .55); color: #dbe6ff;
  font: 600 .74rem/1 "Onest", system-ui, sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; opacity: 0;
  animation: ai-fade .5s ease .6s forwards, ai-call 1.6s ease-in-out 1.4s 3;
  transition: background-color .15s, border-color .15s, color .15s;
}
.ab-sound svg { width: 17px; height: 17px; fill: currentColor; }
.ab-sound svg .w { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: .35; }
.ab-sound:hover { background: rgba(25, 163, 255, .18); border-color: rgba(25, 163, 255, .7); color: #fff; }
.ab-sound:focus-visible { outline: 2px solid #19a3ff; outline-offset: 2px; }
.ab-sound.on { background: rgba(25, 163, 255, .25); border-color: #19a3ff; color: #fff; }
.ab-sound.on svg .w { opacity: 1; }
@keyframes ai-call { 50% { box-shadow: 0 0 0 7px rgba(25, 163, 255, .16); } }
.ab-reel {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(169, 185, 224, .12);
}
.ab-reel i {
  display: block; height: 100%;
  background: #19a3ff;
  box-shadow: 0 0 10px rgba(25, 163, 255, .8);
  transform: scaleX(0); transform-origin: 0 50%;
  animation: ai-reel 9.3s linear forwards;
}

@keyframes ai-shot {
  0%   { opacity: 0; transform: translate(var(--x0), var(--y0)) scale(var(--s0)); }
  26%  { opacity: .78; }
  74%  { opacity: .78; }
  100% { opacity: 0; transform: translate(var(--x1), var(--y1)) scale(var(--s1)); }
}
@keyframes ai-shot-last {
  0%   { opacity: 0; transform: translate(var(--x0), var(--y0)) scale(var(--s0)); }
  36%  { opacity: .78; }
  100% { opacity: .78; transform: translate(var(--x1), var(--y1)) scale(var(--s1)); }
}
@keyframes ai-dolly   { from { transform: scale(.94); } to { transform: none; } }
@keyframes ai-reel    { to { transform: scaleX(1); } }
@keyframes ai-draw    { to { stroke-dashoffset: 0; } }
@keyframes ai-tip     { from { opacity: 1; stroke-dashoffset: .05; } to { opacity: 1; stroke-dashoffset: -.95; } }
@keyframes ai-tipfade { from { opacity: 1; } to { opacity: 0; } }
@keyframes ai-rise    { to { transform: scaleY(1); } }
@keyframes ai-flash   { 0%, 100% { filter: none; } 35% { filter: brightness(1.35) drop-shadow(0 0 22px rgba(25, 163, 255, .55)); } }
@keyframes ai-burst {
  0%   { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(.2) rotate(-90deg); }
  45%  { opacity: 1; transform: translate(calc(var(--fx) * -.45), calc(var(--fy) * -.45)) scale(1.3) rotate(18deg); }
  75%  { transform: translate(calc(var(--fx) * .08), calc(var(--fy) * .08)) scale(.94) rotate(-4deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes ai-spark {
  0%   { opacity: 0; transform: none; }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(.3); }
}
@keyframes ai-ring    { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(3.4); } }
@keyframes ai-build   { to { clip-path: inset(0 -1em 0 0); } }
@keyframes ai-cursor  { 0% { opacity: 1; left: 0; } 85% { opacity: 1; } 100% { opacity: 0; left: calc(100% - .2em); } }
@keyframes ai-flap    { 0% { opacity: 0; transform: rotateX(-100deg); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes ai-bar     { to { transform: scaleX(1); } }
@keyframes ai-fade    { to { opacity: 1; } }
@keyframes ai-lift    { to { opacity: 0; transform: translateY(-6%); visibility: hidden; pointer-events: none; } }
@keyframes ai-out     { to { opacity: 0; visibility: hidden; pointer-events: none; } }

@media (prefers-reduced-motion: reduce) {
  .play-intro .ab-intro { display: none; }
  .play-intro { overflow: visible; }
}