/* Soft edition: rounded surfaces, quieter lines, depth that moves with the scroll. */
:root{--r:3px;--r-sm:2px;--soft-line:#1d191b17;--soft-line-dark:#ffffff1a;--glow:#e7a32924;--plum:#c51d64;
  --calm:cubic-bezier(.22,1,.36,1);--shadow:0 0 0 1px #1d191b0a}

body{background:var(--paper)}
h1,h2,h3{text-wrap:balance;font-kerning:normal}
p{text-wrap:pretty}
.panel-heading,.contact-heading,.intro-main h2,.service-bottom h2{letter-spacing:-.042em}
.service-kpis strong,.page-controls>span,.index-number,.service-number>span{font-variant-numeric:tabular-nums}
::selection{background:#e7a32955;color:inherit}
a:focus-visible,button:focus-visible,.track:focus-visible{outline:2px solid #e7a329aa;outline-offset:4px;border-radius:.6rem}

/* Header and footer sit above the track, whose padding makes room for shadows. */
.site-header,.navigation{position:relative;z-index:3}

/* Panels: rounded, softly lifted. */
.panel{border-radius:var(--r);box-shadow:var(--shadow)}
.personal-panel{box-shadow:var(--shadow)}
.service-panel{box-shadow:var(--shadow)}

@media(min-width:761px){
  .track{gap:2rem;padding-top:1.25rem;padding-bottom:3rem;margin-top:-1.25rem;margin-bottom:-3rem}
  /* Depth follows --d (0 at the reading position, 1 one panel away), written each frame. */
  .panel,.panel.is-focused,.track.is-moving .panel{transition:none;will-change:transform;
    transform:scale(calc(1 - var(--d,0) * .045));opacity:calc(1 - var(--d,0) * .28)}
  /* Content drifts a little slower than its panel. */
  .panel>.panel-heading,.panel>.contact-heading,.intro-name,.service-number,.personal-header{translate:calc(var(--o,0) * 3.5rem) 0}
  .panel>.panel-meta{translate:calc(var(--o,0) * 1.5rem) 0}
}

/* Lines: lighter everywhere, so structure reads without hard edges. */
.feature{border-top-color:var(--soft-line);position:relative}
.feature::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;border-radius:1px;background:linear-gradient(90deg,var(--accent),#e7a32900);transform:scaleX(0);transform-origin:0 50%;transition:transform 900ms var(--calm)}
.feature:hover::after{transform:scaleX(1)}
.feature h3{transition:transform 700ms var(--calm)}
.feature:hover h3{transform:translateX(.3rem)}
.detail-button{border-bottom-color:var(--soft-line)}
.service-panel .detail-button{border-color:#1d191b26}
.service-kpis>div{border-top-color:#1d191b1f}
.service-progress progress,.service-progress progress::-webkit-progress-bar{height:4px;border-radius:4px;overflow:hidden}
.service-progress progress::-webkit-progress-value{border-radius:4px}
.service-progress progress::-moz-progress-bar{border-radius:4px}
.next-project{border-top-color:var(--soft-line)}
#personal .favorite,.favorite,.personal-foot{border-top-color:var(--soft-line-dark)}
#personal .reading-favorite{border-right-color:var(--soft-line-dark)}
.music-entry{border-bottom-color:var(--soft-line-dark)}

/* Project index: rows become soft pills on hover instead of hard bands. */
.project-index{padding-right:.25rem}
.index-row{border-top-color:var(--soft-line);border-radius:var(--r-sm);padding-left:.75rem;padding-right:.5rem;transition:background 500ms var(--calm),color .3s,border-color .3s}
.index-row:last-child{border-bottom-color:var(--soft-line)}
.index-row:hover{padding-left:.75rem;background:#e7a32912;color:inherit;border-top-color:transparent}
.index-row:hover+.index-row{border-top-color:transparent}
.index-row:hover .index-title>span:first-child{color:#865100}
.index-title>span:first-child,.index-number{transition:color .3s}
.index-row:hover .index-number{color:var(--accent)}
.index-arrow{display:inline-block;transition:transform 700ms var(--calm)}
.index-row:hover .index-arrow{transform:translate(.2rem,-.2rem)}
.index-notes{border-radius:50%;width:2.25rem;height:2.25rem;min-height:2.25rem;align-self:center;border-color:var(--soft-line);font-size:1.1rem;transition:background .4s var(--calm),color .3s}

/* Pills and rounded controls. */
#copy{border-radius:3px;padding:.75rem 1.25rem;border-color:var(--soft-line);position:relative;transition:background .4s var(--calm),color .3s,border-color .3s}
#copy.done{background:var(--ink);color:var(--white);border-color:var(--ink)}
#copy.done>span{visibility:hidden}
#copy.done::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font-size:.875rem;animation:soft-in 500ms var(--calm) both}
.chapter{border-radius:3px;transition:background .5s var(--calm)}
#language,.page-controls button,#sound-toggle{border-color:var(--soft-line);transition:background .4s var(--calm),color .3s,border-color .3s,transform .5s var(--calm)}
.round-link{transition:background .4s var(--calm),transform .7s var(--calm)}
.play-symbol{transition:background .4s var(--calm),color .3s,transform .6s var(--calm)}

/* Links underline gently. */
.site-header nav a,.contact-links>a:first-child,.github-contact,.repo-link{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size 700ms var(--calm),color .3s}
.site-header nav a{padding:.25rem 0;margin:.5rem 0}
.site-header nav a:hover,.contact-links>a:first-child:hover,.github-contact:hover,.repo-link:hover{background-size:100% 1px}

/* Reading progress, rounded at the leading end. */
.read-progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:40;pointer-events:none;transform-origin:0 50%;transform:scaleX(var(--progress,0));border-radius:0 3px 3px 0;background:linear-gradient(90deg,#e7a329,#c51d64);opacity:.85}

.brand i{animation:soft-breathe 4s ease-in-out infinite}
@keyframes soft-breathe{50%{transform:scale(1.5);opacity:.6}}

/* Keep adjacent content columns on one continuous surface. */
.spotlight::before{content:none}

/* Favourite colour. */
button.color-disc{border:0;padding:0;cursor:pointer;display:block;background:var(--plum);box-shadow:0 0 0 0 #c51d6400,0 18px 40px -16px #c51d6488;transition:transform .9s var(--calm),box-shadow .9s var(--calm)}
.color-favorite:hover button.color-disc{transform:scale(1.06);box-shadow:0 0 0 .7rem #c51d641c,0 24px 50px -16px #c51d64aa}
button.color-disc.pulse{animation:disc-ripple 900ms var(--calm)}
@keyframes disc-ripple{0%{box-shadow:0 0 0 0 #c51d6499}100%{box-shadow:0 0 0 2.75rem #c51d6400}}
.color-favorite .micro{position:relative}
.color-favorite .micro[data-copied]{color:transparent}
.color-favorite .micro[data-copied]::after{content:attr(data-copied) " ✓";position:absolute;left:0;top:0;color:#e0729f;white-space:nowrap}

/* Sound. */
.sound-lines i{border-radius:2px}
.sound-lines.reactive i{animation:none!important;transform:scaleY(var(--level,.35));transition:transform 120ms ease-out}
.record-disc{box-shadow:0 24px 50px -20px #1d191b80}
.record-disc>span{transform:scale(calc(1 + var(--bass,0) * .1));transition:transform 120ms ease-out}

/* Dialogs. */
dialog{border-radius:4px;border-color:transparent;box-shadow:0 2px 6px #1d191b0d,0 50px 120px -30px #1d191b66}
dialog[open]{animation:soft-rise 600ms var(--calm) both}
dialog[open]::backdrop{background:#1d191b40;backdrop-filter:blur(14px) saturate(1.1);animation:soft-fade 600ms ease-out both}
#dialog-body .tags{gap:.5rem}
#dialog-body .tags span{padding:.35rem .75rem;border-radius:3px;background:#1d191b08}
#dialog-body .detail-content,.operation-metrics>div{border-top-color:var(--soft-line)}
#refrain{border-radius:999px}

/* Trailing ring cursor (created by interact.v2.js). */
.cursor-ring{position:fixed;left:0;top:0;z-index:60;pointer-events:none;width:0;height:0;opacity:0;transition:opacity .5s}
.cursor-ring.is-visible{opacity:1}
.cursor-ring.is-hidden{opacity:0}
.cursor-ring::before{content:"";position:absolute;left:-1rem;top:-1rem;width:2rem;height:2rem;border-radius:50%;border:1px solid #1d191b40;transition:transform 600ms var(--calm),background .5s,border-color .5s}
.cursor-ring.is-active::before{transform:scale(1.5);border-color:transparent;background:#e7a3292e}
.cursor-ring.has-label::before{transform:scale(1.85);background:var(--ink)}
.cursor-ring.on-dark::before{border-color:#fdfcfa55}
.cursor-ring.on-dark.has-label::before{background:var(--accent)}
.cursor-ring.is-pressed::before{transform:scale(.85)}
.cursor-ring.is-active.is-pressed::before{transform:scale(1.3)}
.cursor-ring>span{position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(.5);opacity:0;font:600 .6875rem/1 "Helvetica Neue","PingFang SC",sans-serif;color:var(--white);white-space:nowrap;transition:transform 600ms var(--calm),opacity .3s}
.cursor-ring.on-dark>span{color:var(--ink)}
.cursor-ring.has-label>span{transform:translate(-50%,-50%) scale(1);opacity:1}

@keyframes soft-in{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}
@keyframes soft-rise{from{transform:translateY(24px) scale(.98);opacity:0}to{transform:none;opacity:1}}
@keyframes soft-fade{from{opacity:0}to{opacity:1}}

@media(max-width:760px){
  .panel{border-radius:3px}
  .navigation{position:fixed;border-top:0;box-shadow:0 -10px 30px -18px #1d191b40;background:#f2f1efe6}
  .chapter{border-radius:3px}
}
@media(prefers-reduced-motion:reduce){
  .brand i{animation:none}
  .panel>.panel-heading,.panel>.contact-heading,.intro-name,.service-number,.personal-header,.panel>.panel-meta{translate:none}
  .panel,.panel.is-focused{transform:none;opacity:1}
}