/* Consolidated animations and UI styles extracted from Blade views */

/* Fade animations */
@keyframes fade-in-down {
    from { opacity: 0; transform: translateY(-40px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-down { animation: fade-in-down 1s cubic-bezier(.4,0,.2,1) both; }
.animate-fade-in-up { animation: fade-in-up 0.8s cubic-bezier(.4,0,.2,1) both; }
.animate-fade-in { opacity: 0; transition: opacity 1.2s; }

/* Floating icons */
@keyframes float { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-18px) } }
@keyframes soft-glow { 0%,100%{ filter: drop-shadow(0 0 6px rgba(99,102,241,0.28)) } 50%{ filter: drop-shadow(0 0 14px rgba(99,102,241,0.56)) } }
/* Combined float + soft glow for tech icons */
.animate-float { animation: float 2.5s ease-in-out infinite, soft-glow 3.2s ease-in-out infinite !important; animation-play-state: running !important; will-change: transform, filter; }
.delay-100{ animation-delay: 0.1s !important } .delay-200{ animation-delay: 0.2s !important } .delay-300{ animation-delay: 0.3s !important }
.delay-400{ animation-delay: 0.4s !important } .delay-500{ animation-delay: 0.5s !important } .delay-600{ animation-delay: 0.6s !important }
.delay-700{ animation-delay: 0.7s !important }

/* Tech-stack: animation helpers only — layout and visuals use Tailwind utilities in templates */
.tech-animate{ animation: float 2.5s ease-in-out infinite !important; }
/* Reuse the existing delay helpers (also defined earlier as .delay-*), keep these aliases for clarity */
.tech-delay-100{ animation-delay: 0.08s !important }
.tech-delay-200{ animation-delay: 0.16s !important }
.tech-delay-300{ animation-delay: 0.24s !important }
.tech-delay-400{ animation-delay: 0.32s !important }
.tech-delay-500{ animation-delay: 0.40s !important }
.tech-delay-600{ animation-delay: 0.48s !important }
.tech-delay-700{ animation-delay: 0.56s !important }


/* Glass / glow */
  .glass {
            background: rgba(255,255,255,0.7);
            backdrop-filter: blur(12px);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
        }
.glow { box-shadow: 0 0 40px 8px #6366f1, 0 0 0 8px #fff; }

/* Buttons */
.btn-animated { position: relative; overflow: hidden; }
.btn-animated::after{
    content: '';
    position: absolute; left: -100%; top: 0; width: 200%; height: 100%;
    background: linear-gradient(90deg, #6366f1 0%, #06b6d4 50%, purple 100%);
    opacity: 0.2; transition: left 0.5s; z-index: 0;
}
.btn-animated:hover::after{ left: 0 }
.btn-animated:active{ transform: scale(0.95); transition: transform 0.1s }

/* Small utility transforms */
.perspective{ perspective:1000px }
.backface-hidden{ backface-visibility:hidden }
.rotate-y-180{ transform: rotateY(180deg) }

/* Modal / lightbox */
.lightbox-backdrop{ position:fixed; inset:0; background:rgba(10,11,13,0.7); display:flex; align-items:center; justify-content:center; z-index:80 }
.lightbox-content{ max-width:90%; max-height:90%; border-radius:12px; overflow:hidden }

/* Hero blobs and parallax */
.hero-wrap{ position:relative; overflow:visible }
.blob{ position:absolute; filter:blur(36px); opacity:0.85; mix-blend-mode:screen; transform:translateZ(0) }
.blob--one{ width:420px; height:420px; left:-80px; top:-120px; background:linear-gradient(135deg,#7c3aed,#06b6d4); border-radius:50% }
.blob--two{ width:320px; height:320px; right:-40px; top:-60px; background:linear-gradient(135deg,#06b6d4,#10b981); border-radius:50% }
.blob--three{ width:240px; height:240px; left:20%; bottom:-80px; background:linear-gradient(135deg,#f472b6,#6366f1); border-radius:50% }
.parallax-icon{ position:absolute; width:64px; height:64px; will-change:transform; transition:transform 0.12s linear }

.social-link{ display:inline-flex; align-items:center; gap:8px }

/* Scroll indicator */
.scroll-indicator{ width:36px; height:64px; border-radius:24px; border:2px solid rgba(255,255,255,0.6); display:flex; align-items:flex-start; justify-content:center; padding:6px; margin:16px auto }
.scroll-dot{ width:8px; height:8px; border-radius:999px; background:white; animation:scroll 1.4s infinite }
@keyframes scroll{ 0%{ transform:translateY(0) } 50%{ transform:translateY(22px) } 100%{ transform:translateY(0) } }

/* Skill bounce */
.skill-bounce{ animation: bounce 0.8s infinite alternate }
@keyframes bounce{ to { transform: translateY(-6px) scale(1.08) } }

/* Dark mode tweaks */
.dark-mode .glass{ background: rgba(6,8,12,0.6); border-color: rgba(255,255,255,0.04) }
.dark-mode .glass, .dark-mode body, .dark-mode .text-gray-800{ color: #dce7ff }

/* Accessibility helpers (small) */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }