/* ── animations.css ───────────────────────────────────────────────────────────
   All UI/UX enhancement styles: loader, progress bar, scroll animations,
   custom cursor, back-to-top, magnetic buttons, glassmorphism, hero FX.
   Must not break existing Blazor component styles.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Intro Loader ─────────────────────────────────────────────────────────── */
#intro-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
}

.loader-initials {
    font-size: clamp(3.5rem, 12vw, 6.5rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    background: linear-gradient(135deg, #f1f5f9 25%, var(--color-accent-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: loaderPop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.loader-track {
    width: 110px;
    height: 2px;
    background: rgba(99, 102, 241, 0.18);
    border-radius: 999px;
    overflow: hidden;
    opacity: 0;
    animation: fadeIn 0.3s 0.5s ease both;
}

.loader-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light));
    border-radius: 999px;
    animation: loaderFill 1.5s 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes loaderPop {
    from { opacity: 0; transform: scale(0.65) translateY(24px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

@keyframes loaderFill {
    from { width: 0%;   }
    to   { width: 100%; }
}

#intro-loader.loader-exit {
    animation: loaderFadeOut 0.65s ease forwards;
    pointer-events: none;
}

@keyframes loaderFadeOut {
    to { opacity: 0; }
}

/* ── Navigation Progress Bar ──────────────────────────────────────────────── */
#nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0%;
    opacity: 0;
    z-index: 9997;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.55);
    pointer-events: none;
}

/* ── Scroll Entrance Animations ───────────────────────────────────────────── */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* If JS never runs, content must not stay invisible forever */
@media (scripting: none) {
    .animate-on-scroll { opacity: 1; transform: none; }
}

/* Respect the OS reduced-motion setting */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Stagger delays for child elements */
.animate-on-scroll[data-delay="1"] { transition-delay: 0.10s; }
.animate-on-scroll[data-delay="2"] { transition-delay: 0.20s; }
.animate-on-scroll[data-delay="3"] { transition-delay: 0.30s; }
.animate-on-scroll[data-delay="4"] { transition-delay: 0.42s; }
.animate-on-scroll[data-delay="5"] { transition-delay: 0.54s; }

/* ── Hero — Animated Gradient Aura ───────────────────────────────────────── */
.hero {
    overflow: hidden; /* contain pseudo-element overflow during scale */
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 85% 60% at 50%  5%,  rgba(99, 102, 241, 0.17) 0%, transparent 65%),
        radial-gradient(ellipse 55% 40% at  8% 85%,  rgba(129, 140, 248, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse 50% 35% at 92% 70%,  rgba(99, 102, 241, 0.06) 0%, transparent 50%);
    animation: heroAura 10s ease-in-out infinite alternate;
}

/* Parallax layer driven by --parallax-y set from JS */
.hero::after {
    content: '';
    position: absolute;
    inset: -20%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 70% 50% at 50% 20%, rgba(99, 102, 241, 0.07) 0%, transparent 60%);
    transform: translateY(var(--parallax-y, 0));
    will-change: transform;
}

.hero-inner,
.hero-scroll-hint {
    position: relative;
    z-index: 1;
}

@keyframes heroAura {
    from { opacity: 0.55; transform: scale(1);     }
    to   { opacity: 1;    transform: scale(1.065); }
}

/* ── Glassmorphism — Project Cards ────────────────────────────────────────── */
.project-card {
    background:          rgba(15, 23, 42, 0.55) !important;
    backdrop-filter:     blur(14px)             !important;
    -webkit-backdrop-filter: blur(14px)         !important;
    border-color:        rgba(99, 102, 241, 0.20) !important;
    /* override the CSS transition set in home.razor.css */
    transition: border-color 0.22s ease, box-shadow 0.22s ease !important;
}

.project-card:hover {
    border-color: rgba(99, 102, 241, 0.55) !important;
    box-shadow:   0 8px 34px rgba(99, 102, 241, 0.16),
                  0 0  0 1px rgba(99, 102, 241, 0.12) !important;
}

/* ── Glassmorphism — Skill Groups ─────────────────────────────────────────── */
.skill-group {
    background:          rgba(30, 41, 59, 0.50) !important;
    backdrop-filter:     blur(10px)             !important;
    -webkit-backdrop-filter: blur(10px)         !important;
    border-color:        rgba(99, 102, 241, 0.16) !important;
    transition:          border-color 0.25s ease, box-shadow 0.25s ease;
}

.skill-group:hover {
    border-color: rgba(99, 102, 241, 0.38) !important;
    box-shadow:   0 4px 22px rgba(99, 102, 241, 0.09);
}

/* ── Magnetic Buttons ─────────────────────────────────────────────────────── */
.btn-primary.is-magnetic,
.btn-outline.is-magnetic {
    /* translateY from original hover style is kept; we layer magnetic shift on top */
    transform: translate(var(--mag-x, 0px), var(--mag-y, 0px)) translateY(-1px) !important;
    transition: transform 0.09s ease !important;
}

/* ── Nav Link Underline Animation ─────────────────────────────────────────── */
/* position:relative is needed for ::after; safe to set globally */
.site-nav-link {
    position: relative;
}

.site-nav-link::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 0.85rem;
    right: 0.85rem;
    height: 2px;
    background: var(--color-accent);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.28s ease;
}

.site-nav-link:hover::after {
    transform: scaleX(1);
}

/* ── Custom Cursor ────────────────────────────────────────────────────────── */
/* Applied only when JS has confirmed a pointer device */
.has-custom-cursor,
.has-custom-cursor * {
    cursor: none !important;
}

#cursor-dot {
    position: fixed;
    top:  -5px;
    left: -5px;
    width:  10px;
    height: 10px;
    /* colour set by JS; no CSS default so JS value is always used */
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transition: background 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
}

#cursor-ring {
    position: fixed;
    top:  -18px;
    left: -18px;
    width:  36px;
    height: 36px;
    border: 1.5px solid transparent; /* colour set by JS */
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    transition: width 0.22s ease, height 0.22s ease,
                top 0.22s ease, left 0.22s ease,
                border-color 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
}

#cursor-ring.hovered {
    width:  56px;
    height: 56px;
    top:  -28px;
    left: -28px;
    /* border-color kept as JS-set value; only size changes here */
}

/* ── Back-to-Top Button ───────────────────────────────────────────────────── */
#back-to-top {
    position: fixed;
    bottom: 2rem;
    right:  2rem;
    width:  2.75rem;
    height: 2.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    cursor: pointer;
    z-index: 500;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.3s ease, transform 0.3s ease,
                background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    pointer-events: none;
}

#back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#back-to-top:hover {
    background:    var(--color-accent);
    border-color:  var(--color-accent);
    color: #fff;
    transform: translateY(-3px);
}

/* ── Utility ──────────────────────────────────────────────────────────────── */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}