/* ============================================================ PAGE BACKGROUND ANIMATIONS — S.K.D Computer Education Each page uses a different style via ============================================================ */ /* Force transparent body so .page-bg layer shows through */ html { background: hsl(220, 30%, 97%); } body[data-bg] { background: transparent !important; position: relative; } /* Make common page wrappers translucent so background animation is visible */ body[data-bg] main, body[data-bg] section, body[data-bg] .section-container, body[data-bg] .hero, body[data-bg] .page-section { background: transparent !important; } /* Cards stay readable but slightly translucent */ body[data-bg] .card, body[data-bg] .feature-card, body[data-bg] .course-card, body[data-bg] .stat-card, body[data-bg] .gallery-card, body[data-bg] .contact-card { background: rgba(255,255,255,0.85) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Ensure all direct content sits above the bg layer */ body[data-bg] > *:not(.page-bg) { position: relative; z-index: 1; } body[data-bg] nav#navbar { z-index: 50 !important; } body[data-bg] footer { z-index: 2; } .page-bg { position: fixed !important; inset: 0; z-index: 0 !important; overflow: hidden; pointer-events: none; background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%); } /* Lighter overlay so animations are clearly visible */ .page-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0.45)); pointer-events: none; } /* ============ ABOUT — Floating code snippets ============ */ body[data-bg="about"] .page-bg { background: radial-gradient(ellipse at top left, #e0e7ff 0%, #f8fafc 60%); } .code-float { position: absolute; font-family: 'Courier New', monospace; font-size: 13px; color: rgba(59, 130, 246, 0.55); white-space: nowrap; animation: floatUp linear infinite; text-shadow: 0 0 8px rgba(59,130,246,0.35); } @keyframes floatUp { 0% { transform: translateY(110vh) rotate(-2deg); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-20vh) rotate(2deg); opacity: 0; } } /* ============ COURSES — Animated grid + scanning line ============ */ body[data-bg="courses"] .page-bg { background: linear-gradient(rgba(99,102,241,0.18) 1px, transparent 1px) 0 0/40px 40px, linear-gradient(90deg, rgba(99,102,241,0.18) 1px, transparent 1px) 0 0/40px 40px, linear-gradient(135deg, #f8fafc, #eef2ff); animation: gridMove 20s linear infinite; } @keyframes gridMove { 0% { background-position: 0 0, 0 0, 0 0; } 100% { background-position: 40px 40px, 40px 40px, 0 0; } } body[data-bg="courses"] .page-bg::before { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, #6366f1, transparent); box-shadow: 0 0 20px #6366f1; animation: scanV 6s ease-in-out infinite; z-index: 1; } @keyframes scanV { 0%, 100% { top: 0%; opacity: 0.4; } 50% { top: 100%; opacity: 1; } } /* ============ GALLERY — Soft particle bokeh ============ */ body[data-bg="gallery"] .page-bg { background: linear-gradient(135deg, #fef3f2 0%, #f3e8ff 50%, #e0e7ff 100%); } .bokeh { position: absolute; border-radius: 50%; filter: blur(40px); opacity: 0.6; animation: drift linear infinite; } @keyframes drift { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px,-80px) scale(1.25); } 100% { transform: translate(0,0) scale(1); } } /* ============ CONTACT — Pulse waves ============ */ body[data-bg="contact"] .page-bg { background: radial-gradient(circle at 50% 50%, #ecfeff 0%, #f8fafc 70%); } .wave-ring { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; border: 2px solid rgba(14,165,233,0.6); border-radius: 50%; transform: translate(-50%,-50%); animation: pulseRing 4s ease-out infinite; } @keyframes pulseRing { 0% { width: 100px; height: 100px; opacity: 0.85; border-width: 2px; } 100% { width: 1600px; height: 1600px; opacity: 0; border-width: 0.5px; } } /* ============ FRANCHISEE — Diagonal data streams ============ */ body[data-bg="franchisee"] .page-bg { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); } .data-stream { position: absolute; width: 2px; background: linear-gradient(180deg, transparent, #f59e0b, transparent); box-shadow: 0 0 10px #f59e0b; animation: streamFall linear infinite; opacity: 0.75; } @keyframes streamFall { 0% { transform: translateY(-100%); } 100% { transform: translateY(100vh); } } /* ============ RESULT — Binary rain (matrix style, blue) ============ */ body[data-bg="result"] .page-bg { background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%); } .binary-col { position: absolute; top: -10%; font-family: 'Courier New', monospace; font-size: 14px; color: rgba(2, 132, 199, 0.65); writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 4px; animation: binaryFall linear infinite; text-shadow: 0 0 6px rgba(2,132,199,0.6); } @keyframes binaryFall { 0% { transform: translateY(-50%); } 100% { transform: translateY(120vh); } } /* ============ ADMIN — Circuit board pulse ============ */ body[data-bg="admin"] .page-bg { background: linear-gradient(rgba(16,185,129,0.15) 1px, transparent 1px) 0 0/60px 60px, linear-gradient(90deg, rgba(16,185,129,0.15) 1px, transparent 1px) 0 0/60px 60px, #f0fdf4; } .circuit-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 12px #10b981; animation: circuitBlink 2s ease-in-out infinite; } @keyframes circuitBlink { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.4); } } /* ============ 404 — Glitch lines ============ */ body[data-bg="404"] .page-bg { background: linear-gradient(180deg, #fef2f2 0%, #fee2e2 100%); } .glitch-line { position: absolute; left: 0; right: 0; height: 2px; background: rgba(239,68,68,0.55); animation: glitch 3s steps(8) infinite; } @keyframes glitch { 0%, 100% { transform: translateX(0); opacity: 0.35; } 50% { transform: translateX(20px); opacity: 0.85; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .page-bg *, .page-bg::before, .page-bg::after { animation: none !important; } } /* ============ HOME — Diagonal animated gradient lines ============ */ body[data-bg="home"] .page-bg { background: linear-gradient(135deg, #eff6ff 0%, #ede9fe 50%, #ecfeff 100%); } .home-line { position: absolute; height: 2px; background: linear-gradient(90deg, transparent, rgba(59,130,246,0.55), transparent); box-shadow: 0 0 12px rgba(59,130,246,0.45); animation: homeLine linear infinite; transform-origin: left center; } @keyframes homeLine { 0% { transform: translateX(-30%) rotate(var(--rot, 0deg)); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(130vw) rotate(var(--rot, 0deg)); opacity: 0; } } .home-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.45; animation: drift 12s ease-in-out infinite; }