/* ============================================================
   Craftwerk · Landing FX — cinematic motion layer
   ------------------------------------------------------------
   Loaded only on the home page on top of landing.css.
   - Mouse-tracked hero spotlight
   - Slow-rotating aurora behind the hero
   - Drifting grid
   - Hero title — accent shimmer + letter rise
   - 3D tilt on hero window
   - Magnetic primary CTA
   - Pointer-glow on feature & step cards
   - Steps progress line filled by scroll
   - Number count-up
   All effects respect prefers-reduced-motion.
   ============================================================ */


/* ── Hero — mouse-tracked spotlight ─────────────────── */
.cw-hero {
  --cw-mx: 50%;
  --cw-my: 25%;
  position: relative;
}
.cw-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    420px circle at var(--cw-mx) var(--cw-my),
    rgba(224, 148, 76, 0.20),
    rgba(224, 148, 76, 0.06) 35%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 600ms ease;
}
.cw-hero.fx-on::before { opacity: 1; }


/* ── Aurora — slow conic rotation behind the hero ───── */
.cw-hero-bg::after {
  content: "";
  position: absolute;
  top: -320px;
  left: 50%;
  width: 1500px;
  height: 900px;
  transform: translateX(-50%);
  background: conic-gradient(
    from 180deg at 50% 50%,
    rgba(224, 148, 76, 0.0) 0deg,
    rgba(224, 148, 76, 0.10) 70deg,
    rgba(255, 184, 114, 0.0) 130deg,
    rgba(180, 90, 0, 0.09) 200deg,
    rgba(224, 148, 76, 0.0) 260deg,
    rgba(224, 148, 76, 0.07) 320deg,
    rgba(224, 148, 76, 0.0) 360deg
  );
  filter: blur(80px);
  opacity: 0.75;
  animation: cw-aurora 28s linear infinite;
  pointer-events: none;
}
@keyframes cw-aurora {
  to { transform: translateX(-50%) rotate(360deg); }
}


/* ── Grid drift ─────────────────────────────────────── */
.cw-hero-grid {
  animation: cw-grid-drift 40s linear infinite;
  will-change: background-position;
}
@keyframes cw-grid-drift {
  to { background-position: 56px 56px, 56px 56px; }
}


/* ── Accent word — gradient shimmer ─────────────────── */
.cw-accent-word {
  background-size: 200% 200% !important;
  animation: cw-shimmer 6s ease-in-out infinite;
}
@keyframes cw-shimmer {
  0%, 100% { background-position: 0% 0%; }
  50%      { background-position: 100% 100%; }
}


/* ── Hero title — staggered letter rise ─────────────── */
.cw-hero-title .cw-letter,
.cw-hero-title.is-split .cw-accent-word,
.cw-hero-title.is-split .cw-hero-title-line {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  animation: cw-letter-rise 950ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  will-change: transform, opacity;
}
@keyframes cw-letter-rise {
  to { opacity: 1; transform: none; }
}


/* ── Hero window — 3D tilt ──────────────────────────── */
.cw-hero-frame {
  perspective: 1600px;
}
.cw-window {
  transform:
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg));
  transform-origin: 50% 100%;
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.cw-hero-frame.is-tilting .cw-window {
  transition-duration: 80ms;
}


/* ── Magnetic primary CTA ───────────────────────────── */
.cw-btn-primary {
  --mtx: 50%;
  --mty: 50%;
  --mx-shift: 0px;
  --my-shift: 0px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transform: translate(var(--mx-shift), var(--my-shift));
  transition:
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 200ms ease,
    background 200ms ease,
    color 200ms ease;
}
.cw-btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    140px circle at var(--mtx) var(--mty),
    rgba(255, 255, 255, 0.32),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 200ms ease;
}
.cw-btn-primary:hover::after { opacity: 1; }
.cw-btn-primary:hover {
  transform: translate(var(--mx-shift), calc(var(--my-shift) - 1px));
}
.cw-btn-primary > * {
  position: relative;
  z-index: 1;
}


/* ── Card pointer-glow (feature + step) ─────────────── */
.cw-feat,
.cw-step {
  position: relative;
  isolation: isolate;
  --cmx: 50%;
  --cmy: 50%;
}
.cw-feat::after,
.cw-step::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    260px circle at var(--cmx) var(--cmy),
    rgba(224, 148, 76, 0.18),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 280ms ease;
  z-index: 1;
}
.cw-feat:hover::after,
.cw-step:hover::after { opacity: 1; }
.cw-feat > *,
.cw-step > * {
  position: relative;
  z-index: 2;
}


/* ── Number count-up — keep tabular numerics ────────── */
.cw-stat-num,
.cw-price-now {
  font-variant-numeric: tabular-nums;
}


/* ── Steps progress line — line connects pill to pill, not card to card ─
   Line floats above card backgrounds (z-index 1) but the step-num pills
   sit on z-index 2 — so the dashed line visually runs from "01" centre
   straight to "03" centre, hidden only behind the pills themselves. */
.cw-steps {
  --cw-progress: 0;
  position: relative;
  isolation: isolate;
}
.cw-steps::before { z-index: 1 !important; top: 50px !important; }
.cw-steps::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50px;
  left: calc(16.66% + 24px);
  right: calc(16.66% + 24px);
  height: 1px;
  background: repeating-linear-gradient(to right,
    var(--cw-amber) 0, var(--cw-amber) 6px,
    transparent 6px, transparent 12px);
  transform: scaleX(var(--cw-progress));
  transform-origin: left center;
  transition: transform 220ms linear;
  pointer-events: none;
  filter: drop-shadow(0 0 8px var(--cw-amber-glow));
}
.cw-step-num {
  position: relative;
  z-index: 2; /* pill covers the line locally */
}

@media (max-width: 960px) {
  .cw-steps::before,
  .cw-steps::after { display: none !important; }
}


/* ── Step number — glow when active ─────────────────── */
/* The dashed progress line on .cw-steps::after passes through the same
   horizontal axis as the step pills. Step pill backgrounds use translucent
   amber tokens, so the dashes used to be visible through the digits. We
   wrap each pill in a solid page-bg "knockout" via an outer ring so the
   line is hidden behind the digit, not through it. */
.cw-step.is-active .cw-step-num {
  background: var(--cw-amber);
  color: #160B02;
  border-color: var(--cw-amber);
  box-shadow:
    0 0 0 6px var(--cw-bg-page),
    0 0 0 7px rgba(224, 148, 76, 0.18),
    0 0 28px var(--cw-amber-glow);
  transition: background 320ms ease, color 320ms ease,
              border-color 320ms ease, box-shadow 320ms ease;
}
.cw-step .cw-step-num {
  /* Solid knockout against the page background so the dashed progress
     line never bleeds through the translucent pill fill. */
  box-shadow: 0 0 0 6px var(--cw-bg-page);
  transition: background 320ms ease, color 320ms ease,
              border-color 320ms ease, box-shadow 320ms ease;
}


/* ── Floating decorative cards in hero ──────────────── */
.cw-hero-frame { position: relative; }

.cw-float {
  position: absolute;
  z-index: 3;
  background: linear-gradient(180deg, var(--cw-bg-elev), var(--cw-bg-card));
  border: 1px solid var(--cw-line);
  border-radius: 14px;
  padding: 14px 16px;
  min-width: 230px;
  font-family: var(--cw-mono);
  font-size: 11.5px;
  color: var(--cw-text-mute);
  box-shadow:
    0 24px 48px -16px rgba(0, 0, 0, 0.65),
    0 8px 18px -8px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  animation: cw-float-in 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 600ms forwards,
             cw-float-bob 6s ease-in-out 1500ms infinite;
}
.cw-float--calc {
  top: 8%;
  left: -28px;
  transform: translate(-50%, 0);
}
.cw-float--fifo {
  bottom: -18px;
  right: -28px;
  transform: translate(50%, 0);
  animation-delay: 800ms, 1700ms;
}
@keyframes cw-float-in {
  from { opacity: 0; transform: translate(var(--in-x, -50%), 22px); }
  to   { opacity: 1; }
}
.cw-float--fifo { --in-x: 50%; }
@keyframes cw-float-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -8px; }
}

.cw-float-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--cw-line);
}
.cw-float-led {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cw-amber);
  box-shadow: 0 0 8px var(--cw-amber-glow);
  animation: cw-pulse 2s ease-in-out infinite;
}
.cw-float-led--green {
  background: #4FC97A;
  box-shadow: 0 0 8px rgba(79, 201, 122, 0.5);
}
.cw-float-title {
  color: var(--cw-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10.5px;
  font-weight: 600;
  flex: 1;
}
.cw-float-time {
  color: var(--cw-text-faint);
  font-size: 10.5px;
}
.cw-float-body { display: flex; flex-direction: column; gap: 7px; }
.cw-float-row {
  display: flex; justify-content: space-between; align-items: baseline;
  letter-spacing: 0.02em;
}
.cw-float-row strong {
  color: var(--cw-text);
  font-weight: 500;
  font-family: var(--cw-mono);
  letter-spacing: 0.01em;
}
.cw-float-row--total {
  margin-top: 4px;
  padding-top: 9px;
  border-top: 1px dashed var(--cw-line);
}
.cw-float-row--total strong {
  color: var(--cw-amber);
  font-size: 14px;
  font-weight: 600;
}

/* FIFO mini-stack */
.cw-float-fifo-stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px 0 8px;
}
.cw-fifo-bar {
  position: relative;
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 4px;
  background: rgba(224, 148, 76, 0.12);
  overflow: hidden;
  font-size: 10.5px;
  color: var(--cw-text);
}
.cw-fifo-bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 60%);
  background: linear-gradient(90deg,
    rgba(224, 148, 76, 0.35),
    rgba(224, 148, 76, 0.18) 60%,
    transparent);
  border-right: 1px solid rgba(224, 148, 76, 0.45);
  animation: cw-fifo-fill 1400ms cubic-bezier(0.2, 0.8, 0.2, 1) 1400ms backwards;
}
.cw-fifo-bar:nth-child(2)::before { animation-delay: 1600ms; }
.cw-fifo-bar:nth-child(3)::before { animation-delay: 1800ms; }
@keyframes cw-fifo-fill {
  from { width: 0; }
}
.cw-fifo-bar b {
  position: relative;
  font-family: var(--cw-mono);
  font-weight: 500;
}
.cw-fifo-bar--low {
  background: rgba(255, 90, 70, 0.10);
  color: #FF8B7A;
}
.cw-fifo-bar--low::before {
  background: linear-gradient(90deg,
    rgba(255, 90, 70, 0.35),
    rgba(255, 90, 70, 0.16) 60%,
    transparent);
  border-right-color: rgba(255, 90, 70, 0.45);
}
.cw-float-foot {
  font-size: 10px;
  color: var(--cw-text-faint);
  letter-spacing: 0.05em;
  padding-top: 6px;
  border-top: 1px solid var(--cw-line);
}

/* Hide floating cards on narrow screens — they overlap the screenshot */
@media (max-width: 1180px) {
  .cw-float { display: none; }
}


/* ── Scroll cue under the hero ──────────────────────── */
.cw-scroll-cue {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 56px auto 0;
  font-family: var(--cw-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cw-text-faint);
}
.cw-scroll-cue-line {
  display: block;
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom,
    transparent, var(--cw-amber) 50%, transparent);
  background-size: 100% 200%;
  animation: cw-cue-slide 2.4s ease-in-out infinite;
}
@keyframes cw-cue-slide {
  0%   { background-position: 0 -100%; }
  100% { background-position: 0 100%; }
}
@media (max-width: 540px) { .cw-scroll-cue { margin-top: 32px; } }


/* ── Feature & gallery cards — staggered reveal ─────── */
.cw-features.cw-stagger .cw-feat,
.cw-gallery.cw-stagger .cw-shot {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 600ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: var(--stagger-delay, 0ms);
}
.cw-features.cw-stagger.in .cw-feat,
.cw-gallery.cw-stagger.in .cw-shot {
  opacity: 1;
  transform: none;
}


/* ── Reduced motion: opt-out everywhere ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .cw-hero::before,
  .cw-hero-bg::after { display: none !important; }
  .cw-hero-grid,
  .cw-accent-word,
  .cw-hero-title .cw-letter,
  .cw-hero-title.is-split .cw-accent-word,
  .cw-hero-title.is-split .cw-hero-title-line,
  .cw-float,
  .cw-fifo-bar::before,
  .cw-scroll-cue-line,
  .cw-float-led {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .cw-window { transform: none !important; transition: none !important; }
  .cw-btn-primary { transform: none !important; }
  .cw-feat::after,
  .cw-step::after { display: none !important; }
  .cw-steps::after { display: none !important; }
  .cw-features.cw-stagger .cw-feat,
  .cw-gallery.cw-stagger .cw-shot {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}


/* ============================================================
   FEATURES — carousel (replaces the asymmetric grid)
   3 large cards per slide, snap-scroll + arrow / dot controls.
   ============================================================ */
.cw-feat-carousel {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
.cw-feat-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 28px;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.cw-feat-track::-webkit-scrollbar { display: none; }

.cw-feat-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

/* The carousel uses the existing .cw-feat card styles, but every card here
   is a uniform "standard" cell — no asymmetric wide/tall. Force them so
   any cms_features.cell_size value renders consistently inside a slide. */
.cw-feat-carousel .cw-feat {
  grid-column: auto !important;
  grid-row: auto !important;
  flex-direction: column !important;
}
.cw-feat-carousel .cw-feat--wide,
.cw-feat-carousel .cw-feat--tall {
  flex-direction: column !important;
}
.cw-feat-carousel .cw-feat-img--top {
  height: 220px;
  max-height: 220px;
}

.cw-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--cw-line);
  background: var(--cw-bg-card);
  color: var(--cw-text-mute);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 3;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.cw-carousel-arrow:hover {
  background: var(--cw-bg-elev);
  color: var(--cw-amber);
  border-color: rgba(224,148,76,0.4);
}
.cw-carousel-arrow[disabled] { opacity: 0.3; cursor: default; }
.cw-carousel-arrow--prev { left: -10px; }
.cw-carousel-arrow--next { right: -10px; }

.cw-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.cw-carousel-dot {
  width: 10px; height: 10px; padding: 0;
  border-radius: 50%;
  border: 1px solid var(--cw-line);
  background: transparent;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.cw-carousel-dot:hover { border-color: rgba(224,148,76,0.6); }
.cw-carousel-dot.is-active {
  background: var(--cw-amber);
  border-color: var(--cw-amber);
  transform: scale(1.2);
}

@media (max-width: 960px) {
  .cw-feat-slide { grid-template-columns: 1fr; }
  .cw-carousel-arrow { display: none; }
  .cw-feat-track { padding: 0 8px 8px; }
}