/*
Theme Custom Styles for VoltRiser
*/

html{
scroll-behavior:smooth;
}

:root{
--vr-gold:#FFC107;
--vr-gold-soft:#FFD54F;
--vr-dark:#1A1A1A;
--vr-white:#FFFFFF;
}

body{
font-family:'Montserrat',sans-serif;
background:#0d0d0d;
overflow-x:hidden;
margin:0;
padding:0;
}

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

section{
padding-top:120px;
padding-bottom:120px;
}

.glass-card{
background:rgba(255,255,255,0.05);
backdrop-filter:blur(15px);
border:1px solid rgba(255,255,255,0.1);
transition:all .4s ease;
}

.glass-card:hover{
transform:translateY(-5px);
background:rgba(255,255,255,0.1);
}

.btn-primary{
background:linear-gradient(135deg,var(--vr-gold) 0%,#e5ac00 100%);
transition:all .3s ease;
box-shadow:0 4px 20px rgba(255,193,7,.3);
}

.btn-primary:hover{
transform:translateY(-3px);
box-shadow:0 6px 25px rgba(255,193,7,.5);
}

.btn-secondary{
border:2px solid rgba(255,255,255,.2);
transition:all .3s ease;
}

.btn-secondary:hover{
background:rgba(255,255,255,.1);
border-color:rgba(255,255,255,.5);
}

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

.nav-link{
transition:color .3s ease;
font-size:15px;
letter-spacing:.05em;
}

.nav-link:hover{
color:var(--vr-gold);
}

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

.hero-title{
font-family:'Plus Jakarta Sans',sans-serif;
}

.hero-section{
position:relative;
width:100%;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(rgba(0,0,0,.36),rgba(26,26,26,.31)),
url('../images/VoltRiserbg.png') center/cover no-repeat fixed;
overflow:hidden;
color:white;
z-index:1;
}

/* Hero background glow */

.hero-bg-anim{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background:
radial-gradient(circle at 10% 10%,rgba(255,193,7,.05),transparent 40%),
radial-gradient(circle at 90% 90%,rgba(255,193,7,.03),transparent 40%);

animation:pulseBg 12s infinite alternate;
z-index:-2;
}

@keyframes pulseBg{
0%,100%{
opacity:.7;
transform:scale(1);
}

50%{
opacity:1;
transform:scale(1.05);
}
}

/* light burst */

.hero-light-burst{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:1000px;
height:1000px;
background:radial-gradient(circle,rgba(255,193,7,.1) 0%,transparent 60%);
z-index:-1;
filter:blur(50px);
}

/* ======================
SUN CURSOR
====================== */

#suncatcher{
position:fixed;
width:40px;
height:40px;
border-radius:50%;
background:rgba(255,193,7,.4);
box-shadow:0 0 20px 10px rgba(255,193,7,.5);
pointer-events:none;
z-index:9999;
transform:translate(-50%,-50%);
transition:width .2s ease,height .2s ease;
}

.sun-trail{
position:fixed;
border-radius:50%;
background:rgba(255,193,7,.08);
pointer-events:none;
z-index:9998;
transform:translate(-50%,-50%);
animation:trailFade .6s linear forwards;
}

@keyframes trailFade{

0%{
opacity:1;
transform:translate(-50%,-50%) scale(1);
}

100%{
opacity:0;
transform:translate(-50%,-50%) scale(.2);
}

}

/* ======================
PAGE COLOR BELOW HERO
====================== */

.below-hero{
background:#fcfcfc;
color:#333;
}

/* ======================
FEATURE CARD
====================== */

#features-card{
--mouse-x:50%;
--mouse-y:50%;
}

.spotlight-glow{
background:radial-gradient(
400px circle at var(--mouse-x) var(--mouse-y),
rgba(255,193,7,.15),
transparent 60%
);
}

#features-card:hover .spotlight-glow{
opacity:1;
}

.feature-desc.open{
grid-template-rows:1fr;
}

.feature-item.active .chevron-icon{
transform:rotate(180deg);
color:var(--vr-gold);
}

/* ======================
LOGO MARQUEE
====================== */

.logo-item{

display:flex;
align-items:center;
justify-content:center;

flex-shrink:0;

background:white;
border:1px solid #eee;
border-radius:12px;

margin:0 16px;

box-shadow:0 4px 12px rgba(0,0,0,.05);

filter:grayscale(1);

transition:all .3s;

width:400px;
height:150px;
padding:10px;
}

.logo-item img{
max-width:100%;
max-height:100%;
object-fit:contain;
}

.logo-item:hover{
filter:grayscale(0);
}

.animate-marquee{
animation:marquee 30s linear infinite;
}

.animate-marquee-reverse{
animation:marquee-reverse 30s linear infinite;
}

@keyframes marquee{
0%{transform:translateX(0)}
100%{transform:translateX(-100%)}
}

@keyframes marquee-reverse{
0%{transform:translateX(-100%)}
100%{transform:translateX(0)}
}

.logos-marquee:hover .animate-marquee,
.logos-marquee:hover .animate-marquee-reverse{
animation-play-state:paused;
}

/* ======================
PROCESS LINE ANIMATION
====================== */

@keyframes grow{

0%{
transform:scaleX(0);
opacity:0;
transform-origin:left;
}

50%{
transform:scaleX(1);
opacity:1;
}

100%{
transform:scaleX(0);
opacity:0;
transform-origin:right;
}

}

/* ======================
   MOBILE RESPONSIVENESS 
   ====================== */

/* Hide Suncatcher on touch devices */
@media (max-width: 1024px) {
    #suncatcher, .sun-trail {
        display: none !important;
    }
}

@media (max-width: 768px) {
    /* Prevent text from hitting screen edges */
    section {
        padding-top: 80px;
        padding-bottom: 80px;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Hero Section Adjustments */
    .hero-section {
        height: auto;
        min-height: 100vh;
        padding-top: 120px;
        text-align: center;
    }

    .hero-title {
        font-size: 2.8rem !important;
        line-height: 1.1;
    }

    /* Stack the Hero Grid */
    .hero-section .grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Scale down the Logo Marquee for small screens */
    .logo-item {
        width: 250px;
        height: 100px;
        margin: 0 8px;
    }

    /* Process steps: remove the connecting line on mobile */
    .animate-[grow_3s_ease-in-out_infinite] {
        display: none;
    }
}

/* Fix for horizontal overflow issues */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}