/* Motion layer for the LCC site. Drives:
   - reveal-on-scroll for sections and grid items (with stagger)
   - magenta brush "draw-in" inside revealed headings
   - slow drift on the atmospheric background washes
   - sharper card-hover lift + accent rail on service cards
   - parallax on the Liver Bird watermark (driven by effects.js)
   Respects prefers-reduced-motion.
*/

/* ---- Reveal-on-scroll ----------------------------------------------- */
[data-fx="reveal"] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 720ms cubic-bezier(0.2, 0.7, 0.1, 1),
    transform 720ms cubic-bezier(0.2, 0.7, 0.1, 1);
  transition-delay: var(--fx-delay, 0ms);
  will-change: opacity, transform;
}
[data-fx="reveal"][data-fx-shown] {
  opacity: 1;
  transform: none;
}

/* ---- Brush underline draw-in inside revealed headings --------------- */
[data-fx="reveal"] .brush::after {
  transform: scaleX(0) skewX(-4deg);
  transform-origin: left center;
  transition: transform 1000ms cubic-bezier(0.2, 0.7, 0.1, 1);
  transition-delay: calc(var(--fx-delay, 0ms) + 320ms);
}
[data-fx="reveal"][data-fx-shown] .brush::after {
  transform: scaleX(1) skewX(-4deg);
}

/* ---- Slow drift on atmospheric washes ------------------------------- */
.bg-wash::before { animation: lcc-drift-a 16s ease-in-out infinite alternate; }
.bg-wash::after  { animation: lcc-drift-b 20s ease-in-out infinite alternate; }
@keyframes lcc-drift-a {
  from { transform: translate3d(0, 0, 0)        scale(1);    }
  to   { transform: translate3d(-50px, 40px, 0) scale(1.08); }
}
@keyframes lcc-drift-b {
  from { transform: translate3d(0, 0, 0)        scale(1);    }
  to   { transform: translate3d(60px, -30px, 0) scale(1.06); }
}

/* ---- Card hover refinement ------------------------------------------ */
.card.hoverable {
  transition:
    transform 320ms cubic-bezier(0.2, 0.7, 0.1, 1),
    box-shadow 320ms cubic-bezier(0.2, 0.7, 0.1, 1),
    border-color 320ms;
}
.card.hoverable:hover {
  transform: translateY(-6px);
}

/* Service cards get a teal accent rail that grows from the bottom on hover */
.service-card { position: relative; overflow: hidden; }
.service-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--lcc-teal);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 360ms cubic-bezier(0.2, 0.7, 0.1, 1);
}
.service-card:hover::before {
  transform: scaleY(1);
  transform-origin: top center;
}
.service-card .icon-chip {
  transition: transform 360ms cubic-bezier(0.34, 1.4, 0.5, 1);
}
.service-card:hover .icon-chip {
  transform: translateY(-2px) rotate(-3deg);
}

/* ---- Hero watermark — JS sets --fx-parallax ------------------------- */
.hero-watermark {
  transform: translate3d(0, var(--fx-parallax, 0px), 0) rotate(-6deg);
  transition: transform 60ms linear;
  will-change: transform;
}

/* ---- Buttons get a soft press / hover lift -------------------------- */
.btn.primary,
.btn.accent {
  transition:
    transform 240ms cubic-bezier(0.2, 0.7, 0.1, 1),
    box-shadow 240ms cubic-bezier(0.2, 0.7, 0.1, 1),
    background 200ms;
}
.btn.primary:hover  { box-shadow: var(--shadow-3), 0 0 22px -6px rgba(14, 35, 71, 0.4); }
.btn.accent:hover   { box-shadow: var(--shadow-3), 0 0 26px -6px rgba(224, 55, 106, 0.55); }
.btn:active         { transform: translateY(0) !important; }

/* ---- Floating contact CTA pulse on hover (the magenta hero button) -- */
.hero-buttons .btn.primary {
  position: relative;
}
.hero-buttons .btn.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(14, 35, 71, 0.35);
  pointer-events: none;
  transition: box-shadow 600ms;
}
.hero-buttons .btn.primary:hover::after {
  box-shadow: 0 0 0 10px rgba(14, 35, 71, 0);
}

/* ---- Icon chip subtle float on past-event card ---------------------- */
.event-card.past .event-badge {
  position: relative;
  overflow: hidden;
}
.event-card.past .event-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  animation: lcc-shimmer 4.5s ease-in-out infinite;
}
@keyframes lcc-shimmer {
  0%, 60% { transform: translateX(-120%); }
  78%     { transform: translateX(120%); }
  100%    { transform: translateX(120%); }
}

/* ---- Section divider eyebrows: tiny "->" hint that travels --------- */
.eyebrow::before { transition: width 600ms cubic-bezier(0.2, 0.7, 0.1, 1); }
[data-fx="reveal"][data-fx-shown] .eyebrow::before { width: 48px; }

/* ---- Reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-fx="reveal"] { opacity: 1 !important; transform: none !important; }
  [data-fx="reveal"] .brush::after { transform: scaleX(1) skewX(-4deg) !important; transition: none !important; }
  .bg-wash::before, .bg-wash::after { animation: none !important; }
  .event-card.past .event-badge::after { animation: none !important; }
  .hero-watermark { transform: rotate(-6deg) !important; }
}