/* 
 * JobReady AI - Premium Dark Neon Animation System v3.0
 * Full cyberpunk/neuro aesthetic with high-impact motion
 */

/* ── Scroll Reveal ── */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-100 {
    transition-delay: 100ms;
}

.reveal-delay-200 {
    transition-delay: 200ms;
}

.reveal-delay-300 {
    transition-delay: 300ms;
}

.reveal-delay-400 {
    transition-delay: 400ms;
}

.reveal-delay-500 {
    transition-delay: 500ms;
}

.reveal-delay-600 {
    transition-delay: 600ms;
}

.reveal-delay-700 {
    transition-delay: 700ms;
}

/* ── Neon Text Glow ── */
.neon-text-blue {
    text-shadow: 0 0 7px #00f3ff, 0 0 15px #00f3ff, 0 0 35px #00f3ff;
}

.neon-text-pink {
    text-shadow: 0 0 7px #ff00ff, 0 0 15px #ff00ff, 0 0 35px #ff00ff;
}

.neon-text-green {
    text-shadow: 0 0 7px #39ff14, 0 0 15px #39ff14, 0 0 35px #39ff14;
}

.neon-text-purple {
    text-shadow: 0 0 7px #bc13fe, 0 0 15px #bc13fe, 0 0 35px #bc13fe;
}

/* ── Text Shimmer (animated gradient text) ── */
.text-shimmer {
    background-size: 300% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 4s linear infinite;
    background-image: linear-gradient(90deg, #ffffff 0%, #00f3ff 20%, #bc13fe 40%, #ff00ff 60%, #00f3ff 80%, #ffffff 100%);
}

@keyframes shimmer {
    to {
        background-position: 300% center;
    }
}

/* ── Glitch Text Effect ── */
.glitch-text {
    position: relative;
    animation: glitch-flicker 6s infinite;
}

.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.glitch-text::before {
    animation: glitch-before 3s infinite;
    color: #ff00ff;
    clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%);
    transform: translateX(-3px);
}

.glitch-text::after {
    animation: glitch-after 3s infinite;
    color: #00f3ff;
    clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
    transform: translateX(3px);
}

@keyframes glitch-before {

    0%,
    90%,
    100% {
        transform: translateX(0);
        opacity: 0;
    }

    92% {
        transform: translateX(-4px);
        opacity: 1;
    }

    94% {
        transform: translateX(2px);
        opacity: 1;
    }

    96% {
        transform: translateX(-4px);
        opacity: 0;
    }
}

@keyframes glitch-after {

    0%,
    90%,
    100% {
        transform: translateX(0);
        opacity: 0;
    }

    93% {
        transform: translateX(4px);
        opacity: 1;
    }

    95% {
        transform: translateX(-2px);
        opacity: 1;
    }

    96% {
        transform: translateX(4px);
        opacity: 0;
    }
}

@keyframes glitch-flicker {

    0%,
    97%,
    100% {
        opacity: 1;
    }

    98% {
        opacity: 0.8;
    }

    99% {
        opacity: 1;
    }
}

/* ── Typing Cursor ── */
.typing-cursor::after {
    content: '|';
    color: #00f3ff;
    animation: blink-cursor 0.8s step-end infinite;
    font-weight: 100;
}

@keyframes blink-cursor {
    50% {
        opacity: 0;
    }
}

/* ── Floating Elements ── */
.animate-float {
    animation: float-obj 7s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float-obj 7s ease-in-out infinite 3s;
}

.animate-float-slow {
    animation: float-obj 10s ease-in-out infinite 1.5s;
}

@keyframes float-obj {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    33% {
        transform: translateY(-20px) rotate(1deg);
    }

    66% {
        transform: translateY(-8px) rotate(-1deg);
    }
}

/* ── Scanning Line ── */
@keyframes scanline {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100vh);
    }
}

.glitch-box {
    position: relative;
    overflow: hidden;
}

.glitch-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(transparent, transparent 2px, rgba(0, 243, 255, 0.03) 2px, rgba(0, 243, 255, 0.03) 4px);
    pointer-events: none;
    z-index: 10;
}

/* ── Holographic Card ── */
.holo-card {
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease;
    will-change: transform;
}

.holo-card:hover {
    transform: perspective(1000px) rotateX(3deg) rotateY(-3deg) scale(1.02);
    box-shadow:
        -8px 8px 40px rgba(0, 243, 255, 0.15),
        8px -8px 40px rgba(188, 19, 254, 0.15),
        0 0 60px rgba(255, 0, 255, 0.05);
}

/* ── Enhanced Cyber Buttons ── */
.btn-cyber-enhanced {
    position: relative;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.btn-cyber-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    transition: left 0.55s;
}

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

.btn-cyber-enhanced::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 0 rgba(0, 243, 255, 0);
    transition: box-shadow 0.35s ease;
    pointer-events: none;
}

.btn-cyber-enhanced:hover {
    transform: translateY(-3px) scale(1.01);
    letter-spacing: 0.05em;
}

.btn-cyber-enhanced:active {
    transform: translateY(-1px) scale(0.99);
}

/* ── Neon Border Pulse ── */
.neon-border-anim {
    position: relative;
}

.neon-border-anim::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: linear-gradient(90deg, #00f3ff, #bc13fe, #ff00ff, #00f3ff);
    background-size: 300% 300%;
    animation: border-rotate 4s linear infinite;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s;
}

.neon-border-anim:hover::before,
.neon-border-anim:focus-within::before {
    opacity: 1;
}

@keyframes border-rotate {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ── Input Glitch Focus ── */
.input-cyber-enhanced {
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    transition: all 0.3s;
    position: relative;
}

.input-cyber-enhanced:focus {
    outline: none;
    border-color: #00f3ff;
    box-shadow: 0 0 0 1px #00f3ff, 0 0 25px rgba(0, 243, 255, 0.2), inset 0 0 15px rgba(0, 243, 255, 0.04);
}

/* ── Progress Bar Glow ── */
.neon-bar {
    height: 4px;
    border-radius: 2px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px currentColor, 0 0 16px currentColor;
}

/* ── Particle Burst ── */
@keyframes particle-pop {
    0% {
        transform: scale(0) translateY(0);
        opacity: 1;
    }

    100% {
        transform: scale(1.5) translateY(-60px);
        opacity: 0;
    }
}

/* ── Card Entrance ── */
.card-entrance {
    animation: card-in 0.7s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}

@keyframes card-in {
    from {
        opacity: 0;
        transform: translateY(60px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── Icon Spin On Hover ── */
.icon-spin-hover {
    transition: transform 0.4s ease;
}

.icon-spin-hover:hover {
    transform: rotate(20deg) scale(1.2);
}

/* ── Animated Neon Corner Brackets ── */
.corner-brackets {
    position: relative;
}

.corner-brackets::before,
.corner-brackets::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    transition: all 0.4s ease;
    opacity: 0.4;
}

.corner-brackets::before {
    top: 0;
    left: 0;
    border-top: 2px solid #00f3ff;
    border-left: 2px solid #00f3ff;
}

.corner-brackets::after {
    bottom: 0;
    right: 0;
    border-bottom: 2px solid #ff00ff;
    border-right: 2px solid #ff00ff;
}

.corner-brackets:hover::before,
.corner-brackets:hover::after {
    width: 35px;
    height: 35px;
    opacity: 1;
}

/* ── Screen Flicker (auth page initial load) ── */
.screen-flicker {
    animation: flicker 0.8s ease-in-out;
}

@keyframes flicker {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.9;
    }

    20% {
        opacity: 0.3;
    }

    30% {
        opacity: 1;
    }

    40% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

/* ── Pulse Ring ── */
.pulse-ring {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pulse-ring::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: currentColor;
    animation: pulse-scale 2s ease-out infinite;
    opacity: 0.5;
}

@keyframes pulse-scale {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* ── Hex Grid Highlight ── */
.hover-glow:hover {
    filter: drop-shadow(0 0 8px currentColor);
}

/* ── Slide-up animation for elements ── */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-up {
    animation: slideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Loading Spinner ── */
.cyber-spinner {
    width: 40px;
    height: 40px;
    border: 2px solid #111;
    border-top-color: #00f3ff;
    border-right-color: #bc13fe;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Star / sparkle across background ── */
.sparkle {
    position: fixed;
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 50%;
    pointer-events: none;
    animation: sparkle-anim var(--dur, 4s) ease-in-out infinite var(--delay, 0s);
    opacity: 0;
}

@keyframes sparkle-anim {

    0%,
    100% {
        opacity: 0;
        transform: scale(0);
    }

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