/* ==========================================================
   TygerLabs.ai · Animations
   Motion exists only inside prefers-reduced-motion: no-preference.
   That opt-in shape lets reduced motion win without forcing
   precedence: for those readers the rules never apply.
   ========================================================== */

@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes glow-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-3%, 2%, 0) scale(1.06); }
}
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
/* Logo: the tiger springs in, then a sheen crosses it every few seconds */
@keyframes tyger-pounce {
  0%   { opacity: 0; transform: translateY(-6px) scale(0.6) rotate(-14deg); }
  55%  { opacity: 1; transform: scale(1.12) rotate(4deg); }
  78%  { transform: scale(0.97) rotate(-1deg); }
  100% { transform: none; }
}
/* One 16s idle routine, so the head never repeats the same move twice in
   a row: look around, roar, breathe, hop. The sheen runs on the same clock
   and crosses the head twice, before the look and after the roar. */
@keyframes tyger-idle {
  0%, 16%  { transform: none; filter: var(--logo-depth); }
  /* look around */
  20%, 24% { transform: rotate(-9deg); }
  28%, 32% { transform: rotate(8deg); }
  36%      { transform: none; }
  /* roar: punch in, growl shake, flare */
  48%      { transform: none; filter: var(--logo-depth); }
  50%      { transform: scale(1.15); filter: var(--logo-depth-flare); }
  51%      { transform: scale(1.15) rotate(-3deg); }
  52%      { transform: scale(1.15) rotate(3deg); }
  53%      { transform: scale(1.13) rotate(-2deg); }
  54%      { transform: scale(1.1) rotate(2deg); filter: var(--logo-depth-flare); }
  57%      { transform: none; filter: var(--logo-depth); }
  /* breathe: the halo swells and settles */
  66%      { filter: var(--logo-depth); }
  72%      { filter: var(--logo-depth-flare); }
  79%      { filter: var(--logo-depth); }
  /* hop: crouch, jump, land */
  85%      { transform: none; }
  88%      { transform: translateY(3px) scale(1.05, 0.9); }
  91%      { transform: translateY(-10px) scale(0.97, 1.05); }
  94%      { transform: translateY(1px) scale(1.04, 0.95); }
  97%, 100% { transform: none; filter: var(--logo-depth); }
}
@keyframes tyger-sheen {
  0%          { background-position: 100% 0; }
  7%          { background-position: 0% 0; }
  7.01%, 58%  { background-position: 100% 0; }
  65%         { background-position: 0% 0; }
  65.01%, 100% { background-position: 100% 0; }
}

/* Scratch: raked in once, left to right, as the hero form arrives */
@keyframes scratch-rake {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Roar button: a ring that ripples out to invite a tap, and a shake with a
   hard ring while a roar plays */
@keyframes roar-shake {
  0%, 100% { transform: rotate(0) scale(1.08); }
  20%      { transform: rotate(-9deg) scale(1.12); }
  40%      { transform: rotate(8deg) scale(1.1); }
  60%      { transform: rotate(-6deg) scale(1.12); }
  80%      { transform: rotate(5deg) scale(1.1); }
}
@keyframes song-ripple {
  0%   { box-shadow: 0 0 0 0 var(--tiger-rim); }
  70%  { box-shadow: 0 0 0 18px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }


  .anim-rise { animation: rise 700ms var(--ease) both; }
  .anim-rise-d1 { animation-delay: 90ms; }
  .anim-rise-d2 { animation-delay: 180ms; }
  .anim-rise-d3 { animation-delay: 270ms; }
  .anim-drift { animation: glow-drift 14s ease-in-out infinite; }
  .anim-marquee { animation: marquee 40s linear infinite; }
  .status-dot.is-live { animation: pulse-dot 2s ease-in-out infinite; }

  /* backwards, not both: once it lands, hover can take over the transform */
  .site-brand-mark { animation: tyger-pounce 900ms var(--ease) backwards; }
  .site-brand-mark img { animation: tyger-idle 16s ease-in-out 1s infinite; }
  .roar-fab::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: song-ripple 2.4s ease-out 2s infinite;
  }
  .roar-fab.is-roaring { animation: roar-shake 420ms ease-in-out infinite; }
  .roar-fab.is-roaring::after { animation-duration: 0.7s; animation-delay: 0s; }
  .home-form-scratch { animation: scratch-rake 380ms cubic-bezier(0.3, 0.7, 0.2, 1) 900ms backwards; }
  /* Heading dividers rake in as they scroll into view. Hidden only once the
     script has marked the page (.can-rake), so without JS they simply show. */
  .can-rake .scratch-divider { clip-path: inset(0 100% 0 0); transition: clip-path 420ms cubic-bezier(0.3, 0.7, 0.2, 1); }
  .can-rake .scratch-divider.is-raked { clip-path: inset(0 0 0 0); }
  .site-brand-mark::after { animation: tyger-sheen 16s ease-in-out 1s infinite; }
  .site-brand:hover .site-brand-mark,
  .site-brand:focus-visible .site-brand-mark {
    transform: perspective(420px) rotateY(-18deg) rotateX(8deg) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active,
  a.feature:hover, a.related-card:hover, a.spec-card:hover,
  a.archive-card:hover, .why-tile:hover { transform: none; }
}