/* MotionAX frontend — class-driven scroll + page-load animations.
 * API: class="max max-fade-up max-ease-out-cubic max-d-700 max-delay-100 max-repeat"
 *      class="max max-zoom-in max-ease-out-expo max-d-1000 max-onload" (plays on page load)
 * Hidden states apply under html.max-js, which is added by a tiny inline
 * script in <head> BEFORE first paint — so onload elements are hidden
 * (opacity 0 / offset) from the very first frame with zero flash.
 * No-JS visitors never get the class and stay fully visible (SEO-safe).
 */

:root {
  --max-d: .7s;
  --max-delay: 0s;
  --max-ease: cubic-bezier(.215,.61,.355,1);
  --max-dist: 48px;
  --max-scale0: .85;
  --max-blur0: 12px;
}

/* ---------- Base ---------- */
html.max-js .max {
  opacity: 0;
  transform: translate3d(var(--max-x, 0), var(--max-y, 0), 0)
    scale(var(--max-scale, 1))
    rotate(var(--max-rot, 0deg))
    skew(var(--max-skew-x, 0deg), var(--max-skew-y, 0deg));
  filter: blur(var(--max-blur, 0px));
  clip-path: var(--max-clip, none);
  transition-property: opacity, transform, filter, clip-path;
  transition-duration: var(--max-d);
  transition-timing-function: var(--max-ease);
  transition-delay: 0s;
  will-change: opacity, transform, filter;
  backface-visibility: hidden;
}

html.max-js .max.max-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
  clip-path: none;
  transition-delay: var(--max-delay);
}

/* ---------- Fades ---------- */
html.max-js .max-fade-in            { --max-x: 0; --max-y: 0; }
html.max-js .max-fade-up            { --max-y: var(--max-dist); }
html.max-js .max-fade-down          { --max-y: calc(var(--max-dist) * -1); }
html.max-js .max-fade-left          { --max-x: var(--max-dist); }
html.max-js .max-fade-right         { --max-x: calc(var(--max-dist) * -1); }

/* ---------- Slides (translate + soft fade) ---------- */
html.max-js .max-slide-up           { --max-y: var(--max-dist); }
html.max-js .max-slide-down         { --max-y: calc(var(--max-dist) * -1); }
html.max-js .max-slide-left         { --max-x: var(--max-dist); }
html.max-js .max-slide-right        { --max-x: calc(var(--max-dist) * -1); }
html.max-js .max-slide-up,
html.max-js .max-slide-down,
html.max-js .max-slide-left,
html.max-js .max-slide-right        { opacity: 1; }
html.max-js .max-slide-up:not(.max-in),
html.max-js .max-slide-down:not(.max-in),
html.max-js .max-slide-left:not(.max-in),
html.max-js .max-slide-right:not(.max-in) { opacity: 0; }

/* ---------- Zooms / scales ---------- */
html.max-js .max-zoom-in            { --max-scale: var(--max-scale0); }
html.max-js .max-zoom-out           { --max-scale: 1.25; }
html.max-js .max-scale-up           { --max-scale: .6; }
html.max-js .max-scale-down         { --max-scale: 1.4; }

/* ---------- Flips ---------- */
html.max-js .max-flip-x             { --max-rot: 0deg; transform: perspective(800px) rotateX(-90deg); }
html.max-js .max-flip-y             { transform: perspective(800px) rotateY(-90deg); }
html.max-js .max-flip-up            { transform: perspective(800px) rotateX(70deg) translateY(40px); }
html.max-js .max-flip-down          { transform: perspective(800px) rotateX(-70deg) translateY(-40px); }
html.max-js .max-flip-left          { transform: perspective(800px) rotateY(70deg) translateX(40px); }
html.max-js .max-flip-right         { transform: perspective(800px) rotateY(-70deg) translateX(-40px); }
html.max-js .max-flip-x.max-in,
html.max-js .max-flip-y.max-in,
html.max-js .max-flip-up.max-in,
html.max-js .max-flip-down.max-in,
html.max-js .max-flip-left.max-in,
html.max-js .max-flip-right.max-in  { transform: perspective(800px) rotateX(0) rotateY(0) translate(0,0); }

/* ---------- Rotates ---------- */
html.max-js .max-rotate-in          { --max-rot: -180deg; --max-scale: .6; }
html.max-js .max-rotate-left        { --max-rot: -90deg; --max-scale: .8; }
html.max-js .max-rotate-right       { --max-rot: 90deg; --max-scale: .8; }

/* ---------- Bounce / back entrances (initial offset; bounce comes from easing) ---------- */
html.max-js .max-bounce-in          { --max-scale: .3; }
html.max-js .max-bounce-up          { --max-y: 120px; }
html.max-js .max-bounce-down        { --max-y: -120px; }
html.max-js .max-bounce-left        { --max-x: 120px; }
html.max-js .max-bounce-right       { --max-x: -120px; }
html.max-js .max-back-in-up         { --max-y: 120px; --max-scale: .7; }
html.max-js .max-back-in-down       { --max-y: -120px; --max-scale: .7; }
html.max-js .max-back-in-left       { --max-x: 120px; --max-scale: .7; }
html.max-js .max-back-in-right      { --max-x: -120px; --max-scale: .7; }

/* ---------- Blur / cinematic ---------- */
html.max-js .max-blur-in            { --max-blur: var(--max-blur0); }
html.max-js .max-blur-up            { --max-blur: var(--max-blur0); --max-y: var(--max-dist); }
html.max-js .max-clip-up            { --max-clip: inset(100% 0 0 0); --max-y: 40px; }
html.max-js .max-clip-left          { --max-clip: inset(0 0 0 100%); --max-x: 40px; }
html.max-js .max-skew-in            { --max-skew-x: -12deg; --max-x: -40px; }
html.max-js .max-tilt-in            { transform: perspective(900px) rotateX(25deg) rotateY(-25deg) scale(.85); }
html.max-js .max-tilt-in.max-in     { transform: perspective(900px) rotateX(0) rotateY(0) scale(1); }
html.max-js .max-roll-in            { --max-x: -120px; --max-rot: -180deg; }
html.max-js .max-light-speed        { --max-x: 120px; --max-skew-x: -20deg; }
html.max-js .max-pop-in             { --max-scale: .5; }

/* ---------- Easings ---------- */
.max-ease-linear      { --max-ease: linear; }
.max-ease-out-quad    { --max-ease: cubic-bezier(.25,.46,.45,.94); }
.max-ease-out-cubic   { --max-ease: cubic-bezier(.215,.61,.355,1); }
.max-ease-out-quart   { --max-ease: cubic-bezier(.165,.84,.44,1); }
.max-ease-out-quint   { --max-ease: cubic-bezier(.23,1,.32,1); }
.max-ease-out-expo    { --max-ease: cubic-bezier(.19,1,.22,1); }
.max-ease-out-circ    { --max-ease: cubic-bezier(.075,.82,.165,1); }
.max-ease-in-quad     { --max-ease: cubic-bezier(.55,.085,.68,.53); }
.max-ease-in-cubic    { --max-ease: cubic-bezier(.55,.055,.675,.19); }
.max-ease-in-out      { --max-ease: cubic-bezier(.645,.045,.355,1); }
.max-ease-snap        { --max-ease: cubic-bezier(.85,0,.15,1); }
.max-ease-smooth      { --max-ease: cubic-bezier(.4,0,.2,1); }
.max-ease-bounce      { --max-ease: cubic-bezier(.34,1.56,.64,1); }
.max-ease-spring      { --max-ease: cubic-bezier(.34,1.8,.64,1); }
.max-ease-overshoot   { --max-ease: cubic-bezier(.175,.885,.32,1.275); }
.max-ease-elastic-out { --max-ease: linear(0, .1 4%, .35 10%, .6 16%, .8 22%, .95 28%, 1 35%, .97 42%, .99 50%, 1 60%, 1); }

/* ---------- Durations ---------- */
.max-d-100  { --max-d: .1s; }  .max-d-200  { --max-d: .2s; }
.max-d-300  { --max-d: .3s; }  .max-d-400  { --max-d: .4s; }
.max-d-500  { --max-d: .5s; }  .max-d-600  { --max-d: .6s; }
.max-d-700  { --max-d: .7s; }  .max-d-800  { --max-d: .8s; }
.max-d-900  { --max-d: .9s; }  .max-d-1000 { --max-d: 1s; }
.max-d-1200 { --max-d: 1.2s; } .max-d-1500 { --max-d: 1.5s; }
.max-d-2000 { --max-d: 2s; }

/* ---------- Delays ---------- */
.max-delay-0    { --max-delay: 0s; }    .max-delay-50   { --max-delay: .05s; }
.max-delay-100  { --max-delay: .1s; }   .max-delay-150  { --max-delay: .15s; }
.max-delay-200  { --max-delay: .2s; }   .max-delay-300  { --max-delay: .3s; }
.max-delay-400  { --max-delay: .4s; }   .max-delay-500  { --max-delay: .5s; }
.max-delay-600  { --max-delay: .6s; }   .max-delay-800  { --max-delay: .8s; }
.max-delay-1000 { --max-delay: 1s; }    .max-delay-1500 { --max-delay: 1.5s; }
.max-delay-2000 { --max-delay: 2s; }

/* ---------- Keyframe attention effects (run once .max-in appears) ---------- */
html.max-js .max-in.max-elastic    { animation: max-elastic var(--max-d) var(--max-ease) both; }
html.max-js .max-in.max-jello      { animation: max-jello var(--max-d) var(--max-ease) both; }
html.max-js .max-in.max-wobble     { animation: max-wobble var(--max-d) var(--max-ease) both; }
html.max-js .max-in.max-swing      { animation: max-swing var(--max-d) var(--max-ease) both; transform-origin: top center; }
html.max-js .max-in.max-heartbeat  { animation: max-heartbeat var(--max-d) ease-in-out both; }
html.max-js .max-in.max-pulse      { animation: max-pulse var(--max-d) ease-in-out both; }
html.max-js .max-in.max-rubber-band{ animation: max-rubber var(--max-d) var(--max-ease) both; }
html.max-js .max-in.max-shake-x    { animation: max-shake-x var(--max-d) var(--max-ease) both; }
html.max-js .max-in.max-shake-y    { animation: max-shake-y var(--max-d) var(--max-ease) both; }

@keyframes max-elastic {
  0% { transform: scale(.3); } 30% { transform: scale(1.15); }
  45% { transform: scale(.92); } 60% { transform: scale(1.04); }
  75% { transform: scale(.98); } 100% { transform: scale(1); }
}
@keyframes max-jello {
  0%,100% { transform: scale(1,1); } 20% { transform: skewX(-12deg) skewY(-12deg); }
  40% { transform: skewX(8deg) skewY(8deg) scale(.95,.95); }
  60% { transform: skewX(-5deg) skewY(-5deg); } 80% { transform: skewX(2deg) skewY(2deg); }
}
@keyframes max-wobble {
  0% { transform: none; } 20% { transform: translateX(-18px) rotate(-4deg); }
  40% { transform: translateX(14px) rotate(3deg); } 60% { transform: translateX(-8px) rotate(-2deg); }
  80% { transform: translateX(5px) rotate(1deg); } 100% { transform: none; }
}
@keyframes max-swing {
  0% { transform: rotate(0); } 20% { transform: rotate(12deg); }
  40% { transform: rotate(-8deg); } 60% { transform: rotate(5deg); }
  80% { transform: rotate(-3deg); } 100% { transform: rotate(0); }
}
@keyframes max-heartbeat { 0%,100% { transform: scale(1); } 25% { transform: scale(1.18); } 50% { transform: scale(1); } 75% { transform: scale(1.12); } }
@keyframes max-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes max-rubber {
  0% { transform: scale(1); } 30% { transform: scaleX(1.25) scaleY(.75); }
  45% { transform: scaleX(.8) scaleY(1.2); } 60% { transform: scaleX(1.12) scaleY(.88); } 100% { transform: scale(1); }
}
@keyframes max-shake-x {
  0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-10px); } 40%,80% { transform: translateX(10px); }
}
@keyframes max-shake-y {
  0%,100% { transform: translateY(0); } 20%,60% { transform: translateY(-10px); } 40%,80% { transform: translateY(10px); }
}

/* Repeat + reverse-out are JS-driven (class add/remove); no extra CSS needed. */

/* Stagger helper: parent sets --max-stagger-step, children pick up incremental delay via JS inline style. */
[data-max-stagger] { --max-stagger-step: 90ms; }

/* Reduced motion: show everything, no animation. */
@media (prefers-reduced-motion: reduce) {
  html.max-js .max { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: none !important; animation: none !important; }
}