/* ============================================================================
   CEMLab motion layer — 3D depth for the public pages.

   Pairs with assets/js/cemlab-motion.js. Only transform and opacity are
   animated, both of which the compositor handles without re-laying-out the
   page, so this adds depth without costing the load times we tuned for.

   Opt in per page by adding .has-motion to a wrapper; nothing here applies
   until then, so a page can be left alone.

   Everything degrades to "visible, no movement" if JavaScript never runs — the
   reveal states are applied BY the script (see .motion-ready below), not by
   this file, so content is never stuck invisible on a JS failure.
   ========================================================================== */

/* ---- Shared perspective ---------------------------------------------------
   A single perspective on the section keeps sibling cards tilting in a
   consistent 3D space instead of each having its own vanishing point. */
.has-motion .motion-stage {
    perspective: 1400px;
    perspective-origin: 50% 50%;
}

/* ---- Scroll reveal --------------------------------------------------------
   The script adds .motion-ready to <html> once it has taken over; only then do
   elements start hidden. Without JS the rule never matches and everything
   renders normally. */
.motion-ready .has-motion [data-motion] {
    opacity: 0;
    will-change: transform, opacity;
}

.motion-ready .has-motion [data-motion].is-revealed {
    opacity: 1;
    /* will-change is a promise to the browser to keep a layer alive; drop it
       once the element has settled so long pages do not hold dozens of them. */
    will-change: auto;
}

/* ---- 3D tilt cards --------------------------------------------------------
   The JS writes --tilt-x / --tilt-y from pointer position; the card reads them
   here so the maths stays in one place and the easing stays in CSS. */
.has-motion .motion-tilt {
    transform-style: preserve-3d;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1),
                box-shadow .35s ease;
}

.has-motion .motion-tilt.is-tilting {
    transform:
        perspective(1000px)
        rotateX(var(--tilt-x, 0deg))
        rotateY(var(--tilt-y, 0deg))
        translateZ(14px);
    box-shadow: 0 26px 60px rgba(20, 19, 59, 0.18);
}

body.bg-dark .has-motion .motion-tilt.is-tilting {
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
}

/* Lift inner content off the card face so the tilt reads as real depth
   rather than a flat image being rotated. */
.has-motion .motion-tilt .motion-layer {
    transform: translateZ(28px);
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

/* ---- Hero parallax --------------------------------------------------------
   Depth is driven by --motion-depth, which the script updates on scroll. */
.has-motion .motion-parallax {
    transform: translate3d(0, var(--motion-depth, 0px), 0);
    will-change: transform;
}

/* ---- Floating accent ------------------------------------------------------ */
@keyframes cemlab-float {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%      { transform: translate3d(0, -14px, 0) rotate(1.5deg); }
}

.has-motion .motion-float {
    animation: cemlab-float 6s ease-in-out infinite;
}

/* ---- Counters ------------------------------------------------------------- */
.has-motion .motion-count {
    font-variant-numeric: tabular-nums;
}

/* ============================================================================
   Reduced motion

   Not a nicety: vestibular disorders make large parallax and rotation
   genuinely unpleasant. When the visitor has asked their OS for less motion we
   drop every transform and leave the design static but complete.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .motion-ready .has-motion [data-motion],
    .motion-ready .has-motion [data-motion].is-revealed {
        opacity: 1 !important;
        transform: none !important;
        will-change: auto;
    }

    .has-motion .motion-tilt,
    .has-motion .motion-tilt.is-tilting,
    .has-motion .motion-tilt .motion-layer,
    .has-motion .motion-parallax {
        transform: none !important;
        transition: none !important;
    }

    .has-motion .motion-float {
        animation: none !important;
    }
}