/* OTM Animations — keyframes, reveal states, transitions */

/* ── Marquee ── */
@keyframes otm-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Fade Up (initial hidden state; GSAP handles the reveal) ── */
[data-reveal] {
  will-change: transform, opacity;
}

/* ── Ping / Pulse ── */
@keyframes otm-ping {
  0%   { transform: scale(1);   opacity: .75; }
  100% { transform: scale(2.2); opacity: 0;   }
}

.otm-ping-ring {
  animation: otm-ping 1.8s ease-out infinite;
}

/* ── Spin ── */
@keyframes otm-spin {
  to { transform: rotate(360deg); }
}
.otm-spin { animation: otm-spin 1s linear infinite; }

/* ── Shimmer skeleton ── */
@keyframes otm-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

/* ── Float ── */
@keyframes otm-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}
.otm-float { animation: otm-float 3s ease-in-out infinite; }

/* ── Dashboard card entrance ── */
@keyframes otm-slide-in-right {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Mega panel slide-fade ── */
@keyframes otm-mega-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.otm-mega-panel.is-open {
  animation: otm-mega-in .2s ease forwards;
}

/* ── Mobile drawer slide ── */
@keyframes otm-drawer-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.otm-mobile-drawer.is-open {
  animation: otm-drawer-in .3s ease forwards;
}

/* ── Newsletter success fade ── */
@keyframes otm-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.otm-newsletter__success {
  animation: otm-fade-in .4s ease forwards;
}

/* ── Promo banner collapse ── */
.otm-promo-banner.is-closing {
  overflow: hidden;
  animation: otm-collapse .3s ease forwards;
}
@keyframes otm-collapse {
  to { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }
}

/* ── Page transition ── */
@media (prefers-reduced-motion: no-preference) {
  html.lenis body { cursor: auto; }
}

/* ── Focus ring ── */
:focus-visible {
  outline: 2px solid var(--clr-green);
  outline-offset: 3px;
  border-radius: 3px;
}