/* =========================================================================
   AKHA LABS — site-level animation + layout helpers
   Keyframes for the cinematic hero video wall, entrances, and grain.
   ========================================================================= */

/* --- cinematic crossfade for the hero "reel wall" --- */
@keyframes ak-scene {
  0%   { opacity: 0; transform: scale(1.08); }
  8%   { opacity: 1; }
  30%  { opacity: 1; transform: scale(1.14); }
  38%  { opacity: 0; transform: scale(1.16); }
  100% { opacity: 0; }
}

/* slow drift for individual tiles in the mosaic variant */
@keyframes ak-kenburns {
  0%   { transform: scale(1.05) translate(0, 0); }
  100% { transform: scale(1.18) translate(-2%, -2%); }
}

@keyframes ak-tile-cycle {
  0%, 22%   { opacity: 1; }
  30%, 92%  { opacity: 0; }
  100%      { opacity: 1; }
}

/* scanning playhead under the hero */
@keyframes ak-playhead {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(0%); }
}

/* entrance: fade + rise, gated by .ak-reveal once in view */
.ak-rise { opacity: 0; transform: translateY(18px); }
.ak-reveal .ak-rise {
  opacity: 1; transform: translateY(0);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.ak-reveal .ak-rise.d1 { transition-delay: 60ms; }
.ak-reveal .ak-rise.d2 { transition-delay: 130ms; }
.ak-reveal .ak-rise.d3 { transition-delay: 200ms; }
.ak-reveal .ak-rise.d4 { transition-delay: 270ms; }
.ak-reveal .ak-rise.d5 { transition-delay: 340ms; }

/* ---- ambient animated gradient blooms (content sections) ----
   Two soft accent blooms drifting very slowly behind section content.
   Colors come from the theme (--bloom-warm / --bloom-cool). */
.ak-ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ak-ambient::before, .ak-ambient::after {
  content: ''; position: absolute; border-radius: 999px;
  width: 58vw; height: 58vw; min-width: 540px; min-height: 540px;
  will-change: transform;
}
.ak-ambient::before {
  background: radial-gradient(circle, var(--bloom-warm) 0%, transparent 62%);
  top: -22%; right: -14%;
  animation: ak-drift-a 26s var(--ease-inout) infinite alternate;
}
.ak-ambient::after {
  background: radial-gradient(circle, var(--bloom-cool) 0%, transparent 62%);
  bottom: -26%; left: -16%;
  animation: ak-drift-b 34s var(--ease-inout) infinite alternate;
}
.ak-ambient.flip::before { right: auto; left: -14%; }
.ak-ambient.flip::after  { left: auto; right: -16%; }

@keyframes ak-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-7%, 9%, 0) scale(1.18); }
}
@keyframes ak-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(8%, -7%, 0) scale(0.94); }
}

@media (prefers-reduced-motion: reduce) {
  .ak-rise { opacity: 1 !important; transform: none !important; }
  [data-ak-scene], [data-ak-tile] { animation: none !important; }
  .ak-ambient::before, .ak-ambient::after { animation: none !important; }
}

/* print/export safety — never let an un-revealed section export blank */
@media print {
  .ak-rise { opacity: 1 !important; transform: none !important; }
}

/* film grain overlay (reusable) */
.ak-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.4; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMjAnIGhlaWdodD0nMTIwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEyMCcgaGVpZ2h0PScxMjAnIGZpbHRlcj0ndXJsKCNuKScgb3BhY2l0eT0nMC41Jy8+PC9zdmc+");
}

/* generic media tile hover for portrait/work cards */
.ak-hovermedia { transition: transform var(--dur-base) var(--ease-out); }
.ak-hovermedia:hover { transform: translateY(-4px); }