/* Overview hero and quick links. */

.hero {
    position: relative; overflow: hidden;
    padding: 26px 26px 24px; border-radius: var(--radius-lg);
    border: 1px solid var(--border-strong);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(139, 92, 246, .5), transparent 55%),
        radial-gradient(70% 120% at 70% 120%, rgba(240, 166, 232, .2), transparent 60%),
        radial-gradient(90% 120% at 0% 100%, rgba(89, 195, 245, .3), transparent 55%),
        var(--glass), var(--surface);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow);
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.hero-orb {
    position: absolute; right: -60px; top: -80px; width: 280px; height: 280px; border-radius: 50%; pointer-events: none;
    background: conic-gradient(from 0deg, rgba(139, 92, 246, .0), rgba(139, 92, 246, .35), rgba(89, 195, 245, .3), rgba(240, 166, 232, .25), rgba(139, 92, 246, .0));
    filter: blur(40px); animation: spin 18s linear infinite;
}
.hero-text { position: relative; flex: 1 1 320px; display: flex; flex-direction: column; gap: 6px; }
.hero-date { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hero h2 { font-size: 28px; font-weight: 700; letter-spacing: -.025em; }
.hero h2 span { color: var(--accent); }
.hero p { margin: 0; color: var(--muted); max-width: 52ch; }

.quick-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.quick-link { flex-direction: row; align-items: center; gap: 12px; padding: 14px; }
.quick-link .nav-icon { width: 38px; height: 38px; border-radius: 11px; background: var(--nebula-soft); color: var(--text); transition: transform var(--t) var(--ease-spring), background var(--t); }
.quick-link:hover .nav-icon { transform: rotate(-6deg) scale(1.08); background: var(--nebula); color: #fff; }
.quick-link .ql-text { display: flex; flex-direction: column; min-width: 0; }
.quick-link .ql-label { font-weight: 700; }
.quick-link .ql-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 960px) { .hero { padding: 20px; } .hero h2 { font-size: 22px; } }

/* My work */
.my-work h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.work-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.work-list li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); transition: border-color var(--t-fast), transform var(--t) var(--ease-out); }
.work-list li:hover { border-color: var(--border-strong); transform: translateX(2px); }
.work-list a { color: var(--text); font-weight: 600; }

/* ---------- Artwork and images ---------- */

/* The built-in banner art sits on the right and fades into the greeting. */
.hero { min-height: 170px; }
.hero-art {
    position: absolute; right: 0; bottom: 0; height: 100%; width: min(62%, 640px); pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%); mask-image: linear-gradient(90deg, transparent, #000 38%);
}
.hero-art .ha-planet { animation: float 9s var(--ease-in-out) infinite alternate; transform-origin: 470px 80px; }
.hero-art .ha-star { animation: twinkle 4s ease-in-out infinite alternate; }
.hero-art .ha-moon { animation: float 7s var(--ease-in-out) infinite alternate-reverse; }
@keyframes float { from { transform: translateY(0); } to { transform: translateY(-6px); } }
:root[data-theme="light"] .hero-art { opacity: .8; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .hero-art { opacity: .8; } }

/* A card with an image: the picture under a shade, so the text stays readable. */
.has-image { background-image: linear-gradient(110deg, rgba(8, 9, 26, var(--card-shade, .72)), rgba(8, 9, 26, calc(var(--card-shade, .72) - .35))), var(--card-image) !important; background-size: cover !important; background-position: center !important; }
.has-image, .has-image .stat-label, .has-image .stat-sub, .has-image .ql-sub, .has-image .hero-date, .has-image p { color: #f4f5ff; }
.has-image .stat-label, .has-image .stat-sub, .has-image .ql-sub, .has-image .hero-date, .has-image p { opacity: .85; }
.hero.has-image { min-height: 200px; }
.hero.has-image h2 { text-shadow: 0 2px 16px rgba(0, 0, 0, .45); }

/* Stat cards: a large faint icon in the corner. */
.stat-mark {
    position: absolute; z-index: 0; right: -14px; bottom: -22px; color: var(--text); opacity: .07;
    transform: rotate(-12deg); transition: transform var(--t-slow) var(--ease-spring), opacity var(--t);
}
.stat:hover .stat-mark { transform: rotate(-4deg) scale(1.08); opacity: .12; }

/* Quick links: each tile gets its own colour. */
.quick-link { overflow: hidden; }
.ql-0 { --ql: 139, 92, 246; } .ql-1 { --ql: 89, 195, 245; } .ql-2 { --ql: 240, 166, 232; } .ql-3 { --ql: 94, 230, 160; }
.quick-link:not(.has-image) { background: radial-gradient(120% 140% at 0% 0%, rgba(var(--ql), .22), transparent 60%), var(--glass), var(--surface); }
.quick-link .nav-icon { background: rgba(var(--ql, 139, 92, 246), .2); color: rgb(var(--ql, 139, 92, 246)); box-shadow: inset 0 0 0 1px rgba(var(--ql, 139, 92, 246), .35); }
.quick-link:hover .nav-icon { background: rgb(var(--ql, 139, 92, 246)); color: #fff; }
.quick-link:hover { border-color: rgba(var(--ql, 139, 92, 246), .55); }