/* Scroll animations (driven by bk-animate.js, which adds these classes only when
   motion is allowed). Hidden states use the individual translate / scale
   properties, so they never fight the transform that hover zooms use. */
.bk-anim { --bk-ease-out: cubic-bezier(.16, 1, .3, 1); --bk-ease-mask: cubic-bezier(.77, 0, .18, 1); }

/* line: heading text rises from behind a mask. */
.bk-anim-line { display: inline-block; max-width: 100%; opacity: 0; translate: 0 .55em; clip-path: inset(0 0 100% 0); }
.bk-anim-line.is-in {
  opacity: 1; translate: none; clip-path: inset(-.2em -.2em -.3em -.2em);
  transition: opacity .5s ease var(--bk-delay, 0ms), translate .9s var(--bk-ease-out) var(--bk-delay, 0ms), clip-path .9s var(--bk-ease-out) var(--bk-delay, 0ms);
}
.bk-line-inner { display: inline-block; max-width: 100%; }

/* rise / cascade: fade in while floating up. */
.bk-anim-rise { opacity: 0; translate: 0 48px; }
.bk-anim-cascade { opacity: 0; translate: 0 32px; scale: .94; }
:is(.bk-anim-rise, .bk-anim-cascade).is-in {
  opacity: 1; translate: none; scale: none;
  transition: opacity .9s ease var(--bk-delay, 0ms), translate 1.1s var(--bk-ease-out) var(--bk-delay, 0ms), scale 1.1s var(--bk-ease-out) var(--bk-delay, 0ms);
}

/* curtain: a mask slides up while the photo settles from a slight zoom. */
.bk-anim-curtain { clip-path: inset(100% 0 0 0 round 12px); }
.bk-anim-curtain img { scale: 1.12; }
.bk-anim-curtain.is-in { clip-path: inset(0 0 0 0 round 12px); transition: clip-path 1.1s var(--bk-ease-mask) var(--bk-delay, 0ms); }
.bk-anim-curtain.is-in img { scale: 1; transition: scale 1.6s var(--bk-ease-out) var(--bk-delay, 0ms); }

/* wipe: the photo is uncovered left to right while it settles. The opacity
   transition keeps the sector cards' photo crossfade working meanwhile. */
.bk-anim-wipe { clip-path: inset(0 100% 0 0 round 12px); }
.bk-anim-wipe img { scale: 1.08; }
.bk-anim-wipe.is-in { clip-path: inset(0 0 0 0 round 12px); transition: clip-path 1.1s var(--bk-ease-mask) var(--bk-delay, 0ms); }
.bk-anim-wipe.is-in img { scale: 1; transition: scale 1.4s var(--bk-ease-out) var(--bk-delay, 0ms), opacity .9s ease; }

/* focus: the photo sharpens from a soft blur. */
.bk-anim-focus { opacity: 0; }
.bk-anim-focus img { filter: blur(14px); scale: 1.08; }
.bk-anim-focus.is-in { opacity: 1; transition: opacity .8s ease var(--bk-delay, 0ms); }
.bk-anim-focus.is-in img { filter: none; scale: 1; transition: filter 1.3s ease var(--bk-delay, 0ms), scale 1.4s var(--bk-ease-out) var(--bk-delay, 0ms); }

/* flip: letters turn to face the reader one after another (words never break). */
.bk-anim-flip { perspective: 900px; }
.bk-word { display: inline-block; white-space: nowrap; }
.bk-anim-flip .bk-char { display: inline-block; opacity: 0; transform: rotateY(90deg); transform-origin: 50% 50%; }
.bk-anim-flip.is-in .bk-char {
  opacity: 1; transform: none;
  transition: transform .8s var(--bk-ease-out) calc(var(--i) * 28ms), opacity .5s ease calc(var(--i) * 28ms);
}

/* parallax: the photo is slightly larger than its frame and drifts inside it. */
.bk-parallax-img { scale: 1.15; will-change: translate; }