/* ===== VIBESHIFT HYPER-TECH ANIMATION SYSTEM v2 ===== */
/* Canvas — ALWAYS visible, no fade */
#techCanvas { position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none; }

/* Loading Screen */
.loading-screen{position:fixed;inset:0;z-index:9999;background:#080c12;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:all 1.2s cubic-bezier(.77,0,.18,1);}
.loading-screen.loaded{clip-path:inset(50% 0);opacity:0;pointer-events:none;}
.loading-terminal{font-family:'Courier New',monospace;color:#008080;font-size:13px;text-align:left;width:clamp(300px,50vw,500px);}
.terminal-line{opacity:0;transform:translateX(-10px);animation:termIn 0.4s forwards;white-space:nowrap;overflow:hidden;margin:6px 0;}
.terminal-line:nth-child(1){animation-delay:0.2s}
.terminal-line:nth-child(2){animation-delay:0.6s}
.terminal-line:nth-child(3){animation-delay:1.0s}
.terminal-line:nth-child(4){animation-delay:1.4s}
.terminal-line:nth-child(5){animation-delay:1.7s;color:#76d6d5;font-weight:bold;}
@keyframes termIn{to{opacity:1;transform:translateX(0)}}
.loading-bar{width:clamp(300px,50vw,500px);height:2px;background:rgba(0,128,128,0.15);margin-top:24px;border-radius:2px;overflow:hidden;}
.loading-bar-fill{height:100%;width:0;background:linear-gradient(90deg,#008080,#76d6d5);animation:barFill 2.2s 0.3s ease-out forwards;}
@keyframes barFill{to{width:100%}}

/* Scanlines */
.scanlines{position:fixed;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,128,128,0.015) 2px,rgba(0,128,128,0.015) 4px);}

/* HUD Corners */
.hud-corners{position:fixed;inset:0;z-index:2;pointer-events:none;}
.hud-corner{position:absolute;width:60px;height:60px;border-color:rgba(0,128,128,0.2);border-style:solid;border-width:0;}
.hud-corner.tl{top:16px;left:16px;border-top-width:1px;border-left-width:1px;}
.hud-corner.tr{top:16px;right:16px;border-top-width:1px;border-right-width:1px;}
.hud-corner.bl{bottom:16px;left:16px;border-bottom-width:1px;border-left-width:1px;}
.hud-corner.br{bottom:16px;right:16px;border-bottom-width:1px;border-right-width:1px;}
/* ===== BLOCK ANIMATION BEHIND CONTENT CARDS ONLY ===== */
/* Glass cards — solid black so text is readable */
.glass {
    background: rgba(8, 12, 18, 0.95) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Sections — TRANSPARENT, animation shows through */
section {
    position: relative;
    z-index: 3;
    background: transparent !important;
}

/* Navbar — solid so text is readable */
nav {
    background: rgba(8, 12, 18, 0.92) !important;
    backdrop-filter: blur(20px);
}

/* Footer — solid */
footer {
    position: relative;
    z-index: 3;
    background: rgba(8, 12, 18, 0.95) !important;
    backdrop-filter: blur(20px);
}

/* Pricing modal — solid */
#pricingModal > div {
    background: rgba(8, 12, 18, 0.97) !important;
}

/* Lead capture form container */
main .glass {
    background: rgba(8, 12, 18, 0.95) !important;
}

/* Support plan card (bg-brand-teal/5) */
[class*="bg-brand-teal"] {
    background: rgba(8, 12, 18, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Contact form inputs & textarea — solid dark */
input[class*="bg-white"],
textarea[class*="bg-white"],
input[class*="bg-white/5"],
textarea[class*="bg-white/5"] {
    background: rgba(8, 12, 18, 0.95) !important;
}

/* Contact section — form side and info side containers */
#contact .grid > div {
    background: rgba(8, 12, 18, 0.93);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Pricing estimate box */
[class*="bg-white/5"] {
    background: rgba(8, 12, 18, 0.95) !important;
}