/* ==========================================================================
   Larwell Motion
   --------------------------------------------------------------------------
   The CSS half of the animation system. Reveal elements start hidden here
   and are released by larwell-motion.js; if JS fails to load, the
   `.lw-motion-ready` class is never added and the `:not()` guard below keeps
   everything visible rather than leaving a blank page.
   ========================================================================== */

/* ── Reveal base state ────────────────────────────────────────────────── */

html.lw-motion-ready [data-lw-reveal] { opacity: 0; will-change: transform, opacity; }

html.lw-motion-ready [data-lw-reveal="up"]    { transform: translate3d(0, 34px, 0); }
html.lw-motion-ready [data-lw-reveal="down"]  { transform: translate3d(0, -34px, 0); }
html.lw-motion-ready [data-lw-reveal="left"]  { transform: translate3d(48px, 0, 0); }
html.lw-motion-ready [data-lw-reveal="right"] { transform: translate3d(-48px, 0, 0); }
html.lw-motion-ready [data-lw-reveal="scale"] { transform: scale(.93); }
html.lw-motion-ready [data-lw-reveal="blur"]  { filter: blur(12px); }
html.lw-motion-ready [data-lw-reveal="clip"]  { clip-path: inset(0 0 100% 0); opacity: 1; }

/* Split-text lines are masked so each line rises out of its own box. */
.lw-split-line { display: block; overflow: hidden; }
.lw-split-line > span { display: block; will-change: transform; }

/* ── Keyframe primitives ──────────────────────────────────────────────── */

@keyframes lw-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}
@keyframes lw-pulse-ring {
  0%   { transform: scale(.85); opacity: .7; }
  70%  { transform: scale(1.5);  opacity: 0; }
  100% { transform: scale(1.5);  opacity: 0; }
}
@keyframes lw-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .3; transform: scale(.7); }
}
@keyframes lw-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes lw-shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}
@keyframes lw-spin-slow {
  to { transform: rotate(360deg); }
}
@keyframes lw-gradient-pan {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.lw-anim-float   { animation: lw-float 6s ease-in-out infinite; }
.lw-anim-blink   { animation: lw-blink 2s ease-in-out infinite; }
.lw-anim-spin    { animation: lw-spin-slow 22s linear infinite; }

.lw-live-dot {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--lw-success, #059669);
  display: inline-block;
}
.lw-live-dot::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: lw-pulse-ring 2.2s ease-out infinite;
}

/* ── Marquee ──────────────────────────────────────────────────────────── */

.lw-marquee { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.lw-marquee-track { display: flex; width: max-content; animation: lw-marquee 38s linear infinite; }
.lw-marquee:hover .lw-marquee-track { animation-play-state: paused; }
.lw-marquee-reverse .lw-marquee-track { animation-direction: reverse; }

/* ── Shimmer skeleton ─────────────────────────────────────────────────── */

.lw-shimmer {
  background: linear-gradient(90deg, var(--lw-bg-sunken, #f1efea) 25%, #fbfaf8 50%, var(--lw-bg-sunken, #f1efea) 75%);
  background-size: 200% 100%;
  animation: lw-shimmer 1.5s linear infinite;
}

/* ── Hover micro-interactions ─────────────────────────────────────────── */

.lw-lift { transition: transform var(--lw-dur, .32s) var(--lw-ease, cubic-bezier(.22,1,.36,1)), box-shadow var(--lw-dur, .32s) var(--lw-ease, cubic-bezier(.22,1,.36,1)); }
.lw-lift:hover { transform: translateY(-5px); box-shadow: var(--lw-shadow-lg, 0 16px 50px rgba(13,13,13,.10)); }

/* Underline that wipes in from the left. */
.lw-underline { position: relative; }
.lw-underline::after {
  content: '';
  position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .42s var(--lw-ease, cubic-bezier(.22,1,.36,1));
}
.lw-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* Arrow that nudges on hover — used on "read more" links. */
.lw-nudge i, .lw-nudge svg { transition: transform var(--lw-dur, .32s) var(--lw-ease, cubic-bezier(.22,1,.36,1)); }
.lw-nudge:hover i, .lw-nudge:hover svg { transform: translateX(4px); }

/* Tilt container — JS sets the custom properties. */
.lw-tilt {
  transform: perspective(900px) rotateX(var(--lw-rx, 0deg)) rotateY(var(--lw-ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .35s var(--lw-ease, cubic-bezier(.22,1,.36,1));
}
.lw-tilt-inner { transform: translateZ(38px); }

/* Spotlight that follows the pointer across a card. */
.lw-spotlight { position: relative; overflow: hidden; }
.lw-spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--lw-mx, 50%) var(--lw-my, 50%), rgba(37,99,235,.10), transparent 62%);
  opacity: 0;
  transition: opacity var(--lw-dur, .32s) var(--lw-ease, cubic-bezier(.22,1,.36,1));
  pointer-events: none;
  z-index: 1;
}
.lw-spotlight:hover::before { opacity: 1; }

/* Magnetic button — JS writes the translate values. */
.lw-magnetic { transition: transform .35s var(--lw-ease, cubic-bezier(.22,1,.36,1)); }

/* ── Scroll progress bar ──────────────────────────────────────────────── */

.lw-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--lw-ink, #0d0d0d), var(--lw-accent, #2563eb));
  z-index: 9999;
  pointer-events: none;
}

/* ── Animated gradient surface ────────────────────────────────────────── */

.lw-gradient-move {
  background: linear-gradient(120deg, #0d0d0d, #1e3a8a, #2563eb, #0d0d0d);
  background-size: 300% 300%;
  animation: lw-gradient-pan 14s ease infinite;
}

/* ── Reduced motion ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html.lw-motion-ready [data-lw-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
  .lw-anim-float,
  .lw-anim-blink,
  .lw-anim-spin,
  .lw-marquee-track,
  .lw-shimmer,
  .lw-gradient-move,
  .lw-live-dot::after {
    animation: none !important;
  }
  .lw-lift:hover { transform: none; }
  .lw-tilt { transform: none !important; }
  * { scroll-behavior: auto !important; }
}