/* ==========================================================================
   29 Sep 2026 direction layer — tactile editorial with hand-drawn personality.
   Source of truth: Portfolio/DESIGN.md §5–6 and design-references/motion-lab.
   Timing vocabulary: press 90 · exit 160 · response 240–280 · settle 350–480.
   ========================================================================== */

/* ---------- Grounds ---------- */
body.home{background:var(--paper)}
body.dashboard-case{background:var(--white)}
body.dashboard-case .nav{background:rgba(255,255,255,.86)}
.pill{transition:transform 240ms var(--direct),box-shadow 240ms var(--direct),background-color 200ms ease}
.pill:active{transform:translateY(1px) scale(.98);transition-duration:90ms}
.primary{box-shadow:var(--highlight),var(--shade)}
:focus-visible{outline:3px solid #4b69f0;outline-offset:5px}

/* ---------- Contextual cursors (fine pointers only; native elsewhere) ---------- */
@media (hover:hover) and (pointer:fine){
  body{cursor:url('assets/cursors/arrow.svg') 4 3,auto}
  p,h1,h2,h3,h4,li,dd,dt,figcaption,small,td,th,
  p *,h1 *,h2 *,h3 *,h4 *,li *,dd *,td *{cursor:url('assets/cursors/text.svg') 20 22,text}
  a,a *,button,button *,label,summary,[data-dialog],[data-dialog] *{cursor:url('assets/cursors/hand.svg') 18 4,pointer}
  .deck-card.is-front,.deck-card.is-front *{cursor:url('assets/cursors/grab.svg') 20 20,grab}
  .deck.is-dragging,.deck.is-dragging *{cursor:url('assets/cursors/grabbing.svg') 20 20,grabbing!important}
}
@media (forced-colors:active){body,body *{cursor:auto!important}.action-bubble{display:none}}

/* ---------- Scribble links: stepped shake + sketched underline (lab recipe 02) ---------- */
a.scribble{position:relative;display:inline-block}
a.scribble:has(.i){display:inline-flex;align-items:center}a.scribble .link-gesture:has(.i){display:inline-flex;align-items:center;gap:8px}
.link-gesture{position:relative;display:inline-block;transform-origin:20% 70%}
.link-scribble{position:absolute;left:0;top:calc(100% + .06em);width:100%;height:.3em;overflow:hidden;clip-path:inset(0 0 0 100%);transition:clip-path 260ms cubic-bezier(.22,1,.36,1);pointer-events:none}
.link-scribble path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
a.scribble:focus-visible .link-scribble{clip-path:inset(0)}
@media (hover:hover){
  a.scribble:hover .link-gesture{animation:link-wiggle .32s steps(2,end) 2}
  a.scribble:hover .link-scribble{clip-path:inset(0);animation:underline-enter 300ms both}
}
@keyframes link-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
@keyframes underline-enter{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}

/* ---------- Hero: ID card + route sticker (one expressive motif) ---------- */
.hero .line{display:block}
.hero h1>.line{color:var(--ink)}.hero h1>.line+.line{color:var(--secondary)}
.identity{transition:transform 480ms var(--settle)}
.identity.is-tilting{transition:transform 130ms var(--direct)}
.sticker{display:block;pointer-events:none;filter:drop-shadow(0 3px 2px rgba(22,22,22,.14)) drop-shadow(0 8px 10px rgba(22,22,22,.06))}
.sticker-hero{position:absolute;z-index:4;width:104px;height:104px;left:-54px;top:-40px;transform:rotate(-8deg)}
.badge-caption{margin-top:44px}

/* ---------- Selected work: evidence stays calm (lift 4px, media 1.02, one sticker settle) ---------- */
.project-link .round,.ai-cover{transition:transform 280ms var(--direct),background-color 200ms ease,box-shadow 280ms var(--direct)}
.featured .project-media{transition:transform 280ms var(--direct)}
.featured:hover .project-media{transform:translateY(-4px)}
.dashboard-media img{transition:transform 420ms var(--direct)}
.project-link:hover .dashboard-media img{transform:rotate(-3deg) scale(1.02)}
.result-sticker{transition:transform 420ms var(--settle);box-shadow:var(--highlight),var(--shade),0 6px 10px rgba(22,22,22,.12),0 18px 30px rgba(22,22,22,.10)}
.featured:hover .result-sticker{transform:rotate(1.5deg) translateY(-4px)}
.ai-cover:hover{transform:translateY(-4px)}
.secondary-media{transition:transform 280ms var(--direct)}
.secondary-media img{transition:transform 420ms var(--direct)}
.project-link:hover .secondary-media{transform:translateY(-4px)}
.project-link:hover .secondary-media img{transform:scale(1.02)}

/* ---------- Signature statement: dispersed → converged on scroll (lab recipe 06) ---------- */
.statement{position:relative;padding:110px 0 40px}

.statement-window{overflow:hidden;padding:36px 0}
.statement-line{font-size:clamp(52px,8.4vw,132px);line-height:1.04;letter-spacing:-.04em;font-weight:620;width:min(1160px,calc(100% - 96px));margin:auto}
.statement-line>.statement-word{display:inline-block;white-space:nowrap;color:var(--ink)}
.statement-piece{display:inline-block;vertical-align:middle;transform-origin:50% 60%}
.statement-piece.letter{vertical-align:baseline}
.sticker-piece{width:.95em;height:.95em;margin:0 .1em;filter:drop-shadow(0 3px 2px rgba(22,22,22,.14))}
.photo-piece{width:1.3em;height:.92em;object-fit:cover;border-radius:.16em;margin:0 .14em;box-shadow:var(--shadow-sm);transform:rotate(-4deg)}
.statement-note{color:var(--secondary);font-size:17px;line-height:1.65;max-width:540px;margin-top:8px}
html.scroll-live .statement{height:140vh;padding:0}
html.scroll-live .statement-sticky{position:sticky;top:10vh;min-height:80vh;display:flex;flex-direction:column;justify-content:center}
html.scroll-live .statement-line{white-space:nowrap;width:max-content;margin:0;will-change:transform}
html.scroll-live .statement-piece{will-change:transform}
html.scroll-live .statement-window{padding:90px 0}

/* ---------- About: three principles that lean with your approach (lab recipe 02) ---------- */
.principles{grid-column:1/-1;list-style:none;margin:0;padding:10px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;perspective:1100px}
.principle{--angle:0deg;background:var(--white);border-radius:28px;padding:22px 26px 28px;box-shadow:var(--highlight),var(--shade),var(--shadow);display:flex;flex-direction:column;gap:6px;min-width:0;
  transform:translateX(calc(var(--shift,0px) + var(--nudge,0px))) rotate(var(--angle)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform 420ms var(--settle)}
.principle:nth-child(1){--angle:-1.5deg}.principle:nth-child(2){--angle:1deg}.principle:nth-child(3){--angle:-.5deg}
.principle.is-active{transform:translateX(var(--nudge,0px)) translateY(-6px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.015);transition:transform 130ms var(--direct)}
.principle img{width:84px;height:84px;margin:-4px 0 12px -6px;filter:drop-shadow(0 3px 2px rgba(22,22,22,.12));transform:rotate(-6deg)}
.principle:nth-child(2) img{transform:rotate(7deg)}.principle:nth-child(3) img{transform:rotate(-3deg)}

.principle strong{font-size:22px;font-weight:600;letter-spacing:-.035em;line-height:1.2}
.principle p{font-size:15px;line-height:1.6;color:var(--secondary)}
@media (hover:none),(pointer:coarse){.principle,.principle.is-active{transform:rotate(var(--angle))}}

/* ---------- Room to play: persistent-card shuffle (lab recipe 05) ---------- */
.explorations{padding:40px 0 130px;overflow-x:clip}
.play{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.deck{position:relative;height:520px;isolation:isolate}
.deck-card{position:absolute;top:34px;left:50%;width:360px;margin-left:-180px;height:440px;border-radius:30px;padding:16px 16px 22px;background:var(--white);box-shadow:var(--highlight),var(--shade),var(--shadow);display:flex;flex-direction:column;gap:12px;user-select:none;-webkit-user-select:none;touch-action:pan-y;transform-origin:50% 60%;will-change:transform}
.deck-card[data-key="motion"]{background:var(--blue)}
.deck-card[data-key="ring"]{background:var(--lime)}
.deck-meta{font-size:12px;padding:4px 6px 0;letter-spacing:0}
.deck-media{flex:1;min-height:0;border-radius:20px;overflow:hidden;background:#1b1b1b}
.deck-media img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.ring-media{background:rgba(255,255,255,.45);box-shadow:inset 0 2px 6px rgba(22,22,22,.08)}
.ring-canvas{width:100%;height:100%;display:block}
.deck-card h3{font-size:25px;line-height:1.2;padding:0 6px;letter-spacing:-.04em}
.deck-card:not(.is-front) h3,.deck-card:not(.is-front) .deck-meta{opacity:.75}
.deck-side .deck-count{font-size:12px;color:var(--secondary);font-variant-numeric:tabular-nums;margin-bottom:14px}
.deck-side h3{font-size:clamp(28px,2.6vw,36px);line-height:1.15;letter-spacing:-.04em}
.deck-side #deck-desc{margin-top:14px;color:var(--secondary);font-size:16px;line-height:1.65;max-width:42ch;min-height:5.2em}
.deck-controls{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.deck-controls .pill{gap:14px;min-height:48px}
.deck-controls .pill:not(.primary){background:var(--white);box-shadow:var(--highlight),var(--shade),var(--shadow-sm);width:52px;padding:0;font-size:18px}
.deck-hint{font-size:12px;color:var(--secondary);margin-top:18px}
html:not(.js) .deck{height:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
html:not(.js) .deck-card{position:static;margin:0;width:auto;height:380px}

/* ---------- Contact: a hand-drawn underline that appears once ---------- */
.drawn{position:relative;display:inline-block}
.drawn-line{position:absolute;left:-2%;bottom:-.1em;width:104%;height:.26em;overflow:visible;pointer-events:none}
.drawn-line path{fill:none;stroke:var(--accent-deep);stroke-width:7;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
html.js .drawn:not(.is-drawn) .drawn-line path{stroke-dashoffset:1}
.drawn.is-drawn .drawn-line path{transition:stroke-dashoffset 700ms var(--direct) 120ms}

/* ---------- Cursor action bubble (lab recipe 07) ---------- */
.action-bubble{position:fixed;left:0;top:0;z-index:60;pointer-events:none;visibility:hidden;max-width:calc(100vw - 24px)}
.action-bubble span{position:relative;display:block;white-space:nowrap;background:var(--accent);color:var(--ink);padding:13px 20px;border-radius:49% 45% 43% 46%/45% 52% 43% 48%;box-shadow:0 4px 0 rgba(22,22,22,.08);font-size:13px;font-weight:620;letter-spacing:-.01em;transform:scale(.65) rotate(-10deg);opacity:0;transform-origin:15% 100%;transition:transform 160ms ease,opacity 120ms ease}
.action-bubble span::after{content:"";position:absolute;left:17px;bottom:-5px;width:14px;height:13px;background:var(--accent);clip-path:polygon(0 0,100% 0,0 100%)}
.action-bubble.visible{visibility:visible}
.action-bubble.visible span{opacity:1;transform:none;transition:transform 360ms cubic-bezier(.2,1.5,.4,1),opacity 120ms ease}
.work-section .action-bubble span{background:var(--accent)}

/* ---------- Brush scene change (lab recipe 08) ---------- */
.brush-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:1000;pointer-events:none;visibility:hidden}
.brush-logo{position:fixed;inset:0;z-index:1001;display:grid;place-items:center;font-size:clamp(96px,14vw,190px);font-weight:800;letter-spacing:-.09em;color:var(--brush-ink,#161616);visibility:hidden;pointer-events:none}
.brush-logo.breathing{visibility:visible;animation:logo-breathe 1s ease-in-out both}
html.brush-in body::before{content:"";position:fixed;inset:0;z-index:999;background:var(--brush-colour,#ffce67)}
html.brush-in .brush-logo{visibility:visible;animation:logo-breathe 1s ease-in-out var(--breath-delay,0ms) both}
html.brush-in .brush-logo.released{visibility:hidden;animation:none}
@keyframes logo-breathe{0%{opacity:0}40%{opacity:1}60%{opacity:1}100%{opacity:0}}

/* ---------- Project entry: thumbnail → case-study hero keeps its identity ---------- */
@view-transition{navigation:auto}
.morph-dash,.dashboard-case .case-cover img{view-transition-name:dash-shot}
::view-transition-group(dash-shot){animation-duration:460ms;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:220ms}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .sticker-hero{width:86px;height:86px;left:-40px;top:-34px}
  .play{grid-template-columns:1fr;gap:28px}
  .deck-side{max-width:560px}
  .principles{gap:16px}
  .principle{padding:18px 20px 22px}
  .principle strong{font-size:19px}
}
@media (max-width:767px){
  .statement{padding:70px 0 10px}
  .statement-line{width:calc(100% - 40px);font-size:clamp(46px,12vw,64px)}
  .sticker-piece{width:.9em;height:.9em}
  .principles{grid-template-columns:1fr;gap:14px}
  .principle{display:grid;grid-template-columns:64px 1fr;column-gap:16px;row-gap:2px;padding:18px}
  .principle img{grid-row:span 2;width:64px;height:64px;margin:0}
  .deck{height:470px}
  .deck-card{width:290px;margin-left:-145px;height:390px}
  .deck-side #deck-desc{min-height:0}
  .explorations{padding-bottom:80px}
}
@media (max-width:700px){.sticker-hero{width:76px;height:76px;left:-30px;top:-30px}}

/* ---------- Reduced motion: complete, still alternative ---------- */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .principle,.principle.is-active{transform:rotate(var(--angle))!important}
  .link-scribble{transition:none}
  .action-bubble span{transition:none!important;transform:none!important}
  html.js .drawn:not(.is-drawn) .drawn-line path{stroke-dashoffset:0}
}