/* =========================================================
   REXUS88 STARLINK
   PREMIUM ANIMATION SYSTEM
   THEME: GOLD / BROWN / DARK
   ========================================================= */


/* =========================================================
   COLOR SYSTEM
   ========================================================= */

:root {

    --rex-gold: #d6a84f;
    --rex-gold-light: #f2d27a;
    --rex-gold-soft: rgba(242, 210, 122, .16);

    --rex-brown: #6f4828;
    --rex-brown-light: #9a6a3b;

    --rex-dark: #0d0b09;
    --rex-dark-2: #130f0c;
    --rex-dark-3: #1b130d;

    --rex-border: rgba(214, 168, 79, .20);
    --rex-border-hover: rgba(242, 210, 122, .42);

    --rex-text: #f6ead2;
    --rex-text-soft: rgba(246, 234, 210, .68);

    --rex-shadow:
        0 18px 55px rgba(0, 0, 0, .38);

    --rex-shadow-hover:
        0 24px 70px rgba(0, 0, 0, .52);

}


/* =========================================================
   GLOBAL TRANSITION
   ========================================================= */

a,
button,
input,
select,
textarea,
.product-card,
.category-card,
.feature-card,
.contact-info-card,
.quick-help-card,
.faq-category-card,
.faq-item,
.status-box {

    transition:
        color .25s ease,
        background-color .25s ease,
        border-color .25s ease,
        box-shadow .3s ease,
        transform .3s ease,
        opacity .25s ease;

}


/* =========================================================
   REVEAL ANIMATION
   ========================================================= */

.reveal {

    opacity: 0;

    transform:
        translateY(24px);

    transition:
        opacity .7s cubic-bezier(.22, 1, .36, 1),
        transform .7s cubic-bezier(.22, 1, .36, 1);

}


.reveal.visible {

    opacity: 1;

    transform:
        translateY(0);

}


/* =========================================================
   REVEAL VARIATION
   ========================================================= */

.reveal-left {

    opacity: 0;

    transform:
        translateX(-24px);

    transition:
        opacity .7s ease,
        transform .7s ease;

}


.reveal-right {

    opacity: 0;

    transform:
        translateX(24px);

    transition:
        opacity .7s ease,
        transform .7s ease;

}


.reveal-left.visible,
.reveal-right.visible {

    opacity: 1;

    transform:
        translateX(0);

}


/* =========================================================
   STAGGER ANIMATION
   ========================================================= */

.product-grid .reveal:nth-child(2),
.category-grid .reveal:nth-child(2),
.feature-grid .reveal:nth-child(2),
.contact-info-grid .reveal:nth-child(2),
.quick-help-grid .reveal:nth-child(2),
.faq-category-grid .reveal:nth-child(2) {

    transition-delay: .08s;

}


.product-grid .reveal:nth-child(3),
.category-grid .reveal:nth-child(3),
.feature-grid .reveal:nth-child(3),
.contact-info-grid .reveal:nth-child(3),
.quick-help-grid .reveal:nth-child(3),
.faq-category-grid .reveal:nth-child(3) {

    transition-delay: .16s;

}


.product-grid .reveal:nth-child(4),
.category-grid .reveal:nth-child(4),
.feature-grid .reveal:nth-child(4),
.contact-info-grid .reveal:nth-child(4),
.quick-help-grid .reveal:nth-child(4) {

    transition-delay: .24s;

}


.product-grid .reveal:nth-child(5),
.category-grid .reveal:nth-child(5),
.feature-grid .reveal:nth-child(5) {

    transition-delay: .32s;

}


/* =========================================================
   HERO FLOATING CARD
   ========================================================= */

.floating-card-one {

    animation:
        floatingOne 4.5s ease-in-out infinite;

}


.floating-card-two {

    animation:
        floatingTwo 5s ease-in-out infinite;

}


@keyframes floatingOne {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(0deg);

    }

    50% {

        transform:
            translateY(-9px)
            rotate(.5deg);

    }

}


@keyframes floatingTwo {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(0deg);

    }

    50% {

        transform:
            translateY(9px)
            rotate(-.5deg);

    }

}


/* =========================================================
   FLOAT ELEMENT
   ========================================================= */

.float-animation {

    animation:
        floatElement 4.5s ease-in-out infinite;

}


@keyframes floatElement {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-8px);

    }

}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {

    transition:
        background-color .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

}


.site-header:hover {

    box-shadow:
        0 10px 40px rgba(0, 0, 0, .28);

}


/* =========================================================
   HEADER / NAVIGATION
   ========================================================= */

.main-nav a,
.mobile-nav a {

    transition:
        color .25s ease,
        opacity .25s ease,
        transform .25s ease;

}


.main-nav a:hover,
.mobile-nav a:hover {

    color:
        var(--rex-gold-light);

}


.main-nav a.active,
.mobile-nav a.active {

    color:
        var(--rex-gold-light);

}


/* =========================================================
   MOBILE MENU ICON
   ========================================================= */

.mobile-toggle span {

    transition:
        transform .3s cubic-bezier(.22, 1, .36, 1),
        opacity .2s ease,
        background-color .25s ease;

}


.mobile-toggle:hover span {

    background:
        var(--rex-gold-light);

}


.mobile-toggle.is-active span:nth-child(1) {

    transform:
        translateY(6px)
        rotate(45deg);

}


.mobile-toggle.is-active span:nth-child(2) {

    opacity:
        0;

    transform:
        scaleX(0);

}


.mobile-toggle.is-active span:nth-child(3) {

    transform:
        translateY(-6px)
        rotate(-45deg);

}


/* =========================================================
   IMAGE HOVER
   ========================================================= */

.product-card-image,
.hero-image,
.contact-hero-image,
.faq-hero-image {

    overflow:
        hidden;

}


.product-card-image img,
.hero-image img,
.contact-hero-image img,
.faq-hero-image img {

    transition:
        transform .6s cubic-bezier(.22, 1, .36, 1),
        filter .4s ease;

}


.product-card:hover
.product-card-image img {

    transform:
        scale(1.045);

}


.hero-image:hover img,
.contact-hero-image:hover img,
.faq-hero-image:hover img {

    transform:
        scale(1.02);

}


/* =========================================================
   CARD HOVER
   ========================================================= */

.product-card,
.category-card,
.feature-card,
.contact-info-card,
.quick-help-card,
.faq-category-card {

    border-color:
        var(--rex-border);

}


.product-card:hover,
.category-card:hover,
.feature-card:hover,
.contact-info-card:hover,
.quick-help-card:hover,
.faq-category-card:hover {

    transform:
        translateY(-5px);

    border-color:
        var(--rex-border-hover);

    box-shadow:
        var(--rex-shadow-hover);

}


/* =========================================================
   GOLD GLOW
   ========================================================= */

.gold-glow {

    box-shadow:
        0 0 0 1px rgba(214, 168, 79, .12),
        0 0 35px rgba(214, 168, 79, .10);

}


.gold-glow:hover {

    box-shadow:
        0 0 0 1px rgba(242, 210, 122, .25),
        0 0 45px rgba(214, 168, 79, .16);

}


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

.btn,
.btn-primary {

    position:
        relative;

    overflow:
        hidden;

    isolation:
        isolate;

}


.btn {

    transition:
        transform .25s ease,
        box-shadow .3s ease,
        border-color .25s ease,
        background-color .25s ease,
        color .25s ease;

}


.btn:hover {

    transform:
        translateY(-2px);

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

}


.btn:active {

    transform:
        translateY(0);

}


/* =========================================================
   BUTTON SHINE
   ========================================================= */

.btn::after {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        -120%;

    width:
        65%;

    height:
        100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .08),
            rgba(255, 255, 255, .25),
            rgba(255, 255, 255, .08),
            transparent
        );

    transform:
        skewX(-20deg);

    transition:
        left .7s cubic-bezier(.22, 1, .36, 1);

    pointer-events:
        none;

}


.btn:hover::after {

    left:
        135%;

}


/* =========================================================
   BUTTON ARROW
   ========================================================= */

.btn-primary span,
.product-link span,
.screen-button span {

    display:
        inline-block;

    transition:
        transform .25s ease;

}


.btn-primary:hover span,
.product-link:hover span,
.screen-button:hover span {

    transform:
        translateX(5px);

}


/* =========================================================
   GOLD BUTTON
   ========================================================= */

.btn-gold {

    background:
        linear-gradient(
            135deg,
            var(--rex-gold-light),
            var(--rex-gold)
        );

    color:
        #24160b;

    border:
        1px solid rgba(242, 210, 122, .45);

    box-shadow:
        0 8px 28px rgba(214, 168, 79, .12);

}


.btn-gold:hover {

    background:
        linear-gradient(
            135deg,
            #f6db91,
            #e0b55d
        );

    box-shadow:
        0 13px 38px rgba(214, 168, 79, .20);

}


/* =========================================================
   OUTLINE BUTTON
   ========================================================= */

.btn-outline {

    color:
        var(--rex-gold-light);

    background:
        rgba(214, 168, 79, .035);

    border:
        1px solid rgba(214, 168, 79, .35);

}


.btn-outline:hover {

    background:
        rgba(214, 168, 79, .09);

    border-color:
        var(--rex-gold-light);

    color:
        #fff1c9;

}


/* =========================================================
   INPUT
   ========================================================= */

input,
select,
textarea {

    transition:
        border-color .25s ease,
        box-shadow .3s ease,
        background-color .25s ease;

}


input:hover,
select:hover,
textarea:hover {

    border-color:
        rgba(214, 168, 79, .35);

}


input:focus,
select:focus,
textarea:focus {

    border-color:
        var(--rex-gold);

    background-color:
        rgba(214, 168, 79, .025);

    box-shadow:
        0 0 0 3px rgba(214, 168, 79, .10),
        0 8px 28px rgba(0, 0, 0, .18);

    outline:
        none;

}


/* =========================================================
   FAQ
   ========================================================= */

.faq-item {

    overflow:
        hidden;

}


.faq-item:hover {

    border-color:
        var(--rex-border-hover);

}


.faq-item p,
.faq-answer {

    animation:
        faqOpen .28s ease;

}


@keyframes faqOpen {

    from {

        opacity:
            0;

        transform:
            translateY(-6px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   FAQ PLUS
   ========================================================= */

.faq-item summary {

    transition:
        color .25s ease;

}


.faq-item summary:hover {

    color:
        var(--rex-gold-light);

}


.faq-item[open] summary {

    color:
        var(--rex-gold-light);

}


/* =========================================================
   STATUS BOX
   ========================================================= */

.status-box {

    animation:
        statusAppear .5s cubic-bezier(.22, 1, .36, 1);

}


@keyframes statusAppear {

    from {

        opacity:
            0;

        transform:
            translateY(10px)
            scale(.99);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* =========================================================
   STATUS ITEMS
   ========================================================= */

.status-item {

    transition:
        transform .25s ease,
        border-color .25s ease,
        background-color .25s ease,
        box-shadow .25s ease;

}


.status-item:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(214, 168, 79, .32);

    background:
        rgba(214, 168, 79, .075);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .18);

}


/* =========================================================
   LOADING PULSE
   ========================================================= */

.loading-pulse {

    animation:
        loadingPulse 1.6s ease-in-out infinite;

}


@keyframes loadingPulse {

    0%,
    100% {

        opacity:
            .55;

        box-shadow:
            0 0 0 rgba(214, 168, 79, 0);

    }

    50% {

        opacity:
            1;

        box-shadow:
            0 0 20px rgba(214, 168, 79, .14);

    }

}


/* =========================================================
   GOLD SHIMMER
   ========================================================= */

.gold-shimmer {

    background:
        linear-gradient(
            110deg,
            var(--rex-gold) 20%,
            var(--rex-gold-light) 40%,
            #fff0bb 50%,
            var(--rex-gold-light) 60%,
            var(--rex-gold) 80%
        );

    background-size:
        220% auto;

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    animation:
        goldShimmer 5s linear infinite;

}


@keyframes goldShimmer {

    to {

        background-position:
            220% center;

    }

}


/* =========================================================
   DECORATIVE GOLD LINE
   ========================================================= */

.gold-line {

    position:
        relative;

}


.gold-line::after {

    content:
        "";

    display:
        block;

    width:
        55px;

    height:
        2px;

    margin-top:
        12px;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            var(--rex-gold-light),
            var(--rex-gold),
            transparent
        );

}


/* =========================================================
   FOCUS / ACCESSIBILITY
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {

    outline:
        3px solid
        rgba(242, 210, 122, .35);

    outline-offset:
        3px;

    border-radius:
        5px;

}


/* =========================================================
   SCROLL BEHAVIOR
   ========================================================= */

html {

    scroll-behavior:
        smooth;

}


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

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

    html {

        scroll-behavior:
            auto;

    }


    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;

    }


    .reveal,
    .reveal-left,
    .reveal-right {

        opacity:
            1;

        transform:
            none;

    }

}