/* ==========================================================================
   PowerTrans Industrial — Motion & Interaction Layer
   Companion to site.css. Provides the "engineering machine" motion language:
   scroll-driven rotation, horizontal pan, sticky stack, pointer tilt,
   magnetic CTAs, kinetic type, counters, drag physics.
   All motion is motivated: it explains the product (rotation, transmission)
   or the hierarchy (reveal order). Nothing decorative-only.
   ========================================================================== */

/* ---------- Scroll progress rail (thin instrument readout) ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent), #F0A05A);
  z-index: 90; pointer-events: none;
}

/* ---------- Grain (fixed, pointer-events-none, per performance rules) ---------- */
.grain {
  position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: .24;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { .grain { display: none; } }

/* ---------- Kinetic type ---------- */
.kinetic .k-word { display: inline-block; overflow: hidden; vertical-align: top; }
.kinetic .k-word > span { display: inline-block; transform: translateY(105%); }
.no-js .kinetic .k-word > span { transform: none; }

/* ---------- Hero studio (full-bleed) ---------- */
/* NOTE: the hero used to live in a .hero-plate card with corner brackets, then
   in a framed .hero-stage; it is now a full-bleed studio panel (.hero-full).
   The rotating text ring was also removed — measured, it bled 96px into the
   headline column. See hero3d.css. */
.hero-full__stage { will-change: transform; }

/* NOTE: the hero used to live in a .hero-plate card with corner brackets.
   That framing was removed — the 3D assembly now floats directly on the
   page (see hero3d.css). The rules were deleted, not overridden. */

/* ---------- Pointer tilt (3D) ---------- */
.tilt { transform-style: preserve-3d; will-change: transform; }
.tilt-inner { transform: translateZ(38px); }
.tilt-shine {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.5), transparent 62%);
  transition: opacity .3s ease; mix-blend-mode: overlay;
}
.tilt:hover .tilt-shine { opacity: 1; }

/* ---------- Magnetic CTA ---------- */
.magnetic { will-change: transform; }
.magnetic > * { display: inline-flex; align-items: center; gap: 10px; }

/* ---------- Horizontal pan (scroll-driven product rail) ---------- */
.pan-wrap { position: relative; overflow: hidden; }
.pan-head { position: relative; z-index: 2; }
.pan-track { display: flex; gap: 22px; padding-inline: 32px; align-items: stretch; width: max-content; will-change: transform; }
.pan-card { width: 330px; flex: 0 0 330px; }
.pan-card .card { height: 100%; }
@media (min-width: 1280px) { .pan-card { width: 380px; flex-basis: 380px; } }
@media (max-width: 767px) {
  .pan-track { gap: 16px; padding-inline: 20px; }
  .pan-card { width: 78vw; flex-basis: 78vw; }
}

/* number rail inside pan cards */
.pan-index {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
  color: var(--subtle); text-transform: uppercase;
}

/* ---------- Sticky stack ---------- */
.stack { position: relative; }
.stack-item { position: sticky; top: 0; min-height: 100dvh; display: flex; align-items: center; will-change: transform; }
.stack-panel {
  width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 20px;
  overflow: hidden; box-shadow: 0 30px 60px -34px rgba(11,16,20,.3);
}
.stack-visual { position: relative; background: var(--canvas-steel); overflow: hidden; }
.stack-visual img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Draw line (process) ---------- */
.draw-line { position: relative; }
.draw-line .rail { position: absolute; background: rgba(255,255,255,.14); }
.draw-line .rail-fill { position: absolute; background: var(--accent); transform-origin: top left; }

/* ---------- Counters ---------- */
.stat-num { font-variant-numeric: tabular-nums; }

/* ---------- Image reveal (clip) ---------- */
.img-reveal img { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease); }
.img-reveal.is-in img { clip-path: inset(0 0 0 0); }

/* ---------- Badge rail (draggable, inertia) ---------- */
.fling-rail { display: flex; gap: 14px; cursor: grab; touch-action: pan-y; padding-inline: 4px; }
.fling-rail.is-dragging { cursor: grabbing; }
.fling-item { flex: 0 0 auto; }

/* ---------- Dark machine section ---------- */
.machine-grid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* ---------- Reduced motion: everything collapses ---------- */
@media (prefers-reduced-motion: reduce) {
  .pan-track { transform: none !important; flex-wrap: wrap; width: auto; }
  .stack-item { position: static; min-height: 0; padding-block: 18px; }
  .img-reveal img { clip-path: none !important; }
  .tilt { transform: none !important; }
  .magnetic { transform: none !important; }
  .kinetic .k-word > span { transform: none !important; }
}