/* Motion for the Custom Fab site, the same set the SCHIST site uses (2026-11-09), in Custom Fab's own colours.
   All CSS transitions, and none with reduced motion. motion.js adds the js-motion class, so nothing is ever hidden without it.
   - each section's content rises in, one piece after another, the first time it scrolls into view
   - a thin line draws along the top edge of the "Recent work" band
   - a red slanted bar sweeps in beside the hero's kicker
   - cards lift on hover; on desktop with a mouse they tilt toward the pointer with a soft light following it
   - the solid red buttons catch a light sheen on hover */
@media (prefers-reduced-motion: no-preference) {
  .js-motion .mo { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--mo-d, 0s); }
  .js-motion .in .mo { opacity: 1; transform: none; }

  .js-motion section.band { position: relative; }
  .js-motion section.band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none; background: var(--line);
    clip-path: inset(0 100% 0 0); transition: clip-path 1.6s cubic-bezier(0.4, 0, 0.2, 1); }
  .js-motion section.band.in::before { clip-path: inset(0 0 0 0); }

  .js-motion .hero .kicker::before { content: ""; display: inline-block; width: 18px; height: 3px; margin-right: 9px; vertical-align: 0.25em; background: var(--red);
    transform: skewX(-24deg) scaleX(0); transform-origin: left; transition: transform 0.6s 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js-motion .hero.in .kicker::before { transform: skewX(-24deg) scaleX(1); }
}
@media print { .js-motion .mo { opacity: 1 !important; transform: none !important; } }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  main .card, main .feat { transition: transform 0.15s ease, box-shadow 0.15s ease; }
  main .card:hover, main .feat:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(10, 12, 15, 0.08), 0 12px 28px rgba(10, 12, 15, 0.12); }

  .btn:not(.ghost), .promo-btn { position: relative; overflow: hidden; isolation: isolate; }
  .btn:not(.ghost)::before, .promo-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.38) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.7s ease; }
  .btn:not(.ghost):hover::before, .promo-btn:hover::before, .promo:hover .promo-btn::before { transform: translateX(120%); }
}

@media (min-width: 980px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  main .card, main .feat { position: relative; transform-style: preserve-3d; }
  main .card.tilt, main .feat.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-3px); transition: transform 0.08s linear, box-shadow 0.15s ease; }
  main .card::after, main .feat::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.2s ease;
    background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, 0.22), transparent 60%); }
  main .card.tilt::after, main .feat.tilt::after { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }