/* ============================================================
   WedYara — 3D scene layer (public site only: html.wy-3d)
   Perspective transforms on transform/opacity only — GPU friendly.
   Everything here is inert for reduced-motion users because the
   motion script never adds .wy-anim / .wy-3d for them.
   ============================================================ */

/* ---------- Scroll entrances: elements arrive from depth ---------- */
.wy-3d.wy-anim .wy-reveal {
    transform: perspective(1100px) translate3d(0, 56px, -90px) rotateX(14deg);
    transform-origin: 50% 100%;
    backface-visibility: hidden;
    will-change: auto;
}
.wy-3d.wy-anim .wy-reveal.wy-zoom {
    transform: perspective(1100px) translate3d(0, 48px, -140px) rotateX(18deg) scale(.94);
}
.wy-3d.wy-anim .wy-reveal.wy-l {
    transform: perspective(1100px) translate3d(-44px, 40px, -130px) rotateY(20deg) rotateX(6deg);
    transform-origin: 0% 50%;
}
.wy-3d.wy-anim .wy-reveal.wy-r {
    transform: perspective(1100px) translate3d(44px, 40px, -130px) rotateY(-20deg) rotateX(6deg);
    transform-origin: 100% 50%;
}
.wy-3d.wy-anim .wy-reveal.wy-in { transform: none; }   /* must stay last */


/* Headline words rise out of depth, not just a mask */
.wy-3d.wy-anim .wy-split .wy-wi { transform: translateY(112%) rotateX(-50deg); transform-origin: 50% 100%; }
.wy-3d.wy-anim .wy-split.wy-in .wy-wi { transform: none; }

/* ---------- Scroll-linked scenes (CSS-only where supported) ---------- */
@keyframes wyScene {
    from { transform: perspective(1400px) translateY(90px) rotateX(18deg) scale(.9); opacity: .15; }
    to   { transform: none; opacity: 1; }
}
@supports (animation-timeline: view()) {
    .wy-3d.wy-anim .hm-about__media,
    .wy-3d.wy-anim .hm-corp__mosaic,
    .wy-3d.wy-anim .hm-cta {
        transform-origin: 50% 100%;
        animation: wyScene linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 38%;
    }
}

/* ---------- Hero: depth camera ---------- */
.wy-3d .hm-hero { --cam-x: 0; --cam-y: 0; }
.wy-3d .hm-hero__media { transform: scale(1.08) translate3d(calc(var(--cam-x) * -14px), calc(var(--cam-y) * -10px), 0); transition: transform .6s var(--wy-ease); }
.wy-3d .hm-hero__inner { transform-origin: 50% 100%; }
.wy-3d .hm-hero__title { transform: translate3d(calc(var(--cam-x) * 8px), calc(var(--cam-y) * 6px), 0); transition: transform .6s var(--wy-ease); }

/* ---------- Tilt cards + glare ---------- */
.wy-glare {
    position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; border-radius: inherit;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.34), transparent 55%);
    transition: opacity .3s ease; mix-blend-mode: soft-light;
}
.wy-tilting > .wy-glare { opacity: 1; }
.hm-svc, .hm-dest__card, .hm-quote, .hm-step__body, .hm-gallery__item, .card { position: relative; }
.wy-tilting { transition: transform .12s linear, box-shadow .3s ease !important; box-shadow: 0 24px 50px rgba(36,28,36,.22); }
.hm-dest__card, .hm-gallery__item, .hm-svc { transform-style: flat; }

/* Trust icons flip on hover */
@media (hover: hover) {
    .wy-3d .hm-trust__item i { transition: transform .6s var(--wy-ease), background-color .25s, color .25s; }
    .wy-3d .hm-trust__item:hover i { transform: perspective(300px) rotateY(360deg) scale(1.08); }
}

@media (max-width: 640px) {
    /* gentler depth on phones: less travel, no side swings */
    .wy-3d.wy-anim .wy-reveal.wy-l, .wy-3d.wy-anim .wy-reveal.wy-r {
        transform: perspective(900px) translate3d(0, 36px, -70px) rotateX(10deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .wy-glare { display: none; }
}

/* Depth transforms travel sideways before they land; never let that create a horizontal scrollbar */
html.wy-3d, .wy-3d body { overflow-x: clip; }

/* ============================================================
   SCRUBBED 3D — poses are driven by scroll position (both directions)
   ============================================================ */
/* Resting pose. JS writes transform/opacity inline only while an element is mid-entrance or mid-exit. */
.wy-3d.wy-anim .wy-reveal.wy-scrub { opacity: 1; transform: none; transition: none; will-change: transform, opacity; transform-origin: 50% 100%; }
.wy-3d.wy-anim .wy-reveal.wy-scrub.wy-l { transform-origin: 0% 50%; }
.wy-3d.wy-anim .wy-reveal.wy-scrub.wy-r { transform-origin: 100% 50%; }
.wy-3d.wy-anim .wy-reveal.wy-scrub.wy-idle {
    will-change: auto;
    transition: transform var(--wy-t-card) var(--wy-ease), box-shadow .3s ease, border-color .3s ease, background-color .3s ease;
}

/* Headlines: each line rises in proportion to scroll progress (--p) */
.wy-3d.wy-anim .wy-split.wy-scrub .wy-wi {
    --wp: clamp(0, calc(var(--p, 0) * 1.7 - var(--wy-line, 0) * 0.22), 1);
    transform: translateY(calc((1 - var(--wp)) * 112%)) rotateX(calc((1 - var(--wp)) * -55deg));
    transform-origin: 50% 100%;
    transition: none;
}

/* Images: mask wipes open as you scroll in, closes as you scroll back */
.wy-3d.wy-anim img.wy-img.wy-scrub {
    clip-path: inset(0 0 calc((1 - var(--p, 0)) * 100%) 0);
    scale: calc(1.12 - 0.12 * var(--p, 0));
    opacity: calc(0.15 + 0.85 * var(--p, 0));
    transition: none;
}

/* Gallery tiles: the photo settles inside its frame */
.wy-3d.wy-anim .hm-gallery__item.wy-scrub img { scale: calc(1.16 - 0.16 * var(--p, 0)); transition: transform .8s var(--wy-ease); }

/* Process connector fills with progress, node lights when the stage is reached */
.wy-3d.wy-anim .hm-step.wy-scrub::after { transition: transform .7s var(--wy-ease); }