/*══════════════════════════════════════════════════════════════════════════
  ARNAV RAJPUROHIT — PORTFOLIO
  ──────────────────────────────────────────────────────────────────────────
  EVERYTHING YOU'D EVER WANT TO RECOLOUR LIVES IN SECTION 1 BELOW.
  Change a hex there and it updates across the whole site — text, borders,
  glows, cursor, background particles, gradients, buttons, all of it.
  Nothing below section 1 contains a hard-coded colour.
══════════════════════════════════════════════════════════════════════════*/

/*═══ 1 ─ COLOUR PALETTE — EDIT ONLY THIS SECTION ═══════════════════════*/

:root{
  /*── BRAND COLOURS (shared by both light and dark mode) ──*/
  --brand-1:#17A9F5;   /* primary — taken from your logo */
  --brand-2:#7C5CFF;   /* secondary — violet */
  --brand-3:#22E0B8;   /* tertiary — mint */

  /*── FONTS (swap these two lines to change all typography) ──*/
  --font-display:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body:"Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /*── SHAPE & RHYTHM ──*/
  --radius-sm:12px; --radius-md:20px; --radius-lg:30px; --radius-pill:999px;
  --rail-w:220px;            /* width of the desktop side navigation */
  --content-max:1200px;
  --gutter:clamp(22px,4.4vw,70px);
}

/*───────────────────────────────────────────────
  LIGHT MODE PALETTE
───────────────────────────────────────────────*/
:root, :root[data-theme="light"]{
  --bg:            #F3F4F8;   /* page background            */
  --bg-2:          #E9EBF2;   /* sunken panels              */
  --surface:       #FFFFFF;   /* cards, nav, elevated stuff */
  --surface-glass: rgba(255,255,255,.66);

  --text:          #0B1018;   /* headings + primary text    */
  --text-2:        #414B5C;   /* body copy                  */
  --text-3:        #737F92;   /* captions, meta             */

  --border:        rgba(11,16,24,.14);
  --border-soft:   rgba(11,16,24,.07);

  --accent:        var(--brand-1);
  --accent-2:      var(--brand-2);
  --accent-3:      var(--brand-3);
  --accent-ink:    #FFFFFF;   /* text that sits ON an accent fill */
  --accent-wash:   rgba(23,169,245,.12);

  --cursor:        var(--brand-1);   /* custom cursor colour   */
  --cursor-hot:    var(--brand-2);   /* cursor over a link     */
  --particles:     23,169,245;       /* background dots, R,G,B */
  --particles-2:   124,92,255;       /* background dots alt    */

  --orb-1:         rgba(23,169,245,.30);
  --orb-2:         rgba(124,92,255,.24);
  --orb-3:         rgba(34,224,184,.20);

  --shadow:        0 2px 4px rgba(11,16,24,.04), 0 24px 60px -26px rgba(11,16,24,.30);
  --shadow-lift:   0 2px 6px rgba(11,16,24,.06), 0 44px 90px -34px rgba(11,16,24,.42);
  --photo-glow:    rgba(23,169,245,.34);
  --scrim:         rgba(243,244,248,.80);
}

/*───────────────────────────────────────────────
  DARK MODE PALETTE
───────────────────────────────────────────────*/
:root[data-theme="dark"]{
  --bg:            #05070C;
  --bg-2:          #0A0E17;
  --surface:       #0D131E;
  --surface-glass: rgba(13,19,30,.62);

  --text:          #EEF3F9;
  --text-2:        #A6B4C7;
  --text-3:        #6B7A8F;

  --border:        rgba(238,243,249,.13);
  --border-soft:   rgba(238,243,249,.06);

  --accent:        #35B8FF;
  --accent-2:      #9B83FF;
  --accent-3:      #3BE8C2;
  --accent-ink:    #05070C;
  --accent-wash:   rgba(53,184,255,.14);

  --cursor:        #35B8FF;
  --cursor-hot:    #9B83FF;
  --particles:     53,184,255;
  --particles-2:   155,131,255;

  --orb-1:         rgba(53,184,255,.26);
  --orb-2:         rgba(155,131,255,.22);
  --orb-3:         rgba(59,232,194,.16);

  --shadow:        0 2px 4px rgba(0,0,0,.5), 0 30px 70px -30px rgba(0,0,0,.9);
  --shadow-lift:   0 2px 8px rgba(0,0,0,.6), 0 56px 110px -40px rgba(0,0,0,1);
  --photo-glow:    rgba(53,184,255,.42);
  --scrim:         rgba(5,7,12,.80);
}

/* Follow the operating system when the visitor hasn't picked a mode */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#05070C; --bg-2:#0A0E17; --surface:#0D131E; --surface-glass:rgba(13,19,30,.62);
    --text:#EEF3F9; --text-2:#A6B4C7; --text-3:#6B7A8F;
    --border:rgba(238,243,249,.13); --border-soft:rgba(238,243,249,.06);
    --accent:#35B8FF; --accent-2:#9B83FF; --accent-3:#3BE8C2; --accent-ink:#05070C;
    --accent-wash:rgba(53,184,255,.14);
    --cursor:#35B8FF; --cursor-hot:#9B83FF; --particles:53,184,255; --particles-2:155,131,255;
    --orb-1:rgba(53,184,255,.26); --orb-2:rgba(155,131,255,.22); --orb-3:rgba(59,232,194,.16);
    --shadow:0 2px 4px rgba(0,0,0,.5), 0 30px 70px -30px rgba(0,0,0,.9);
    --shadow-lift:0 2px 8px rgba(0,0,0,.6), 0 56px 110px -40px rgba(0,0,0,1);
    --photo-glow:rgba(53,184,255,.42); --scrim:rgba(5,7,12,.80);
  }
}

/*═══ 2 ─ BASE ══════════════════════════════════════════════════════════*/

*,*::before,*::after{box-sizing:border-box; margin:0; padding:0}
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  scroll-padding-top:calc(96px + env(safe-area-inset-top,0px));
}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:17px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  transition:background .55s ease, color .55s ease;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
ul{list-style:none}
::selection{background:var(--accent); color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent); outline-offset:4px; border-radius:8px}

h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; line-height:1.1; letter-spacing:0em}
p{max-width:64ch}

/* Custom cursor: hide the native arrow only on true pointer devices */
@media (hover:hover) and (pointer:fine){
  html.has-cursor, html.has-cursor *{cursor:none !important}
}

/*═══ 3 ─ BACKGROUND LAYERS ═════════════════════════════════════════════*/

#field{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.85}
.orb{
  position:fixed; border-radius:50%; filter:blur(80px); z-index:0; pointer-events:none;
  will-change:transform; transition:background .6s ease;
}
.orb.o1{width:min(52vw,620px); aspect-ratio:1; top:-14vh; right:-10vw; background:radial-gradient(circle,var(--orb-1),transparent 68%); animation:orbA 22s ease-in-out infinite}
.orb.o2{width:min(46vw,540px); aspect-ratio:1; bottom:-16vh; left:-8vw; background:radial-gradient(circle,var(--orb-2),transparent 68%); animation:orbB 27s ease-in-out infinite}
.orb.o3{width:min(38vw,430px); aspect-ratio:1; top:44%; left:38%; background:radial-gradient(circle,var(--orb-3),transparent 70%); animation:orbC 31s ease-in-out infinite}
@keyframes orbA{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-7vw,7vh,0) scale(1.14)}}
@keyframes orbB{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6vw,-6vh,0) scale(1.18)}}
@keyframes orbC{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-9vw,-5vh,0) scale(.86)}}

.mesh{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--border-soft) 1px,transparent 1px),
                   linear-gradient(90deg,var(--border-soft) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 10%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 10%,transparent 78%);
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.34; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

/*═══ 4 ─ CURSOR & PROGRESS ═════════════════════════════════════════════*/

#cur-dot,#cur-ring{position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%;
  opacity:0; transition:opacity .3s ease, background-color .3s ease, border-color .3s ease}
#cur-dot{width:5px; height:5px; background:var(--cursor); margin:-2.5px 0 0 -2.5px}
#cur-ring{width:25px; height:25px; border:1.5px solid var(--cursor); margin:-12.5px 0 0 -12.5px}
html.cursor-hot #cur-dot{background:var(--cursor-hot)}
html.cursor-hot #cur-ring{border-color:var(--cursor-hot); border-width:1.5px}

#progress{position:fixed; top:0; left:0; height:2px; width:0; z-index:200;
  background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3));
  box-shadow:0 0 16px var(--accent)}

/*═══ 5 ─ SIDE RAIL NAVIGATION (desktop ≥1100px) ════════════════════════*/

.rail{
  position:fixed; top:0; left:0; bottom:0; width:var(--rail-w); z-index:100;
  display:flex; flex-direction:column; gap:26px;
  padding:34px 20px calc(30px + env(safe-area-inset-bottom,0px));
  background:var(--surface-glass);
  backdrop-filter:blur(26px) saturate(1.5); -webkit-backdrop-filter:blur(26px) saturate(1.5);
  border-right:1px solid var(--border);
  transition:background .55s ease, border-color .55s ease;
}
.brand{display:flex; align-items:center; gap:13px; perspective:600px}
.brand .glyph{
  width:44px; height:44px; flex:none; border-radius:13px; display:grid; place-items:center;
  background:var(--bg-2); border:1px solid var(--border);
  transform-style:preserve-3d; transition:transform .75s cubic-bezier(.2,.9,.25,1), box-shadow .4s;
}
.brand:hover .glyph{transform:rotateY(180deg) rotateZ(-8deg); box-shadow:0 12px 30px -12px var(--photo-glow)}
.brand .glyph img{width:26px; height:26px; object-fit:contain}
.brand b{font-family:var(--font-display); font-size:17.5px; font-weight:700; letter-spacing:-.02em; display:block; line-height:1.2}
.brand span{font-size:12.5px; color:var(--text-3); display:block}
.rail .brand{gap:10px}
.rail .brand .glyph{width:40px; height:40px}
.rail .brand b{font-size:15px}
.rail .brand b + span{font-size:11.5px}

.status{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--text-2);
  border:1px solid var(--border); border-radius:var(--radius-pill); padding:7px 14px; background:var(--bg-2)}
.pulse{width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--accent)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}

.rail nav{position:relative; flex:1 1 auto; min-height:0}
.rail nav ul{display:flex; flex-direction:column; gap:2px; position:relative}
.rail nav a{
  display:flex; align-items:center; gap:13px; padding:11px 15px; border-radius:var(--radius-sm);
  font-size:14.8px; font-weight:600; color:var(--text-3); position:relative; z-index:2;
  transition:color .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.rail nav a .num{font-size:11px; font-weight:700; opacity:.6; font-variant-numeric:tabular-nums; width:16px}
.rail nav a:hover{color:var(--text); transform:translateX(4px)}
.rail nav a.active{color:var(--accent)}
#rail-marker{
  position:absolute; left:0; top:0; width:100%; height:44px; z-index:1; opacity:0;
  border-radius:var(--radius-sm); background:var(--accent-wash);
  border-left:2px solid var(--accent);
  transition:transform .55s cubic-bezier(.3,1.2,.35,1), opacity .35s ease;
}
.rail-foot{display:flex; flex-direction:column; gap:14px}
.rail-social{display:flex; gap:7px; flex-wrap:wrap}
.rail-social a{
  width:36px; height:36px; display:grid; place-items:center; border-radius:11px;
  border:1px solid var(--border); background:var(--bg-2); color:var(--text-2); font-size:12px; font-weight:700;
  transition:.35s cubic-bezier(.2,.8,.2,1);
}
.rail-social svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.rail-social a:hover{color:var(--accent-ink); background:var(--accent); border-color:var(--accent); transform:translateY(-4px)}
.rail-meta{font-size:11.5px; color:var(--text-3); line-height:1.5}

.theme-btn{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  padding:9px 9px 9px 15px; border-radius:var(--radius-pill);
  border:1px solid var(--border); background:var(--bg-2);
  font-size:13.5px; font-weight:600; color:var(--text-2);
  transition:border-color .35s, color .35s;
}
.theme-btn:hover{border-color:var(--accent); color:var(--text)}
.theme-btn .knob{
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--surface); border:1px solid var(--border); transition:transform .6s cubic-bezier(.3,1.2,.35,1);
}
.theme-btn:hover .knob{transform:rotate(180deg)}
.theme-btn svg{width:16px; height:16px; fill:none; stroke:var(--text); stroke-width:1.7; stroke-linecap:round}
.ic-moon{display:none}
:root[data-theme="light"] .ic-sun{display:none}
:root[data-theme="light"] .ic-moon{display:block}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .ic-sun{display:none}
  :root:not([data-theme="dark"]) .ic-moon{display:block}
}

/*═══ 6 ─ TOP BAR (tablet & phone) ══════════════════════════════════════*/

.topbar{
  display:none; position:fixed; z-index:100; left:50%; transform:translateX(-50%);
  top:calc(12px + env(safe-area-inset-top,0px));
  width:calc(100% - 24px); max-width:560px;
  align-items:center; gap:10px; padding:8px 8px 8px 14px;
  border-radius:var(--radius-pill); border:1px solid var(--border);
  background:var(--surface-glass); box-shadow:var(--shadow);
  backdrop-filter:blur(24px) saturate(1.5); -webkit-backdrop-filter:blur(24px) saturate(1.5);
  transition:transform .5s cubic-bezier(.2,.85,.25,1), opacity .35s, background .55s;
}
.topbar.tucked{transform:translateX(-50%) translateY(-190%); opacity:0}
.topbar .brand{flex:1; min-width:0}
.topbar .brand .glyph{width:36px; height:36px; border-radius:11px}
.topbar .brand .glyph img{width:21px; height:21px}
.topbar .brand b{font-size:15px}
.topbar .brand b + span{display:none}
.icon-btn{
  width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--border); background:var(--bg-2); transition:border-color .3s, background .3s;
}
.icon-btn:active{background:var(--accent-wash)}
.icon-btn svg{width:17px; height:17px; fill:none; stroke:var(--text); stroke-width:1.7; stroke-linecap:round}
.burger i{display:block; width:16px; height:1.8px; background:var(--text); border-radius:2px; transition:.35s cubic-bezier(.3,1.2,.35,1)}
.burger i+i{margin-top:4.5px; width:11px; margin-left:5px}
.menu-open .burger i:first-child{transform:translateY(3.2px) rotate(45deg)}
.menu-open .burger i:last-child{width:16px; margin-left:0; transform:translateY(-3.1px) rotate(-45deg)}

#sheet{
  position:fixed; inset:0; z-index:95; display:none; flex-direction:column; justify-content:center;
  padding:calc(90px + env(safe-area-inset-top,0px)) var(--gutter) calc(40px + env(safe-area-inset-bottom,0px));
  background:var(--scrim); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s;
}
#sheet.show{opacity:1; visibility:visible}
#sheet a.big{
  display:flex; align-items:baseline; gap:14px; font-family:var(--font-display); font-weight:700;
  font-size:clamp(28px,8.6vw,42px); letter-spacing:-.03em; padding:11px 0;
  border-bottom:1px solid var(--border-soft);
  opacity:0; transform:translateY(24px); transition:opacity .55s ease, transform .55s cubic-bezier(.2,.9,.25,1), color .3s;
}
#sheet.show a.big{opacity:1; transform:none}
#sheet a.big:active{color:var(--accent)}
#sheet a.big u{font-family:var(--font-body); font-size:12px; color:var(--accent); text-decoration:none; font-weight:700}
.sheet-social{display:flex; gap:9px; flex-wrap:wrap; margin-top:30px}
.sheet-social a{padding:10px 18px; border-radius:var(--radius-pill); border:1px solid var(--border);
  font-size:13.5px; font-weight:600; color:var(--text-2); background:var(--bg-2)}

/*═══ 7 ─ PAGE SHELL ════════════════════════════════════════════════════*/

.page{position:relative; z-index:2; margin-left:var(--rail-w)}
.wrap{max-width:var(--content-max); margin-inline:auto; padding-inline:var(--gutter)}
section{position:relative; padding-block:clamp(80px,11vw,140px)}

/*═══ 8 ─ HERO ══════════════════════════════════════════════════════════*/

.hero{min-height:100svh; display:grid; align-items:center; padding-top:clamp(100px,14vh,140px); padding-bottom:clamp(60px,9vh,96px)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(24px,4vw,56px); align-items:center}

.chipline{display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color:var(--text-2);
  border:1px solid var(--border); background:var(--surface); padding:7px 15px 7px 11px; border-radius:var(--radius-pill); margin-bottom:24px}

h1.name{font-size:clamp(44px,6vw,88px); line-height:.98; letter-spacing:.01em; font-weight:800}
h1.name .row{display:block; overflow:hidden; padding-bottom:.2em; margin-bottom:-.2em}
h1.name .row i{display:block; font-style:normal; transform:translateY(110%);
  transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.boot h1.name .row i{transform:none}
h1.name .row:nth-child(2) i{transition-delay:.12s}
.tint{
  background:linear-gradient(104deg,var(--accent) 0%,var(--accent-2) 52%,var(--accent-3) 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shift 9s ease-in-out infinite;
}
@keyframes shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.role{display:flex; align-items:center; gap:11px; margin-top:20px; font-size:clamp(15px,2vw,18px); font-weight:600; color:var(--text-2)}
.role .slot{position:relative; height:1.5em; overflow:hidden; display:inline-block; min-width:14ch}
.role .slot b{display:block; color:var(--accent); font-weight:700; animation:roll 12s cubic-bezier(.7,0,.3,1) infinite}
@keyframes roll{
  0%,18%{transform:translateY(0)} 25%,43%{transform:translateY(-100%)}
  50%,68%{transform:translateY(-200%)} 75%,93%{transform:translateY(-300%)} 100%{transform:translateY(-400%)}
}
.lede{margin-top:18px; font-size:clamp(15.5px,1.8vw,17.5px); color:var(--text-2); max-width:50ch}
.lede strong{color:var(--text); font-weight:700}

.fade{opacity:0; transform:translateY(20px); transition:opacity 1s ease .5s, transform 1s cubic-bezier(.16,1,.3,1) .5s}
.boot .fade{opacity:1; transform:none}
.fade.f2{transition-delay:.62s} .fade.f3{transition-delay:.76s} .fade.f4{transition-delay:.9s}

.actions{display:flex; flex-wrap:wrap; gap:11px; margin-top:32px; align-items:center}
.btn{display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border-radius:var(--radius-pill);
  font-weight:700; font-size:15px; border:1px solid transparent; position:relative; overflow:hidden;
  transition:box-shadow .35s ease, color .35s ease, border-color .35s ease, background .35s ease}
.btn .arrow{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.btn:hover .arrow{transform:translateX(5px)}
.btn-solid{background:var(--accent); color:var(--accent-ink)}
.btn-solid:hover{box-shadow:0 16px 36px -14px var(--photo-glow)}
.btn-ghost{border-color:var(--border); background:var(--surface); color:var(--text)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}

/* — the portrait: floating, frameless, on a 3D stage — */
.stage{position:relative; justify-self:center; width:min(100%,460px); aspect-ratio:820/1018;
  perspective:1100px; perspective-origin:50% 45%}
.stage-inner{position:absolute; inset:0; transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.halo{
  position:absolute; left:50%; top:46%; width:82%; aspect-ratio:1; transform:translate(-50%,-50%) translateZ(-140px);
  border-radius:50%; background:radial-gradient(circle,var(--photo-glow) 0%,transparent 66%);
  filter:blur(24px); animation:haloPulse 7s ease-in-out infinite;
}
@keyframes haloPulse{0%,100%{opacity:.75; transform:translate(-50%,-50%) translateZ(-140px) scale(1)}
                     50%{opacity:1; transform:translate(-50%,-50%) translateZ(-140px) scale(1.11)}}
.rings{position:absolute; inset:0; transform-style:preserve-3d; pointer-events:none}
.ring{position:absolute; left:50%; top:47%; border-radius:50%; border:1px solid var(--border);
  translate:-50% -50%; transform-style:preserve-3d}
.ring.r1{width:88%; aspect-ratio:1; transform:translateZ(-90px) rotateX(74deg); border-color:var(--accent); opacity:.4; animation:spinA 16s linear infinite}
.ring.r2{width:105%; aspect-ratio:1; transform:translateZ(-60px) rotateX(70deg) rotateZ(30deg); border-color:var(--accent-2); opacity:.3; animation:spinB 24s linear infinite}
.ring.r3{width:74%; aspect-ratio:1; transform:translateZ(-160px); border-style:dashed; opacity:.5; animation:spinC 40s linear infinite}
@keyframes spinA{to{transform:translateZ(-90px) rotateX(74deg) rotateZ(360deg)}}
@keyframes spinB{to{transform:translateZ(-60px) rotateX(70deg) rotateZ(-330deg)}}
@keyframes spinC{to{transform:translateZ(-160px) rotateZ(360deg)}}

.portrait{
  position:absolute; left:50%; bottom:0; width:100%; translate:-50% 0; transform:translateZ(60px);
  transform-style:preserve-3d; opacity:0; animation:none;
}
.boot .portrait{animation:portraitIn 1.5s cubic-bezier(.16,1,.3,1) .35s forwards, bob 8s ease-in-out 2s infinite}
@keyframes portraitIn{from{opacity:0; transform:translateZ(60px) translateY(42px) scale(.94)} to{opacity:1; transform:translateZ(60px) translateY(0) scale(1)}}
@keyframes bob{0%,100%{translate:-50% 0}50%{translate:-50% -14px}}
.portrait img{
  width:100%; object-fit:contain; object-position:bottom; display:block;
  -webkit-mask-image:linear-gradient(to bottom,#000 74%,transparent 100%),linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,#000 74%,transparent 100%),linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-composite:intersect;
}
/* soft floor shadow under the cut-out so he isn't pasted onto the page */
.floor{position:absolute; left:50%; bottom:2%; width:62%; height:26px; translate:-50% 0; transform:translateZ(10px);
  background:radial-gradient(ellipse at center,var(--photo-glow),transparent 72%); filter:blur(14px); opacity:.85;
  animation:floorPulse 8s ease-in-out 2s infinite}
@keyframes floorPulse{0%,100%{transform:translateZ(10px) scaleX(1); opacity:.85}50%{transform:translateZ(10px) scaleX(.86); opacity:.6}}

.badge{
  position:absolute; z-index:4; transform-style:preserve-3d;
  display:flex; align-items:center; gap:8px; white-space:nowrap;
  padding:9px 14px; border-radius:13px; font-size:12.5px; font-weight:700;
  background:var(--surface-glass); border:1px solid var(--border); box-shadow:var(--shadow);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0; transition:opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1);
}
.boot .badge{opacity:1}
.badge em{font-style:normal; width:8px; height:8px; border-radius:3px; background:var(--accent); flex:none}
.badge.b1{left:-12%; top:10%; transform:translateZ(120px); transition-delay:1s; animation:driftA 7s ease-in-out 2s infinite}
.badge.b2{right:-8%; top:42%; transform:translateZ(150px); transition-delay:1.15s; animation:driftB 9s ease-in-out 2.5s infinite}
.badge.b2 em{background:var(--accent-2)}
.badge.b3{left:-4%; bottom:16%; transform:translateZ(100px); transition-delay:1.3s; animation:driftA 8.4s ease-in-out 3s infinite}
.badge.b3 em{background:var(--accent-3)}
@keyframes driftA{0%,100%{translate:0 0}50%{translate:0 -11px}}
@keyframes driftB{0%,100%{translate:0 0}50%{translate:0 12px}}

.scrollcue{position:absolute; left:var(--gutter); bottom:22px; display:flex; align-items:center; gap:12px;
  font-size:12px; font-weight:600; color:var(--text-3); letter-spacing:.04em}
.scrollcue .track{width:1px; height:42px; background:var(--border); position:relative; overflow:hidden}
.scrollcue .track::after{content:""; position:absolute; inset:0; background:var(--accent); animation:fall 2.4s ease-in-out infinite}
@keyframes fall{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/*═══ 9 ─ TICKER ════════════════════════════════════════════════════════*/

.ticker{border-block:1px solid var(--border); background:var(--surface); overflow:hidden; padding:15px 0; position:relative; z-index:2}
.ticker-track{display:flex; gap:40px; width:max-content; animation:marquee 32s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.ticker span{font-family:var(--font-display); font-weight:600; font-size:clamp(15px,2vw,22px);
  color:var(--text-3); display:flex; align-items:center; gap:40px; white-space:nowrap}
.ticker span::after{content:""; width:7px; height:7px; border-radius:2px; background:var(--accent); flex:none}

/*═══ 10 ─ SECTION HEADS & REVEALS ══════════════════════════════════════*/

.head{margin-bottom:clamp(32px,4.6vw,56px)}
.kicker{display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:700; color:var(--accent); margin-bottom:14px}
.kicker::before{content:""; width:22px; height:1px; background:var(--accent)}
.head h2{font-size:clamp(30px,4.8vw,52px); max-width:16ch}
.head p{margin-top:14px; color:var(--text-2); font-size:15.5px; max-width:52ch}

.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1)}
.reveal.seen{opacity:1; transform:none}
.split .ch{display:inline-block; opacity:0; transform:translateY(80%) rotateX(-55deg); transform-origin:bottom;
  transition:opacity .6s ease, transform .75s cubic-bezier(.16,1,.3,1)}
.reveal.seen .split .ch, .split.seen .ch{opacity:1; transform:none}

/*═══ 11 ─ ABOUT ════════════════════════════════════════════════════════*/

.about{display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(26px,4vw,54px); align-items:start}
.about .lead{font-family:var(--font-display); font-weight:600; font-size:clamp(19px,2.5vw,26px);
  line-height:1.36; letter-spacing:-.02em; color:var(--text); margin-bottom:18px}
.about p{color:var(--text-2); font-size:16.5px; margin-bottom:14px}
.stats{display:grid; gap:1px; background:var(--border); border:1px solid var(--border);
  border-radius:var(--radius-md); overflow:hidden}
.stats div{background:var(--surface); padding:20px 22px; transition:background .35s}
.stats div:hover{background:var(--bg-2)}
.stats b{display:block; font-family:var(--font-display); font-weight:800; font-size:clamp(26px,3.6vw,38px);
  line-height:1; color:var(--text); font-variant-numeric:tabular-nums}
.stats small{display:block; margin-top:6px; font-size:13px; color:var(--text-3)}

/*═══ 12 ─ NOW CARDS ════════════════════════════════════════════════════*/

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:16px}
.card{
  position:relative; padding:26px 24px; border-radius:var(--radius-md);
  border:1px solid var(--border); background:var(--surface); overflow:hidden;
  transform-style:preserve-3d; transition:border-color .45s, box-shadow .45s, transform .18s ease-out;
}
.card:hover{border-color:var(--accent); box-shadow:var(--shadow-lift)}
.card .sheen{position:absolute; width:340px; height:340px; border-radius:50%; opacity:0; pointer-events:none;
  background:radial-gradient(circle,var(--accent-wash),transparent 68%); transform:translate(-50%,-50%); transition:opacity .45s}
.card:hover .sheen{opacity:1}
.card .tag{display:block; font-size:11.5px; font-weight:700; color:var(--accent); margin-bottom:12px}
.card h3{font-size:20px; margin-bottom:8px}
.card p{font-size:14.6px; color:var(--text-2); margin:0}

/*═══ 13 ─ PROJECTS ═════════════════════════════════════════════════════*/

.projects{display:grid; gap:20px}
.project{
  display:grid; grid-template-columns:.46fr .54fr; gap:clamp(20px,3.4vw,46px); align-items:center;
  padding:clamp(22px,3vw,38px); border-radius:var(--radius-lg);
  border:1px solid var(--border); background:var(--surface); position:relative; overflow:hidden;
  transform-style:preserve-3d; transition:border-color .45s, box-shadow .45s, transform .2s ease-out;
}
.project:hover{border-color:var(--accent); box-shadow:var(--shadow-lift)}
.project .sheen{position:absolute; width:520px; height:520px; border-radius:50%; opacity:0; pointer-events:none;
  background:radial-gradient(circle,var(--accent-wash),transparent 66%); transform:translate(-50%,-50%); transition:opacity .45s}
.project:hover .sheen{opacity:1}
.project .meta{display:flex; align-items:center; gap:9px; margin-bottom:14px; font-size:12px; color:var(--text-3)}
.pill{display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:var(--radius-pill);
  border:1px solid var(--border); font-weight:600; color:var(--text-2)}
.pill.live{color:var(--accent); border-color:var(--accent)}
.project h3{font-size:clamp(24px,3.2vw,34px); margin-bottom:11px}
.project p{font-size:15.2px; color:var(--text-2)}
.stack{display:flex; flex-wrap:wrap; gap:7px; margin:16px 0 20px}
.stack i{font-style:normal; font-size:12px; font-weight:600; padding:5px 11px; border-radius:9px;
  background:var(--bg-2); color:var(--text-2); border:1px solid var(--border-soft)}
.open-link{display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:15px; color:var(--accent); position:relative}
.open-link::after{content:""; position:absolute; left:0; bottom:-4px; height:1.5px; width:100%; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.project:hover .open-link::after{transform:scaleX(1); transform-origin:left}

.window{
  border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border); background:var(--bg-2);
  aspect-ratio:16/10; position:relative; transform:translateZ(38px); transform-style:preserve-3d;
}
.window .chrome{height:32px; display:flex; align-items:center; gap:6px; padding:0 13px;
  border-bottom:1px solid var(--border); background:var(--surface)}
.window .chrome u{width:8px; height:8px; border-radius:50%; background:var(--border); text-decoration:none}
.window .chrome .addr{margin-left:8px; font-size:10.5px; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.window .view{position:absolute; inset:32px 0 0; display:grid; place-items:center; overflow:hidden}
.window .aurora{position:absolute; inset:0; opacity:.6;
  background:radial-gradient(60% 70% at 20% 22%,var(--accent-wash),transparent 62%),
             radial-gradient(52% 62% at 84% 78%,var(--orb-2),transparent 64%);
  animation:aurora 15s ease-in-out infinite alternate}
@keyframes aurora{to{transform:translate3d(-16px,12px,0) scale(1.1)}}
.window .lines{position:absolute; inset:0; opacity:.4;
  background-image:linear-gradient(var(--border-soft) 1px,transparent 1px),linear-gradient(90deg,var(--border-soft) 1px,transparent 1px);
  background-size:30px 30px; mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent)}
.window .label{position:relative; text-align:center; padding:0 16px; transform:translateZ(30px)}
.window .label b{display:block; font-family:var(--font-display); font-weight:800;
  font-size:clamp(24px,4.2vw,44px); letter-spacing:-.03em; color:var(--text)}
.window .label small{display:block; margin-top:5px; font-size:12px; color:var(--text-3)}

/*═══ 14 ─ SKILLS ═══════════════════════════════════════════════════════*/

.skills{display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden}
.skill{background:var(--surface); padding:32px 34px 26px; transition:background .4s}
.skill:hover{background:var(--bg-2)}
.skill h4{font-size:18px; margin-bottom:16px; display:flex; align-items:center; gap:10px}
.skill h4 em{font-style:normal; width:9px; height:9px; border-radius:3px; background:var(--accent); flex:none}
.skill:nth-child(2) h4 em{background:var(--accent-2)}
.skill:nth-child(3) h4 em{background:var(--accent-3)}
.skill:nth-child(4) h4 em{background:var(--text-3)}
.skill li{display:flex; justify-content:space-between; align-items:center; gap:12px;
  font-size:14.4px; color:var(--text-2); padding:8px 0; border-bottom:1px solid var(--border-soft)}
.skill li:last-child{border-bottom:0}
.skill li s{text-decoration:none; font-size:11px; font-weight:600; color:var(--text-3); white-space:nowrap; flex:none;
  padding:3px 10px; border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--bg-2)}

/*═══ 15 ─ TIMELINE ═════════════════════════════════════════════════════*/

.timeline{position:relative; padding-left:34px}
.timeline::before{content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px; background:var(--border)}
#tl-fill{position:absolute; left:0; top:6px; width:1px; height:0;
  background:linear-gradient(var(--accent),var(--accent-2),var(--accent-3)); box-shadow:0 0 12px var(--accent)}
.entry{position:relative; padding-bottom:40px}
.entry:last-child{padding-bottom:0}
.entry::before{content:""; position:absolute; left:-38.5px; top:6px; width:10px; height:10px; border-radius:50%;
  background:var(--bg); border:1.6px solid var(--border); transition:.45s}
.entry.seen::before{background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 5px var(--accent-wash)}
.entry .when{display:block; font-size:12.5px; font-weight:700; color:var(--accent); margin-bottom:6px}
.entry h3{font-size:clamp(19px,2.4vw,24px); margin-bottom:4px}
.entry .where{font-size:14.8px; color:var(--text-2); margin-bottom:7px}
.entry p{font-size:14.4px; color:var(--text-3); margin:0}

/*═══ 16 ─ CONTACT & FOOTER ═════════════════════════════════════════════*/

.contact{text-align:center; padding-bottom:clamp(60px,8vw,100px)}
.contact h2{font-size:clamp(34px,6.4vw,76px); line-height:1.08; letter-spacing:0em; max-width:none}
.contact .head{margin-bottom:0}
.contact p{margin:20px auto 0; color:var(--text-2); font-size:16.5px}
.mailto{
  display:inline-flex; align-items:center; gap:14px; margin-top:34px; max-width:100%;
  padding:12px 12px 12px 26px; border-radius:var(--radius-pill);
  border:1px solid var(--border); background:var(--surface);
  font-size:clamp(14px,2.2vw,19px); font-weight:700;
  transition:border-color .4s, box-shadow .4s;
}
.mailto:hover{border-color:var(--accent); box-shadow:var(--shadow-lift)}
.mailto span:first-child{overflow:hidden; text-overflow:ellipsis}
.mailto .go{width:42px; height:42px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--accent); color:var(--accent-ink); transition:transform .45s cubic-bezier(.3,1.2,.35,1)}
.mailto:hover .go{transform:rotate(45deg)}
.links{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:30px}
.links a{padding:10px 20px; border-radius:var(--radius-pill); border:1px solid var(--border);
  font-size:14px; font-weight:600; color:var(--text-2); background:var(--surface);
  transition:.35s cubic-bezier(.2,.8,.2,1)}
.links a:hover{color:var(--accent-ink); background:var(--accent); border-color:var(--accent); transform:translateY(-4px)}

footer{border-top:1px solid var(--border); padding:26px 0 32px; font-size:13px; color:var(--text-3); position:relative; z-index:2}
.footrow{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; align-items:center}
.footrow a:hover{color:var(--accent)}

/*═══ 17 ─ RESPONSIVE ═══════════════════════════════════════════════════*/

/* Tablet & phone: side rail becomes a floating top bar */
@media (max-width:1099px){
  .rail{display:none}
  .topbar{display:flex}
  #sheet{display:flex}
  .page{margin-left:0}
  html{scroll-padding-top:calc(86px + env(safe-area-inset-top,0px))}
  .hero{padding-top:calc(104px + env(safe-area-inset-top,0px))}
}

/* Narrow desktop: trim the rail so content keeps breathing room */
@media (min-width:1100px) and (max-width:1320px){
  :root{--rail-w:200px}
  .rail{padding:28px 16px}
  .badge.b2{right:0}
  .badge.b1{left:0}
}

/* Tablet layout */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:38px; text-align:left}
  .stage{order:-1; width:min(74%,330px)}
  .about{grid-template-columns:1fr; gap:30px}
  .stats{grid-template-columns:repeat(3,1fr)}
  .project{grid-template-columns:1fr}
  .window{order:-1; transform:none}
  .scrollcue{display:none}
}

/* Phone */
@media (max-width:640px){
  body{font-size:16px}
  section{padding-block:clamp(62px,13vw,90px)}
  .stage{width:min(82%,290px)}
  .badge{font-size:11px; padding:7px 11px}
  .badge.b1{left:-8%} .badge.b2{right:-9%}
  .stats{grid-template-columns:1fr}
  .stats div{display:flex; align-items:baseline; gap:12px; padding:15px 18px}
  .stats small{margin-top:0}
  .skills{grid-template-columns:1fr}
  .timeline{padding-left:26px}
  .entry::before{left:-30.5px}
  .mailto{padding-left:18px; gap:10px; font-size:14px}
  .links a{flex:1 1 42%; text-align:center}
  .card,.project{padding:22px 20px}
}

@media (max-width:380px){
  .topbar .brand b{font-size:14px}
  .btn{padding:13px 20px; font-size:14px}
  .actions{gap:9px}
}

/* Touch devices never get the custom cursor */
@media (hover:none),(pointer:coarse){
  #cur-dot,#cur-ring{display:none}
}

/* Motion-sensitive visitors get a calm, static page */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important}
  .portrait{opacity:1 !important}
  #field{display:none}
}

/* Theme-switch circular wipe */
::view-transition-old(root),::view-transition-new(root){animation:none; mix-blend-mode:normal}
::view-transition-old(root){z-index:0}
::view-transition-new(root){z-index:1}