/* liveliness layer — additive to kvkme.css */

/* --- Portrait card (home hero) --- */
.hero-2col{display:grid;grid-template-columns:1fr;gap:32px;align-items:end}
@media (min-width:820px){.hero-2col{grid-template-columns:1.4fr 1fr;gap:48px}}
.portrait{position:relative;border-radius:16px;overflow:hidden;background:var(--wash);aspect-ratio:4/5;max-width:340px;justify-self:end;box-shadow:0 30px 60px -30px rgba(0,0,0,.25);transform-style:preserve-3d;transition:transform .3s cubic-bezier(.2,.9,.3,1);will-change:transform}
.portrait img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.9,.3,1);transform:scale(1.02)}
.portrait:hover img{transform:scale(1.06)}
.portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,transparent 40%,color-mix(in srgb,var(--accent) 45%,transparent));mix-blend-mode:multiply;opacity:.35;transition:opacity .4s}
.portrait:hover::after{opacity:.15}
.portrait .badge{position:absolute;left:12px;bottom:12px;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-family:var(--mono);font-size:11px;color:var(--ink);display:flex;gap:8px;align-items:center;letter-spacing:.05em}
.portrait .badge .pulse{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 #22c55e;animation:pulse 2s infinite}
.portrait .caption{position:absolute;right:10px;top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.15em;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5);text-transform:uppercase;background:color-mix(in srgb,#000 40%,transparent);padding:4px 10px;border-radius:4px}

/* small avatar for other pages */
.avatar{width:56px;height:56px;border-radius:50%;overflow:hidden;flex-shrink:0;border:2px solid var(--wash);vertical-align:middle;display:inline-block}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}

/* --- Cursor spotlight (desktop only, respects reduced-motion) --- */
@media (hover:hover) and (min-width:820px){
  .spot{position:fixed;pointer-events:none;z-index:1;width:520px;height:520px;border-radius:50%;left:0;top:0;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 12%,transparent) 0%,transparent 65%);transform:translate(-50%,-50%);mix-blend-mode:screen;opacity:0;transition:opacity .3s}
  body.mouse .spot{opacity:1}
}
@media (prefers-reduced-motion:reduce){.spot{display:none!important}}

/* --- Scroll reveal --- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.9,.3,1),transform .7s cubic-bezier(.2,.9,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* --- Magnetic tilt cards (also uses base .card) --- */
.card{transform-style:preserve-3d;will-change:transform}
.card.tilt{transition:transform .2s cubic-bezier(.2,.9,.3,1),border-color .15s,box-shadow .15s}

/* --- Marquee ticker --- */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-2);margin:32px 0;overflow:hidden;font-family:var(--mono);font-size:12px;color:var(--ink-2);letter-spacing:.05em}
.ticker-track{display:flex;gap:48px;padding:12px 0;width:max-content;animation:tick 40s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker span{display:flex;align-items:center;gap:8px;white-space:nowrap}
.ticker span::before{content:"◆";color:var(--accent);font-size:9px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* --- Text scramble target --- */
.scramble{display:inline-block}
.scramble .chunk{display:inline-block;transition:none}

/* --- Wordmark dot: clickable for accent-cycle easter egg --- */
.wordmark::after{cursor:pointer;transition:transform .2s}
.wordmark:hover::after{transform:scale(1.4)}

/* --- Home hero secondary stats strip --- */
.hero-strip{display:flex;flex-wrap:wrap;gap:24px;padding:16px 0;margin-top:24px;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.hero-strip .s{display:flex;flex-direction:column;gap:2px;min-width:80px}
.hero-strip .s b{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--accent-ink);letter-spacing:-.01em}