/* ============================================================
   MOTION LAYER — clean, clinical movement
   Suspended bubbles, soft light sweeps and restrained reveals.
   Loaded after every surface sheet; never changes layout.
   ============================================================ */

/* ---------- Header accent ---------- */
html body .nc-header::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    z-index: 3;
    background: linear-gradient(90deg, rgba(0, 113, 227, 0) 0%, rgba(0, 113, 227, 0.55) 35%, rgba(23, 195, 162, 0.6) 65%, rgba(23, 195, 162, 0) 100%);
    background-size: 220% 100%;
    animation: ac-gradient-line 7s linear infinite;
    pointer-events: none;
}

/* ---------- Section ambience ---------- */
.ac-has-bubbles {
    position: relative;
    isolation: isolate;
}

.ac-has-bubbles > :not(.ac-bubbles):not(.rh-hero__controls):not(style):not(script) {
    position: relative;
    z-index: 1;
}

.ac-bubbles {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.ac-bubbles::before {
    content: '';
    position: absolute;
    inset: -22%;
    background:
        radial-gradient(38% 42% at 16% 24%, rgba(56, 189, 248, 0.2) 0%, rgba(56, 189, 248, 0) 70%),
        radial-gradient(36% 40% at 84% 66%, rgba(45, 212, 191, 0.16) 0%, rgba(45, 212, 191, 0) 72%);
    filter: blur(34px);
    opacity: 0.75;
    animation: ac-aurora 24s ease-in-out infinite alternate;
    will-change: transform;
}

.ac-bubbles::after {
    content: '';
    position: absolute;
    inset: -80px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180' fill='none' stroke='%230091b8' stroke-width='1'%3E%3Cpath d='M43 20h22l11 19-11 19H43L32 39z' opacity='.55'/%3E%3Cpath d='M128 108h22l11 19-11 19h-22l-11-19z' opacity='.4'/%3E%3Cpath d='M105 35v18M96 44h18' opacity='.5'/%3E%3Cpath d='M46 118v14M39 125h14' opacity='.4'/%3E%3Ccircle cx='150' cy='48' r='3' opacity='.5'/%3E%3Ccircle cx='22' cy='86' r='2' opacity='.4'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    opacity: 0.2;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000000 20%, #000000 80%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000000 20%, #000000 80%, transparent 100%);
    animation: ac-pattern-drift 55s linear infinite;
    pointer-events: none;
}

@keyframes ac-pattern-drift {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(180px, -180px, 0); }
}

.ac-bubbles span {
    position: absolute;
    top: var(--ac-top, 50%);
    left: var(--ac-left, 50%);
    width: 22px;
    height: 22px;
    border: 1px solid rgba(0, 148, 210, 0.32);
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.88) 0%, rgba(126, 211, 255, 0.22) 52%, rgba(126, 211, 255, 0) 72%);
    box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.65), 0 0 10px rgba(23, 184, 216, 0.08);
    opacity: 0.28;
    animation: ac-bubble-rise var(--ac-dur, 20s) linear var(--ac-delay, 0s) infinite;
    will-change: transform, opacity;
}

.ac-bubbles span::after {
    content: '';
    position: absolute;
    top: 17%;
    left: 19%;
    width: 22%;
    height: 22%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    pointer-events: none;
}

@keyframes ac-aurora {
    0% { transform: translate3d(-3%, -2%, 0) scale(1); }
    100% { transform: translate3d(4%, 3%, 0) scale(1.12); }
}

@keyframes ac-bubble-rise {
    0% { transform: translate3d(0, 24px, 0) scale(0.84); opacity: 0; }
    12% { opacity: var(--ac-opacity, 0.26); }
    82% { opacity: var(--ac-opacity, 0.26); }
    100% { transform: translate3d(var(--ac-drift, 28px), -52vh, 0) scale(1.08); opacity: 0; }
}

/* ---------- Reveal on scroll ---------- */
[data-ac-reveal].ac-inview {
    animation: ac-reveal 0.72s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: var(--ac-delay, 0ms);
}

@keyframes ac-reveal {
    from { opacity: 0; translate: 0 18px; }
    to { opacity: 1; translate: 0 0; }
}

/* ---------- Hero ---------- */
html body #content .rh-hero .rh-hero__slide:not([hidden]) .rh-hero__visual img {
    animation: ac-kenburns 18s ease-in-out 0.35s infinite alternate !important;
    transform-origin: center;
}

@keyframes ac-kenburns {
    from { scale: 1; translate: 0 0; }
    to { scale: 1.045; translate: 0 -0.6%; }
}

html body #content .rh-hero .rh-hero__visual::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.2) 50%, transparent 62%);
    transform: translateX(-130%);
    animation: ac-hero-sheen 8s ease-in-out 2.4s infinite;
    pointer-events: none;
}

@keyframes ac-hero-sheen {
    0%, 62% { transform: translateX(-130%); }
    82%, 100% { transform: translateX(130%); }
}

html body #content .rh-hero .rh-hero__tag {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
}

html body #content .rh-hero .rh-hero__tag::before {
    content: '';
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #17b8d8;
    box-shadow: 0 0 0 0 rgba(23, 184, 216, 0.45);
    animation: ac-pulse-dot 2.6s ease-out infinite;
}

@keyframes ac-pulse-dot {
    0% { box-shadow: 0 0 0 0 rgba(23, 184, 216, 0.4); }
    70% { box-shadow: 0 0 0 8px rgba(23, 184, 216, 0); }
    100% { box-shadow: 0 0 0 0 rgba(23, 184, 216, 0); }
}

html body #content .rh-hero .rh-hero__cta {
    position: relative;
    overflow: hidden;
    animation: ac-cta-glow 4.5s ease-in-out infinite;
}

@keyframes ac-cta-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(23, 184, 216, 0.18); }
    50% { box-shadow: 0 0 0 6px rgba(23, 184, 216, 0), 0 12px 26px -16px rgba(23, 184, 216, 0.5); }
}

html body #content .rh-hero .rh-hero__cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.24) 50%, transparent 70%);
    transform: translateX(-130%);
    transition: transform 0.65s ease;
    pointer-events: none;
}

html body #content .rh-hero .rh-hero__cta:hover::after {
    transform: translateX(130%);
}

html body #content .rh-hero .rh-hero__dots button[aria-current='true'] {
    animation: ac-dot-pulse 2.4s ease-in-out infinite;
}

@keyframes ac-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 134, 179, 0.35); }
    50% { box-shadow: 0 0 0 4px rgba(0, 134, 179, 0); }
}

/* Corporate/product hero: brighter bubbles against the dark panel. */
html body .acto-page-hero {
    overflow: hidden;
}

html body .acto-page-hero .ac-bubbles span {
    border-color: rgba(170, 240, 255, 0.45) !important;
    background:
        radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.62) 0%, rgba(120, 220, 255, 0.18) 52%, rgba(120, 220, 255, 0) 72%) !important;
    box-shadow:
        inset 0 0 20px rgba(255, 255, 255, 0.42),
        0 0 14px rgba(120, 220, 255, 0.12) !important;
}

html body .acto-page-hero::before,
html body .acto-page-hero::after {
    content: '';
    position: absolute;
    z-index: 0;
    bottom: -50px;
    width: 110px;
    height: 110px;
    border: 1px solid rgba(170, 240, 255, 0.32);
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.3) 0%, rgba(120, 220, 255, 0.08) 55%, rgba(120, 220, 255, 0) 74%);
    box-shadow: inset 0 0 22px rgba(255, 255, 255, 0.2);
    opacity: 0;
    animation: ac-corporate-bubble 13s linear infinite;
    pointer-events: none;
}

html body .acto-page-hero::before {
    left: 8%;
    animation-delay: -4s;
}

html body .acto-page-hero::after {
    right: 10%;
    width: 64px;
    height: 64px;
    animation-duration: 10s;
    animation-delay: -7s;
}

@keyframes ac-corporate-bubble {
    0% { transform: translateY(60px) scale(0.8); opacity: 0; }
    12% { opacity: 0.55; }
    78% { opacity: 0.34; }
    100% { transform: translateY(-240px) scale(1.12); opacity: 0; }
}

/* ---------- Section kickers + category cards ---------- */
html body .rh-categories .rh-categories__intro small,
html body .rh-products .rh-products__head small,
html body .rh-areas .rh-areas__copy small {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
}

html body .rh-categories .rh-categories__intro small::before,
html body .rh-products .rh-products__head small::before,
html body .rh-areas .rh-areas__copy small::before,
html body .acto-brands .acto-brands__title::before {
    content: '';
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #17b8d8;
    box-shadow: 0 0 0 0 rgba(23, 184, 216, 0.4);
    animation: ac-pulse-dot 2.8s ease-out infinite;
}

/* A clean gradient rule under the section titles. */
html body .rh-categories h2::after,
html body .rh-products h2::after,
html body .rh-areas h2::after {
    content: '';
    display: block;
    width: 62px;
    height: 3px;
    margin-top: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, #0071e3 0%, #17c3a2 50%, #0071e3 100%);
    background-size: 220% 100%;
    animation: ac-gradient-line 5.5s linear infinite;
}

html body .rh-categories .rh-categories__icon {
    animation: ac-icon-bob 6.5s ease-in-out infinite;
}

html body .rh-categories .rh-categories__card:nth-child(2n) .rh-categories__icon {
    animation-delay: -2.1s;
}

html body .rh-categories .rh-categories__card:nth-child(3n) .rh-categories__icon {
    animation-delay: -3.7s;
}

@keyframes ac-icon-bob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-3px) rotate(-2deg); }
}

html body .rh-categories .rh-categories__card:hover .rh-categories__icon {
    animation-play-state: paused;
    transform: translateY(-4px) rotate(-3deg);
    transition: transform 0.28s ease;
}

html body .rh-categories .rh-categories__card:hover {
    box-shadow:
        0 30px 60px -36px rgba(0, 113, 227, 0.3),
        inset 0 1px 0 #ffffff !important;
}

html body .rh-categories .rh-categories__action svg,
html body .rh-products .rh-products__info b svg {
    transition: transform 0.25s ease;
}

html body .rh-categories .rh-categories__card:hover .rh-categories__action svg {
    transform: translateX(3px);
}

/* ---------- Product showcase ---------- */
html body .rh-products .rh-products__media {
    position: relative;
    overflow: hidden;
}

html body .rh-products .rh-products__media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(112deg, transparent 34%, rgba(255, 255, 255, 0.34) 50%, transparent 66%);
    transform: translateX(-135%);
    transition: transform 0.7s ease;
    pointer-events: none;
}

html body .rh-products .rh-products__card:hover .rh-products__media::after {
    transform: translateX(135%);
}

html body .rh-products .rh-products__card:hover {
    box-shadow:
        0 32px 60px -36px rgba(0, 113, 227, 0.32),
        inset 0 1px 0 #ffffff !important;
}

html body .rh-products .rh-products__info b svg {
    transition: transform 0.25s ease;
}

html body .rh-products .rh-products__card:hover .rh-products__info b svg {
    transform: translateX(3px);
}

/* ---------- Areas accordion ---------- */
html body .rh-areas .rh-areas__illustration svg {
    animation: ac-float 7.5s ease-in-out infinite;
}

html body .rh-areas .rh-areas__entry:nth-child(2n) .rh-areas__illustration svg {
    animation-delay: -2.8s;
}

@keyframes ac-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-5px) rotate(1.2deg); }
}

html body .rh-areas .rh-areas__entry[open] {
    box-shadow:
        0 30px 60px -36px rgba(0, 113, 227, 0.28),
        inset 0 1px 0 #ffffff !important;
}

html body .rh-areas .rh-areas__entry[open] .rh-areas__number {
    animation: ac-number-pulse 3.2s ease-in-out infinite;
}

@keyframes ac-number-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 113, 227, 0.22); }
    50% { box-shadow: 0 0 0 6px rgba(0, 113, 227, 0); }
}

/* ---------- Stats ---------- */
html body .acto-stats__head::before {
    background: linear-gradient(90deg, #0071e3 0%, #17c3a2 50%, #0071e3 100%) !important;
    background-size: 220% 100% !important;
    animation: ac-gradient-line 4.5s linear infinite;
}

@keyframes ac-gradient-line {
    0% { background-position: 0% 50%; }
    100% { background-position: 220% 50%; }
}

html body .acto-stats__item::after {
    content: '';
    position: absolute;
    inset: auto 24px 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 113, 227, 0.4), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

html body .acto-stats__item:hover::after {
    opacity: 1;
}

/* ---------- Brand rail ---------- */
html body .acto-brands .acto-brands__row {
    animation: ac-brand-drift 9s ease-in-out infinite;
}

@keyframes ac-brand-drift {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-7px); }
}

html body .acto-brands .acto-brands__item img {
    animation: ac-logo-bob 7s ease-in-out infinite;
}

html body .acto-brands .acto-brands__item:nth-child(2n) img { animation-delay: -2.2s; }
html body .acto-brands .acto-brands__item:nth-child(3n) img { animation-delay: -4.1s; }

@keyframes ac-logo-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

html body .acto-brands .acto-brands__item:hover img {
    animation-play-state: paused;
    transform: scale(1.04);
    transition: transform 0.25s ease;
}

html body .acto-brands .acto-brands__item:hover {
    box-shadow:
        0 28px 54px -36px rgba(0, 113, 227, 0.28),
        inset 0 1px 0 #ffffff !important;
}

/* ---------- Catalog cards ---------- */
html body .actorein-catalog .ac-product__visual::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(112deg, transparent 36%, rgba(255, 255, 255, 0.32) 50%, transparent 64%);
    transform: translateX(-135%);
    transition: transform 0.7s ease;
    pointer-events: none;
}

html body .actorein-catalog .ac-product:hover .ac-product__visual::after {
    transform: translateX(135%);
}

html body .actorein-catalog .ac-product:hover .ac-product__action svg {
    animation: ac-arrow-nudge 1.2s ease-in-out infinite;
}

@keyframes ac-arrow-nudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(3px); }
}

/* ---------- Dark surface ---------- */
html.ac-access-dark .ac-bubbles span {
    border-color: rgba(120, 220, 255, 0.18);
    background:
        radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.24) 0%, rgba(80, 190, 255, 0.1) 55%, rgba(80, 190, 255, 0) 74%);
    box-shadow: inset 0 0 16px rgba(140, 220, 255, 0.18);
}

html.ac-access-dark .ac-bubbles::before {
    opacity: 0.48;
}

/* ---------- Forced contrast ---------- */
html.ac-access-contrast .ac-bubbles,
html.ac-access-contrast .rh-hero__visual::before,
html.ac-access-contrast .acto-page-hero::before,
html.ac-access-contrast .acto-page-hero::after,
html.ac-access-contrast .nc-header::after {
    display: none !important;
}

html.ac-access-contrast .rh-categories h2::after,
html.ac-access-contrast .rh-products h2::after,
html.ac-access-contrast .rh-areas h2::after {
    background: #000000 !important;
    animation: none !important;
}

html.ac-access-contrast.ac-access-dark .rh-categories h2::after,
html.ac-access-contrast.ac-access-dark .rh-products h2::after,
html.ac-access-contrast.ac-access-dark .rh-areas h2::after {
    background: #ffffff !important;
}

html.ac-access-contrast [data-ac-reveal].ac-inview {
    animation: none !important;
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    .ac-bubbles,
    html body #content .rh-hero .rh-hero__visual::before,
    html body .acto-page-hero::before,
    html body .acto-page-hero::after {
        display: none !important;
    }

    .ac-bubbles span,
    html body .nc-header::after,
    html body #content .rh-hero .rh-hero__cta,
    html body .acto-brands .acto-brands__row,
    html body .rh-categories h2::after,
    html body .rh-products h2::after,
    html body .rh-areas h2::after,
    html body #content .rh-hero .rh-hero__slide:not([hidden]) .rh-hero__visual img,
    html body #content .rh-hero .rh-hero__tag::before,
    html body .rh-categories .rh-categories__icon,
    html body .rh-areas .rh-areas__illustration svg,
    html body .acto-brands .acto-brands__item img,
    html body .acto-stats__head::before,
    html body #content .rh-hero .rh-hero__dots button[aria-current='true'] {
        animation: none !important;
    }

    [data-ac-reveal].ac-inview {
        animation: none !important;
    }
}

html.ac-access-motion .ac-bubbles,
html.ac-access-motion body #content .rh-hero .rh-hero__visual::before,
html.ac-access-motion body .acto-page-hero::before,
html.ac-access-motion body .acto-page-hero::after {
    display: none !important;
}

html.ac-access-motion .ac-bubbles span,
html.ac-access-motion body .nc-header::after,
html.ac-access-motion body #content .rh-hero .rh-hero__cta,
html.ac-access-motion body .acto-brands .acto-brands__row,
html.ac-access-motion body .rh-categories h2::after,
html.ac-access-motion body .rh-products h2::after,
html.ac-access-motion body .rh-areas h2::after,
html.ac-access-motion body #content .rh-hero .rh-hero__slide:not([hidden]) .rh-hero__visual img,
html.ac-access-motion body #content .rh-hero .rh-hero__tag::before,
html.ac-access-motion body .rh-categories .rh-categories__icon,
html.ac-access-motion body .rh-areas .rh-areas__illustration svg,
html.ac-access-motion body .acto-brands .acto-brands__item img,
html.ac-access-motion body .acto-stats__head::before,
html.ac-access-motion body #content .rh-hero .rh-hero__dots button[aria-current='true'] {
    animation: none !important;
}

html.ac-access-motion [data-ac-reveal].ac-inview {
    animation: none !important;
}