/* Page transitions, controls, workbench and certificate cards. */
.button,.form button[type=submit],.btn-flat,.admin-btns button{
  position:relative;overflow:hidden;border-radius:18px 18px 18px 5px;
  box-shadow:inset 0 1px 0 #ffffff38;
}
.button:before,.form button[type=submit]:before,.btn-flat:before,.admin-btns button:before{
  content:"";position:absolute;inset:0;width:45%;background:linear-gradient(100deg,transparent,#ffffff35,transparent);
  transform:translateX(-170%) skewX(-20deg);transition:transform .55s ease;pointer-events:none;
}
.button:hover:before,.form button[type=submit]:hover:before,.btn-flat:hover:before,.admin-btns button:hover:before{transform:translateX(320%) skewX(-20deg)}
.menu-toggle{border-radius:14px 14px 14px 4px}
.nav-contact{padding:9px 14px;border:1px solid var(--line);border-radius:14px 14px 14px 4px;transition:background .25s,color .25s}
.nav-contact:hover{background:var(--accent);color:var(--on-accent)}
.capability-strip{position:relative;overflow:hidden}
.capability-strip:after{content:"";position:absolute;height:2px;bottom:0;left:0;width:34%;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:strip-trace 7s linear infinite}
.capability-strip i{animation:strip-star 5s ease-in-out infinite;transition:color .3s}
.capability-strip i:nth-of-type(2){animation-delay:1.4s}.capability-strip i:nth-of-type(3){animation-delay:2.8s}
.capability-strip span{transition:color .3s,transform .3s}.capability-strip span:hover{color:var(--accent);transform:translateY(-2px)}
@keyframes strip-trace{from{transform:translateX(-105vw)}to{transform:translateX(310vw)}}
@keyframes strip-star{50%{transform:rotate(45deg) scale(1.25);color:var(--text)}}
.skull-trigger{position:relative;flex:none;margin-left:10px}
.skull-trigger:after{content:"";position:absolute;bottom:-2px;left:4px;right:4px;height:2px;background:var(--accent);transform:scaleX(.25) rotate(-8deg);transition:transform .25s}
.skull-trigger:hover:after,.skull-trigger:focus-visible:after{transform:scaleX(1) rotate(-8deg)}
.skull-bubble{width:min(300px,calc(100vw - 24px));border-radius:20px 20px 20px 5px;backdrop-filter:blur(14px);background:color-mix(in srgb,var(--raised) 94%,transparent)}
.skull-bubble .aside-line{position:relative;display:block;padding-bottom:8px;clip-path:inset(0 100% 0 0);animation:aside-write .65s .12s steps(16,end) forwards}
.skull-bubble .aside-line:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;animation:aside-underline .45s .58s ease forwards}
@keyframes aside-write{to{clip-path:inset(0)}}
@keyframes aside-underline{to{transform:scaleX(1)}}

/* Animate the first content panel on navigation. */
main{perspective:1800px}
main>:first-child{transform-origin:center top;animation:page-open .8s cubic-bezier(.2,.8,.2,1) both}
main:before{content:"";position:fixed;z-index:45;inset:0 auto 0 0;width:3px;background:var(--accent);box-shadow:0 0 28px var(--accent);pointer-events:none;animation:page-trace .75s ease-out both}
@keyframes page-open{from{opacity:.25;transform:translateY(28px) rotateX(-7deg) scale(.985);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes page-trace{0%{opacity:0;transform:scaleY(0);transform-origin:top}40%{opacity:.9;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1)}}

.future-note{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:4px 15px 15px 4px;padding:14px 16px;margin:4px 0 25px;background:var(--accent-soft)}
.future-note strong{display:block;font:9px var(--mono);letter-spacing:.12em;color:var(--accent);margin-bottom:7px}
.future-note p{font-size:12px;line-height:1.55;color:var(--text)}
.future-pulse{display:block;width:8px;height:8px;margin-top:3px;flex:none;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--bg);animation:future-pulse 2s ease-in-out infinite}
@keyframes future-pulse{50%{box-shadow:0 0 0 9px var(--bg);opacity:.6}}
.work-pipeline{margin-top:48px;padding:24px 28px;display:flex;align-items:center;gap:24px;border:1px solid var(--line);border-radius:5px 26px 26px 26px;background:linear-gradient(120deg,var(--surface),var(--bg));position:relative;overflow:hidden;transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
.work-pipeline:before{content:"";position:absolute;width:180px;height:180px;border:1px solid var(--accent);border-radius:50%;right:-40px;top:-95px;opacity:.25}
.pipeline-mark{font:50px/1 Georgia,serif;color:var(--accent);transform:translateZ(24px)}
.work-pipeline .eyebrow{color:var(--accent);margin-bottom:7px}.work-pipeline p{color:var(--text);font-size:14px;max-width:700px}.pipeline-step{margin-left:auto;white-space:nowrap;font:10px var(--mono);color:var(--accent)}

.workbench-head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin:26px 0 34px}
.workbench-head h2{font-size:clamp(38px,4.5vw,66px)}.workbench-head p{max-width:340px;font-size:15px}
.toolkit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:0}
.toolkit .tool-icon,.toolkit .tool-index{display:block;border:0;border-radius:0;padding:0;background:transparent}
.toolkit .tool-icon:hover,.toolkit .tool-index:hover{background:transparent}
.toolkit .tool-tile{min-height:205px;position:relative;overflow:hidden;padding:22px 24px;border:1px solid var(--line);border-radius:5px 25px 5px 25px;background:linear-gradient(145deg,var(--surface),var(--bg));transform-style:preserve-3d;transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:border-color .3s,box-shadow .3s}
.toolkit .tool-tile:hover{border-color:var(--accent);box-shadow:0 18px 40px #0002}
.tool-tile:before{content:"";position:absolute;width:185px;height:185px;right:-54px;top:-70px;border:1px solid var(--accent);border-radius:50%;opacity:.28;transform:translateZ(5px)}
.tool-tile:after{content:"";position:absolute;inset:auto 0 0;height:4px;background:linear-gradient(90deg,var(--accent),transparent);transform:scaleX(.18);transform-origin:left;transition:transform .45s}
.tool-tile:hover:after{transform:scaleX(1)}
.toolkit .tool-icon{position:absolute;right:23px;top:14px;color:var(--accent);font:45px/1 Georgia,serif;opacity:.6;transform:translateZ(32px) rotate(-10deg);transition:transform .4s,opacity .4s}
.tool-tile:hover .tool-icon{opacity:1;transform:translateZ(42px) rotate(3deg) scale(1.1)}
.toolkit .tool-index{font:9px var(--mono);letter-spacing:.1em;color:var(--accent);transform:translateZ(18px);display:block}
.tool-tile h3{font-size:31px;margin:70px 0 9px;transform:translateZ(24px)}
.tool-tile p{font-size:12px;line-height:1.5;transform:translateZ(15px)}
.toolkit .tool-tile[data-tool=linux] .tool-icon{font-size:52px}.toolkit .tool-tile[data-tool=python] .tool-icon{font:34px var(--mono)}
.toolkit .tool-tile[data-tool=bash] .tool-icon{font:35px var(--mono)}
.learning-note{border-left:2px solid var(--accent);padding:14px 18px;background:var(--surface);border-radius:2px 12px 12px 2px}

.credential-art{overflow:hidden;isolation:isolate;border-radius:5px 22px 5px 22px;background:linear-gradient(145deg,var(--surface),var(--bg))}
.credential-art:after{content:"";position:absolute;left:-20%;right:-20%;top:42%;height:1px;background:var(--accent);opacity:.28;transform:rotate(-21deg)}
.credential-emblem{position:absolute;left:50%;top:47%;width:128px;height:128px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);border-radius:36px 36px 36px 9px;background:radial-gradient(circle at 30% 20%,var(--accent-soft),transparent 72%);color:var(--accent);opacity:.78;transform:translate(-50%,-50%) translateZ(18px) rotate(-9deg);transition:opacity .4s,transform .55s,border-radius .55s}
.credential-emblem:before{content:"";position:absolute;inset:-10px;border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);border-radius:44px 44px 44px 12px;transform:rotate(9deg)}
.credential-emblem svg{width:85px;height:85px;display:block;filter:drop-shadow(0 5px 12px color-mix(in srgb,var(--accent) 24%,transparent))}
.credential-emblem img{width:92px;height:92px;display:block;object-fit:contain;filter:drop-shadow(0 5px 12px #0003)}
.certificate-card:hover .credential-emblem{opacity:1;transform:translate(-50%,-54%) translateZ(28px) rotate(0) scale(1.06);border-radius:38px 12px 38px 12px}
.credential-art strong,.credential-art .credential-number,.credential-art>span:last-child,.credential-seal,.credential-emblem{z-index:1}
.credential-art strong{font-size:26px;max-width:90%;overflow-wrap:anywhere;transform:translateZ(26px)}
.credential-art .credential-seal{font-size:25px}

@media(max-width:850px){.toolkit{grid-template-columns:repeat(2,minmax(0,1fr))}.workbench-head{align-items:start}.work-pipeline{gap:15px}}
@media(max-width:600px){.workbench-head{display:block}.workbench-head p{margin-top:18px}.toolkit{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.toolkit .tool-tile{min-height:165px;padding:15px}.tool-tile h3{font-size:22px;margin-top:55px}.tool-tile p{font-size:11px}.toolkit .tool-icon{right:14px;font-size:33px}.toolkit .tool-index{font-size:7px}.work-pipeline{align-items:flex-start;padding:20px}.pipeline-mark{font-size:34px}.pipeline-step{display:none}.work-pipeline p{font-size:12px}}
@media(max-width:390px){.toolkit{grid-template-columns:1fr}.toolkit .tool-tile{min-height:150px}}
@media(prefers-reduced-motion:reduce){main>:first-child,main:before,.future-pulse,.capability-strip:after,.capability-strip i,.skull-bubble .aside-line,.skull-bubble .aside-line:after{animation:none;clip-path:none}.tool-icon,.tool-tile:after,.button:before{transition:none}}

/* Banking work cards shared by Home and About. */
.banking-programs{border-top:1px solid var(--line)}
.program-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.program-card{position:relative;overflow:hidden;padding:32px;border:1px solid var(--line);border-radius:6px 30px 6px 30px;background:linear-gradient(145deg,var(--surface),var(--bg));transform-style:preserve-3d;transform:perspective(1300px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:border-color .3s,box-shadow .3s}
.program-card:hover{border-color:var(--accent)}
.program-card:before{content:"";position:absolute;right:-80px;top:-125px;width:280px;height:280px;border:1px solid var(--accent);border-radius:50%;opacity:.2;pointer-events:none}
.program-top{display:flex;justify-content:space-between;align-items:flex-start;color:var(--accent);transform:translateZ(20px)}
.program-number{font:10px var(--mono);letter-spacing:.11em}.program-orbit{font:52px/1 Georgia,serif;opacity:.55}
.program-card h3{font-size:clamp(26px,2.2vw,32px);margin:23px 0 12px;max-width:500px;transform:translateZ(25px)}
.program-intro{font-size:14px;line-height:1.7;max-width:480px;margin-bottom:28px;transform:translateZ(18px)}
.program-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.program-list li{display:grid;grid-template-columns:95px minmax(0,1fr);gap:20px;padding:17px 0;border-bottom:1px solid var(--line)}
.program-list li>span{font:9px/1.6 var(--mono);letter-spacing:.08em;color:var(--accent);padding-top:3px}
.program-list p{font-size:13px;line-height:1.55;color:var(--text)}
.program-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}
.program-tags span{font:9px var(--mono);color:var(--muted);border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:8px 10px}
@media(max-width:850px){.program-grid{grid-template-columns:1fr}.program-card{padding:26px}}
@media(max-width:600px){.program-card{padding:22px}.program-list li{grid-template-columns:1fr;gap:5px;padding:14px 0}.program-card h3{font-size:29px}}