/* LUBEMAX motion language — intentionally subtle, premium and performant */
@keyframes loaderSpin { 0% { transform: rotate(45deg) scale(.92); } 50% { transform: rotate(225deg) scale(1); } 100% { transform: rotate(405deg) scale(.92); } }
@keyframes loaderLine { from { transform: translateX(-105%); } to { transform: translateX(205%); } }
@keyframes ripple { to { transform: translate(-50%,-50%) scale(20); opacity: 0; } }
@keyframes gradientShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes floatChip { 0%,100% { transform: translate3d(0,0,0) rotate(-2deg); } 50% { transform: translate3d(0,-11px,0) rotate(1deg); } }
@keyframes orbDrift { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-25px,20px,0) scale(1.08); } }
@keyframes particleFloat { 0% { transform: translateY(30px) scale(.8); opacity: 0; } 25% { opacity: .7; } 100% { transform: translateY(-150px) scale(1.3); opacity: 0; } }
@keyframes railMove { to { transform: translateX(-50%); } }
@keyframes badgeSpin { to { transform: rotate(360deg); } }
@keyframes scrollDot { 0% { transform: translate(-50%,0); opacity: 1; } 75%,100% { transform: translate(-50%,16px); opacity: 0; } }
@keyframes iconPulse { 0%,100% { box-shadow: 0 14px 32px rgba(216,30,5,.2),0 0 0 0 rgba(216,30,5,.13); } 50% { box-shadow: 0 14px 32px rgba(216,30,5,.25),0 0 0 10px rgba(216,30,5,0); } }
@keyframes shine { 0% { transform: translateX(-160%) rotate(18deg); } 100% { transform: translateX(300%) rotate(18deg); } }
@keyframes pageEnter { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes wave { 0%,100% { transform: rotate(-7deg) translateX(0); } 50% { transform: rotate(-5deg) translateX(-28px); } }
@keyframes glowPulse { 0%,100% { opacity: .12; transform: scale(1); } 50% { opacity: .2; transform: scale(1.08); } }
@keyframes playPulse { 0%,100% { box-shadow: 0 15px 38px rgba(0,0,0,.16),0 0 0 0 rgba(255,255,255,.25); } 50% { box-shadow: 0 15px 38px rgba(0,0,0,.18),0 0 0 12px rgba(255,255,255,0); } }
@keyframes checkDraw { from { stroke-dashoffset: 32; } to { stroke-dashoffset: 0; } }

.oil-drop { animation: loaderSpin 1.45s cubic-bezier(.6,0,.3,1) infinite; }
.loader-line span { animation: loaderLine 1.15s ease-in-out infinite; }
.hero { background-size: 150% 150%; animation: gradientShift 14s ease infinite; }
.hero-image-frame { animation: floatY 7s ease-in-out infinite; }
.float-chip { animation: floatChip 5s ease-in-out infinite; }
.hero-badge { animation: floatY 6.5s ease-in-out 1s infinite; }
.orb-1 { animation: orbDrift 11s ease-in-out infinite; }
.orb-2 { animation: orbDrift 13s ease-in-out reverse infinite; }
.oil-wave { animation: wave 9s ease-in-out infinite; }
.particle { animation: particleFloat 7s linear infinite; }
.particle:nth-child(2n) { animation-duration: 9s; }
.particle:nth-child(3n) { animation-delay: -3s; animation-duration: 11s; }
.particle:nth-child(4n) { animation-delay: -6s; }
.scroll-cue i::after { animation: scrollDot 1.8s ease-in-out infinite; }
.rail-track { animation: railMove 28s linear infinite; }
.performance-rail:hover .rail-track { animation-play-state: paused; }
.app-symbol { animation: iconPulse 3.6s ease-in-out infinite; }
.application-card:nth-child(2n) .app-symbol { animation-delay: .6s; }
.application-card:nth-child(3n) .app-symbol { animation-delay: 1.2s; }
.play-button { transition: color .35s, background .35s, transform .35s; animation: playPulse 2.4s ease-in-out infinite; }
.page-transition.is-entering { animation: pageTransitionIn .65s cubic-bezier(.65,0,.35,1) forwards; }
.page-transition.is-leaving { animation: pageTransitionOut .65s cubic-bezier(.65,0,.35,1) forwards; }

@keyframes pageTransitionIn { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } }
@keyframes pageTransitionOut { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } }

.text-reveal { overflow: hidden; }
.text-reveal > span { display: block; transform: translateY(112%); opacity: 0; transition: transform 1s var(--ease), opacity .8s; }
.text-reveal.in-view > span, .hero .text-reveal > span { transform: translateY(0); opacity: 1; }
.hero .text-reveal:nth-of-type(1) > span { transition-delay: .14s; }
.hero .text-reveal:nth-of-type(2) > span { transition-delay: .24s; }
.hero .text-reveal:nth-of-type(3) > span { transition-delay: .34s; }

.tilt-card { will-change: transform; transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0)); transition: transform .22s ease-out, box-shadow .45s; }
.tilt-card:hover { --ty: -8px; }

.glow-on-hover::after { content: ""; position: absolute; inset: auto 10% -30px; height: 50px; z-index: -1; border-radius: 50%; background: var(--primary); opacity: 0; filter: blur(35px); transition: opacity .4s; }
.glow-on-hover:hover::after { opacity: .18; }

[data-parallax] { will-change: transform; }
.image-reveal { clip-path: inset(0 100% 0 0 round 28px); transition: clip-path 1.1s var(--ease); }
.image-reveal.in-view { clip-path: inset(0 round 28px); }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal,.reveal-left,.reveal-right { opacity: 1; transform: none; }
  .text-reveal > span { opacity: 1; transform: none; }
  .image-reveal { clip-path: none; }
  .cursor-dot,.cursor-ring { display: none; }
}