/* ── Page fade-in transition ────────────────────────────────────────────── */
#app { animation: pageFadeIn 0.4s ease both; }
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
.v-btn { text-transform: unset !important; }
.v-main { padding-top: 64px !important; padding-bottom: 80px !important; }

/* ── Animated gradient hero background ─────────────────────────────────── */
.hero-bg {
    background: linear-gradient(135deg, #0d1b2a 0%, #1b2a4a 30%, #1a1040 60%, #0d2a1a 100%);
    background-size: 400% 400%;
    animation: gradientShift 12s ease infinite;
    position: relative;
    overflow: hidden;
}
.hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.18) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(16,185,129,0.15) 0%, transparent 55%),
        radial-gradient(ellipse at 60% 80%, rgba(139,92,246,0.12) 0%, transparent 50%);
    pointer-events: none;
}
@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ── Floating orbs ──────────────────────────────────────────────────────── */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.25;
    animation: orbFloat 8s ease-in-out infinite;
    pointer-events: none;
}
.orb-1 { width: 300px; height: 300px; background: #6366f1; top: -80px; left: -80px; animation-delay: 0s; }
.orb-2 { width: 250px; height: 250px; background: #10b981; top: 40%; right: -60px; animation-delay: -3s; }
.orb-3 { width: 200px; height: 200px; background: #8b5cf6; bottom: -60px; left: 40%; animation-delay: -6s; }
@keyframes orbFloat {
    0%, 100% { transform: translateY(0px) scale(1); }
    50%       { transform: translateY(-30px) scale(1.08); }
}

/* ── Hero text animations ───────────────────────────────────────────────── */
.hero-overline  { animation: fadeSlideUp 0.6s ease both; animation-delay: 0.1s; opacity: 0; }
.hero-name      { animation: fadeSlideUp 0.6s ease both; animation-delay: 0.25s; opacity: 0; }
.hero-tagline   { animation: fadeSlideUp 0.6s ease both; animation-delay: 0.4s; opacity: 0; }
.hero-cta       { animation: fadeSlideUp 0.6s ease both; animation-delay: 0.55s; opacity: 0; }
.hero-avatar    { animation: popIn 0.7s cubic-bezier(0.16,1,0.3,1) both; animation-delay: 0.1s; opacity: 0; }

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes popIn {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Avatar glow ring ───────────────────────────────────────────────────── */
.avatar-wrapper {
    position: relative;
    display: inline-block;
}
.avatar-wrapper::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(#6366f1, #10b981, #8b5cf6, #6366f1);
    animation: spinRing 4s linear infinite;
    z-index: 0;
}
.avatar-wrapper .v-avatar { position: relative; z-index: 1; }
@keyframes spinRing {
    to { transform: rotate(360deg); }
}

/* ── Stats bar ──────────────────────────────────────────────────────────── */
.stat-card {
    border: 1px solid rgba(99,102,241,0.25) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.stat-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 30px rgba(99,102,241,0.3) !important;
}

/* ── Skill chips ────────────────────────────────────────────────────────── */
.skill-chip {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    cursor: default;
}
.skill-chip:hover {
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 0 4px 16px rgba(16,185,129,0.35) !important;
}

/* ── Section fade-in on scroll ──────────────────────────────────────────── */
.section-hidden { opacity: 0; transform: translateY(40px); transition: opacity 0.7s ease, transform 0.7s ease; }
.section-visible { opacity: 1; transform: translateY(0); }

/* ── Hire CTA ───────────────────────────────────────────────────────────── */
.hire-card {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #10b981 100%) !important;
    position: relative;
    overflow: hidden;
}
.hire-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 60%);
    pointer-events: none;
}

/* ── GPA table ──────────────────────────────────────────────────────────── */
.gpa-table th { text-align: start; padding: 6px 8px; font-size: 12px; color: #888; border-bottom: 1px solid rgba(128,128,128,0.2); }
.gpa-table td { padding: 2px 4px; vertical-align: middle; }

/* ── CV styles ──────────────────────────────────────────────────────────── */
#cv-document {
    max-width: 860px;
    margin: 0 auto;
    padding: 40px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.6;
}
.cv-header { margin-bottom: 24px; }
.cv-name   { font-size: 28px; font-weight: 700; margin: 0 0 4px; }
.cv-role   { font-size: 15px; color: #6366f1; margin: 0 0 6px; font-weight: 500; }
.cv-contact { font-size: 12px; color: #666; margin: 0; }
.cv-contact a { color: #6366f1; text-decoration: none; }

.cv-section       { margin-bottom: 20px; }
.cv-section-title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #6366f1; margin: 0 0 4px; }
.cv-divider       { border: none; border-top: 2px solid #6366f1; margin: 0 0 12px; }

.cv-entry        { margin-bottom: 14px; }
.cv-entry-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.cv-entry-title  { font-weight: 600; font-size: 14px; }
.cv-entry-company{ color: #888; font-size: 13px; }
.cv-entry-date   { font-size: 12px; color: #888; white-space: nowrap; }
.cv-text         { margin: 0; color: #444; font-size: 13px; }

.cv-skill-row    { display: flex; gap: 8px; margin-bottom: 6px; font-size: 13px; flex-wrap: wrap; }
.cv-skill-cat    { font-weight: 600; white-space: nowrap; min-width: 160px; }
.cv-skill-list   { color: #555; }

.cv-certs-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cv-cert-item    { font-size: 13px; }
.cv-cert-name    { font-weight: 500; }
.cv-cert-meta    { color: #888; }

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
    .no-print, #page-header, #page-footer, v-app-bar, v-footer,
    v-navigation-drawer, #initial-loading { display: none !important; }
    #cv-document { padding: 0; max-width: 100%; }
    .cv-section-title, .cv-role, .cv-contact a { color: #000 !important; }
    .cv-divider { border-top-color: #000 !important; }
    body { background: #fff !important; }
}
.v-theme--dark .stat-card { background: rgba(255,255,255,0.04) !important; }
.v-theme--light .hero-bg  {
    background: linear-gradient(135deg, #1a1040 0%, #1b2a4a 40%, #0d2a1a 100%);
    opacity: 0.92;
}
.v-theme--light .orb { opacity: 0.3; }
.v-theme--light .stat-card { background: rgba(99,102,241,0.06) !important; }