/* =========================================================
   SERVORAPRISE EXPERIENCE
   ---------------------------------------------------------
   Dedicated visual system for the Experience Hub.

   RESPONSIBILITY:
       Experience page layout
       Experience page visual design
       Experience page animations
       Experience page responsive layout
       Experience page cookie system

   MENU BUTTON OWNERSHIP:
       universal-menu-toggle.css

   IMPORTANT:
       This file intentionally contains NO styling for:

           .menu-toggle
           .menu-toggle__icon
           .menu-toggle__icon > span
           .menu-toggle__label

       The universal menu-toggle component is maintained
       exclusively by:

           universal-menu-toggle.css

   ========================================================= */


/* =========================================================
   EXACT NAVIGATION SYSTEM
   ---------------------------------------------------------
   Solid header + white brand name

   NOTE:
       This section controls the navigation structure and
       navigation panel.

       It does NOT style the menu-toggle button itself.
   ========================================================= */

:root {

    --sp-black: #07080c;
    --sp-black-deep: #050507;

    --sp-white: #ffffff;

    --sp-text-muted:
        rgba(255, 255, 255, 0.62);

    --sp-text-soft:
        rgba(255, 255, 255, 0.78);

    --sp-line:
        rgba(255, 255, 255, 0.12);

    --sp-green: #00c977;
    --sp-yellow: #ffcc33;
    --sp-blue: #0077ff;
    --sp-orange: #ff8800;
    --sp-purple: #9900ff;
    --sp-pink: #ff3399;

    --sp-duration-fast: 180ms;
    --sp-duration-normal: 280ms;

    --sp-ease-standard:
        cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   HEADER — SOLID
   ========================================================= */

.site-header {

    position: fixed;

    inset: 0 0 auto;

    z-index: 500;

    padding-block: 1.25rem;

    background: #07080c;

    border-bottom:
        1px solid var(--sp-line);
}


.site-header__inner {

    width:
        min(1180px, calc(100% - 40px));

    margin-inline: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;
}


/* =========================================================
   BRAND
   ========================================================= */

.brand {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    flex-shrink: 0;

    text-decoration: none;
}


.brand__logo {

    width: 90px;
    height: 30px;

    object-fit: contain;

    display: block;
}


.brand__text {

    display: flex;

    flex-direction: column;

    line-height: 1;
}


.brand__text strong {

    color: #ffffff;

    font-size: 0.9rem;

    letter-spacing: 0.08em;
}


.brand__text small {

    margin-top: 0.3rem;

    color: var(--sp-text-muted);

    font-size: 0.55rem;

    letter-spacing: 0.18em;
}


/* =========================================================
   DESKTOP NAVIGATION
   ========================================================= */

.site-nav {

    display: flex;

    align-items: center;

    gap: 1.75rem;
}


.site-nav > a,
.nav-parent {

    position: relative;

    color: var(--sp-text-muted);

    font-size: 0.75rem;

    font-weight: 500;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    white-space: nowrap;

    transition:
        color
        var(--sp-duration-fast)
        ease;
}


.site-nav > a:hover,
.nav-parent:hover {

    color: var(--sp-white);
}


/* =========================================================
   MOBILE FULL-SCREEN MENU
   ---------------------------------------------------------
   Navigation-panel behavior only.

   The menu-toggle button itself is NOT styled here.

   Button ownership:
       universal-menu-toggle.css
   ========================================================= */

@media (max-width: 900px) {

    .site-nav {

        display: none;

        position: fixed;

        inset: 0;

        z-index: 490;

        background: #07080c;

        flex-direction: column;

        padding:
            6.5rem
            1.5rem
            2rem;

        gap: 0;

        overflow-y: auto;
    }


    body.menu-open
    .site-nav {

        display: flex;
    }


    /* -----------------------------------------------------
       Keep header bar visible and solid while menu is open
       ----------------------------------------------------- */

    body.menu-open
    .site-header {

        background: #07080c;

        border-bottom:
            1px solid var(--sp-line);
    }


    /* -----------------------------------------------------
       Mobile navigation links
       ----------------------------------------------------- */

    .site-nav a,
    .nav-parent {

        display: block;

        width: 100%;

        padding:
            1.15rem 0;

        font-size: 0.95rem;

        font-weight: 500;

        letter-spacing: 0.08em;

        text-transform: uppercase;

        color: #ffffff;

        text-decoration: none !important;

        border-bottom:
            1px solid var(--sp-line);
    }


    /* -----------------------------------------------------
       Green "Back to ServoraPrise"
       ----------------------------------------------------- */

    .nav-parent {

        color:
            var(--sp-green) !important;

        font-weight: 600;

        margin-bottom: 0.4rem;

        border-bottom:
            1px solid var(--sp-line);
    }


    .nav-divider {

        display: none;
    }

}


/* =========================================================
   GLOBAL FOUNDATION
   ---------------------------------------------------------
   Extracted from styles.css.
   Required so Experience page no longer depends on
   styles.css for these foundation rules.
   ========================================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;
}


body {

    font-family: Arial, sans-serif;

    line-height: 1.6;

    background: #fff;

    color: #222;
}


/* =========================================================
   EXPERIENCE ROOT
   ========================================================= */

.experience-hero,
.experience-section,
.experience-cta,
.experience-footer {

    position: relative;

    overflow: hidden;
}


.experience-container {

    width:
        min(1180px, calc(100% - 40px));

    margin: 0 auto;
}


/* =========================================================
   HERO
   ========================================================= */

.experience-hero {

    min-height: 680px;

    display: flex;

    align-items: center;

    padding: 100px 8%;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(153, 0, 255, 0.18),
            transparent 32%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(0, 119, 255, 0.16),
            transparent 30%
        ),
        #08090f;

    color: #ffffff;
}


.experience-hero-content {

    position: relative;

    z-index: 2;

    width:
        min(680px, 100%);
}


.experience-eyebrow {

    display: inline-block;

    margin-bottom: 18px;

    font-size: 0.78rem;

    font-weight: 800;

    letter-spacing: 0.18em;

    opacity: 0.72;
}


.experience-hero h1 {

    margin: 0;

    font-size:
        clamp(3rem, 8vw, 6.5rem);

    line-height: 0.95;

    letter-spacing: -0.06em;
}


.experience-hero h1 span {

    display: block;

    background:
        linear-gradient(
            90deg,
            #00c977,
            #0077ff,
            #9900ff,
            #ff3399
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;
}


.experience-lead {

    max-width: 650px;

    margin: 30px 0;

    font-size: 1.12rem;

    line-height: 1.8;

    color:
        rgba(255, 255, 255, 0.78);
}


/* =========================================================
   BUTTONS
   ========================================================= */

.experience-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;
}


.experience-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 48px;

    padding: 13px 22px;

    border-radius: 999px;

    text-decoration: none;

    font-weight: 700;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease;
}


.experience-btn:hover {

    transform: translateY(-2px);
}


.experience-btn-primary {

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #0077ff,
            #9900ff
        );

    box-shadow:
        0 12px 30px
        rgba(0, 119, 255, 0.2);
}


.experience-btn-secondary {

    color: #ffffff;

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    background:
        rgba(255, 255, 255, 0.06);
}


/* =========================================================
   ORBIT VISUAL
   ========================================================= */

.experience-orbit {

    position: absolute;

    right: 7%;

    top: 50%;

    width:
        min(430px, 42vw);

    aspect-ratio: 1;

    transform:
        translateY(-50%);
}


.experience-orbit-ring {

    position: absolute;

    inset: 0;

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius: 50%;
}


.ring-one {

    transform:
        rotate(20deg)
        scaleX(0.55);
}


.ring-two {

    transform:
        rotate(-35deg)
        scaleX(0.72);
}


.ring-three {

    transform:
        rotate(70deg)
        scaleX(0.9);
}


.experience-core {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 125px;

    aspect-ratio: 1;

    display: grid;

    place-items: center;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.16),
            rgba(255, 255, 255, 0.02)
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.2);

    box-shadow:
        0 0 70px
        rgba(153, 0, 255, 0.28);
}


.experience-core span {

    font-size: 4rem;

    line-height: 1;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.experience-section {

    padding: 100px 0;
}


.experience-introduction {

    background: #ffffff;
}


.experience-section-heading {

    margin-bottom: 45px;
}


.experience-section-heading.centered {

    max-width: 720px;

    margin-left: auto;

    margin-right: auto;

    text-align: center;
}


.experience-section-heading > span {

    font-size: 0.75rem;

    font-weight: 800;

    letter-spacing: 0.18em;

    opacity: 0.6;
}


.experience-section-heading h2 {

    margin: 10px 0;

    font-size:
        clamp(2rem, 5vw, 3.4rem);

    letter-spacing: -0.04em;
}


.experience-section-heading p {

    line-height: 1.7;

    opacity: 0.7;
}


/* =========================================================
   INTRO GRID
   ========================================================= */

.experience-introduction-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(300px, 0.8fr);

    gap: 70px;
}


.experience-introduction-grid
> div:first-child p {

    font-size: 1.08rem;

    line-height: 1.9;
}


.experience-principles {

    display: grid;

    gap: 18px;
}


.experience-principle {

    display: flex;

    gap: 18px;

    padding: 20px;

    border-radius: 16px;

    background: #f6f7f9;
}


.experience-principle i {

    width: 42px;

    height: 42px;

    display: grid;

    place-items: center;

    flex: 0 0 auto;

    border-radius: 12px;

    background: #11131a;

    color: #ffffff;
}


.experience-principle h3 {

    margin: 0 0 5px;
}


.experience-principle p {

    margin: 0;

    line-height: 1.6;

    opacity: 0.7;
}


/* =========================================================
   COLLECTION
   ========================================================= */

.experience-collection {

    background:
        linear-gradient(
            180deg,
            #0a0b10,
            #10121a
        );

    color: #ffffff;
}


.experience-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 24px;
}


.experience-card {

    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 390px;

    padding: 32px;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.1);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.025)
        );

    transition:
        transform 220ms ease,
        border-color 220ms ease;
}


.experience-card:hover {

    transform: translateY(-5px);

    border-color:
        rgba(255, 255, 255, 0.25);
}


.experience-card::after {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    right: -70px;

    bottom: -70px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(153, 0, 255, 0.22),
            transparent 70%
        );

    pointer-events: none;
}


.experience-card-icon {

    width: 62px;

    height: 62px;

    display: grid;

    place-items: center;

    margin-bottom: 25px;

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.08);

    font-size: 1.5rem;
}


.experience-card-label {

    font-size: 0.7rem;

    font-weight: 800;

    letter-spacing: 0.16em;

    opacity: 0.55;
}


.experience-card h3 {

    margin: 10px 0;

    font-size: 1.65rem;
}


.experience-card p {

    line-height: 1.7;

    color:
        rgba(255, 255, 255, 0.68);
}


.experience-card-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: auto;

    margin-bottom: 25px;

    font-size: 0.78rem;

    opacity: 0.62;
}


.experience-card-meta span {

    display: inline-flex;

    align-items: center;

    gap: 6px;
}


.experience-launch {

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    padding: 13px 16px;

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    border-radius: 12px;

    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.06);

    text-decoration: none;

    font-weight: 700;

    cursor: pointer;

    transition:
        background 180ms ease,
        transform 180ms ease;
}


.experience-launch:hover {

    background:
        rgba(255, 255, 255, 0.12);

    transform: translateY(-1px);
}


.experience-launch-disabled {

    opacity: 0.45;

    cursor: not-allowed;
}


.experience-launch-disabled:hover {

    transform: none;
}


/* =========================================================
   INFORMATION NOTE
   ========================================================= */

.experience-note {

    background: #f5f6f8;
}


.experience-note-box {

    display: flex;

    align-items: flex-start;

    gap: 20px;

    padding: 30px;

    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 10px 40px
        rgba(0, 0, 0, 0.05);
}


.experience-note-box > i {

    font-size: 1.5rem;

    margin-top: 5px;
}


.experience-note-box h2 {

    margin-top: 0;
}


.experience-note-box p {

    margin-bottom: 0;

    line-height: 1.8;

    opacity: 0.7;
}


/* =========================================================
   CTA
   ========================================================= */

.experience-cta {

    padding: 80px 0;

    color: #ffffff;

    background:
        linear-gradient(
            120deg,
            #0077ff,
            #9900ff,
            #ff3399
        );
}


.experience-cta
.experience-container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;
}


.experience-cta h2 {

    margin: 8px 0;

    font-size:
        clamp(2rem, 5vw, 3.5rem);
}


.experience-cta p {

    max-width: 650px;

    line-height: 1.7;

    opacity: 0.85;
}


/* =========================================================
   FOOTER
   ========================================================= */

.experience-footer {

    padding: 50px 0 20px;

    color: #ffffff;

    background: #07080c;
}


.experience-footer-inner {

    width:
        min(1180px, calc(100% - 40px));

    margin: 0 auto;

    display: flex;

    justify-content: space-between;

    gap: 40px;
}


.experience-footer p {

    opacity: 0.6;

    line-height: 1.6;
}


.experience-footer-links {

    display: flex;

    flex-wrap: nowrap;

    gap: 14px;

    align-items: center;

    white-space: nowrap;
}


.experience-footer-links a {

    color: #ffffff;

    text-decoration: none;

    opacity: 0.7;

    white-space: nowrap;

    flex-shrink: 0;
}


.experience-footer-links a:hover {

    opacity: 1;
}


.experience-footer-bottom {

    width:
        min(1180px, calc(100% - 40px));

    margin: 40px auto 0;

    padding-top: 20px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.1);

    font-size: 0.8rem;

    opacity: 0.5;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .experience-hero {

        min-height: 600px;

        padding: 90px 6%;
    }


    .experience-orbit {

        opacity: 0.25;

        right: -15%;

        width: 420px;
    }


    .experience-introduction-grid {

        grid-template-columns: 1fr;

        gap: 40px;
    }


    .experience-cta
    .experience-container {

        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 680px) {

    .experience-container {

        width:
            min(100% - 28px, 1180px);
    }


    .experience-hero {

        min-height: 650px;

        padding: 80px 7%;
    }


    .experience-hero h1 {

        font-size:
            clamp(3rem, 16vw, 5rem);
    }


    .experience-lead {

        font-size: 1rem;
    }


    .experience-grid {

        grid-template-columns: 1fr;
    }


    .experience-card {

        min-height: 350px;

        padding: 25px;
    }


    .experience-section {

        padding: 75px 0;
    }


    .experience-note-box {

        flex-direction: column;
    }


    .experience-footer-inner {

        flex-direction: column;
    }


    .experience-footer-links {

        gap: 10px;

        font-size: 0.85rem;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .experience-card,
    .experience-btn,
    .experience-launch {

        transition: none;
    }

}


/* =========================================================
   COOKIE CONSENT SYSTEM
   Purpose:
   Protected subsystem. Multiple overlapping rules for
   .cookie-banner and .show are intentionally retained
   so the combined animation + opacity + pointer-events
   behaviour is preserved.
   ========================================================= */

.cookie-banner {

    position: fixed;

    bottom: -100px;

    left: 0;

    width: 100%;

    background: #222;

    color: #fff;

    padding: 15px 20px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    box-shadow:
        0 -2px 10px
        rgba(0, 0, 0, 0.3);

    z-index: 9999;

    transition:
        bottom 0.5s ease;

    font-size: 0.9rem;

    flex-wrap: wrap;

    gap: 10px;
}


.cookie-banner.show {

    bottom: 0;
}


.cookie-banner p {

    margin: 0;

    flex: 1 1 300px;
}


.cookie-banner .cookie-buttons {

    display: flex;

    gap: 10px;
}


.cookie-banner .btn-accept,
.cookie-banner .btn-decline {

    padding: 8px 16px;

    border: none;

    border-radius: 5px;

    cursor: pointer;

    font-weight: bold;

    transition:
        background 0.3s;
}


.cookie-banner .btn-accept {

    background: #00C977;

    color: #fff;
}


.cookie-banner .btn-accept:hover {

    background: #00a461;
}


.cookie-banner .btn-decline {

    background: transparent;

    color: #f00;

    border:
        1px solid #ccc;
}


.cookie-banner .btn-decline:hover {

    background:
        rgba(255, 255, 255, 0.1);

    color: #fff;
}


@media (max-width: 600px) {

    .cookie-banner {

        flex-direction: column;

        text-align: center;
    }


    .cookie-banner .cookie-buttons {

        width: 100%;

        justify-content: center;
    }

}


/* =========================================================
   COOKIE BANNER — LATER ANIMATION LAYER
   ========================================================= */

.cookie-banner.show {

    bottom: 0;

    animation:
        slideUp 0.4s ease;
}


@keyframes slideUp {

    from {

        bottom: -100px;

        opacity: 0;
    }

    to {

        bottom: 0;

        opacity: 1;
    }

}


.cookie-content {

    max-width: 1200px;

    margin: 0 auto;

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    align-items: center;

    gap: 16px;
}


.cookie-policy-link {

    color: #4da6ff;

    font-size: 0.85rem;

    text-decoration: underline;
}


.cookie-policy-link:hover {

    color: #80bfff;
}


.cookie-modal {

    position: fixed;

    inset: 0;

    background:
        rgba(0, 0, 0, 0.6);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 10000;
}


.modal-content {

    background: white;

    color: #222;

    max-width: 540px;

    width: 90%;

    padding: 28px;

    border-radius: 12px;

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, 0.3);
}


.cookie-category {

    margin: 20px 0;

    padding: 12px;

    border:
        1px solid #ddd;

    border-radius: 8px;
}


.cookie-category label {

    display: flex;

    align-items: center;

    gap: 10px;

    font-weight: 600;
}


.cookie-category small {

    display: block;

    margin-top: 6px;

    color: #555;
}


.modal-buttons {

    margin-top: 24px;

    display: flex;

    gap: 12px;

    justify-content: flex-end;
}


.btn-preferences,
.btn-secondary {

    background: #444;

    color: white;

    border: none;

    padding: 10px 20px;

    border-radius: 6px;

    cursor: pointer;
}


.btn-preferences:hover,
.btn-secondary:hover {

    background: #666;
}


.btn-reject {

    background: transparent;

    border:
        2px solid #e63946;

    color: #e63946;

    padding: 10px 20px;

    border-radius: 6px;

    font-weight: bold;
}


.btn-reject:hover {

    background: #e63946;

    color: white;
}


@media (max-width: 600px) {

    .cookie-buttons-main {

        flex-direction: column;

        width: 100%;
    }


    .cookie-buttons-main button {

        width: 100%;

        margin: 6px 0;
    }

}


/* =========================================================
   COOKIE — SMOOTH TRANSITION IMPROVEMENTS
   ========================================================= */

.cookie-banner {

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.25s ease-in-out,
        bottom 0.5s ease;
}


.cookie-banner.show {

    opacity: 1;

    pointer-events: auto;
}


.cookie-modal {

    opacity: 0;

    transition:
        opacity 0.25s ease-in-out;
}


.cookie-modal[style*="display: flex"] {

    opacity: 1;
}


/* =========================================================
   EXPERIENCE MOTION SYSTEM
   ---------------------------------------------------------
   Premium, restrained animation layer for the Experience
   Hub. No external animation library required.
   ========================================================= */


/* =========================================================
   SCROLL REVEAL BASE STATE
   ========================================================= */

.experience-reveal,
.experience-reveal-item {

    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity 700ms ease,
        transform 700ms
        cubic-bezier(0.22, 1, 0.36, 1);
}


.experience-reveal.is-visible,
.experience-reveal-item.is-visible {

    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   DIRECTIONAL REVEAL
   ========================================================= */

.experience-reveal-left {

    transform:
        translateX(-45px);
}


.experience-reveal-left.is-visible {

    transform:
        translateX(0);
}


/* =========================================================
   STAGGERED CONTENT
   ========================================================= */

.experience-reveal-item:nth-child(1) {

    transition-delay: 80ms;
}


.experience-reveal-item:nth-child(2) {

    transition-delay: 160ms;
}


.experience-reveal-item:nth-child(3) {

    transition-delay: 240ms;
}


.experience-reveal-item:nth-child(4) {

    transition-delay: 320ms;
}


.experience-reveal-item:nth-child(5) {

    transition-delay: 400ms;
}


.experience-reveal-item:nth-child(6) {

    transition-delay: 480ms;
}


.experience-reveal-item:nth-child(7) {

    transition-delay: 560ms;
}


/* =========================================================
   HERO GRADIENT MOTION
   ========================================================= */

.experience-hero h1 span {

    background-size: 300% 100%;

    animation:
        experienceGradientFlow
        8s ease-in-out infinite;
}


@keyframes experienceGradientFlow {

    0% {

        background-position: 0% 50%;
    }

    50% {

        background-position: 100% 50%;
    }

    100% {

        background-position: 0% 50%;
    }

}


/* =========================================================
   HERO ORBIT
   ========================================================= */

.experience-orbit-animated {

    animation:
        experienceOrbitFloat
        8s ease-in-out infinite;
}


@keyframes experienceOrbitFloat {

    0%,
    100% {

        transform:
            translateY(-50%)
            rotate(0deg);
    }

    50% {

        transform:
            translateY(calc(-50% - 12px))
            rotate(3deg);
    }

}


/* =========================================================
   ORBIT RINGS
   ========================================================= */

.experience-orbit-animated
.ring-one {

    animation:
        experienceRingOne
        18s linear infinite;
}


.experience-orbit-animated
.ring-two {

    animation:
        experienceRingTwo
        24s linear infinite reverse;
}


.experience-orbit-animated
.ring-three {

    animation:
        experienceRingThree
        30s linear infinite;
}


@keyframes experienceRingOne {

    from {

        transform:
            rotate(20deg)
            scaleX(0.55);
    }

    to {

        transform:
            rotate(380deg)
            scaleX(0.55);
    }

}


@keyframes experienceRingTwo {

    from {

        transform:
            rotate(-35deg)
            scaleX(0.72);
    }

    to {

        transform:
            rotate(325deg)
            scaleX(0.72);
    }

}


@keyframes experienceRingThree {

    from {

        transform:
            rotate(70deg)
            scaleX(0.9);
    }

    to {

        transform:
            rotate(430deg)
            scaleX(0.9);
    }

}


/* =========================================================
   INFINITY CORE
   ========================================================= */

.experience-core {

    animation:
        experienceCorePulse
        4s ease-in-out infinite;
}


@keyframes experienceCorePulse {

    0%,
    100% {

        transform:
            translate(-50%, -50%)
            scale(1);

        box-shadow:
            0 0 70px
            rgba(153, 0, 255, 0.28);
    }

    50% {

        transform:
            translate(-50%, -50%)
            scale(1.05);

        box-shadow:
            0 0 95px
            rgba(153, 0, 255, 0.42);
    }

}


.experience-core span {

    animation:
        experienceInfinityFloat
        3s ease-in-out infinite;
}


@keyframes experienceInfinityFloat {

    0%,
    100% {

        transform:
            translateY(0);
    }

    50% {

        transform:
            translateY(-5px);
    }

}


/* =========================================================
   EXPERIENCE CARDS
   ========================================================= */

.experience-card {

    transform-style: preserve-3d;

    will-change:
        transform;
}


.experience-card:hover {

    transform:
        translateY(-8px)
        scale(1.01);

    border-color:
        rgba(255, 255, 255, 0.28);

    box-shadow:
        0 20px 55px
        rgba(0, 0, 0, 0.25);
}


/* =========================================================
   CARD ICON MOTION
   ========================================================= */

.experience-card-icon {

    transition:
        transform 300ms ease,
        background 300ms ease,
        box-shadow 300ms ease;
}


.experience-card:hover
.experience-card-icon {

    transform:
        translateY(-4px)
        rotate(-3deg);

    background:
        rgba(255, 255, 255, 0.13);

    box-shadow:
        0 8px 25px
        rgba(0, 0, 0, 0.2);
}


/* =========================================================
   CARD LIGHT SWEEP
   ========================================================= */

.experience-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 80%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.08),
            transparent
        );

    transform:
        skewX(-18deg);

    pointer-events: none;

    transition:
        left 700ms ease;
}


.experience-card:hover::before {

    left: 140%;
}


/* =========================================================
   CARD AMBIENT GLOW
   ========================================================= */

.experience-card::after {

    transition:
        transform 500ms ease,
        opacity 500ms ease;
}


.experience-card:hover::after {

    transform:
        scale(1.4);

    opacity: 0.85;
}


/* =========================================================
   LAUNCH BUTTON
   ========================================================= */

.experience-launch {

    position: relative;

    overflow: hidden;
}


.experience-launch::before {

    content: "";

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.08),
            transparent
        );

    transition:
        left 500ms ease;
}


.experience-launch:hover::before {

    left: 100%;
}


.experience-launch i {

    transition:
        transform 250ms ease;
}


.experience-launch:hover i {

    transform:
        translateX(5px);
}


/* =========================================================
   PRINCIPLE CARDS
   ========================================================= */

.experience-principle {

    transition:
        transform 250ms ease,
        box-shadow 250ms ease,
        background 250ms ease;
}


.experience-principle:hover {

    transform:
        translateX(6px);

    background:
        #f1f3f6;

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, 0.06);
}


.experience-principle i {

    transition:
        transform 250ms ease;
}


.experience-principle:hover i {

    transform:
        scale(1.08)
        rotate(-4deg);
}


/* =========================================================
   CTA AMBIENT BACKGROUND
   ========================================================= */

.experience-cta-animated::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    top: -180px;

    right: -100px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.10);

    filter:
        blur(10px);

    animation:
        experienceCTAOrb
        9s ease-in-out infinite;

    pointer-events: none;
}


.experience-cta-animated::after {

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    bottom: -160px;

    left: 15%;

    border-radius: 50%;

    background:
        rgba(0, 0, 0, 0.10);

    filter:
        blur(10px);

    animation:
        experienceCTAOrb
        12s ease-in-out infinite reverse;

    pointer-events: none;
}


@keyframes experienceCTAOrb {

    0%,
    100% {

        transform:
            translate(0, 0)
            scale(1);
    }

    50% {

        transform:
            translate(-40px, 25px)
            scale(1.12);
    }

}


/* =========================================================
   KEEP CTA CONTENT ABOVE AMBIENT EFFECTS
   ========================================================= */

.experience-cta
.experience-container {

    position: relative;

    z-index: 2;
}


/* =========================================================
   CTA BUTTON INTERACTION
   ========================================================= */

.experience-cta
.experience-btn-secondary {

    background:
        rgba(0, 0, 0, 0.16);

    backdrop-filter:
        blur(8px);

    transition:
        transform 220ms ease,
        background 220ms ease,
        box-shadow 220ms ease;
}


.experience-cta
.experience-btn-secondary:hover {

    transform:
        translateY(-4px);

    background:
        rgba(0, 0, 0, 0.25);

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, 0.18);
}


/* =========================================================
   HERO BUTTON PULSE
   ========================================================= */

.experience-btn-primary {

    position: relative;

    isolation: isolate;
}


.experience-btn-primary::after {

    content: "";

    position: absolute;

    inset: -3px;

    border-radius: inherit;

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    opacity: 0;

    z-index: -1;

    animation:
        experienceButtonPulse
        3.5s ease-out infinite;
}


@keyframes experienceButtonPulse {

    0% {

        transform:
            scale(1);

        opacity: 0.4;
    }

    70% {

        transform:
            scale(1.08);

        opacity: 0;
    }

    100% {

        transform:
            scale(1.08);

        opacity: 0;
    }

}


/* =========================================================
   REDUCED MOTION
   ---------------------------------------------------------
   Accessibility protection.
   ========================================================= */

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

    .experience-reveal,
    .experience-reveal-item {

        opacity: 1;

        transform: none;

        transition: none;
    }


    .experience-hero h1 span,
    .experience-orbit-animated,
    .experience-orbit-animated .ring-one,
    .experience-orbit-animated .ring-two,
    .experience-orbit-animated .ring-three,
    .experience-core,
    .experience-core span,
    .experience-cta-animated::before,
    .experience-cta-animated::after,
    .experience-btn-primary::after {

        animation: none;
    }


    .experience-card:hover,
    .experience-principle:hover,
    .experience-cta
    .experience-btn-secondary:hover {

        transform: none;
    }

}


/* =========================================================
   CTA SECTION SEPARATION
   ========================================================= */

.experience-cta + .experience-cta {

    margin-top: 40px;
}


@media (max-width: 680px) {

    .experience-cta + .experience-cta {

        margin-top: 30px;
    }

}


/* =========================================================
   END OF EXPERIENCE.CSS
   ---------------------------------------------------------
   MENU BUTTON COMPONENT:
       See universal-menu-toggle.css

   This file intentionally does not contain menu-toggle
   component styling.
   ========================================================= */