/* =========================================================
   ACORA GLOBAL ANIMATION SYSTEM
   Architectural / blueprint motion layer shared by every page.
   Driven by --scroll-progress / --mouse-x / --mouse-y custom
   properties set once per frame by assets/js/animations.js.
   ========================================================= */

html {
    overflow-x: hidden;
}

body {
    overflow-x: clip;
}

:root {
    --scroll-progress: 0;
    --mouse-x: 0.5;
    --mouse-y: 0.5;
    --acora-line: rgba(28, 65, 120, .5);
    --acora-line-soft: rgba(28, 65, 120, .22);
    --acora-glow: rgba(28, 65, 120, .16);
}

/* ---------------------------------------------------------
   Global scroll progress indicator
   --------------------------------------------------------- */

.acora-scroll-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2000;
    background: rgba(28, 65, 120, .08);
    pointer-events: none;
}

.acora-scroll-bar span {
    display: block;
    height: 100%;
    width: 100%;
    transform-origin: left center;
    transform: scaleX(var(--scroll-progress));
    background: linear-gradient(90deg, #1C4178, #3a6bb5 55%, #1C4178);
    box-shadow: 0 0 12px rgba(28, 65, 120, .55);
}

/* ---------------------------------------------------------
   Header refinement: glass + shrink on scroll
   --------------------------------------------------------- */

.site-header {
    transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.site-header.scrolled {
    background: rgba(255, 255, 255, .97);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 10px 34px rgba(15, 43, 82, .1);
}

.nav-wrap {
    transition: height .35s ease;
}

.site-header.scrolled .nav-wrap {
    height: 72px;
}

.main-nav a {
    transition: color .25s ease;
}

.main-nav a::after {
    transition: right .35s cubic-bezier(.22, 1, .36, 1);
}

/* ---------------------------------------------------------
   Global fixed architectural background system
   --------------------------------------------------------- */

.acora-bg-system {
    display: none;
}

.acora-bg-grid {
    position: absolute;
    inset: -10% -10%;
    width: 120%;
    height: 120%;
    opacity: .5;
    background-image:
        linear-gradient(var(--acora-line-soft) 1px, transparent 1px),
        linear-gradient(90deg, var(--acora-line-soft) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 0%, transparent 75%);
    opacity: .12;
    transform: translate3d(0, calc(var(--scroll-progress) * -60px), 0);
}

.acora-bg-rings {
    position: absolute;
    top: -14%;
    right: -12%;
    width: min(64vw, 900px);
    height: min(64vw, 900px);
    opacity: .35;
    transform:
        rotate(calc(var(--scroll-progress) * 70deg))
        translate3d(0, calc(var(--scroll-progress) * -80px), 0);
    transition: transform .1s linear;
}

.acora-bg-rings circle {
    fill: none;
    stroke: var(--acora-line);
    vector-effect: non-scaling-stroke;
}

.acora-bg-rings .ring-outer {
    stroke-dasharray: 4 10;
    animation: acora-spin 90s linear infinite;
    transform-origin: 50% 50%;
}

.acora-bg-rings .ring-mid {
    stroke-dasharray: 1 6;
    animation: acora-spin-rev 65s linear infinite;
    transform-origin: 50% 50%;
}

.acora-bg-rings .ring-inner {
    stroke-dasharray: 2 4;
    animation: acora-spin 42s linear infinite;
    transform-origin: 50% 50%;
}

.acora-bg-second-rings {
    position: absolute;
    bottom: -18%;
    left: -14%;
    width: min(52vw, 720px);
    height: min(52vw, 720px);
    opacity: .28;
    transform:
        rotate(calc(var(--scroll-progress) * -55deg))
        translate3d(0, calc(var(--scroll-progress) * 60px), 0);
}

.acora-bg-second-rings circle {
    fill: none;
    stroke: var(--acora-line);
    vector-effect: non-scaling-stroke;
}

.acora-bg-second-rings .ring-outer {
    stroke-dasharray: 3 9;
    animation: acora-spin-rev 100s linear infinite;
    transform-origin: 50% 50%;
}

.acora-bg-second-rings .ring-inner {
    stroke-dasharray: 1 5;
    animation: acora-spin 54s linear infinite;
    transform-origin: 50% 50%;
}

@keyframes acora-spin {
    to { transform: rotate(360deg); }
}

@keyframes acora-spin-rev {
    to { transform: rotate(-360deg); }
}

.acora-bg-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .3;
}

.acora-bg-lines path {
    fill: none;
    stroke: var(--acora-line);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1400;
    stroke-dashoffset: calc(1400 - (var(--scroll-progress) * 1400));
    transition: stroke-dashoffset .12s linear;
}

.acora-bg-lines .acora-line-b {
    stroke-dasharray: 900;
    stroke-dashoffset: calc(900 - (var(--scroll-progress) * 900));
}

.acora-bg-nodes circle {
    fill: #1C4178;
    opacity: .55;
}

.acora-bg-node {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1C4178;
    box-shadow: 0 0 10px rgba(28, 65, 120, .6);
    opacity: .5;
}

.acora-bg-node-a {
    top: 18%;
    left: 8%;
    transform: translate3d(calc(var(--scroll-progress) * 40px), calc(var(--scroll-progress) * 120px), 0);
}

.acora-bg-node-b {
    top: 52%;
    right: 10%;
    transform: translate3d(calc(var(--scroll-progress) * -50px), calc(var(--scroll-progress) * -90px), 0);
}

.acora-bg-node-c {
    bottom: 12%;
    left: 22%;
    transform: translate3d(calc(var(--scroll-progress) * 60px), calc(var(--scroll-progress) * -70px), 0);
}

/* ---------------------------------------------------------
   Blueprint corner marks reused on hero / heading sections
   --------------------------------------------------------- */

.page-hero,
.why-hero,
.section-head,
.about-hero,
.acora-hero-slider {
    position: relative;
}

.page-hero::before,
.about-hero::before {
    content: "";
    position: absolute;
    top: 24px;
    left: 4%;
    width: 34px;
    height: 34px;
    border-top: 1.5px solid var(--acora-line);
    border-left: 1.5px solid var(--acora-line);
    opacity: .55;
    pointer-events: none;
}

.page-hero::after {
    content: "";
    position: absolute;
    bottom: 20px;
    right: 4%;
    width: 34px;
    height: 34px;
    border-bottom: 1.5px solid var(--acora-line);
    border-right: 1.5px solid var(--acora-line);
    opacity: .55;
    pointer-events: none;
}

/* ---------------------------------------------------------
   Premium reveal system (upgrades the existing .reveal hook)
   --------------------------------------------------------- */

.reveal {
    opacity: 0;
    transform: translateX(-56px);
    transition:
        opacity .85s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms),
        transform .85s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms);
}

.reveal.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* Directional variant: same reveal engine, slides in from the
   left instead of drifting up. Add alongside .reveal. */
.reveal.reveal-left {
    transform: translateX(-56px);
}

.reveal.reveal-left.revealed {
    transform: translateX(0);
}

.reveal.reveal-right {
    transform: translateX(56px);
}

.reveal.reveal-right.revealed {
    transform: translateX(0);
}

/* ---------------------------------------------------------
   Buttons: light sweep + arrow travel + magnetic hover
   --------------------------------------------------------- */

.btn {
    position: relative;
    overflow: hidden;
    transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease, background-color .25s ease;
}

.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-20deg);
    transition: left .65s ease;
    pointer-events: none;
}

.btn:hover::before {
    left: 130%;
}

.btn span[aria-hidden="true"] {
    display: inline-block;
    margin-left: 8px;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

.btn:hover span[aria-hidden="true"] {
    transform: translateX(5px);
}

/* ---------------------------------------------------------
   Cards: shimmer border + image scale + staggered reveal
   --------------------------------------------------------- */

.info-card,
.category-card,
.product-card {
    position: relative;
    transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease, border-color .4s ease;
}

.info-card::after,
.category-card::after,
.product-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(120deg, transparent 40%, rgba(28, 65, 120, .55) 50%, transparent 60%);
    background-size: 220% 220%;
    background-position: 0% 0%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .4s ease, background-position 1.1s ease;
    pointer-events: none;
}

.info-card:hover::after,
.category-card:hover::after,
.product-card:hover::after {
    opacity: 1;
    background-position: 100% 100%;
}

.category-card img,
.product-card img {
    transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}

.category-card:hover img,
.product-card:hover img {
    transform: scale(1.06);
}

.cards-3 .reveal,
.cards-4 .reveal,
.products-grid .reveal {
    transition-delay: var(--reveal-delay, 0ms);
}

.cards-3 > .reveal:nth-child(1),
.cards-4 > .reveal:nth-child(1),
.products-grid > .reveal:nth-child(1) { --reveal-delay: 0ms; }
.cards-3 > .reveal:nth-child(2),
.cards-4 > .reveal:nth-child(2),
.products-grid > .reveal:nth-child(2) { --reveal-delay: 90ms; }
.cards-3 > .reveal:nth-child(3),
.cards-4 > .reveal:nth-child(3),
.products-grid > .reveal:nth-child(3) { --reveal-delay: 180ms; }
.cards-3 > .reveal:nth-child(4),
.cards-4 > .reveal:nth-child(4),
.products-grid > .reveal:nth-child(4) { --reveal-delay: 270ms; }
.products-grid > .reveal:nth-child(5) { --reveal-delay: 360ms; }
.products-grid > .reveal:nth-child(6) { --reveal-delay: 450ms; }
.products-grid > .reveal:nth-child(7) { --reveal-delay: 540ms; }
.products-grid > .reveal:nth-child(8) { --reveal-delay: 630ms; }

/* ---------------------------------------------------------
   Perspective grid backdrop for Products / Category grids
   --------------------------------------------------------- */

body.page-products .products-grid,
body.page-products .cards-4,
body.page-category .products-grid {
    position: relative;
}

body.page-products .section:has(.cards-4)::before,
body.page-products .section:has(.products-grid)::before,
body.page-category .section:has(.products-grid)::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--acora-line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--acora-line-soft) 1px, transparent 1px);
    background-size: 46px 46px;
    opacity: .1;
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, #000 0%, transparent 80%);
    mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, #000 0%, transparent 80%);
    pointer-events: none;
}

body.page-products .section,
body.page-category .section {
    position: relative;
}

/* ---------------------------------------------------------
   About: GLB scene decorative rings
   --------------------------------------------------------- */

.visual-panel-3d {
    position: relative;
}

.model-orbit {
    display: none;
}

.model-orbit svg {
    position: absolute;
    top: 50%;
    left: 50%;
    fill: none;
    stroke: var(--acora-line);
    vector-effect: non-scaling-stroke;
}

.model-orbit .ring-a {
    width: 88%;
    height: 88%;
    transform: translate(-50%, -50%) rotate(calc(var(--scroll-progress) * 90deg));
    opacity: .5;
    animation: acora-spin 40s linear infinite;
}

.model-orbit .ring-b {
    width: 68%;
    height: 68%;
    transform: translate(-50%, -50%) rotate(calc(var(--scroll-progress) * -60deg));
    opacity: .35;
    animation: acora-spin-rev 28s linear infinite;
}

.model-orbit .ticks {
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    opacity: .3;
}

.model-orbit-dot {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 10px rgba(28, 65, 120, .55);
    top: 50%;
    left: 50%;
    animation: acora-orbit 14s linear infinite;
}

.model-orbit-dot.dot-b {
    animation-duration: 20s;
    animation-direction: reverse;
    background: #0e294f;
}

@keyframes acora-orbit {
    from { transform: rotate(0deg) translateX(min(38vw, 210px)) rotate(0deg); }
    to { transform: rotate(360deg) translateX(min(38vw, 210px)) rotate(-360deg); }
}

/* ---------------------------------------------------------
   About page: large blueprint geometry tied to scroll
   --------------------------------------------------------- */

body.page-about .about-hero__background {
    background-image:
        linear-gradient(var(--acora-line-soft) 1px, transparent 1px),
        linear-gradient(90deg, var(--acora-line-soft) 1px, transparent 1px);
    background-size: 58px 58px;
    opacity: .16;
    -webkit-mask-image: radial-gradient(ellipse 75% 65% at 60% 40%, #000 0%, transparent 78%);
    mask-image: radial-gradient(ellipse 75% 65% at 60% 40%, #000 0%, transparent 78%);
    transform: translate3d(0, calc(var(--scroll-progress) * -70px), 0);
}

body.page-about .about-hero::after {
    content: "";
    position: absolute;
    top: 8%;
    right: 3%;
    width: 260px;
    height: 260px;
    max-width: 34vw;
    max-height: 34vw;
    border: 1px solid var(--acora-line-soft);
    border-radius: 50%;
    transform: rotate(calc(var(--scroll-progress) * 60deg));
    pointer-events: none;
    opacity: .5;
}

body.page-about .about-process__sticky {
    position: relative;
}

body.page-about .about-process__sticky::before {
    content: "";
    position: absolute;
    top: -40px;
    left: -60px;
    width: 220px;
    height: 220px;
    border: 1px dashed var(--acora-line-soft);
    border-radius: 50%;
    transform: rotate(calc(var(--scroll-progress) * -80deg));
    pointer-events: none;
    z-index: -1;
}

/* ---------------------------------------------------------
   Why Choose Us: evolving radial engineering diagram
   --------------------------------------------------------- */

body.page-why-choose-us .section {
    position: relative;
}

body.page-why-choose-us .section:nth-of-type(2)::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -10%;
    width: 640px;
    height: 640px;
    max-width: 70vw;
    max-height: 70vw;
    border: 1px solid var(--acora-line-soft);
    border-radius: 50%;
    transform: translateY(-50%) rotate(calc(var(--scroll-progress) * 40deg));
    pointer-events: none;
    opacity: .5;
}

body.page-why-choose-us .section:nth-of-type(2)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -4%;
    width: 420px;
    height: 420px;
    max-width: 46vw;
    max-height: 46vw;
    border: 1px dashed var(--acora-line-soft);
    border-radius: 50%;
    transform: translateY(-50%) rotate(calc(var(--scroll-progress) * -55deg));
    pointer-events: none;
    opacity: .45;
}

/* ---------------------------------------------------------
   Contact: convergence effect
   --------------------------------------------------------- */

body.page-contact .contact-grid {
    position: relative;
}

body.page-contact .page-hero::before,
body.page-contact .page-hero::after {
    opacity: calc(.55 - (var(--scroll-progress) * .3));
}

body.page-contact .contact-card {
    position: relative;
    overflow: hidden;
}

body.page-contact .contact-card::before {
    content: "";
    position: absolute;
    top: -30%;
    right: -30%;
    width: 60%;
    height: 60%;
    border: 1px solid var(--acora-line-soft);
    border-radius: 50%;
    transform: scale(calc(1.4 - (var(--scroll-progress) * .3)));
    opacity: .4;
    pointer-events: none;
}

/* ---------------------------------------------------------
   Metallic light sweep utility (hero + banners)
   --------------------------------------------------------- */

.acora-hero-slider::after,
.banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .08) 45%, transparent 60%);
    transform: translateX(calc((var(--scroll-progress) - 0.5) * 220%));
    pointer-events: none;
    z-index: 5;
}

.banner {
    position: relative;
    overflow: hidden;
}

/* ---------------------------------------------------------
   Restrained cursor-follow glow (desktop only, added via JS)
   --------------------------------------------------------- */

.acora-cursor-glow {
    display: none;
}

.acora-cursor-trail,
.acora-neon-cursor {
    display: none;
    pointer-events: none;
}

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
    html.acora-neon-cursor-enabled,
    html.acora-neon-cursor-enabled * {
        cursor: none !important;
    }

    .acora-cursor-trail {
        position: fixed;
        inset: 0;
        z-index: 3900;
        display: block;
        width: 100vw;
        height: 100vh;
        opacity: 0;
        contain: strict;
        will-change: opacity;
    }

    .acora-cursor-trail__line {
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .acora-cursor-trail__line {
        stroke: rgba(255, 107, 44, .62);
        stroke-width: 1.25;
    }

    .acora-neon-cursor {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 3901;
        display: block;
        width: 26px;
        height: 26px;
        opacity: 0;
        transform: translate3d(-50px, -50px, 0);
        transition: opacity .15s ease;
        will-change: transform, opacity;
    }

    .acora-neon-cursor.is-active {
        opacity: 1;
    }

    .acora-neon-cursor__halo,
    .acora-neon-cursor__core {
        position: absolute;
        border-radius: 50%;
    }

    .acora-neon-cursor__halo {
        inset: 0;
        border: 2px solid #ff6b2c;
        background: transparent;
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, .72),
            0 0 12px rgba(255, 107, 44, .58);
        transition: transform .28s cubic-bezier(.22, 1, .36, 1), border-color .28s ease, opacity .28s ease;
    }

    .acora-neon-cursor__core {
        top: 50%;
        left: 50%;
        width: 4px;
        height: 4px;
        background: #ff6b2c;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .85);
        transform: translate(-50%, -50%);
        transition: transform .2s ease, opacity .2s ease;
    }

    .acora-neon-cursor.is-interactive .acora-neon-cursor__halo {
        border-color: #ff6b2c;
        transform: scale(1.6);
    }

    .acora-neon-cursor.is-interactive .acora-neon-cursor__core {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.4);
    }

    .acora-neon-cursor.is-pressed .acora-neon-cursor__halo {
        transform: scale(.82);
    }
}

/* ---------------------------------------------------------
   Page-entry motion (existing logo only)
   --------------------------------------------------------- */

.acora-page-enter {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0e294f, #1C4178);
    pointer-events: none;
    animation: acora-enter-fade 900ms ease forwards;
}

.acora-page-enter img {
    width: 140px;
    filter: brightness(0) invert(1);
    opacity: 0;
    transform: scale(.85);
    animation: acora-enter-logo 700ms cubic-bezier(.22, 1, .36, 1) 80ms forwards;
}

@keyframes acora-enter-logo {
    to { opacity: 1; transform: scale(1); }
}

@keyframes acora-enter-fade {
    0%, 55% { opacity: 1; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}

/* ---------------------------------------------------------
   Mobile / tablet: keep motion light and cheap
   --------------------------------------------------------- */

@media (max-width: 900px) {
    .acora-bg-rings,
    .acora-bg-second-rings,
    .acora-bg-grid,
    .acora-bg-lines,
    .acora-bg-node,
    .acora-cursor-glow,
    .acora-cursor-trail,
    .acora-neon-cursor,
    body.page-why-choose-us .section:nth-of-type(2)::before,
    body.page-why-choose-us .section:nth-of-type(2)::after,
    body.page-products .section::before,
    body.page-category .section::before {
        display: none;
    }

    .reveal {
        transform: translateX(-34px);
        filter: none;
        transition-duration: .55s;
    }

    .reveal.reveal-left {
        transform: translateX(-34px);
        filter: none;
        transition-duration: .55s;
    }

    .reveal.reveal-right {
        transform: translateX(34px);
        filter: none;
        transition-duration: .55s;
    }

    .info-card::after,
    .category-card::after,
    .product-card::after {
        display: none;
    }

    .btn::before {
        display: none;
    }
}

@media (max-width: 560px) {
    .acora-scroll-bar {
        height: 2px;
    }
}

/* ---------------------------------------------------------
   Respect reduced motion fully
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .acora-bg-system,
    .acora-page-enter,
    .acora-cursor-glow,
    .acora-cursor-trail,
    .acora-neon-cursor {
        display: none !important;
    }

    .reveal {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    .btn::before,
    .site-header,
    .main-nav a::after,
    .info-card::after,
    .category-card::after,
    .product-card::after,
    .category-card img,
    .product-card img {
        transition: none !important;
        animation: none !important;
    }

    * {
        scroll-behavior: auto !important;
    }
}