/* Lightweight, framework-free adaptations of Magic UI's Border Beam, Magic Card,
   Dot Pattern and Blur Fade. Component references:
   https://magicui.design/docs/components/border-beam
   https://magicui.design/docs/components/magic-card
   https://magicui.design/docs/components/dot-pattern
   https://magicui.design/docs/components/blur-fade
   No React runtime or build step is required by this static site. */

:root {
    --glass: var(--surface);
    --glass-edge: color-mix(in srgb, var(--ink) 13%, transparent);
    --glass-light: rgba(255, 255, 255, 0.3);
    --glass-rim: color-mix(in srgb, var(--ink) 6%, transparent);
    --glass-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent 35%, transparent 75%, rgba(255, 255, 255, 0.025));
    --glass-shadow: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* Solid surfaces are the fallback when backdrop filtering is unavailable. */
.glass-panel {
    background: var(--surface);
    border: 1px solid var(--glass-edge);
    box-shadow: inset 1px 1px 0 var(--glass-light), inset -1px -1px 0 var(--glass-rim), 0 12px 36px -24px var(--glass-shadow);
    border-radius: 20px;
}

.site-header {
    top: 16px;
    width: min(calc(100% - 32px), 1160px);
    margin: 16px auto 0;
    border: 1px solid var(--glass-edge);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: inset 1px 1px 0 var(--glass-light), inset -1px -1px 0 var(--glass-rim), 0 8px 24px -20px var(--glass-shadow);
}
.site-header .nav { padding-inline: 20px; }
.site-header.is-scrolled { border-color: var(--glass-edge); }
.nav-links { gap: 24px; }

/* Clear glass: a light tint, minimal diffusion, and crisp specular edges. */
@supports (backdrop-filter: blur(5px)) or (-webkit-backdrop-filter: blur(5px)) {
    :root { --glass: color-mix(in srgb, var(--surface) 24%, transparent); }
    .glass-panel, .site-header {
        background: var(--glass-sheen), var(--glass);
        -webkit-backdrop-filter: blur(5px) saturate(140%);
        backdrop-filter: blur(5px) saturate(140%);
    }
}

html { scroll-padding-top: calc(var(--header-h) + 48px); }
.sticky-intro { top: calc(var(--header-h) + 64px); }
.btn, .icon-btn { border-radius: 9px; }
.btn-ghost { background: color-mix(in srgb, var(--surface) 50%, transparent); }

/* Dot Pattern: a quiet, masked field of dots behind the portrait. */
.hero {
    position: relative;
    isolation: isolate;
    padding-top: clamp(56px, 8vh, 88px);
}
.hero-atmosphere {
    position: absolute;
    z-index: -1;
    inset: -100px 0 -100px;
    overflow: hidden;
    pointer-events: none;
    background: radial-gradient(ellipse at 78% 44%, var(--accent-soft), transparent 58%);
}
.hero-atmosphere::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--line-strong) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: radial-gradient(ellipse at 78% 44%, #000, transparent 64%);
    opacity: 0.7;
}
.hero-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr); }
.hero-title { font-size: clamp(3.75rem, 10vw, 8rem); }
.hero-lede { max-width: 40ch; }
.hero-portrait {
    width: min(100%, 370px);
    aspect-ratio: auto;
    padding: 10px;
    overflow: hidden;
    box-shadow: inset 1px 1px 0 var(--glass-light), inset -1px -1px 0 var(--glass-rim), 0 20px 48px -32px var(--glass-shadow);
}
.hero-portrait img {
    height: auto;
    aspect-ratio: 1;
    border-radius: 12px;
    animation: none;
}
.portrait-caption {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 14px 12px;
}
.portrait-company { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; }
.portrait-disciplines { margin-top: 3px; font-size: 0.875rem; color: var(--muted); }
.portrait-credentials {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--glass-edge);
    font: 0.75rem var(--font-mono);
    letter-spacing: 0.05em;
    color: var(--accent);
}
.portrait-credentials span { color: var(--line-strong); }
.portrait-credentials .ph { margin-left: auto; font-size: 1.1rem; transition: transform 200ms var(--ease); }
.portrait-credentials:hover .ph { transform: translate(2px, 2px); }

/* Border Beam: a short light trail follows the perimeter, masked to its edge.
   Runs once on entrance; no perpetual motion while reading the resume. */
.border-beam {
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    border-radius: inherit;
    pointer-events: none;
    overflow: hidden;
    mask: linear-gradient(#000, #000) padding-box, linear-gradient(#000, #000);
    mask-composite: exclude;
}
.border-beam::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, var(--accent), transparent 70%);
    offset-path: rect(0 auto auto 0 round 20px);
    offset-distance: 12%;
    opacity: 0.7;
}

/* Magic Card: one restrained spotlight per surface, controlled by pointer position. */
.magic-card { position: relative; isolation: isolate; }
.magic-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(280px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), var(--accent-soft), transparent 75%);
    opacity: 0;
    transition: opacity 300ms ease;
}
.magic-card.is-pointer-active::before, .magic-card:focus-within::before { opacity: 1; }
.magic-card:hover, .magic-card:focus-within { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); }
.certs { position: relative; isolation: isolate; }
.certs::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -40px -10px;
    background: radial-gradient(ellipse at 20% 50%, var(--accent-soft), transparent 65%);
    pointer-events: none;
}
.cert-feature {
    background: var(--glass-sheen), var(--glass);
    color: var(--ink);
}
.cert-feature .cert-code { color: var(--accent); }
.cert-feature .cert-issuer, .cert-feature .cert-desc { color: var(--muted); }
.contact-panel {
    background: var(--glass-sheen), var(--glass);
}

/* Blur Fade: builds on the existing progressive reveal observer. */
@media (prefers-reduced-motion: no-preference) {
    .border-beam::after { animation: border-beam 4s ease-in-out 1 both; }
    .js .reveal {
        filter: blur(5px);
        transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), filter 0.8s var(--ease), border-color 0.3s ease;
    }
    .js .reveal.is-visible, .js .reveal:focus-within { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes border-beam {
    from { offset-distance: 12%; }
    to { offset-distance: 112%; }
}
@keyframes rise {
    from { opacity: 0; transform: translateY(14px); filter: blur(5px); }
    to { opacity: 1; transform: none; filter: blur(0); }
}

@media (max-width: 1000px) and (min-width: 861px) {
    .wordmark-name { display: none; }
    .nav-links { gap: 20px; }
}
@media (max-width: 860px) {
    .site-header { top: 10px; margin-top: 10px; width: calc(100% - 24px); }
    .site-header .nav { padding-inline: 12px; }
    .nav-links { top: calc(var(--header-h) + 8px); border: 1px solid var(--glass-edge); border-radius: 16px; box-shadow: 0 16px 32px -16px var(--glass-shadow); }
    .hero-grid { grid-template-columns: 1fr; gap: 32px; }
    .hero-portrait { display: grid; grid-template-columns: 100px 1fr; gap: 18px; width: min(100%, 400px); margin: 0; padding: 10px; border-radius: 18px; }
    .hero-portrait img { align-self: center; border-radius: 10px; }
    .portrait-caption { padding: 6px 6px 6px 0; justify-content: center; }
    .portrait-company { font-size: 1rem; }
    .portrait-disciplines { font-size: 0.75rem; }
    .portrait-credentials { margin-top: 10px; padding-top: 10px; font-size: 0.7rem; }
    .hero { padding-top: 40px; }
    .hero-atmosphere { inset: -80px 0 -60px; }
}
@media (max-width: 360px) {
    .hero-portrait { grid-template-columns: 76px 1fr; gap: 12px; }
    .portrait-disciplines { max-width: 18ch; }
}
@media (prefers-reduced-motion: reduce) {
    .magic-card::before { display: none; }
    .portrait-credentials .ph, .magic-card { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
    .glass-panel, .site-header { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media print {
    .hero-atmosphere, .border-beam, .magic-card::before, .certs::before { display: none; }
    .glass-panel { background: #fff; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .hero-portrait { display: block; padding: 0; border: 0; width: 120px; }
    .portrait-caption { display: none; }
    .js .reveal { filter: none !important; }
    .rise, .hero-portrait, .hero-portrait img { animation: none; }
}