/* Additional improvements and animations */

/* Loading animation */
.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
}

.loading.fade-out {
    opacity: 0;
    pointer-events: none;
}

.loader {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(0, 166, 126, 0.1);
    border-top: 3px solid #66FFE2;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Improved project cards */
.project-card {
    background: linear-gradient(135deg, #1A3F3F 0%, #003C3C 100%);
    border: 1px solid rgba(0, 166, 126, 0.1);
    transition: all 0.4s ease;
}

.project-card:hover {
    border-color: rgba(102, 255, 226, 0.4);
    box-shadow: 0 20px 40px rgba(0, 166, 126, 0.3);
}

/* Improved gallery modal */
.gallery-modal {
    backdrop-filter: blur(10px);
}

/* Enhanced floating elements */
.floating-cube {
    background: linear-gradient(45deg, #00A67E, #66FFE2, #00A67E, #66FFE2);
    background-size: 400% 400%;
    animation: float 4s ease-in-out infinite, gradientShift 8s ease-in-out infinite;
}

.floating-sphere {
    background: linear-gradient(45deg, #66FFE2, #00A67E, #66FFE2, #00A67E);
    background-size: 400% 400%;
    animation: float 4s ease-in-out infinite, gradientShift 8s ease-in-out infinite;
    animation-delay: -1.3s, -2s;
}

@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Improved button hover effects */
.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn-primary:hover::before {
    left: 100%;
}

/* Enhanced service cards */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent, rgba(0, 166, 126, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 20px;
}

.service-card:hover::before {
    opacity: 1;
}

/* Improved footer */
.footer {
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #66FFE2, transparent);
}

/* Scroll progress indicator */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #00A67E, #66FFE2);
    z-index: 1001;
    transition: width 0.1s ease;
}

/* Enhanced animations for mobile */
@media (max-width: 768px) {
    .floating-elements {
        height: 150px;
    }
    
    .floating-cube,
    .floating-sphere,
    .floating-pyramid {
        animation-duration: 6s;
    }
}

/* ========= Glass Hero (liquid effect removed) ========= */
:root{
    --bg-a:#0E1D22; --bg-b:#10262D; --mint:#4EF0C3; --sky:#6DDCFF;
    --text:#E6F5F1; --muted:#A4C0BA;
}

/* Hide helper SVGs but keep accessible to AT if needed */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);overflow:hidden}

/* Hero container base override to match new visual */
.hero{
    position:relative; min-height:72vh; display:grid; place-items:center;
    padding:8vmin 24px; color:var(--text);
    background:linear-gradient(135deg,var(--bg-a),var(--bg-b));
    overflow:hidden;
}

/* Projects section matches hero background and layout */
.projects{
    position:relative; display:grid; place-items:center;
    padding:10vmin 24px; color:var(--text);
    background:linear-gradient(135deg,var(--bg-a),var(--bg-b));
}
.projects > .glass{ width:min(1200px,92vw); }
.projects .section-title{ margin-bottom:3rem; }

/* Decorative orbs removed */

/* Glass panel */
.glass{
    position:relative; width:min(1100px,92vw); border-radius:28px;
    padding:6vmin 7vmin; isolation:isolate;
    background:linear-gradient(180deg,rgba(16,38,45,.38),rgba(16,38,45,.22));
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Gradient border edge */
.glass::before{
    content:""; position:absolute; inset:0; border-radius:28px; pointer-events:none;
    padding:1px; background:linear-gradient(135deg, rgba(78,240,195,.7), rgba(109,220,255,.6), rgba(78,240,195,.0));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation:edgeGlow 6s ease-in-out infinite;
}

/* Liquid gloss highlights */
.glass::after{
    content:""; position:absolute; inset:0; border-radius:28px; pointer-events:none;
    background:
        radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.20), rgba(255,255,255,0) 55%),
        conic-gradient(from 200deg at 70% 40%, rgba(255,255,255,.12), rgba(255,255,255,0) 40% 80%, rgba(255,255,255,.12));
    mix-blend-mode:soft-light; opacity:.8;
    animation:gloss 10s ease-in-out infinite;
    filter: blur(0.2px);
}

@keyframes edgeGlow { 50%{opacity:.85} }
@keyframes gloss     { 50%{transform:translate3d(0,1%,0)} }

.hero-content{max-width:48ch; text-align:center; margin-inline:auto;}
.hero h1{font:700 clamp(40px,6vw,72px)/1.05 "Space Grotesk",system-ui; letter-spacing:.02em; margin:0 0 .5rem;}
.hero p{font:400 clamp(16px,2vw,20px)/1.5 "Inter",system-ui; color:var(--muted); margin:0 0 1.5rem;}
.cta{display:inline-block; padding:.9rem 1.2rem; border-radius:14px; text-decoration:none; font:600 14px/1 Inter;
    color:#0B1416; background:var(--mint); box-shadow:0 10px 24px rgba(78,240,195,.25);} 
.cta:hover{transform:translateY(-1px);}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
    .glass::before, .glass::after { animation: none !important; }
    .glass{ filter:none; }
}