/* ==========================================================================
   CADMAP – Animations
   Reveal states only apply when JS is running (html.js), so content is
   always visible without JavaScript. Respects prefers-reduced-motion.
   ========================================================================== */

@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* Scroll reveal ----------------------------------------------------------- */
.js [data-reveal] {
    opacity: 0; transform: translate3d(0, 44px, 0);
    transition: opacity 1s var(--ease), transform 1.1s var(--ease);
    transition-delay: var(--d, 0s);
}
.js [data-reveal="scale"] { transform: scale(.94); }
.js [data-reveal="left"] { transform: translate3d(-50px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(50px, 0, 0); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Image curtain reveal */
.js [data-reveal="image"] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease-in-out); transition-delay: var(--d, 0s); }
.js [data-reveal="image"] img { transform: scale(1.3); transition: transform 1.6s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal="image"].is-in { clip-path: inset(0 0 0 0); }
.js [data-reveal="image"].is-in img { transform: scale(1); }

/* Split text (words) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .12em; margin: 0 -.02em -.12em; }
.w__i { display: inline-block; will-change: transform; }
.js [data-split].is-split .w__i { transform: translate3d(0, 110%, 0); transition: transform 1.1s var(--ease); transition-delay: calc(var(--wi, 0) * 45ms + var(--d, 0s)); }
.js [data-split].is-split.is-in .w__i { transform: none; }

/* Hero entrance */
.js [data-hero-item] { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.js .is-ready [data-hero-item] { opacity: 1; transform: none; }
.js .is-ready [data-hero-item]:nth-of-type(1) { transition-delay: .1s; }
.js .is-ready .hero__text, .js .is-ready .page-hero__text { transition-delay: .55s; }
.js .is-ready .hero__content .btn-row, .js .is-ready .page-hero .btn-row { transition-delay: .7s; }
.js .is-ready .hero__contact { transition-delay: .85s; }
.js .is-ready .hero__bottom { transition-delay: 1s; }

.js .hero__bg img, .js .page-hero__bg img, .js .hero__video { transform: scale(1.15); transition: transform 2.4s var(--ease); }
.js .is-ready .hero__bg img, .js .is-ready .page-hero__bg img, .js .is-ready .hero__video { transform: scale(1); }

.js .hero__card, .js .hero__chip { opacity: 0; }
/* Entrance, then a gentle continuous float (uses `translate`, so it doesn't fight `transform`) */
.js .is-ready .hero__card--main { animation: cardIn 1.4s var(--ease) .35s forwards, float 7s ease-in-out 1.8s infinite; }
.js .is-ready .hero__card--small { animation: cardIn 1.4s var(--ease) .6s forwards, float 9s ease-in-out 2s infinite reverse; }
.js .is-ready .hero__chip--a { animation: chipIn 1s var(--ease) .95s forwards, float 6s ease-in-out 2s infinite; }
.js .is-ready .hero__chip--b { animation: chipIn 1s var(--ease) 1.1s forwards, float 8s ease-in-out 2.2s infinite reverse; }

/* Timeline steps */
.js .timeline__step[data-reveal]:nth-child(odd) .timeline__card { transform: translateX(40px); }
.js .timeline__step[data-reveal]:nth-child(even) .timeline__card { transform: translateX(-40px); }
.timeline__step .timeline__card { transition: transform 1.1s var(--ease), border-color .4s; }
.js .timeline__step[data-reveal].is-in:nth-child(n) .timeline__card { transform: none; }

/* Keyframes ---------------------------------------------------------------- */
@keyframes cardIn { from { opacity: 0; transform: translate3d(0, 60px, 0) rotate(2deg) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes chipIn { from { opacity: 0; transform: translate3d(0, 20px, 0) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes pulse { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes ping { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(1.45); opacity: 0; } }
@keyframes scrollCue { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }
@keyframes glowDrift { from { transform: translate(-60%, -50%) scale(1); } to { transform: translate(-40%, -55%) scale(1.15); } }
@keyframes borderSpin { to { --angle: 360deg; } }
@keyframes loadBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.filter-anim { animation: fadeIn .6s var(--ease) both; }

/* Reduced motion ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
    .js [data-reveal], .js [data-hero-item], .js .hero__card, .js .hero__chip { opacity: 1 !important; transform: none !important; clip-path: none !important; }
    .js [data-split].is-split .w__i { transform: none !important; }
    .footer-marquee__track { animation: none; }
}