/* =========================================================
   Mesaflow Landing — Motion layer
   - Custom cursor (dot + ring, magnetic)
   - Initial states for reveal animations
   - Pinned product / hero / horizontal rail
   ========================================================= */

/* ---------- Custom cursor ---------- */

.cursor {
  border-radius: 999px;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform, width, height, opacity;
  z-index: 9999;
}

/* --- Custom cursor: ember dot only --- */

.cursor-dot {
  background: var(--ember);
  box-shadow:
    0 0 0 2px rgba(255, 107, 53, 0.18),
    0 0 12px 4px rgba(255, 107, 53, 0.45),
    0 0 28px 8px rgba(255, 107, 53, 0.18);
  height: 9px;
  mix-blend-mode: normal;
  opacity: 0;
  transition: opacity 200ms ease,
              transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 200ms ease;
  width: 9px;
}

/* Trails y ring: ocultos — mantenemos los elementos en el DOM por el JS */
.cursor-trail,
.cursor-ring {
  display: none !important;
}

/* Activated by JS once we know it's a fine-pointer device */
body.has-custom-cursor {
  cursor: none;
}

body.has-custom-cursor a,
body.has-custom-cursor button,
body.has-custom-cursor [data-magnetic],
body.has-custom-cursor input,
body.has-custom-cursor select,
body.has-custom-cursor label {
  cursor: none;
}

body.has-custom-cursor .cursor-dot {
  opacity: 1;
}

/* Hover sobre interactivos: el punto crece y reluce más */
.cursor-dot.is-hover {
  box-shadow:
    0 0 0 3px rgba(255, 107, 53, 0.22),
    0 0 18px 6px rgba(255, 107, 53, 0.65),
    0 0 40px 12px rgba(255, 107, 53, 0.25);
  transform: scale(1.8);
}

/* ---------- Hero word splits ---------- */

.hero-display .word-inner {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
}

/* Hero pieces hidden until JS timeline runs */
[data-hero-eyebrow],
[data-hero-copy],
[data-hero-actions],
[data-hero-meta],
[data-cinema-meta] {
  opacity: 0;
}

[data-hero-actions],
[data-hero-meta] {
  transform: translate3d(0, 18px, 0);
}

/* hero-mockup transform fully managed by GSAP (yPercent: -50 to center) */

/* Hero bg starts slightly zoomed (already declared in styles.css) */

/* ---------- Reveal initial states ---------- */

[data-reveal-batch] > * {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  will-change: transform, opacity;
}

[data-reveal-block] [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  will-change: transform, opacity;
}

/* formula deprecated, replaced by .roi-calc */

/* Signal band initial */
.signal-band[data-reveal-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
}

/* ---------- 3D tilt cards ---------- */

[data-tilt] {
  transform-style: preserve-3d;
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 360ms ease;
  will-change: transform;
}

[data-tilt] > * {
  transform: translateZ(0);
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-tilt].is-tilting {
  transition: none;
}

[data-tilt].is-tilting > .tilt-lift {
  transform: translateZ(28px);
}

/* ---------- Modules rail (horizontal) ---------- */

.modules-pin-wrap {
  position: relative;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .cursor {
    display: none !important;
  }

  body.has-custom-cursor,
  body.has-custom-cursor * {
    cursor: auto !important;
  }

  .hero-display .word-inner,
  [data-hero-eyebrow],
  [data-hero-copy],
  [data-hero-actions],
  [data-reveal-batch] > *,
  [data-reveal-block] [data-reveal],
  .signal-band[data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- Touch / coarse pointer ---------- */

@media (pointer: coarse), (hover: none) {
  .cursor {
    display: none !important;
  }
}