/* Visual enhancements: lightweight CSS only, with motion reduced when requested. */
body {
    background:
        radial-gradient(circle at 92% 4%, rgba(232, 93, 63, .11), transparent 21rem),
        radial-gradient(circle at 5% 38%, rgba(24, 113, 146, .08), transparent 24rem),
        var(--paper);
}

.site-header {
    box-shadow: 0 10px 30px rgba(15, 23, 42, .03);
}

nav a:not(.nav-contact) { position: relative; }
nav a:not(.nav-contact)::after {
    position: absolute;
    right: 0;
    bottom: -5px;
    left: 0;
    height: 2px;
    background: var(--accent);
    content: '';
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .25s ease;
}
nav a:not(.nav-contact):hover::after { transform: scaleX(1); transform-origin: left; }
.nav-contact { border-radius: 999px; transition: background .2s, color .2s, transform .2s; }
.nav-contact:hover { background: var(--dark); color: #fff; transform: translateY(-2px); }

.hero { position: relative; overflow: hidden; }
.hero-copy { position: relative; z-index: 1; }
.hero-copy > * { animation: rise .75s both; }
.hero-copy .eyebrow { animation-delay: .05s; }
.hero-copy h1 { animation-delay: .13s; }
.hero-copy .hero-intro { animation-delay: .23s; }
.hero-copy .hero-actions { animation-delay: .32s; }
.hero h1 { text-wrap: balance; }
.hero h1 em { position: relative; white-space: nowrap; }
.hero h1 em::after {
    position: absolute;
    right: 1%; bottom: -.15em; left: 1%; height: .1em;
    border-radius: 50%; background: rgba(232, 93, 63, .25); content: '';
}
.hero-glow { position: absolute; z-index: 0; border-radius: 50%; filter: blur(3px); pointer-events: none; }
.glow-one { width: 260px; height: 260px; right: 17%; top: 11%; border: 1px solid rgba(232, 93, 63, .3); box-shadow: inset 0 0 0 38px rgba(232, 93, 63, .035); animation: orbit 13s linear infinite; }
.glow-two { width: 120px; height: 120px; right: 6%; bottom: 13%; background: radial-gradient(circle, rgba(24, 113, 146, .15), transparent 66%); animation: float 5s ease-in-out infinite; }

.hero-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.13);
    box-shadow: 18px 20px 0 rgba(232, 93, 63, .92), 0 22px 50px rgba(11, 16, 32, .22);
    animation: card-in .8s .18s both, float 6s 1.2s ease-in-out infinite;
}
.hero-card::before {
    position: absolute; width: 220px; height: 220px; top: -120px; right: -110px;
    border: 1px solid rgba(255,255,255,.15); border-radius: 50%; content: '';
}
.hero-card > * { position: relative; z-index: 1; }
.role-icon { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: 27px; border-radius: 12px; background: var(--accent); color: #fff; font-size: 22px; transform: rotate(10deg); }
.role-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:38px; }
.role-date { margin: 0; }
.hero-card .status { display:flex; align-items:center; gap:6px; color: #d1d6e2; font: 10px var(--mono); text-transform:uppercase; white-space:nowrap; }
.status i { width: 7px; height: 7px; display:block; border-radius:50%; background:#81d9a4; box-shadow: 0 0 0 4px rgba(129,217,164,.12); animation: pulse 1.8s infinite; }

.section-label::after { width: 55px; height: 1px; align-self: center; background: currentColor; content: ''; opacity: .45; }
h2 { text-wrap: balance; }
.portrait { position:relative; box-shadow: -12px 14px 0 var(--accent); overflow:hidden; }
.portrait::after { position:absolute; right:18px; bottom:18px; width:40px; height:40px; border:1px solid #fff; border-radius:50%; content:''; }
.portrait img { transition: transform .7s ease; }
.portrait:hover img { transform: scale(1.045); }
.facts div { transition: border-color .2s, transform .2s; }
.facts div:hover { border-color: var(--accent); transform: translateY(-3px); }

.expertise { position:relative; overflow:hidden; }
.expertise::before { position:absolute; right:-210px; bottom:-230px; width:570px; height:570px; border:1px solid rgba(255,255,255,.08); border-radius:50%; content:''; }
.expertise-grid article { position:relative; transition: background .25s, transform .25s; }
.expertise-grid article::before { display:grid; width:36px; height:36px; place-items:center; border:1px solid #58647a; border-radius:50%; color:var(--accent); content:'⌘'; font:20px var(--serif); transition: background .25s, color .25s, transform .25s; }
.expertise-grid article:nth-child(2)::before { content:'◫'; }.expertise-grid article:nth-child(3)::before { content:'✦'; }.expertise-grid article:nth-child(4)::before { content:'↗'; }
.expertise-grid article:hover { background: rgba(255,255,255,.04); transform: translateY(-6px); }
.expertise-grid article:hover::before { background:var(--accent); border-color:var(--accent); color:#fff; transform:rotate(12deg); }
.tech-stack span { transition: background .2s, border-color .2s, transform .2s; }
.tech-stack span:hover { background:var(--accent); border-color:var(--accent); color:#fff; transform:translateY(-3px); }

.timeline article { transition: padding .25s, background .25s; }
.timeline article:hover { padding-left:18px; background:rgba(232,93,63,.035); }
.timeline .time::before { display:inline-block; width:8px; height:8px; margin-right:9px; border:1px solid var(--accent); border-radius:50%; content:''; }
.timeline .current .time::before { background:var(--accent); box-shadow:0 0 0 5px rgba(232,93,63,.13); }

.project { position:relative; overflow:hidden; border-radius:2px; box-shadow:0 10px 24px rgba(15,23,42,.035); transition: transform .35s, box-shadow .35s; }
.project::after { position:absolute; top:18px; right:18px; display:grid; width:42px; height:42px; place-items:center; border-radius:50%; background:#fff; color:var(--dark); box-shadow:0 4px 14px rgba(0,0,0,.14); content:'↗'; font-size:19px; opacity:0; transform:translateY(9px); transition:opacity .25s,transform .25s; }
.project:hover { transform:translateY(-9px); box-shadow:0 24px 42px rgba(15,23,42,.14); }.project:hover::after { opacity:1; transform:translateY(0); }
.project>img { transition: transform .55s ease, filter .55s; }.project:hover>img { transform:scale(1.045); filter:saturate(1.15); }
.project-info a { position:relative; transition:color .2s; }.project-info a:hover { color:var(--accent); }

.gallery figure { overflow:hidden; position:relative; background:var(--dark); }.gallery img { transition:transform .65s ease,opacity .4s; }.gallery figure:hover img { transform:scale(1.08); opacity:.76; }.gallery figcaption { position:absolute; right:0; bottom:0; left:0; padding:28px 15px 13px; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.68)); transform:translateY(3px); transition:transform .25s; }.gallery figure:hover figcaption { transform:translateY(0); }

.contact-panel { position:relative; overflow:hidden; box-shadow:14px 14px 0 var(--accent); }.contact-panel::after { position:absolute; right:-70px; bottom:-90px; width:260px; height:260px; border:1px solid rgba(255,255,255,.16); border-radius:50%; content:''; }.contact-panel>* { position:relative; z-index:1; }.contact-details a::before { display:inline-grid; width:24px; margin-right:8px; color:var(--accent); content:'↗'; font:13px var(--mono); }.contact-details a[href^="mailto"]::before { content:'✉'; }.contact-details a[href^="tel"]::before { content:'⌕'; }

@keyframes rise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes card-in { from { opacity:0; transform:translate(24px,20px); } to { opacity:1; transform:translate(0,0); } }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes orbit { to { transform:rotate(360deg); } }
@keyframes pulse { 50% { box-shadow:0 0 0 8px rgba(129,217,164,0); } }
@media (max-width:800px) { .hero-glow { display:none; }.hero-card { box-shadow:10px 11px 0 var(--accent); }.expertise-grid article::before { margin-bottom:20px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }