/* ===========================================================
   Danish Khalid — Portfolio custom styles
   Dark, modern, professional theme + animated cursor
   =========================================================== */

:root {
    --bg:        #f4f7fc;   /* soft white (light theme)   */
    --bg-soft:   #ffffff;   /* white panels               */
    --bg-card:   #ffffff;   /* white cards                */
    --line:      #dce4f0;   /* light borders              */
    --text:      #0f1d33;   /* dark navy text             */
    --muted:     #5b6b86;   /* muted text                 */
    --indigo:    #2563eb;   /* brand blue accent          */
    --indigo-600:#1d4ed8;
    --magenta:   #0ea5e9;   /* sky accent                 */
    --magenta-600:#0284c7;
}

html { scroll-behavior: smooth; }

body {
    background:
        radial-gradient(900px 600px at 15% -10%, rgba(37,99,235,.08), transparent 60%),
        radial-gradient(800px 600px at 100% 10%, rgba(14,165,233,.07), transparent 55%),
        var(--bg);
    color: var(--text);
}

/* Gradient text used for headings / highlights */
.text-gradient {
    background: linear-gradient(100deg, var(--indigo) 0%, var(--magenta) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Animated gradient blob accents */
.glow { filter: blur(70px); opacity: .55; }

/* ---------- Hero animations ---------- */
@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-16px); }
}
.animate-float { animation: floaty 5s ease-in-out infinite; }

@keyframes blobDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(30px, -20px) scale(1.12); }
    66%      { transform: translate(-20px, 18px) scale(0.92); }
}
.animate-blob       { animation: blobDrift 16s ease-in-out infinite; }
.animate-blob.delay { animation: blobDrift 20s ease-in-out infinite; animation-delay: -6s; }

/* Animated gradient text (continuous shimmer) */
.text-gradient-animate {
    background: linear-gradient(100deg, var(--indigo), var(--magenta), var(--indigo));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradientMove 5s linear infinite;
}
@keyframes gradientMove { to { background-position: 200% center; } }

/* Soft pulsing ring behind the hero logo card */
@keyframes pulseRing {
    0%, 100% { opacity: .45; transform: scale(1); }
    50%      { opacity: .8;  transform: scale(1.06); }
}
.animate-pulse-ring { animation: pulseRing 4s ease-in-out infinite; }

/* Bouncing scroll-down indicator */
@keyframes scrollDot {
    0%   { transform: translateY(0);   opacity: 0; }
    40%  { opacity: 1; }
    80%  { transform: translateY(14px); opacity: 0; }
    100% { opacity: 0; }
}
.animate-scroll-dot { animation: scrollDot 1.8s ease-in-out infinite; }

@keyframes bounceArrow {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(7px); }
}
.animate-bounce-arrow { animation: bounceArrow 1.8s ease-in-out infinite; }

/* Name — continuous flowing colour gradient */
.text-shine {
    background: linear-gradient(110deg,
        #1e3a8a, #1d4ed8, #2563eb, #3b82f6, #1d4ed8, #1e3a8a);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: shine 4s linear infinite;
}
@keyframes shine {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* Skill bars fill-up animation */
.skill-bar { transition: width 1.1s cubic-bezier(.2, .7, .3, 1); }
@media (prefers-reduced-motion: reduce) { .skill-bar { transition: none; } }

/* Typewriter cursor blink */
.typed-cursor { animation: caretBlink 1s step-end infinite; }
@keyframes caretBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* "Hi there" accent line — gently grows/glows */
@keyframes lineGrow {
    0%, 100% { width: 2rem;   opacity: .55; }
    50%      { width: 3.2rem; opacity: 1; }
}
.animate-line { animation: lineGrow 2.6s ease-in-out infinite; }

/* Primary button — soft pulsing glow */
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 10px 25px -6px rgba(37, 99, 235, .45); }
    50%      { box-shadow: 0 12px 36px -4px rgba(14, 165, 233, .6); }
}
.animate-glow { animation: glowPulse 3s ease-in-out infinite; }

/* Buttons — light sweep on hover */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::before {
    content: "";
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-20deg);
    transition: left .6s ease;
    pointer-events: none;
}
.btn-shine:hover::before { left: 130%; }

@media (prefers-reduced-motion: reduce) {
    .animate-float, .animate-blob, .animate-blob.delay, .text-gradient-animate,
    .animate-pulse-ring, .animate-scroll-dot, .animate-bounce-arrow,
    .text-shine, .animate-line, .animate-glow {
        animation: none !important;
    }
    .btn-shine::before { display: none; }
}

/* Section heading underline */
.heading-rule {
    height: 4px; width: 64px; border-radius: 9999px;
    background: linear-gradient(90deg, var(--indigo), var(--magenta));
}

/* ---------- Back to top button ---------- */
#back-to-top {
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}
#back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ---------- Navbar scroll state ---------- */
#site-nav.scrolled {
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 12px rgba(15, 29, 51, .06);
}

/* ---------- Glass card ---------- */
.glass {
    background: rgba(255, 255, 255, .7);
    border: 1px solid var(--line);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.card {
    background: #ffffff;
    border: 1px solid var(--line);
    box-shadow: 0 1px 2px rgba(15,29,51,.04), 0 1px 3px rgba(15,29,51,.06);
    transition: transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s, box-shadow .35s;
}
.card:hover {
    transform: translateY(-6px);
    border-color: rgba(37,99,235,.35);
    box-shadow: 0 18px 40px -16px rgba(37,99,235,.28);
}

/* ---------- Scroll reveal ---------- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
    will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* ---------- Custom animated cursor (desktop / fine pointer only) ---------- */
.cursor-dot,
.cursor-ring {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 9999;
    border-radius: 9999px;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
}
.cursor-dot {
    width: 7px; height: 7px;
    background: #fff;
}
.cursor-ring {
    width: 36px; height: 36px;
    border: 2px solid rgba(255, 255, 255, .6);
    transition: width .25s ease, height .25s ease,
                background-color .25s ease, border-color .25s ease, opacity .25s ease;
}
.cursor-ring.is-hovering {
    width: 60px; height: 60px;
    background: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .9);
}
.cursor-ring.is-down { width: 28px; height: 28px; }

/* Hide custom cursor + restore native one on touch / coarse pointers */
@media (pointer: fine) {
    body { cursor: none; }
    a, button, input, textarea, select, label { cursor: none; }
}
@media (hover: none), (pointer: coarse) {
    .cursor-dot, .cursor-ring { display: none !important; }
}

/* Nice focus ring for accessibility (keyboard users) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--indigo);
    outline-offset: 2px;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--indigo-600), var(--magenta-600));
    border-radius: 9999px;
    border: 3px solid var(--bg);
}

.input-invalid {
    border-color: #f43f5e !important;
    background-color: rgba(244, 63, 94, .05);
}
.input-invalid:focus {
    border-color: #f43f5e !important;
    box-shadow: 0 0 0 2px rgba(244, 63, 94, .25);
}
#form-status {
    transition: opacity .4s ease;
}
#form-status.is-fading {
    opacity: 0;
}