/* React Bits adaptations. Copyright (c) 2026 David Haz.
   See assets/vendor/react-bits/LICENSE.md. Desktop portfolio integration. */

/* Target Cursor: 56px idle frame, 21px corners, 5px stroke. */
.rb-cursor{position:fixed;inset:0;z-index:2147483647;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity .15s}
.rb-cursor.is-visible{opacity:1}.rb-cursor i{position:absolute;left:0;top:0;box-sizing:border-box;width:21px;height:21px;border:5px solid #fff;will-change:transform}
.rb-cursor i:nth-child(1){border-right:0;border-bottom:0}.rb-cursor i:nth-child(2){border-left:0;border-bottom:0}.rb-cursor i:nth-child(3){border-left:0;border-top:0}.rb-cursor i:nth-child(4){border-right:0;border-top:0}
.rb-cursor b{position:absolute;width:7px;height:7px;border-radius:50%;background:#fff;will-change:transform}
@media(pointer:fine){html.rb-cursor-active,html.rb-cursor-active *{cursor:none!important}}

/* Squish Switch. Position and volume-preserving stretch are spring driven. */
body.cv08 .view-toggle{touch-action:none;overflow:visible;user-select:none;transition:background .26s,box-shadow .2s}
body.cv08 .view-toggle.rb-squish .toggle-knob{transform:translateX(var(--switch-x,62px)) scale(var(--switch-sx,1),var(--switch-sy,1));transition:none!important;will-change:transform}
body.cv08 .view-toggle:active .toggle-knob{filter:brightness(.97)}

/* Horizontal LineSidebar: original icons/labels, subtle centred scale without lift.
   Adapted from React Bits LineSidebar (MIT). Hit areas stay fixed. */
body.cv08{--bottom-nav-height:100px}
body.cv08 .rail{overflow:visible;height:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));user-select:none}
body.cv08 .rail nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:0;width:min(1040px,100%);max-width:100%;height:84px;margin:0 auto;padding:0;overflow:visible}
body.cv08 .rail .nav-track{display:none}
body.cv08 .rail nav a{--icon-cutout:#191919;--line-effect:0;position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:12px;min-width:0;width:auto;height:100%;padding:0 6px;border:0;border-radius:0;background:none;box-shadow:none;color:color-mix(in srgb,#d6f75c calc(var(--line-effect)*100%),#c7cec8);transform:none;transition:none;text-decoration:none;text-shadow:none}
body.cv08 .rail nav a:is(.active,:hover,:focus-visible){--icon-cutout:#191919;background:none;border:0;box-shadow:none;color:color-mix(in srgb,#d6f75c calc(var(--line-effect)*100%),#c7cec8);text-shadow:none}
body.cv08 .rail nav a .dock-icon-tile,body.cv08 .rail nav a.active .dock-icon-tile{display:flex;flex:0 0 44px;width:44px;height:44px;align-items:center;justify-content:center;border-radius:0;background:none;box-shadow:none;transform:scale(calc(1 + var(--line-effect)*.06));transform-origin:center}
body.cv08 .rail nav a svg{display:block;width:40px;height:40px;stroke:none;filter:none}
body.cv08 .rail nav a span:not(.dock-icon-tile){line-height:1.4;font-weight:850;white-space:nowrap;transform:scale(calc(1 + var(--line-effect)*.06));transform-origin:center}
body.cv08 .rail nav a::before,body.cv08 .rail nav a::after,body.cv08 .rail nav a:not(:last-child)::after{content:none;display:none}
body.cv08 .rail nav a:focus-visible{outline:2px solid #d6f75c;outline-offset:-3px}
@media(max-width:760px){
 body.cv08 .rail nav{height:64px}
 body.cv08 .rail nav a{gap:4px;padding:0;flex-direction:column}
 body.cv08 .rail nav a .dock-icon-tile{width:28px;height:28px;flex-basis:28px}
 body.cv08 .rail nav a svg{width:28px;height:28px}
}
@media(prefers-reduced-motion:reduce){
 body.cv08 .rail nav a span{transform:none!important}
 body.cv08 .rail nav a::before,body.cv08 .rail nav a::after{transform:none}
}

/* Accordion Gallery in a raised, recessed monitor bezel. */
.ag-media,.ag-caption,.ag-tab-label{display:none}.projects .project{user-select:none}
body.cv08 #work-projects.gallery{position:relative;padding:18px 18px 36px;border:2px solid #101111;border-radius:22px;background:linear-gradient(145deg,#ffffff0b,#0004),url('assets/cv08/metal-dust.webp') 0 0/700px auto,#242525;background-blend-mode:normal,soft-light,normal;box-shadow:inset 0 2px 1px #777b7b,inset 2px 0 1px #ffffff16,inset 0 -5px 2px #0b0c0c,0 2px 0 #050606,0 8px 0 #121313,0 20px 28px #0007}
body.cv08 #work-projects.gallery::after{content:'';position:absolute;bottom:13px;left:calc(50% - 28px);width:56px;height:5px;border-radius:4px;background:#caff60;box-shadow:0 0 8px #caff6080,0 1px #efffba}
body.cv08 #work-projects.gallery .project-track{display:flex;align-items:stretch;gap:8px;height:clamp(280px,min(29vw,calc(100svh - 440px)),560px);padding:8px;perspective:1200px;background:#090d0e;border:2px solid #151819;border-radius:12px;box-shadow:0 1px 1px #fff2,inset 0 4px 9px #000;overflow:hidden}
body.cv08 #work-projects.gallery .project{position:relative;display:block;flex:1 1 0;width:0;min-width:0;max-width:none;margin:0;padding:0;overflow:hidden;border-radius:5px;background:#151e23;border:1px solid #ffffff16;transform:perspective(1000px) rotateY(var(--ag-tilt,8deg));transform-origin:center;transition:flex-grow .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1),border-color .4s;box-shadow:0 0 14px #0008;isolation:isolate}
body.cv08 #work-projects.gallery .project.is-active{flex-grow:4.33333;border-color:#ffffff55;z-index:2}
body.cv08 #work-projects.gallery .case-space,body.cv08 #work-projects.gallery .project-info,body.cv08 #work-projects.gallery .project-elements,body.cv08 #work-projects.gallery .project-description,body.cv08 #work-projects.gallery .project-arrow{display:none}
body.cv08 #work-projects.gallery .ag-media{display:block;position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ag-media img{position:absolute;left:50%;top:0;height:100%;width:var(--ag-media-width,650px);max-width:none;object-fit:cover;object-position:var(--pos,center);transform:translateX(calc(-50% + var(--ag-drift,0px)));filter:grayscale(.7) brightness(.72);transition:transform .6s cubic-bezier(.22,1,.36,1),filter .6s}
.ag-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0000 38%,#080d13d9 100%);opacity:.85;transition:opacity .6s}
.project.is-active .ag-media img{filter:grayscale(0) brightness(1)}.project.is-active .ag-media::after{opacity:1}
body.cv08 #work-projects.gallery .ag-caption{position:absolute;display:flex;flex-direction:column;align-items:flex-start;left:26px;bottom:30px;right:20px;color:#fff;text-align:left;opacity:0;transform:translateY(18px);transition:opacity .3s,transform .5s;pointer-events:none}
.ag-caption strong{font:800 clamp(25px,2.15vw,42px)/1.15 MiSans,system-ui,sans-serif;text-shadow:0 2px 10px #0008;white-space:nowrap}
.ag-caption small{font-size:13px;letter-spacing:1px;color:#d1dcd9;margin-top:10px;white-space:nowrap}
.ag-caption::before{content:'';width:34px;height:4px;background:#d6ff5d;margin-bottom:15px;border-radius:2px}
body.cv08 #work-projects.gallery .project.is-active .ag-caption{opacity:1;transform:translateY(0);transition-delay:.12s}
body.cv08 #work-projects.gallery .ag-tab-label{display:block;position:absolute;left:50%;bottom:24px;writing-mode:vertical-rl;text-orientation:upright;transform:translateX(-50%);font:800 clamp(17px,1.15vw,22px)/1.2 MiSans,system-ui,sans-serif;letter-spacing:.16em;color:#eef1ee;text-shadow:0 2px 8px #000;white-space:nowrap;pointer-events:none;opacity:1;transition:opacity .18s}
body.cv08 #work-projects.gallery .project.is-active .ag-tab-label{opacity:0}
body.cv08 #work-projects.gallery .project:focus-visible{outline:3px solid #dcff60;outline-offset:-4px}

/* Profile Card: tilt + foil sheen over the existing CD art. */
body.cv08 .projects .project{--pointer-x:50%;--pointer-y:50%;--tilt-x:0deg;--tilt-y:0deg;--foil-opacity:0;perspective:1000px}
body.cv08 .projects .project .jewel,body.cv08 .projects .project:hover .jewel,body.cv08 .projects .project:focus-visible .jewel{transform:rotateX(var(--tilt-x)) rotateY(calc(-4deg + var(--tilt-y))) rotateZ(-2deg);transition:none;will-change:transform;box-shadow:0 15px 22px #0006}
body.cv08 .projects .project .case-lid,body.cv08 .projects .project:hover .case-lid,body.cv08 .projects .project:focus-visible .case-lid{transform:translateZ(3px);filter:none}
body.cv08 .projects .project .case-disc,body.cv08 .projects .project:hover .case-disc,body.cv08 .projects .project:focus-visible .case-disc{transform:translateZ(1px);filter:none}
.rb-foil,.rb-glare{position:absolute;inset:2px;border-radius:2px;pointer-events:none;z-index:8;transform:translateZ(5px);opacity:var(--foil-opacity,0);transition:opacity .35s;overflow:hidden}
.rb-foil{background-image:repeating-linear-gradient(0deg,#ff77aa 5%,#ffe699 10%,#b7ffaf 15%,#88eeff 20%,#be99ff 25%,#ff77aa 30%),repeating-linear-gradient(-45deg,#0e152e 0%,#8bacae 3.8%,#8dc7c7 4.5%,#0e152e 5%,#0e152e 12%),radial-gradient(farthest-corner at var(--pointer-x) var(--pointer-y),#0000,#000a);background-size:500% 500%,300% 300%,200% 200%;background-position:50% var(--pointer-y),var(--pointer-x) var(--pointer-y),center;background-blend-mode:color,hard-light,normal;mix-blend-mode:color-dodge;filter:brightness(.72) contrast(1.45) saturate(.6)}
.rb-glare{background:radial-gradient(farthest-corner at var(--pointer-x) var(--pointer-y),#edf7ff80 0%,#467da92b 48%,#091a3aaa 100%);mix-blend-mode:overlay}
.rb-specular{position:absolute;left:-20px;top:-20px;z-index:12;transform:translateZ(6px);pointer-events:none;max-width:none!important;filter:drop-shadow(0 0 3px #d4f9ff55)}

/* Chroma is local to the hovered display; resting cards stay muted. */
.career-grid.rb-chroma{position:relative;isolation:isolate}
.rb-chroma .cv-career-card{--spot-x:50%;--spot-y:50%;isolation:isolate}
.rb-chroma-spot{position:absolute;inset:9% 5% 26%;border:0;outline:0;box-shadow:none;border-radius:5%;background:radial-gradient(230px circle at var(--spot-x) var(--spot-y),#ffffff12,transparent 75%);opacity:0;transition:opacity .25s;pointer-events:none;z-index:6;mix-blend-mode:screen}
.cv-career-card:hover .rb-chroma-spot{opacity:1}

/* Refine Frame: actual load state, one coarse-to-fine pass per opening. */
body.cv08 .reader.rb-refining .reader-sheet{opacity:1;transform:none;filter:none;min-height:65vh}
.rb-refine-frame{position:absolute;z-index:5;inset:0 0 auto;height:min(78vh,950px);overflow:hidden;pointer-events:none;background:#11191d;opacity:1;transition:opacity .22s}
.rb-refine-frame canvas{display:block;width:100%;height:100%;opacity:0}.rb-refine-frame canvas.has-frame{opacity:1}
.rb-refine-frame.is-complete{opacity:0}
.rb-refine-status{position:absolute;z-index:6;right:22px;top:22px;display:flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid #ffffff29;border-radius:30px;background:#111c22c9;backdrop-filter:blur(12px);font:600 12px/1.3 system-ui,sans-serif;color:#edf5f2;box-shadow:0 2px 12px #0004}
.rb-refine-status i{width:6px;height:6px;background:#d4ff65;border-radius:50%;box-shadow:0 0 9px #d4ff6570}
.rb-refine-frame[data-stage=loading] .rb-refine-status i{animation:rb-load-pulse 1.1s ease-in-out infinite}
.rb-refine-hidden{visibility:hidden}.rb-refine-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(6px) saturate(.65);opacity:.7}
@keyframes rb-load-pulse{50%{opacity:.3}}
body.cv08 .reader-sheet{position:relative}
@media(prefers-reduced-motion:reduce){.rb-cursor{display:none}html.rb-cursor-active,html.rb-cursor-active *{cursor:revert!important}.rb-foil,.rb-glare{transition:none}body.cv08 #work-projects.gallery .project,.ag-media img,.ag-caption{transition:none!important}.rb-refine-frame{transition:none}}
