/*
 * LedCommerce motion system.
 *
 * Principles: motion explains hierarchy and progression (things assemble, light up,
 * connect) — it never decorates for its own sake. Short, decelerating curves, no bounce.
 *
 * Safety: elements are only hidden under `html.motion-ok`. The inline <head> script adds
 * it (never under prefers-reduced-motion or without IntersectionObserver) and removes it
 * after 3 s unless lc-motion.js reports a successful start, so a JS failure leaves all
 * content visible.
 *
 * API
 *   data-reveal="up|fade|mask|scale|left|right"   reveal when scrolled into view
 *   data-reveal-stagger[="variant"]                children reveal one after another (--i)
 *   data-draw                                      SVG paths with pathLength="1" draw in
 *   data-activate                                  generic "is-in" trigger for scene CSS
 *   --i / --lc-reveal-delay                        per-element delay
 */

/* ---------- Reveal ---------- */
.motion-ok [data-reveal] {
  transition:
    opacity var(--lc-dur-reveal) var(--lc-ease-out),
    transform var(--lc-dur-reveal) var(--lc-ease-out),
    clip-path var(--lc-dur-reveal) var(--lc-ease-out);
  transition-delay: calc(var(--lc-reveal-delay, 0ms) + var(--i, 0) * var(--lc-stagger));
}

.motion-ok [data-reveal]:not(.is-in) { opacity: 0; }
.motion-ok [data-reveal=""]:not(.is-in),
.motion-ok [data-reveal="up"]:not(.is-in) { transform: translate3d(0, var(--lc-reveal-distance), 0); }
.motion-ok [data-reveal="left"]:not(.is-in) { transform: translate3d(calc(-1 * var(--lc-reveal-distance)), 0, 0); }
.motion-ok [data-reveal="right"]:not(.is-in) { transform: translate3d(var(--lc-reveal-distance), 0, 0); }
.motion-ok [data-reveal="scale"]:not(.is-in) { transform: scale(0.97); }
.motion-ok [data-reveal="mask"]:not(.is-in) { opacity: 1; clip-path: inset(0 0 100% 0); transform: translate3d(0, 0.35em, 0); }
.motion-ok [data-reveal="mask"].is-in { clip-path: inset(0 0 -0.2em 0); }

/* Headline line-by-line mask reveal: wrap each line in .lc-line > span */
.lc-line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.lc-line > span { display: block; }
.motion-ok .lc-lines .lc-line > span {
  transition: transform var(--lc-dur-scene) var(--lc-ease-out);
  transition-delay: calc(var(--lc-reveal-delay, 0ms) + var(--i, 0) * 90ms);
}
.motion-ok .lc-lines:not(.is-in) .lc-line > span { transform: translate3d(0, 105%, 0); }

/* ---------- Line drawing (SVG paths with pathLength="1") ---------- */
.motion-ok [data-draw] :is(path, line, polyline, rect, circle) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--lc-dur-scene) var(--lc-ease-in-out);
  transition-delay: calc(var(--lc-reveal-delay, 0ms) + var(--i, 0) * 120ms);
}
.motion-ok [data-draw].is-in :is(path, line, polyline, rect, circle) { stroke-dashoffset: 0; }

/* ---------- LED pixel lattice ---------- */
.lc-pixels {
  background-image: radial-gradient(circle at center, var(--lc-pixel-on, var(--lc-signal-400)) 0.9px, transparent 1.4px);
  background-size: var(--lc-pixel-gap, 8px) var(--lc-pixel-gap, 8px);
}

@keyframes lc-pixel-sweep {
  from { mask-position: 120% 0; -webkit-mask-position: 120% 0; }
  to { mask-position: -20% 0; -webkit-mask-position: -20% 0; }
}

@keyframes lc-pulse-dot {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}

@keyframes lc-drift {
  from { transform: translate3d(-6%, -3%, 0) scale(1.08); }
  to { transform: translate3d(6%, 3%, 0) scale(1.08); }
}

@keyframes lc-rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes lc-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes lc-grow-x {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes lc-grow-y {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

/* Paused while off-screen (lc-motion.js toggles .is-offscreen on [data-loop]). */
[data-loop].is-offscreen,
[data-loop].is-offscreen * { animation-play-state: paused !important; }

/* ---------- Micro-interactions ---------- */
.lc-lift {
  transition: transform var(--lc-dur) var(--lc-ease), box-shadow var(--lc-dur) var(--lc-ease), border-color var(--lc-dur) var(--lc-ease);
}
.lc-lift:hover { transform: translateY(-3px); box-shadow: var(--lc-shadow-md); }

/* ---------- Cross-page transitions (progressive; no-op where unsupported) ---------- */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 260ms;
  animation-timing-function: var(--lc-ease-out);
}

::view-transition-old(root) { animation-name: lc-vt-out; }
::view-transition-new(root) { animation-name: lc-vt-in; }

@keyframes lc-vt-out { to { opacity: 0; } }
@keyframes lc-vt-in { from { opacity: 0; } }

.lc-header { view-transition-name: lc-header; }
::view-transition-group(lc-header) { animation: none; }

/* ---------- Reduced motion: final state, no movement ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .lc-lines .lc-line > span,
  [data-draw] :is(path, line, polyline, rect, circle) {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }

  .lc-lift:hover { transform: none; }
}

/* ---------- Inner-page intro entrance (pure CSS, plays once on load) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .lc-page-intro > .lc-container > * { animation: lc-rise 0.75s var(--lc-ease-out) both; }
  .lc-page-intro > .lc-container > :nth-child(2) { animation-delay: 70ms; }
  .lc-page-intro > .lc-container > :nth-child(3) { animation-delay: 140ms; }
  .lc-page-intro > .lc-container > :nth-child(4) { animation-delay: 210ms; }
  .lc-page-intro::after { animation: lc-fade 1.2s ease 0.2s both; }
}

/* ---------- Product card: LED pixels light up under the pointer ---------- */
.lc-product-card .lc-media-frame::before { transition: opacity var(--lc-dur-slow) var(--lc-ease); }
.lc-product-card .lc-media-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle at center, var(--lc-signal-400) 1px, transparent 1.5px);
  background-size: 12px 12px;
  mask-image: radial-gradient(60% 55% at 50% 45%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(60% 55% at 50% 45%, #000 20%, transparent 80%);
  opacity: 0;
  transition: opacity var(--lc-dur-slow) var(--lc-ease);
}
.lc-product-card:is(:hover, :focus-within) .lc-media-frame::after { opacity: 0.55; }
.lc-product-card .lc-media-frame__placeholder .lc-icon { transition: transform var(--lc-dur-slow) var(--lc-ease-out), color var(--lc-dur) var(--lc-ease); }
.lc-product-card:is(:hover, :focus-within) .lc-media-frame__placeholder .lc-icon { transform: scale(1.08); color: var(--lc-text); }