/* Webus site effects (pairs with fx.js). Static and complete by default; motion is added only under
   .js + prefers-reduced-motion:no-preference. Not overwritten by scripts/build_site.py. */

/* ---- hero shader ---- */
.gl{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity 1.4s ease;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent);mask-image:linear-gradient(to bottom,#000 62%,transparent)}
.gl.on{opacity:1}
.gl-btn{all:unset;box-sizing:border-box;position:absolute;right:16px;bottom:16px;z-index:2;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:color-mix(in srgb,var(--paper) 82%,transparent);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.gl-btn:hover{background:var(--paper-2)}
.gl-btn:focus-visible{outline:3px solid var(--soft);outline-offset:2px}
.gl-btn svg{width:16px;height:16px;fill:currentColor}
.gl-btn .play{display:none}.gl-btn[aria-pressed=true] .play{display:block}.gl-btn[aria-pressed=true] .pause{display:none}

/* ---- split headings ---- */
.sw{display:inline-block;white-space:nowrap}
.sc{display:inline-block}

/* ---- cursor ring and tilt ---- */
.ring{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid var(--accent);border-radius:50%;pointer-events:none;z-index:70;opacity:0;transition:opacity .3s,width .25s,height .25s,margin .25s,background .25s}
.ring.show{opacity:.65}
.ring.big{width:58px;height:58px;margin:-29px 0 0 -29px;background:color-mix(in srgb,var(--accent) 12%,transparent)}
[data-tilt]{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s ease;position:relative}
[data-tilt]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.16),transparent 60%);opacity:0;transition:opacity .3s}
[data-tilt]:hover::after{opacity:1}

/* ---- browser frame used by the scenes and the Work page ---- */
.dev{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 30px 70px -36px rgba(0,0,0,.5);font-size:clamp(9px,1.35vw,13px)}
.dev-bar{display:flex;align-items:center;gap:.8em;padding:.8em 1em;background:var(--paper-2);border-bottom:1px solid var(--line)}
.dev-bar>i{width:.8em;height:.8em;border-radius:50%;background:var(--line);flex:none}
.url{margin-left:.6em;flex:1;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.5em 1em;color:var(--muted);position:relative;min-height:2.2em;overflow:hidden}
.url span{display:none;white-space:nowrap}
.dev-body{position:relative;aspect-ratio:16/10;background:#f7f6ff;color:#1a1744;overflow:hidden}
.dev-body .layer{position:absolute;inset:0}
.dev .old{background:#e9eef7;color:#000;font-family:"Times New Roman",Times,serif;padding:1.4em}
.dev .old b{display:block;text-align:center;color:#8b0000;font-size:1.9em;margin:.2em 0 .5em}
.dev .old u{color:#0000cc;display:block;margin:.2em 0}
.dev .new .nav{display:flex;gap:1.2em;align-items:center;padding:1em 1.4em;background:#fff;font:600 1em/1 var(--sans)}
.dev .new .nav i{width:1.1em;height:1.1em;border-radius:50%;background:#4338f0}
.dev .new .nav em{margin-left:auto;font-style:normal;background:#4338f0;color:#fff;padding:.55em 1em;border-radius:999px}
.dev .new .hero2{background:#1a1744;color:#f1f0ff;padding:2.2em 1.6em}
.dev .new .hero2 b{display:block;font:600 2.4em/1.05 var(--serif);letter-spacing:-.02em;max-width:12em}
.dev .new .hero2 span{display:inline-block;margin-top:1.1em;background:#ff6b4a;color:#14122b;font:700 1em/1 var(--sans);padding:.8em 1.3em;border-radius:999px}
.dev .new .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em;padding:1em 1.4em}
.dev .new .cards div{background:#fff;border-radius:.9em;height:5.2em;border:1px solid #d6d3ee}
.dev .old{transition:opacity .7s}
.dev .new,.dev .skel{transition:opacity .7s}
.dev .skel{background:repeating-linear-gradient(135deg,var(--paper-2) 0 10px,var(--paper) 10px 20px);opacity:0}
.dev .new{opacity:1}.dev .old{opacity:0}
.device .url span{display:block}

/* ---- Work: device rail ---- */
.rail{position:relative}
.rail-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 2px 28px;scrollbar-width:none;outline-offset:4px}
.rail-track::-webkit-scrollbar{display:none}
.rail-track:focus-visible{outline:3px solid var(--soft);border-radius:12px}
.work-card{flex:0 0 min(88%,780px);scroll-snap-align:center;display:grid;gap:18px}
.device{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:0 0 0;overflow:hidden;box-shadow:0 30px 70px -40px rgba(0,0,0,.55);position:relative}
.device .dev-bar{padding:.7em 1em;font-size:12px}
.device img.shot{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;display:block;background:var(--paper-2)}
.device img.phone{position:absolute;right:5%;bottom:-6%;width:21%;height:auto;border-radius:18px;border:5px solid #14122b;box-shadow:0 20px 40px -18px rgba(0,0,0,.6);background:var(--paper-2);aspect-ratio:9/19;object-fit:cover;object-position:top}
.work-card h3{margin:0}
.work-card p{margin:0;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chips li{font:600 13px/1 var(--sans);padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.rail-ctl{display:flex;align-items:center;gap:12px;margin-top:6px}
.rail-ctl button{all:unset;box-sizing:border-box;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;cursor:pointer;color:var(--ink);background:var(--card)}
.rail-ctl button:hover:not(:disabled){background:var(--paper-2)}
.rail-ctl button:disabled{opacity:.35;cursor:default}
.rail-ctl button:focus-visible{outline:3px solid var(--soft);outline-offset:2px}
.rail-ctl svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.rail-bar{flex:1;height:3px;background:var(--line);border-radius:3px;overflow:hidden}
.rail-bar i{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(.3);transition:transform .2s}

/* ---- Skills: measured proof ---- */
.proof{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.meter{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;display:grid;grid-template-columns:84px minmax(0,1fr);gap:4px 16px;align-items:center}
.meter svg{grid-row:1/3;width:84px;height:84px;transform:rotate(-90deg)}
.meter circle{fill:none;stroke-width:9}
.meter .trk{stroke:var(--line)}
.meter .val{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:var(--c);stroke-dashoffset:calc(var(--c)*(1 - var(--v)));transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1)}
.meter b{font:600 clamp(2rem,4vw,2.8rem)/1 var(--serif);color:var(--accent-text)}
.meter>span{color:var(--muted);font-size:15px;align-self:start}
.skills{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.skill{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px}
.skill h3{margin:0 0 10px;font-size:1.15rem}
.skill p{margin:0 0 12px;color:var(--muted);font-size:15px}
.cvbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

@media (max-width:860px){
  .device img.phone{width:24%}
}

@media (prefers-reduced-motion:no-preference){
  .js .splitted .sc{opacity:0;transform:translateY(.7em) rotate(5deg);transition:opacity .6s ease calc(var(--c)*16ms),transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--c)*16ms)}
  .js .splitted.go .sc{opacity:1;transform:none}
  .js .splitted:not(.go) .sc{animation:scFail 0s linear 3.5s forwards}
  @keyframes scFail{to{opacity:1;transform:none}}
  .js .meter:not(.full) .val{stroke-dashoffset:var(--c)}
}