/* ═══════════════════════════════════════════════════════════════════════════
   Bricks Animator — Frontend CSS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Entrance keyframes ──────────────────────────────────────────────────── */
@keyframes ba-fadeIn       { from { opacity:0 }                           to { opacity:1 } }
@keyframes ba-fadeOut      { from { opacity:1 }                           to { opacity:0 } }

/* Slide: starts fully outside the viewport */
@keyframes ba-slideUp      { from { opacity:0; transform:translateY(60px) }  to { opacity:1; transform:translateY(0) } }
@keyframes ba-slideDown    { from { opacity:0; transform:translateY(-60px) }  to { opacity:1; transform:translateY(0) } }
@keyframes ba-slideLeft    { from { opacity:0; transform:translateX(100vw) }  to { opacity:1; transform:translateX(0) } }
@keyframes ba-slideRight   { from { opacity:0; transform:translateX(-100vw) } to { opacity:1; transform:translateX(0) } }

@keyframes ba-zoomIn       { from { opacity:0; transform:scale(.6) }      to { opacity:1; transform:scale(1) } }
@keyframes ba-zoomOut      { from { opacity:0; transform:scale(1.4) }     to { opacity:1; transform:scale(1) } }
@keyframes ba-flipX        { from { opacity:0; transform:perspective(600px) rotateX(90deg) } to { opacity:1; transform:perspective(600px) rotateX(0) } }
@keyframes ba-flipY        { from { opacity:0; transform:perspective(600px) rotateY(90deg) } to { opacity:1; transform:perspective(600px) rotateY(0) } }
@keyframes ba-rotateIn     { from { opacity:0; transform:rotate(-200deg) scale(.5) }         to { opacity:1; transform:rotate(0) scale(1) } }
@keyframes ba-bounceIn     {
  0%   { opacity:0; transform:scale(.3) }
  50%  { opacity:.9; transform:scale(1.07) }
  70%  { transform:scale(.95) }
  85%  { transform:scale(1.03) }
  100% { opacity:1; transform:scale(1) }
}
@keyframes ba-blurIn       { from { opacity:0; filter:blur(20px) }        to { opacity:1; filter:blur(0) } }
@keyframes ba-rollIn       { from { opacity:0; transform:translateX(-100%) rotate(-120deg) } to { opacity:1; transform:none } }
@keyframes ba-lightSpeedIn {
  from { opacity:0; transform:translateX(100%) skewX(-30deg) }
  60%  { transform:skewX(10deg) }
  80%  { transform:skewX(-3deg) }
  to   { opacity:1; transform:none }
}
@keyframes ba-jackInBox    {
  0%   { opacity:0; transform:scale(.1) rotate(30deg); transform-origin:center bottom }
  50%  { transform:rotate(-10deg) }
  70%  { transform:rotate(3deg) }
  100% { opacity:1; transform:scale(1) }
}

/* ─── Text-specific keyframes ─────────────────────────────────────────────── */

/* Cinematic clip reveal — text appears from behind a mask */
@keyframes ba-clipUp    {
  from { clip-path:inset(100% 0 0 0); opacity:1 }
  to   { clip-path:inset(0 0 0 0);    opacity:1 }
}
@keyframes ba-clipDown  {
  from { clip-path:inset(0 0 100% 0); opacity:1 }
  to   { clip-path:inset(0 0 0 0);    opacity:1 }
}
@keyframes ba-clipLeft  {
  from { clip-path:inset(0 100% 0 0); opacity:1 }
  to   { clip-path:inset(0 0 0 0);    opacity:1 }
}
@keyframes ba-clipRight {
  from { clip-path:inset(0 0 0 100%); opacity:1 }
  to   { clip-path:inset(0 0 0 0);    opacity:1 }
}

/* Letter spacing — letters collapse in from spread */
@keyframes ba-letterSpread {
  from { opacity:0; letter-spacing:.5em }
  to   { opacity:1; letter-spacing:normal }
}
@keyframes ba-letterCollapse {
  from { opacity:0; letter-spacing:-.3em }
  to   { opacity:1; letter-spacing:normal }
}

/* Text focus — sharp from blur */
@keyframes ba-textFocus {
  from { opacity:0; filter:blur(14px) }
  to   { opacity:1; filter:blur(0) }
}

/* Skew reveal */
@keyframes ba-skewLeft {
  from { opacity:0; transform:skewX(-20deg) translateX(-60px) }
  to   { opacity:1; transform:skewX(0) translateX(0) }
}
@keyframes ba-skewRight {
  from { opacity:0; transform:skewX(20deg) translateX(60px) }
  to   { opacity:1; transform:skewX(0) translateX(0) }
}

/* Pop — quick scale pop */
@keyframes ba-textPop {
  0%   { opacity:0; transform:scale(.4) }
  70%  { opacity:1; transform:scale(1.08) }
  100% { transform:scale(1) }
}

/* Rise — slides up with easing */
@keyframes ba-textRise {
  from { opacity:0; transform:translateY(1.5em) }
  to   { opacity:1; transform:translateY(0) }
}

/* Glitch */
@keyframes ba-glitch {
  0%,100% { clip-path:inset(0 0 100% 0); transform:none }
  10%     { clip-path:inset(10% 0 60% 0); transform:translateX(-4px) }
  20%     { clip-path:inset(40% 0 40% 0); transform:translateX(4px) }
  30%     { clip-path:inset(60% 0 10% 0); transform:translateX(-2px) }
  40%     { clip-path:inset(0 0 0 0);      transform:none }
  50%     { clip-path:inset(0 0 0 0);      opacity:.8 }
  60%     { clip-path:inset(20% 0 50% 0); transform:translateX(3px) }
  70%     { clip-path:inset(50% 0 20% 0); transform:translateX(-3px) }
  80%     { clip-path:inset(0 0 0 0);      transform:none; opacity:1 }
}

/* Typewriter — handled by JS, this just provides the cursor blink */
@keyframes ba-cursor { 0%,100% { border-right-color:currentColor } 50% { border-right-color:transparent } }
.ba-typewriter-cursor { border-right:.1em solid; animation:ba-cursor .7s step-end infinite; }

/* Per-character cascade — JS splits into spans */
.ba-cascade-char {
  display:inline-block;
  animation:ba-fadeIn .4s ease both;
}

/* ─── Hover effects ───────────────────────────────────────────────────────── */
@keyframes ba-shake   { 0%,100%{transform:none} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }
@keyframes ba-pulse   { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes ba-wobble  { 0%,100%{transform:none} 15%{transform:translateX(-10px) rotate(-5deg)} 30%{transform:translateX(8px) rotate(3deg)} 45%{transform:translateX(-6px) rotate(-3deg)} 60%{transform:translateX(4px) rotate(2deg)} 75%{transform:translateX(-2px) rotate(-1deg)} }

.ba-hover-scale-up   { transition:transform var(--ba-hdur,.3s) ease; }
.ba-hover-scale-up:hover   { transform:scale(1.05); }
.ba-hover-scale-down { transition:transform var(--ba-hdur,.3s) ease; }
.ba-hover-scale-down:hover { transform:scale(.95); }
.ba-hover-lift       { transition:transform var(--ba-hdur,.3s) ease, box-shadow var(--ba-hdur,.3s) ease; }
.ba-hover-lift:hover       { transform:translateY(-6px); box-shadow:0 16px 40px rgba(0,0,0,.18); }
.ba-hover-glow       { transition:box-shadow var(--ba-hdur,.3s) ease; }
.ba-hover-glow:hover       { box-shadow:0 0 20px 4px rgba(124,58,237,.5); }
.ba-hover-shake:hover      { animation:ba-shake var(--ba-hdur,.5s) ease; }
.ba-hover-pulse:hover      { animation:ba-pulse var(--ba-hdur,.6s) ease infinite; }
.ba-hover-wobble:hover     { animation:ba-wobble var(--ba-hdur,.8s) ease; }
.ba-hover-tilt       { transition:transform var(--ba-hdur,.3s) ease; }
.ba-hover-tilt:hover       { transform:perspective(400px) rotateY(8deg); }

/* ═══════════════════════════════════════════════════════════════════════════
   Word-level staggered animations (per-word splits via JS)
   Applied to .ba-word spans injected by the animation engine.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Word wrapper — mask for slide/rotate effects */
.ba-word-wrap  { display:inline-block; overflow:hidden; vertical-align:bottom; }
.ba-word-inner { display:inline-block; }

/* ─── Keyframes ─────────────────────────────────────────────────────────── */
@keyframes ba-wBlur        { from { opacity:0; filter:blur(10px) }          to { opacity:1; filter:blur(0) } }
@keyframes ba-wFade        { from { opacity:0 }                              to { opacity:1 } }
@keyframes ba-wFlipX       { from { opacity:0; transform:perspective(500px) rotateX(90deg) }  to { opacity:1; transform:perspective(500px) rotateX(0) } }
@keyframes ba-wFlipY       { from { opacity:0; transform:perspective(500px) rotateY(90deg) }  to { opacity:1; transform:perspective(500px) rotateY(0) } }
@keyframes ba-wSkewLTR     { from { opacity:0; transform:skewX(-30deg) translateX(-40px) }   to { opacity:1; transform:none } }
@keyframes ba-wSkewRTL     { from { opacity:0; transform:skewX(30deg)  translateX(40px) }    to { opacity:1; transform:none } }
@keyframes ba-wRotateLTR   { from { opacity:0; transform:rotate(-12deg) translateX(-20px) }  to { opacity:1; transform:none } }
@keyframes ba-wRotateRTL   { from { opacity:0; transform:rotate(12deg)  translateX(20px) }   to { opacity:1; transform:none } }
@keyframes ba-wSlideUp     { from { transform:translateY(110%) }  to { transform:translateY(0) } }
@keyframes ba-wSlideDown   { from { transform:translateY(-110%) } to { transform:translateY(0) } }
@keyframes ba-wZoomIn      { from { opacity:0; transform:scale(0.2) }  to { opacity:1; transform:scale(1) } }
@keyframes ba-wZoomOut     { from { opacity:0; transform:scale(2.5) }  to { opacity:1; transform:scale(1) } }
/* Slide + Rotate combined */
@keyframes ba-wSlideUpRot  { from { transform:translateY(110%) rotate(8deg) }  to { transform:translateY(0) rotate(0) } }
@keyframes ba-wSlideDownRot { from { transform:translateY(-110%) rotate(-8deg) } to { transform:translateY(0) rotate(0) } }