/* =========================================================
   RM AGENCY — ADVANCED ANIMATIONS
   Load AFTER style.css and responsive.css
   Works with the JS in js/animations.js
========================================================= */

:root {
    --ease-out: cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   HERO INTRO  (plays on page load, CSS only)
   Uses the "translate" / "scale" properties so it never
   fights with the existing "transform" animations.
========================================================= */

@keyframes introUp {
    from {
        opacity: 0;
        translate: 0 36px;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes lineIn {
    from {
        clip-path: inset(0 0 100% 0);
        translate: 0 45%;
    }
    to {
        clip-path: inset(-20% -5% -25% -5%);
        translate: 0 0;
    }
}

@keyframes cardIn {
    from {
        opacity: 0;
        translate: 0 70px;
        scale: .94;
    }
    to {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

@keyframes introFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}


.hero .eyebrow {
    animation: introUp .9s var(--ease-out) .05s backwards;
}

.hero h1 > span {
    display: block;
    animation: lineIn 1.15s var(--ease-out) .15s backwards;
}

.hero h1 > span:nth-child(2) {
    animation-delay: .3s;
}

.hero-description {
    animation: introUp .9s var(--ease-out) .55s backwards;
}

.hero-buttons {
    animation: introUp .9s var(--ease-out) .7s backwards;
}

.hero-card-main {
    animation: cardIn 1.2s var(--ease-out) .35s backwards;
}

.floating-label-one {
    animation:
        floating 5s ease-in-out infinite,
        introFade .9s ease .95s backwards;
}

.floating-label-two {
    animation:
        floating 5s ease-in-out -1.5s infinite,
        introFade .9s ease 1.1s backwards;
}

.floating-label-three {
    animation:
        floating 5s ease-in-out -3s infinite,
        introFade .9s ease 1.25s backwards;
}


/* =========================================================
   HERO — MOUSE PARALLAX + SCROLL FADE
   --mx / --my  (-1 → 1)  and  --sp (0 → 1)  are set on
   .hero by animations.js
========================================================= */

.hero-visual {
    perspective: 1200px;
}

.hero-card-main {
    transform:
        rotateY(calc(var(--mx, 0) * 9deg))
        rotateX(calc(var(--my, 0) * -9deg));

    transform-style: preserve-3d;
}

.hero-glow-one {
    translate:
        calc(var(--mx, 0) * -45px)
        calc(var(--my, 0) * -35px);
}

.hero-glow-two {
    translate:
        calc(var(--mx, 0) * 55px)
        calc(var(--my, 0) * 45px);
}

.hero-orbit {
    translate:
        calc(var(--mx, 0) * -18px)
        calc(var(--my, 0) * -18px);
}

.floating-label-one {
    translate:
        calc(var(--mx, 0) * 30px)
        calc(var(--my, 0) * 30px);
}

.floating-label-two {
    translate:
        calc(var(--mx, 0) * -22px)
        calc(var(--my, 0) * 26px);
}

.floating-label-three {
    translate:
        calc(var(--mx, 0) * 36px)
        calc(var(--my, 0) * -20px);
}

.hero-container {
    translate: 0 calc(var(--sp, 0) * 40px);
}


/* =========================================================
   HEADINGS — reveal on scroll
   (class "anim-heading" is added by JS, so without JS
   nothing is ever hidden)
========================================================= */

.anim-heading {
    transition:
        translate 1s var(--ease-out),
        opacity .8s ease;
}

.anim-heading:not(.in) {
    translate: 0 34px;
    opacity: 0;
}

.anim-heading.in {
    translate: 0 0;
    opacity: 1;
}


/* =========================================================
   HEADER — hides on scroll down, returns on scroll up
========================================================= */

.site-header {
    transition:
        background-color .35s ease,
        border-color .35s ease,
        backdrop-filter .35s ease,
        transform .5s var(--ease-out);
}

.site-header.header-hidden {
    transform: translateY(-100%);
}


/* =========================================================
   SCROLL PROGRESS BAR
========================================================= */

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background: var(--accent);

    transform: scaleX(0);
    transform-origin: left center;

    z-index: 1100;

    pointer-events: none;
}

html[dir="rtl"] .scroll-progress {
    left: auto;
    right: 0;

    transform-origin: right center;
}


/* =========================================================
   CUSTOM CURSOR  (desktop mouse only)
========================================================= */

.cursor-ring,
.cursor-dot {
    position: fixed;
    top: 0;
    left: 0;

    translate: -50% -50%;

    border-radius: 50%;

    pointer-events: none;

    z-index: 2000;

    opacity: 0;

    transition:
        opacity .3s ease,
        scale .4s var(--ease-out),
        background-color .3s ease,
        border-color .3s ease;
}

.cursor-ring {
    width: 38px;
    height: 38px;

    border: 1px solid var(--text);
}

.cursor-dot {
    width: 5px;
    height: 5px;

    background: var(--text);
}

html.cursor-on .cursor-ring,
html.cursor-on .cursor-dot {
    opacity: 1;
}

.cursor-ring.is-hover {
    scale: 1.9;

    border-color: var(--accent);

    background: color-mix(
        in srgb,
        var(--accent) 16%,
        transparent
    );
}

.cursor-dot.is-hover {
    scale: 0;
}

@media (hover: none), (pointer: coarse) {

    .cursor-ring,
    .cursor-dot {
        display: none;
    }
}


/* =========================================================
   SERVICES — richer hover
========================================================= */

.service-row {
    position: relative;
}

.service-row::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -1px;

    width: 100%;
    height: 1px;

    background: var(--accent);

    transform: scaleX(0);
    transform-origin: left center;

    transition: transform .7s var(--ease-out);

    pointer-events: none;
}

.service-row:hover::after {
    transform: scaleX(1);
}

html[dir="rtl"] .service-row::after {
    left: auto;
    right: 0;

    transform-origin: right center;
}

.service-main h3 {
    transition: translate .5s var(--ease-out);
}

.service-row:hover .service-main h3 {
    translate: 12px 0;
}

html[dir="rtl"] .service-row:hover .service-main h3 {
    translate: -12px 0;
}

.service-row:hover .service-arrow {
    rotate: 45deg;
}


/* =========================================================
   WORK CARDS — richer hover
========================================================= */

.work-arrow {
    transition:
        background-color .35s ease,
        color .35s ease,
        rotate .5s var(--ease-out);
}

.work-card:hover .work-arrow {
    background: #fff;
    color: #000;

    rotate: 45deg;
}

.work-overlay h3 {
    transition: translate .5s var(--ease-out);
}

.work-card:hover .work-overlay h3 {
    translate: 8px 0;
}

html[dir="rtl"] .work-card:hover .work-overlay h3 {
    translate: -8px 0;
}


/* =========================================================
   REDUCED MOTION — turn the new effects off
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero .eyebrow,
    .hero h1 > span,
    .hero-description,
    .hero-buttons,
    .hero-card-main {
        animation: none;
    }

    .hero-container {
        translate: none;
        opacity: 1;
    }

    .anim-heading,
    .anim-heading:not(.in) {
        clip-path: none;
        translate: none;
        opacity: 1;
        transition: none;
    }

    .site-header.header-hidden {
        transform: none;
    }

    .cursor-ring,
    .cursor-dot,
    .scroll-progress {
        display: none;
    }
}