/* ==========================================================================
   Pantera LP — motion primitives (CSS side of motion.js)
   Only transform / opacity / filter are animated. Reduced motion honoured.
   ========================================================================== */

/* --- Keyframes ------------------------------------------------------------ */
@keyframes lp-marquee-x { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes lp-marquee-y { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }
@keyframes lp-orbit {
  from { transform: rotate(var(--initial-position, 0deg)) translateX(var(--translate-position, 160px)) rotate(calc(-1 * var(--initial-position, 0deg))); }
  to   { transform: rotate(calc(var(--initial-position, 0deg) + 360deg)) translateX(var(--translate-position, 160px)) rotate(calc(-1 * (var(--initial-position, 0deg) + 360deg))); }
}
@keyframes lp-ray-pulse { 0%, 100% { opacity: 0; } 50% { opacity: var(--ray-opacity, 0.7); } }
@keyframes lp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes lp-spin { to { transform: rotate(360deg); } }
@keyframes lp-bell-ring {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(14deg); }
  30% { transform: rotate(-12deg); }
  45% { transform: rotate(9deg); }
  60% { transform: rotate(-6deg); }
  75% { transform: rotate(3deg); }
}
@keyframes lp-cta-glow {
  0%, 100% { box-shadow: var(--lp-shadow-cta); }
  50% { box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), inset 0 -1px 1px rgba(0, 0, 0, 0.22), 0 10px 28px -6px rgba(244, 196, 48, 0.6); }
}

/* --- Scroll reveal (reference ScrollReveal / Button entrance) ------------- */
[data-reveal] {
  opacity: 0;
  transition: opacity var(--lp-dur) var(--lp-ease-out), transform var(--lp-dur) var(--lp-ease-out), filter var(--lp-dur) var(--lp-ease-out);
  transition-delay: var(--lp-delay, 0ms);
}
[data-reveal], [data-reveal="up"] { transform: translateY(20px); }
[data-reveal="up-lg"] { transform: translateY(50%); transition-timing-function: var(--lp-ease-slide); }
[data-reveal="blur"] { transform: none; filter: blur(10px); transition-timing-function: var(--lp-ease-blur); }
[data-reveal="fade"] { transform: none; }
[data-reveal="scale"] { transform: translateY(12px) scale(0.96); }
[data-reveal].is-in { opacity: 1; transform: none; filter: none; }
[data-reveal].is-in.is-done { will-change: auto; transition: none; }

/* Stagger container: motion.js sets --i on each child; the parent stays visible */
[data-reveal-stagger] > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity var(--lp-dur) var(--lp-ease-out), transform var(--lp-dur) var(--lp-ease-out);
  transition-delay: calc(var(--i, 0) * var(--lp-stagger-step, var(--lp-stagger-cards)));
}
[data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
[data-reveal-stagger].is-in.is-done > * { transition: none; }

/* --- Word reveal (reference TextAnimation fade-blur / slide-up) ----------- */
.lp-text { --lp-word-dur: var(--lp-dur); }
.lp-text .lp-w {
  display: inline; opacity: 0; filter: blur(10px);
  transition: opacity var(--lp-word-dur) var(--lp-ease-blur), filter var(--lp-word-dur) var(--lp-ease-blur), transform var(--lp-word-dur) var(--lp-ease-slide);
  transition-delay: calc(var(--i, 0) * var(--lp-stagger));
}
.lp-text[data-text="slide"] .lp-w { display: inline-block; filter: none; transform: translateY(50%); }
.lp-text[data-text="fade"] .lp-w { filter: none; }
.lp-text.is-in .lp-w { opacity: 1; filter: blur(0); transform: none; }
.lp-text.is-done .lp-w { filter: none; transition: none; will-change: auto; }

/* WebKit (iOS/macOS Safari): no word split at all. Splitting text into spans inside a
   `background-clip: text` gradient heading breaks painting there, and swapping the spans back
   to plain text makes the line box reflow ("jump"). motion.js adds .lp-text--sweep instead of
   splitting, and the whole block is revealed with a left-to-right mask sweep + fade: no DOM
   change, no reflow, and the gradient is painted on plain text. */
.lp-text--sweep {
  opacity: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
          mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: opacity 0.5s var(--lp-ease-out), -webkit-mask-position 1.1s var(--lp-ease-out), mask-position 1.1s var(--lp-ease-out);
}
.lp-text--sweep.is-in { opacity: 1; -webkit-mask-position: 0 0; mask-position: 0 0; }
.lp-text--sweep.is-done { -webkit-mask-image: none; mask-image: none; transition: none; }

/* --- Hover micro-interactions --------------------------------------------- */
.lp-hover-lift { transition: transform var(--lp-dur-fast) var(--lp-ease-std), box-shadow var(--lp-dur-fast) var(--lp-ease-std); }
@media (hover: hover) { .lp-hover-lift:hover { transform: translateY(-4px); box-shadow: var(--lp-shadow-float); } }
.lp-hover-fade { transition: opacity var(--lp-dur-fast) var(--lp-ease-std); }
.lp-hover-fade:hover { opacity: 0.75; }

/* --- Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-stagger] > *, .lp-text .lp-w, .lp-text--sweep { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .lp-marquee__track, .lp-orbit__sat, .lp-orbit__core, .lp-bg-rays__ray, .lp-btn.pulse { animation: none !important; }
  .lp-bg-rays__ray { opacity: var(--ray-opacity, 0.5); }
  .lp-btn__c { transition: none !important; }
  .lp-btn:hover .lp-btn__c { transform: none !important; }
  .lp-faq__a, .lp-nav__menu, .lp-glow::after, .lp-hover-lift { transition: none !important; }
  .lp-grad, .lp-grad-gold { transition: none !important; }
  .lp-carousel__track { scroll-behavior: auto !important; }
  .lp-trail { --lp-trail-progress: 1 !important; }            /* line fully drawn */
  .lp-trail__draw, .lp-trail__node, .lp-trail__card { transition: none !important; }
  .lp-award__sheen, .lp-award__frame, .lp-ladder__tier, .lp-sim__bar span, .lp-plan__tile { transition: none !important; }
  .lp-plan__tile--ring .lp-plan__tile-icon i { animation: none !important; }
  .lp-award:hover .lp-award__sheen { transform: translateX(-130%) !important; }
}