/* ============================================================
   HANNA CHANG — PORTFOLIO
   portfolio.css · shared layout, components, interaction layer
   consumes tokens.css
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;cursor:pointer}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--lime);color:var(--on-lime)}

.pf-wrap{max-width:1080px;margin:0 auto;padding:0 40px}
.pf-eyebrow{font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--muted);font-weight:500}

/* ---------- skip / a11y ---------- */
.pf-ink-blue{color:var(--blue)}
.pf-skip{position:absolute;left:-9999px}
.pf-skip:focus{left:16px;top:16px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-sm)}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.pf-cursor,.pf-cursor-dot{position:fixed;top:0;left:0;z-index:10000;pointer-events:none;
  border-radius:999px;opacity:0;mix-blend-mode:normal}
.pf-cursor{width:34px;height:34px;border:1.5px solid var(--blue);
  transform:translate(-50%,-50%);transition:width var(--dur-med) var(--ease-spring),
  height var(--dur-med) var(--ease-spring),background var(--dur-fast),opacity var(--dur-med),border-color var(--dur-fast)}
.pf-cursor-dot{width:6px;height:6px;background:var(--blue);transform:translate(-50%,-50%)}
body.pf-cursor-on.pf-fine{cursor:none}
body.pf-cursor-on.pf-fine a,body.pf-cursor-on.pf-fine button,
body.pf-cursor-on.pf-fine .pf-pill,body.pf-cursor-on.pf-fine [data-cursor]{cursor:none}
.pf-cursor.is-link{width:54px;height:54px;background:rgba(38,0,255,.08);border-color:var(--blue)}
.pf-cursor.is-press{width:26px;height:26px;background:rgba(38,0,255,.18)}
.pf-cursor.is-grape{border-color:var(--lime)}
.pf-cursor.is-grape.is-link{background:rgba(213,248,33,.14)}
.pf-cursor-dot.is-grape{background:var(--lime)}

/* ============================================================
   SPARKLE TRAIL
   ============================================================ */
.pf-spark{position:fixed;z-index:290;pointer-events:none;transform:translate(-50%,-50%);
  font-family:var(--font-sans);font-weight:700;will-change:transform,opacity;
  animation:pf-spark var(--dur-slow) var(--ease-out) forwards}
@keyframes pf-spark{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0)}
  25%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-160%) scale(1) rotate(var(--spin,20deg))}
}

/* ============================================================
   HEADER
   ============================================================ */
.pf-header{position:sticky;top:0;z-index:100;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:start;gap:24px;padding:20px 40px;background:rgba(255,255,255,.78);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.pf-brand{display:inline-flex;align-items:baseline;gap:0;font-weight:700;font-size:28px;
  letter-spacing:-.02em;white-space:nowrap}
.pf-colon{font-family:var(--font-mark);color:var(--blue);letter-spacing:.04em;display:inline-block;
  transition:transform var(--dur-med) var(--ease-spring)}
.pf-brand:hover .pf-colon{transform:rotate(-90deg) translateX(1px)}
.pf-nav{display:flex;gap:6px 22px;flex-wrap:wrap;justify-content:center;font-size:14px;
  color:var(--ink-soft);padding-top:6px}
.pf-navlink{display:inline-flex;align-items:center;gap:6px;position:relative;
  transition:color var(--dur-fast) var(--ease-out)}
.pf-navlink .pf-g{color:var(--muted);font-size:12px;transition:color var(--dur-fast),transform var(--dur-med) var(--ease-spring)}
.pf-navlink:hover{color:var(--blue)}
.pf-navlink:hover .pf-g{color:var(--blue);transform:rotate(20deg) scale(1.25)}
.pf-navlink.is-active{color:var(--blue)}
.pf-navlink.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;
  background:var(--blue);border-radius:2px}
.pf-loc{justify-self:end;text-align:right;font-size:13px;color:var(--ink-soft);
  line-height:1.45;white-space:nowrap;padding-top:4px}
.pf-clock{font-family:var(--font-mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

/* ============================================================
   FOOTER
   ============================================================ */
.pf-footer{border-top:1px solid var(--line);margin-top:120px;padding-top:48px;overflow:hidden}
.pf-footer-top{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-bottom:34px}
.pf-footer-rights{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.5}
.pf-footer-cta{text-align:right}
.pf-footer-cta .pf-eyebrow{display:block;margin-bottom:6px}
.pf-mail{font-size:18px;color:var(--ink);font-weight:500;border-bottom:1.5px solid transparent;
  transition:color var(--dur-fast),border-color var(--dur-fast)}
.pf-mail:hover{color:var(--blue);border-color:var(--blue)}
.pf-bigmark{font-weight:700;font-size:clamp(54px,14vw,168px);letter-spacing:-.045em;line-height:.92;
  white-space:nowrap;padding:8px 0 18px;user-select:none}
.pf-bigmark-c{font-family:var(--font-mark);color:var(--blue);display:inline-block;
  transition:transform var(--dur-slow) var(--ease-spring)}
.pf-bigmark:hover .pf-bigmark-c{transform:rotate(-12deg)}
.pf-foot-links{display:flex;gap:20px;margin-top:4px;font-size:14px;color:var(--muted)}
.pf-foot-links a{transition:color var(--dur-fast)}
.pf-foot-links a:hover{color:var(--blue)}

/* ============================================================
   BUTTONS
   ============================================================ */
.pf-btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;
  padding:12px 22px;border-radius:var(--r-pill);transition:transform var(--dur-fast) var(--ease-spring),
  background var(--dur-fast),box-shadow var(--dur-fast),color var(--dur-fast)}
.pf-btn--primary{background:var(--blue);color:#fff;box-shadow:var(--shadow-pill)}
.pf-btn--primary:hover{background:var(--blue-press);transform:translateY(-2px) rotate(-1.5deg)}
.pf-btn--primary:active{transform:scale(.97)}
.pf-btn--ghost{border:1.5px solid var(--line);color:var(--ink)}
.pf-btn--ghost:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px) rotate(1.5deg)}
.pf-btn--lime{background:var(--lime);color:var(--on-lime)}
.pf-btn--lime:hover{transform:translateY(-2px) rotate(2deg)}

/* ============================================================
   BADGES
   ============================================================ */
.pf-badge{font-family:var(--font-mono);font-weight:500;font-size:12px;padding:4px 10px;
  border-radius:var(--r-sm);white-space:nowrap;letter-spacing:.02em}
.pf-badge--year{background:var(--blue);color:#fff}
.pf-badge--disc{background:var(--lime);color:var(--on-lime)}
.pf-badge--grape{background:var(--grape);color:#fff}
.pf-badge--lav{background:var(--lavender);color:var(--blue)}
.pf-badge--soft{background:var(--paper-soft);color:var(--ink-soft);border:1px solid var(--line)}

/* ============================================================
   OBSESSION PILLS
   ============================================================ */
.pf-pills{display:flex;gap:18px;flex-wrap:wrap}
.pf-pill{font-family:var(--font-pixel);font-weight:600;font-size:20px;padding:9px 22px;
  border-radius:var(--r-pill);box-shadow:var(--shadow-pill);user-select:none;cursor:grab;
  will-change:transform;touch-action:none}
.pf-pill.is-drag{cursor:grabbing;box-shadow:0 16px 38px rgba(38,0,255,.32)}
.pf-pill--lime{background:var(--lime);color:var(--on-lime)}
.pf-pill--blue{background:var(--blue);color:#fff}
.pf-pill--lavender{background:var(--lavender);color:var(--blue)}
.pf-pill--gold{background:var(--gold);color:#241500}

/* ============================================================
   EDITORIAL RAIL (label + content)
   ============================================================ */
.pf-section{padding:64px 0;border-top:1px solid var(--line)}
.pf-section--plain{border-top:0}
.pf-rail{display:grid;grid-template-columns:200px 1fr;gap:32px}
.pf-rail-label{display:flex;flex-direction:column;gap:4px}
.pf-rail-label .pf-sub{font-size:13px;color:var(--muted)}
.pf-rail-title{font-size:15px;font-weight:500;letter-spacing:-.01em}

/* ============================================================
   REACTIVE ASCII
   ============================================================ */
.pf-ascii{display:block;width:100%;color:var(--blue);font-family:var(--font-mono);
  line-height:1;user-select:none}
.pf-ascii-wrap{position:relative}
.pf-ascii-cap{position:absolute;bottom:10px;right:14px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);pointer-events:none;opacity:.7}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.pf-reveal{opacity:0;transform:translateY(22px);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.pf-reveal.is-in{opacity:1;transform:none}
.pf-reveal[data-d="1"]{transition-delay:.07s}
.pf-reveal[data-d="2"]{transition-delay:.14s}
.pf-reveal[data-d="3"]{transition-delay:.21s}
.pf-reveal[data-d="4"]{transition-delay:.28s}

/* ============================================================
   REMIX CONTROL (variation switcher)
   ============================================================ */
.pf-remix{position:fixed;right:22px;bottom:22px;z-index:120;display:flex;flex-direction:column;
  align-items:flex-end;gap:10px;font-family:var(--font-mono)}
.pf-remix-toggle{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;
  padding:11px 16px;border-radius:var(--r-pill);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:var(--shadow-md);transition:transform var(--dur-fast) var(--ease-spring),background var(--dur-fast)}
.pf-remix-toggle:hover{transform:translateY(-2px) rotate(-2deg);background:var(--blue)}
.pf-remix-star{font-family:var(--font-sans);font-size:15px;display:inline-block;transition:transform var(--dur-med) var(--ease-spring)}
.pf-remix-toggle:hover .pf-remix-star{transform:rotate(90deg)}
.pf-remix-panel{display:none;flex-direction:column;gap:14px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 18px 16px;box-shadow:var(--shadow-lg);
  width:240px}
.pf-remix.is-open .pf-remix-panel{display:flex;animation:pf-pop .3s var(--ease-spring)}
.pf-remix-group .pf-eyebrow{display:block;margin-bottom:8px;font-size:10px}
.pf-remix-opts{display:flex;gap:8px}
.pf-remix-opt{flex:1;border:1px solid var(--line);border-radius:var(--r-md);padding:9px 6px;
  font-family:var(--font-sans);font-size:12px;font-weight:500;color:var(--ink-soft);
  transition:all var(--dur-fast) var(--ease-out)}
.pf-remix-opt:hover{border-color:var(--blue)}
.pf-remix-opt.is-on{background:var(--blue);color:#fff;border-color:var(--blue)}
.pf-remix-note{font-family:var(--font-sans);font-size:11px;color:var(--muted);line-height:1.45}

@keyframes pf-pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes pf-fade{from{opacity:0}to{opacity:1}}

/* ============================================================
   PAGE INTRO (work / about / contact heads)
   ============================================================ */
.pf-pagehead{padding:84px 0 8px}
.pf-pagehead .pf-eyebrow{margin-bottom:18px;display:block}
.pf-pagetitle{font-size:clamp(40px,6.5vw,80px);font-weight:600;letter-spacing:-.035em;line-height:1.0}
.pf-pagetitle .pf-ink-blue{color:var(--blue)}
.pf-pagelede{font-size:clamp(18px,2.3vw,24px);font-weight:400;color:var(--ink-soft);
  max-width:620px;margin-top:22px;line-height:1.4}

@media (max-width:760px){
  .pf-header{grid-template-columns:1fr;gap:12px;padding:16px 22px}
  .pf-loc{justify-self:start;text-align:left}
  .pf-nav{justify-content:flex-start;font-size:13px;gap:4px 16px}
  .pf-wrap{padding:0 22px}
  .pf-rail{grid-template-columns:1fr;gap:14px}
  .pf-remix{right:14px;bottom:14px}
}
@media (max-width:480px){
  .pf-pill{padding:12px 22px;touch-action:auto}
  .pf-bigmark{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}