@import url('developer.css');
@import url('color.css');
@import url('fonts.css');
@import url('style.css');

@keyframes hero-gradient-animation {
    0% {
        --c-1: hsla(308, 54%, 34%, 0.37);
        --x-1: 20%;
        --y-1: 35%;
        --s-start-1: 0%;
        --s-end-1: 40%;
        --c-2: hsla(339, 78%, 54%, 0.4);
        --x-2: 0%;
        --y-2: 0%;
        --s-start-2: 0%;
        --s-end-2: 38%;
        --c-3: hsla(308, 54%, 34%, 1);
        --x-3: 100%;
        --y-3: 60%;
        --s-start-3: 0%;
        --s-end-3: 28%;
        --c-4: hsla(308, 54%, 34%, 0.39);
        --x-4: 20%;
        --y-4: 35%;
        --s-start-4: 0%;
        --s-end-4: 40%;
        --c-5: hsla(308, 54%, 34%, 0.37);
        --x-5: 20%;
        --y-5: 35%;
        --s-start-5: 0%;
        --s-end-5: 40%;
    }

    100% {
        --c-1: hsla(308, 54%, 34%, 0.35);
        --x-1: 55%;
        --y-1: 59%;
        --s-start-1: 9;
        --s-end-1: 78;
        --c-2: hsla(339, 78%, 54%, 0.35);
        --x-2: 12%;
        --y-2: 41%;
        --s-start-2: 9;
        --s-end-2: 78;
        --c-3: hsla(308, 54%, 34%, 1);
        --x-3: 28%;
        --y-3: 25%;
        --s-start-3: 9;
        --s-end-3: 78;
        --c-4: hsla(308, 54%, 34%, 0.35);
        --x-4: 89%;
        --y-4: 67%;
        --s-start-4: 9;
        --s-end-4: 78;
        --c-5: hsla(308, 54%, 34%, 0.35);
        --x-5: 55%;
        --y-5: 59%;
        --s-start-5: 9;
        --s-end-5: 78;
    }
}

@property --c-0 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(0, 0%, 9%, 0.91)
}

@property --x-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 100%
}

@property --y-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 100%
}

@property --s-start-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%
}

@property --s-end-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 150%
}

@property --c-1 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(308, 54%, 34%, 0.37)
}

@property --x-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 20%
}

@property --y-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 35%
}

@property --s-start-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%
}

@property --s-end-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 40%
}

@property --c-2 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(339, 78%, 54%, 0.4)
}

@property --x-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%
}

@property --y-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%
}

@property --s-start-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%
}

@property --s-end-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 38%
}

@property --c-3 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(308, 54%, 34%, 1)
}

@property --x-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 100%
}

@property --y-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 60%
}

@property --s-start-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%
}

@property --s-end-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 28%
}

@property --c-4 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(308, 54%, 34%, 0.39)
}

@property --x-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 20%
}

@property --y-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 35%
}

@property --s-start-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%
}

@property --s-end-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 40%
}

@property --c-5 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(308, 54%, 34%, 0.37)
}

@property --x-5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 20%
}

@property --y-5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 35%
}

@property --s-start-5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%
}

@property --s-end-5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 40%
}

.hero-section-inner {
    --c-0: hsla(0, 0%, 9%, 0.91);
    --x-0: 100%;
    --y-0: 100%;
    --c-1: hsla(308, 54%, 34%, 0.37);
    --x-1: 20%;
    --y-1: 35%;
    --c-2: hsla(339, 78%, 54%, 0.4);
    --x-2: 0%;
    --y-2: 0%;
    --c-3: hsla(308, 54%, 34%, 1);
    --x-3: 100%;
    --y-3: 60%;
    --c-4: hsla(308, 54%, 34%, 0.39);
    --x-4: 20%;
    --y-4: 35%;
    --c-5: hsla(308, 54%, 34%, 0.37);
    --x-5: 20%;
    --y-5: 35%;
    ;
    background-color: hsla(0, 0%, 9%, 1);
    background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)), radial-gradient(circle at var(--x-5) var(--y-5), var(--c-5) var(--s-start-5), transparent var(--s-end-5));
    animation: hero-gradient-animation 10s linear infinite alternate;
    background-blend-mode: normal, normal, normal, normal, normal, normal;
}

.fixed-header header {
    top: 15px;
}

nav,
header {
    transition: 0.3s !important;
}

.fixed-header nav {
    max-width: 100%;
    margin: 0px 30px !important;
    background: url(../images/coin-bg.png) no-repeat;
    background-size: cover;

}

.gradient-background {
    background: linear-gradient(65deg, #6B1B38, #4D2245, #C92D71, #A32B76);
    background-size: 240% 240%;
    animation: gradient-animation 16s ease infinite;
}

@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Styling for the mobile frame mockup */
.phone-mockup {
    width: 280px;
    /* Base width for the screen */
    height: 570px;
    /* Base height */
    background-color: #000;
    border-radius: 40px;
    padding: 12px;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.1);
    position: relative;
    transform: scale(0.85);
    /* Slightly scale down default slides */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    cursor: grab;
}

/* Inner screen area */
.phone-mockup-screen {
    width: 100%;
    height: 100%;
    background-color: white;
    /* Actual content/image will go here */
    border-radius: 28px;
    overflow: hidden;
    /* Placeholder styling to simulate app content */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.25rem;
    color: #d81b60;
    /* Pink color from the image */
    text-align: center;
}

/* Notch simulation */
.phone-mockup::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 30px;
    background: #000;
    border-radius: 0 0 15px 15px;
    z-index: 10;
}

/* Active slide style: bring it forward and make it full size */
.swiper-slide-active .phone-mockup {
    transform: scale(1);
    z-index: 20;
    /* Ensure active slide is on top */
}

.swiper-slide {
    width: 300px;
    /* Swiper needs a defined width for 'auto' slides */
    opacity: 0.5;
    transition: opacity 0.3s ease-in-out;
}

.swiper-slide-active {
    opacity: 1;
}

/* Media queries for responsiveness */
@media (max-width: 768px) {
    .phone-mockup {
        width: 250px;
        height: 500px;
    }

    .swiper-slide {
        width: 270px;
    }

}

.swiper-pagination-bullet {
    background: var(--gray-200);
    opacity: 1 !important;
    width: 10px;
    height: 10px;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: var(--primary-600);
}