/* ---------- Micro-interactions: focus, hover, press, drag ---------- */

/* Focus ring that snaps in from a wider halo instead of just appearing */
:focus-visible { animation: focus-pop .34s cubic-bezier(.2,.9,.3,1.35); }
@keyframes focus-pop { from { outline-offset: 11px; outline-color: transparent; } }

/* Press ripple (spawned by js/interactions.js) */
.qbtn, .btn, .logo, .ins-close, .fab, .ins-gallery button { position: relative; overflow: hidden; isolation: isolate; }
.ripple { position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; background: currentColor; opacity: .22; transform: scale(0); animation: ripple .55s ease-out forwards; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* ---------- HUD buttons ---------- */
.qbtn { transition: border-color .2s, color .2s, transform .18s cubic-bezier(.2,.9,.3,1.4); }
.qbtn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--accent) 14%, transparent); transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.qbtn:hover::before, .qbtn:focus-visible::before { transform: scaleX(1); }
.qbtn:hover svg, .qbtn:focus-visible svg { animation: nudge .5s cubic-bezier(.3,1.5,.5,1); }
.qbtn:active { transform: scale(.94); }
#soundBtn:hover .wave { animation: wave .8s ease-in-out infinite; }
@keyframes nudge { 0% { transform: none; } 30% { transform: rotate(-14deg) scale(1.18); } 60% { transform: rotate(8deg) scale(1.08); } 100% { transform: none; } }
@keyframes wave { 50% { opacity: .35; } }

.logo { transition: transform .2s cubic-bezier(.2,.9,.3,1.4), border-color .2s; }
.logo:hover { border-color: var(--accent); }
.logo:active { transform: scale(.97); }
.logo-name { transition: letter-spacing .3s cubic-bezier(.2,.8,.2,1); }
.logo:hover .logo-name { letter-spacing: .05em; }
.logo-name em { display: inline-block; }
.logo:hover .logo-name em { animation: hop .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes hop { 40% { transform: translateY(-7px) scale(1.3); } }

#fitBtn { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .25s, color .2s; }
#fitBtn:hover, #fitBtn:focus-visible { background-size: 100% 1px; }

.mini-ring { transition: transform .25s cubic-bezier(.2,.9,.3,1.4), border-color .2s; }
.mini-ring:hover { transform: scale(1.03); border-color: var(--accent); }
.mini-ring:hover .mini-n { animation: hop .6s cubic-bezier(.3,1.6,.5,1); }

.fab { transition: transform .2s cubic-bezier(.2,.9,.3,1.4); }
.fab svg { transition: transform .4s cubic-bezier(.2,.9,.3,1.4); }
.fab:hover svg, .fab:focus-visible svg { transform: rotate(90deg); }
.fab:active { transform: scale(.9); }
.touch .fab { animation: fab-breathe 2.6s ease-in-out infinite; }
@keyframes fab-breathe { 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 18%, transparent), 0 10px 30px -8px var(--shadow); } }

.ins-close { transition: border-color .2s, color .2s; }
.ins-close .kc { transition: transform .12s, border-bottom-width .12s; }
.ins-close:hover .kc, .ins-close:active .kc { transform: translateY(1px); border-bottom-width: 1px; }

.ins-gallery button { transition: opacity .15s, outline-color .15s, transform .2s cubic-bezier(.2,.9,.3,1.4); }
.ins-gallery button:hover { transform: translateY(-3px); }

/* ---------- Buttons inside the cards ---------- */
.btn { transition: background .2s, color .2s, transform .18s cubic-bezier(.2,.9,.3,1.4), box-shadow .2s; }
.btn:hover, .btn:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 16px -8px var(--shadow); }
.btn:active { transform: scale(.95); }

/* ---------- Cards: grab to move ---------- */
.card { cursor: grab; }
.card:active { cursor: grabbing; }
.card.is-dragging { cursor: grabbing; scale: 1.04; outline-color: var(--accent); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 40px 60px -22px var(--shadow); transition: scale .2s cubic-bezier(.2,.9,.3,1.4), box-shadow .2s, outline-color .15s; }
.card.is-dropped { animation: drop .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes drop { 0% { scale: 1.04; } 35% { scale: .96; } 100% { scale: 1; } }
.card.is-returning { transition: left .6s cubic-bezier(.3,1.25,.5,1), top .6s cubic-bezier(.3,1.25,.5,1), transform .22s; }

/* chips, rows and badges react too */
.chip { transition: transform .18s cubic-bezier(.2,.9,.3,1.4), background .18s; }
.card:hover .chip:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--accent) 18%, var(--card)); }
.row { transition: background .2s, padding .2s; border-radius: 6px; }
.card-info .row:hover { background: color-mix(in srgb, var(--card-ink) 5%, var(--card)); padding-inline: 8px; }
.badge { position: relative; overflow: hidden; }
.badge::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-120%); }
.row:hover .badge::after { transition: transform .7s ease; transform: translateX(120%); }
.copy-row code { cursor: copy; border-radius: 4px; transition: background .2s; }
.copy-row code:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* ---------- Skill slots: pick up and reorder ---------- */
.slot { cursor: grab; transition: transform .18s cubic-bezier(.2,.9,.3,1.4), box-shadow .18s, background .18s; touch-action: none; }
.slot:hover { transform: translateY(-3px); background: color-mix(in srgb, var(--accent) 14%, var(--card)); box-shadow: 0 6px 14px -8px var(--shadow); }
.slot.lifted { z-index: 5; scale: 1.12; cursor: grabbing; pointer-events: none; background: var(--card); outline: 2px solid var(--accent); box-shadow: 0 16px 26px -12px var(--shadow); transition: scale .15s, box-shadow .15s; }
.slot.settling { transition: translate .25s cubic-bezier(.2,.9,.3,1.3), scale .2s; }

/* ---------- "Chri." letters ---------- */
.big-name .jl { display: inline-block; transition: transform .25s cubic-bezier(.3,1.6,.5,1), color .2s; cursor: pointer; }
.big-name .jl:hover { transform: translateY(-10px) rotate(-4deg); color: var(--accent); }
.big-name .jl-dot { color: var(--hot); }
.big-name .jl-dot:hover { transform: translateY(-14px) scale(1.25); color: var(--hot); }
.big-name .jl.boing { animation: boing .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes boing { 0% { transform: scale(1); } 30% { transform: scaleX(1.25) scaleY(.75); } 55% { transform: scaleX(.85) scaleY(1.2) translateY(-12px); } 100% { transform: none; } }

/* ---------- Route signposts are clickable ---------- */
#routes .sign { pointer-events: auto; cursor: pointer; }
#routes .sign-in { transition: transform .25s cubic-bezier(.2,.9,.3,1.5); transform-box: fill-box; transform-origin: center; }
#routes .sign rect, #routes .sign text { transition: fill .2s, stroke .2s; }
#routes .sign:hover .sign-in { transform: scale(1.12) rotate(-3deg); }
#routes .sign:hover rect { stroke: var(--accent); fill: color-mix(in srgb, var(--accent) 16%, var(--bg-2)); }
#routes .sign:hover text { fill: var(--ink); }

/* zone corners open up when you hover a zone */
.zone-frame i { transition: width .35s cubic-bezier(.2,.8,.2,1), height .35s cubic-bezier(.2,.8,.2,1), opacity .25s, border-color .25s; }
.zone:hover .zone-frame i { width: 84px; height: 84px; opacity: .9; }

/* ---------- A tool picked in the inspect panel lights up the projects that use it ---------- */
#world.filtering .card { transition: opacity .3s, filter .3s, transform .22s, box-shadow .22s, outline-color .15s; }
#world.filtering .card:not(.match):not(.card-info):not(.inspected) { opacity: .28; filter: grayscale(.9); }
.card.match { outline-color: var(--hot); animation: match-pulse 1.6s ease-in-out infinite; }
@keyframes match-pulse { 50% { outline-offset: 10px; } }