/* ==========================================================================
   RKS MODELER — Motion
   Page-load animations are pure CSS (no JS dependency).
   Scroll reveals are toggled by main.js (IntersectionObserver).
   Scroll-linked effects (parallax, pinning, scrub) are in animations.js (GSAP).
   ========================================================================== */

@keyframes heroClip   { from { clip-path: inset(10% 8% 10% 46%); } to { clip-path: inset(0 0 0 0); } }
@keyframes pageClip   { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes heroScale  { from { transform: scale(1.22); } to { transform: scale(1); } }
@keyframes maskUp     { from { transform: translate3d(0, 110%, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes fadeUp     { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeDown   { from { opacity: 0; transform: translate3d(0, -16px, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeIn     { from { opacity: 0; } to { opacity: 1; } }
@keyframes lineGrow   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lineGrowY  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes draw       { to { stroke-dashoffset: 0; } }
@keyframes gridDrift  { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(96px, 96px, 0); } }
@keyframes lightDrift { 0% { transform: translate3d(-4%, -2%, 0) scale(1); } 100% { transform: translate3d(5%, 4%, 0) scale(1.12); } }
@keyframes scrollHint { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(260%); } }
@keyframes marquee    { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes linkLine   { 0% { transform: scaleX(1); transform-origin: right; } 49% { transform: scaleX(0); transform-origin: right; } 50% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }

/* ---------- Header ---------- */
.site-header { animation: fadeDown 1s var(--ease) .15s backwards; }

/* ---------- Home hero entrance ---------- */
.hero__media        { animation: heroClip 1.9s var(--ease-in-out) .05s backwards; }
.hero__img          { animation: heroScale 2.8s var(--ease) backwards; }
.hero__overlay      { animation: fadeIn 1.6s ease .1s backwards; }
.hero__light        { animation: lightDrift 18s ease-in-out infinite alternate; }
.hero__grid         { animation: fadeIn 2s ease .8s backwards, gridDrift 40s linear infinite; }
.bp-line            { animation: draw 2.4s var(--ease) 1.1s forwards; }
.bp-line--d2        { animation-delay: 1.4s; }
.bp-line--d3        { animation-delay: 1.7s; }
.bp-dim             { animation: fadeIn 1.2s ease 2s backwards; }
.hero__ruler        { animation: fadeIn 1.4s ease 1.2s backwards; }
.hero__tech         { animation: fadeIn 1.2s ease 1.6s backwards; }
.hero__eyebrow      { animation: fadeUp 1s var(--ease) .25s backwards; }
.hero__eyebrow-line { animation: lineGrow 1.2s var(--ease) .3s backwards; }
.hero__title .mask-line > span { animation: maskUp 1.25s var(--ease) var(--d, .35s) backwards; }
.hero__text         { animation: fadeUp 1.1s var(--ease) .85s backwards; }
.hero__ctas         { animation: fadeUp 1.1s var(--ease) 1s backwards; }
.hero__bottom       { animation: fadeIn 1.2s ease 1.3s backwards; }
.hero__scroll-line::after { animation: scrollHint 2.4s var(--ease-in-out) infinite; }

/* ---------- Inner page hero entrance ---------- */
.page-hero__media   { animation: pageClip 1.6s var(--ease-in-out) backwards; }
.page-hero__media img { animation: heroScale 2.6s var(--ease) backwards; }
.page-hero__ruler   { animation: fadeIn 1.2s ease 1s backwards; }
.page-hero .breadcrumbs { animation: fadeIn 1s ease .5s backwards; }
.page-hero__label   { animation: fadeUp 1s var(--ease) .4s backwards; }
.page-hero__label .label__line { animation: lineGrow 1.2s var(--ease) .5s backwards; }
.page-hero__title .mask-line > span { animation: maskUp 1.25s var(--ease) .5s backwards; }
.page-hero__lead    { animation: fadeUp 1.1s var(--ease) .8s backwards; }
.page-hero__actions { animation: fadeUp 1.1s var(--ease) .95s backwards; }
.page-hero__meta    { animation: fadeIn 1.2s ease 1.1s backwards; }
.page-hero__dim     { transform-origin: left; animation: lineGrow 1.6s var(--ease) 1.1s backwards; }

.wa-float { animation: fadeUp .9s var(--ease) 2.2s backwards; }
.marquee__track { animation: marquee 42s linear infinite; }

/* ---------- Scroll reveals (JS adds .is-in) ---------- */
.js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 38px, 0);
    transition: opacity 1s var(--ease), transform 1.2s var(--ease);
    transition-delay: var(--delay, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* The clip goes on the children: a clipped element has no visible area,
   so IntersectionObserver would never report it and it would stay hidden. */
.js [data-reveal="clip"] { opacity: 1; transform: none; }
.js [data-reveal="clip"] > * {
    clip-path: inset(100% -40px -40px -40px);
    transition: clip-path 1.5s var(--ease-in-out);
}
.js [data-reveal="clip"].is-in > * { clip-path: inset(-40px -40px -40px -40px); }

.js .label[data-reveal] .label__line { transform: scaleX(0); transition: transform 1.1s var(--ease) .25s; }
.js .label[data-reveal].is-in .label__line { transform: scaleX(1); }

.js [data-stagger] > * {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition: opacity .9s var(--ease), transform 1.1s var(--ease);
    transition-delay: calc(min(var(--i, 0), 10) * 70ms);
}
.js [data-stagger].is-in > * { opacity: 1; transform: none; }

.js .process__step { transition-delay: calc(var(--i, 0) * 140ms + 200ms); }

[data-draw] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s var(--ease-in-out); }
.is-in[data-draw], .is-in [data-draw] { stroke-dashoffset: 0; }
.no-js [data-draw] { stroke-dashoffset: 0; }

/* GSAP drives these directly, so CSS transitions would only add lag */
.has-gsap .process__line-fill { transition: none; }
.create.is-pinned .create__media img { transition: filter .8s; }

/* Filtering */
[data-filter-item] { transition: opacity .3s var(--ease), transform .45s var(--ease); }
[data-filter-item].is-filter-out { opacity: 0 !important; transform: scale(.96) !important; }

/* Lighter motion on small screens */
@media (max-width: 767px) {
    .js [data-reveal] { transform: translate3d(0, 22px, 0); }
    .js [data-stagger] > * { transform: translate3d(0, 18px, 0); transition-delay: calc(min(var(--i, 0), 4) * 60ms); }
    .hero__light, .hero__grid { animation: none; }
    .hero__media { animation-name: pageClip; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        transition-delay: 0s !important;
    }
    .js [data-reveal], .js [data-stagger] > *, .js [data-reveal="clip"] > * { opacity: 1; transform: none; clip-path: none; }
    .marquee__track, .hero__light, .hero__grid, .hero__scroll-line::after { animation: none !important; }
    [data-parallax] { transform: none; }
    .bp-line, [data-draw] { stroke-dashoffset: 0; }
}