/* style.css
  This file contains the custom styles for the CashNu website.
*/

/* Set the default font for the entire site */
body {
    font-family: 'DM Sans', sans-serif;
}

/* Background for the "How It Works" section */
.how-it-works-bg {
    position: relative;
    background-image: url('https://images.unsplash.com/photo-1556740738-b6a63e2775d2?q=80&w=2070&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Creates a parallax-like effect */
}

/* Overlay to ensure text is readable over the background image */
.how-it-works-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(249, 250, 251, 0.9); /* A semi-transparent light gray */
    z-index: 1;
}

/* Ensure content is above the overlay */
.how-it-works-bg > * {
    position: relative;
    z-index: 2;
}



:root {
    /* --- New Green Theme --- */

    /* The new main color for branding, buttons, and accents. */
    --main-color: #15803d; /* Tailwind's green-700 */

    /* A darker shade for hover states or borders. */
    --main-color-darken: #14532d; /* Tailwind's green-900 */
    
    /* A very light green for main site backgrounds. */
    --site-bg-color: #f0fdf4; /* Tailwind's green-50 */

    /* A neutral light gray for secondary backgrounds. */
    --site-bg-secondary: #f3f4f6; /* Tailwind's gray-100 */

    /* A dark, near-black color for primary text and dark backgrounds. */
    --dark-color: #1f2937; /* Tailwind's gray-800 */

    /* RGB values for the dark color, used for effects like box-shadow. */
    --pulse-rgb: 31, 41, 55;

    /* Radial gradient from the main green to the light background green. */
    --radial-bg-bottom: radial-gradient(at center bottom, rgba(21, 128, 61, 1.0), rgba(240, 253, 244, 1.0));
    --radial-bg-top: radial-gradient(at center top, rgba(21, 128, 61, 1.0), rgba(240, 253, 244, 1.0));

    /* --- Text & Animation Colors --- */
    --text-color-normal: #374151; /* Tailwind's gray-700 */
    --transform-normal: scale(1);

    /* Text color for highlighted or edge states. */
    --text-color-edge: #15803d;
    --transform-edge: scale(1.02);

    /* Text color for most prominent, 'peak' states. */
    --text-color-peak: #16a34a; /* A slightly brighter green for attention */
    --transform-peak: scale(1.10);
}


:root {
    /* --- New Green & Orange Theme --- */

    /* Main color for branding, gradients, and accents. */
    --main-color: #15803d; /* Tailwind's green-700 */

    /* A darker shade for hover states or borders. */
    --main-color-darken: #14532d; /* Tailwind's green-900 */
    
    /* NEW: The warm, off-white from your logo for primary backgrounds. */
    --brand-bg-white: #F5F3ED;

    /* A neutral light gray for secondary backgrounds. */
    --site-bg-secondary: #f3f4f6; /* Tailwind's gray-100 */

    /* A dark, near-black color for primary text and dark backgrounds. */
    --dark-color: #1f2937; /* Tailwind's gray-800 */

    /* RGB values for the dark color, used for effects like box-shadow. */
    --pulse-rgb: 31, 41, 55;

    /* --- Text & Animation Colors --- */
    --text-color-normal: #374151; /* Tailwind's gray-700 */
    --transform-normal: scale(1);

    /* Text color for highlighted or edge states. */
    --text-color-edge: #15803d;
    --transform-edge: scale(1.02);

    /* Text color for most prominent, 'peak' states. */
    --text-color-peak: #16a34a; /* A slightly brighter green for attention */
    --transform-peak: scale(1.10);
}
.text-dark-color {
    color: var(--dark-color);
}

.bg-dark-color {
    background-color: var(--dark-color);
}

.bg-blur {
    filter: blur(5px);
}

.text-main-color {
    color: var(--main-color);
}

.bg-main-color {
    background-color: var(--main-color);
}

.bg-radial {
    background: var(--radial-bg-bottom);
}

.bg-radial-top  {
    background: var(--radial-bg-top);
}

.bg-site-secondary {
    background-color: var(--site-bg-secondary);
}

.bg-site-color {
    background-color: var(--site-bg-color);
}

html {
    scroll-behavior: smooth;
}

html body {
    background-color: var(--site-bg-secondary);
}

.secondaryBtn:hover {
    transition: all 0.2s ease;
    background-color: var(--main-color-darken);
    /*color: var(--dark-color);*/
}

.pulseBtn {
    animation: pulse 1.5s infinite;
    box-shadow: 0 0 0 0 rgba(var(--pulse-rgb), 0.5);
}
.pulseBtn--white{
    --pulse-rgb: 255, 255, 255;
}

.pulseBtn--purple {
    --pulse-rgb: 108, 68, 163;
}

/*link hover animation*/
a.main-link {
    background-image: linear-gradient(
            to right,
            #000,
            #000 50%,
            #000 50%
    );
    background-size: 200% 100%;
    background-position: -100%;
    display: inline-block;
    padding: 5px 0;
    position: relative;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s ease-in-out;
}

a.main-link:before {
    content: '';
    background: var(--main-color);
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    transition: all 0.3s ease-in-out;
}

a.main-link:hover {
    background-position: 0;
}

a.main-link:hover::before {
    width:100%;
}
/*parallax*/
.slide-up {
    transform: translateY(125px);
    opacity: 0;
    width: 100%;
    height: 100%;
    transition: all 0.7s ease-out;
}

.slide-up.show {
    transform: translateY(0);
    opacity: 1;
}


/*=======================  V2  ==========================*/
/* custom to make the line sit behind the cards */
.timeline-line {
    position: absolute;
    left: 3rem;  /* matches ml-8 on cards */
    top: 0;
    bottom: 0;
    width: 13px;
    background-color: var(--dark-color);
}

.divider {
    border: solid 1px var(--main-color);
}

/*hero flip btn*/
.flip-btn {
    border: none;
    width: fit-content;
    position: relative;
    transform-style: preserve-3d;
    perspective: 800px;
    animation: 10s flipCycle 5s infinite ease-in-out;
    amimation-delay: 5s;
}

.face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
}

.front {
    background: #fff;
    transform: rotateY(0deg) translateY(-60px);
    min-width: fit-content;
    width: auto;
    padding: 20px 10px;
    display: inline-block;
}
.back {
    background: #080D4E;
    transform: rotateY(180deg);
    animation: flipPulse 1.5s infinite;
    box-shadow: 0 0 0 0 rgba(var(--pulse-rgb), 0.5);
}

/*animations*/
@keyframes pulse {
    0% {
        transform:scale(.9);
    }
    70% {
        transform:scale(1);
        box-shadow: 0 0 0 35px rgba(var(--pulse-rgb), 0);
    }
    100% {
        transform:scale(.9);
        box-shadow: 0 0 0 0 rgba(var(--pulse-rgb), 0);
    }
}

@keyframes flipCycle {
    /* FLIP → from 0° to 180° in 1s (1/12 = 8.33%) */
    0%   { transform: rotateY(0deg); }
    5%{transform: rotateY( 180deg);}

    /* HOLD at 180° for 5s (from 1s to 6s → 8.33% to 50%) */
    50%  { transform: rotateY( 180deg); }

    /* FLIP back → from 180° to 360° in 1s (6s→7s → 50%→58.33%) */
    55%{ transform: rotateY( 360deg); }

    /* HOLD at 360° (which is same as 0°) for 5s (7s→12s → 58.33%→100%) */
    100%  { transform: rotateY( 360deg); }
}

@keyframes flipPulse {
    0% {
        transform:rotateY(180deg) scale(.9);
    }
    70% {
        transform: rotateY(180deg) scale(1);
        box-shadow: 0 0 0 35px rgba(var(--pulse-rgb), 0);
    }
    100% {
        transform: rotateY(180deg) scale(.9);
        box-shadow: 0 0 0 0 rgba(var(--pulse-rgb), 0);
    }
}



/* Basic styling for the spans (same as before) */
.highlightable {
    color: var(--text-color-normal, inherit);
    transform: var(--transform-normal, scale(1));
    display: inline-block;
}

/* Keyframes for Item 1 (#amount1) */
@keyframes highlightItem1Cycle {
    0% {
        color: var(--text-color-normal, inherit);
        transform: var(--transform-normal, scale(1));
    }
    1.63% {
        color: var(--text-color-edge, #333333);
        transform: var(--transform-edge, scale(1.02));
    }
    8.16% {
        color: var(--text-color-peak, #000000);
        transform: var(--transform-peak, scale(1.10));
    }
    14.69% {
        color: var(--text-color-edge, #333333);
        transform: var(--transform-edge, scale(1.02));
    }
    16.33%, 100% {
        /*color: var(--text-color-edge, #333333);*/
        color: var(--text-color-normal, inherit);
        transform: var(--transform-normal, scale(1));
    }
}

/* Keyframes for Item 2 (#amount2) */
@keyframes highlightItem2Cycle {
    0%, 16.32% {
        color: var(--text-color-normal, inherit);
        transform: var(--transform-normal, scale(1));
    }
    16.33% {
        color: var(--text-color-normal, inherit);
        transform: var(--transform-normal, scale(1));
    }
    17.96% {
        color: var(--text-color-edge, #333333);
        transform: var(--transform-edge, scale(1.02));
    }
    24.49% {
        color: var(--text-color-peak, #000000);
        transform: var(--transform-peak, scale(1.10));
    }
    31.02% {
        color: var(--text-color-edge, #333333);
        transform: var(--transform-edge, scale(1.02));
    }
    32.65%, 100% {
        color: var(--text-color-normal, inherit);
        transform: var(--transform-normal, scale(1));
    }
}

/* Keyframes for Item 3 (#speed) */
@keyframes highlightItem3Cycle {
    0%, 32.64% {
        color: var(--text-color-normal, inherit);
        transform: var(--transform-normal, scale(1));
    }
    32.65% {
        color: var(--text-color-normal, inherit);
        transform: var(--transform-normal, scale(1));
    }
    34.29% {
        color: var(--text-color-edge, #333333);
        transform: var(--transform-edge, scale(1.02));
    }
    40.82% {
        color: var(--text-color-peak, #000000);
        transform: var(--transform-peak, scale(1.10));
    }
    47.35% {
        color: var(--text-color-edge, #333333);
        transform: var(--transform-edge, scale(1.02));
    }
    48.98%, 100% {
        color: var(--text-color-normal, inherit);
        transform: var(--transform-normal, scale(1));
    }
}

/* Apply the animations */
#amount1 {
    animation: highlightItem1Cycle 10s ease-in-out 0s infinite;
}

#amount2 {
    animation: highlightItem2Cycle 10s ease-in-out 0s infinite;
}

#speed {
    animation: highlightItem3Cycle 10s ease-in-out 0s infinite;
}

@media only screen and (min-width: 1024px) {
    .qualify-bg-img-land {
        background: url(/img/yay.png) no-repeat center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        width: 100%;
        height: 100%;
        position: absolute;
    }
}


@media only screen and (max-width: 1024px) {
    .qualify-bg-img{
        background: url(/img/yay-mobile.png) no-repeat center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        position: sticky;
        top: 0;
        left: 0;
        z-index: -1;
        height: 100vh;
        width: 100%;
    }
}

/*mobile nav*/

/* Navbar container */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    /*color: #fff;*/
    position: relative;
    z-index: 100;
}

/*.brand-title {*/
/*    font-size: 1.2rem;*/
/*}*/

/* Hide the native checkbox */
.navbar .toggle-button {
    display: none;
}

/* Hamburger icon (3 bars) */
.navbar .toggle-icon {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
    z-index: 200;
}
.navbar .toggle-icon span {
    width: 25px;
    height: 3px;
    background: #333;
    display: block;
}

.navbar .toggle-icon {
    display: flex;
}

.sidebar {
    position: fixed;
    top: 0;
    z-index: 100;
    right: 0;
    background: var(--site-bg-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 400px;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}

.sidebar li {
    text-align: center;
}

/* When checkbox is checked, slide menu in */
.navbar .toggle-button:checked ~ .sidebar {
    transform: translateX(0);
}

/*change hamburger to close btn*/
.toggle-icon span {
    opacity: 1;
    transition: all 0.3s ease-in-out;
    transform: rotate(0);
}

.toggle-icon span:nth-of-type(2)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    transform: rotate(0);
    transition: transform 0.3s ease-in-out;
}

.navbar .toggle-button:checked ~ .toggle-icon span:first-of-type {
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.navbar .toggle-button:checked ~ .toggle-icon span:last-of-type {
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.navbar .toggle-button:checked ~ .toggle-icon span:nth-of-type(2) {
    transition: transform 0.3s ease-in-out;
    transform: rotate(45deg);
    opacity: 1;
}

.navbar .toggle-button:checked ~ .toggle-icon span:nth-of-type(2)::before {
    transform: rotate(-90deg);
}
/* --- Language Switcher Styles --- */
.language-switcher {
    margin-left: 20px;
    display: flex;
    align-items: center;
  }
  
  .language-switcher .lang-link {
    color: white;
    padding: 5px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
  }
  
  .language-switcher .lang-link:hover {
    color: #ddd;
  }
  
  .language-switcher .lang-link.active {
    color: #ffc107; /* A gold color to show the active language */
    pointer-events: none; /* Prevents clicking on the active language */
  }
  
  .language-switcher .lang-separator {
    color: white;
    margin: 0 5px;
  }
  /* New Subtle Pulse Animation for Hero Button */
@keyframes subtle-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.4);
  }
  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 15px rgba(22, 163, 74, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0);
  }
}

.hero-pulse-button {
  animation: subtle-pulse 2s infinite;
}
/* ============================================= */
/* CTA Banner Pulsing Button Animation           */
/* ============================================= */

@keyframes cta-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 20px rgba(22, 163, 74, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0);
  }
}

.cta-pulse-button {
  animation: cta-pulse 2.5s infinite;
}

/* ============================================= */
/* CTA Banner Background Image                   */
/* ============================================= */

.cta-banner-bg {
  position: relative;
  background-image: url('/assets/img/cta-banner-bg.png');
  background-size: cover;
  background-position: center;
  z-index: 1;
}

/* Dark overlay for text readability */
.cta-banner-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(27, 27, 27, 0.85); /* Dark overlay */
  z-index: -1;
}