/* ═══ hannarybak.com — landing ════════════════════════════════
   Free-form collage, faithful to "Structure main page.png".
   Cream ground, near-invisible chrome, the work does the talking.
   ═══════════════════════════════════════════════════════════ */

:root{
  --cream:#FBF4EC;
  --ink:#1A1714;
  --mute:#9A8F84;
  --line:rgba(26,23,20,.14);
  --bar-h:52px;
  --pad:clamp(18px,2.6vw,38px);
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  background:var(--cream);
  color:var(--ink);
  font:400 13px/1.45 "Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* hide the native pointer — .cur takes over */
@media (hover:hover) and (pointer:fine){
  body,body *{cursor:none}
}

a{color:inherit;text-decoration:none}

/* ── header ───────────────────────────────────────────────── */
.bar{
  position:fixed; inset:0 0 auto 0; z-index:60;
  height:var(--bar-h);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:0 var(--pad);
  background:linear-gradient(var(--cream) 62%,rgba(251,244,236,0));
}

.bar nav{display:flex; gap:clamp(14px,1.6vw,26px)}
.bar__r{justify-self:end}

.bar a{
  font-size:12px; font-weight:500; letter-spacing:.01em;
  position:relative; padding-bottom:2px;
}
.bar a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform .32s cubic-bezier(.22,1,.36,1);
}
.bar a:hover::after{transform:scaleX(1)}
.bar sup{font-size:9px; opacity:.5; margin-left:1px; top:-.4em}

/* logo — swap .logo__mark for the GIF */
.logo{display:flex; align-items:center; gap:8px}
.logo__mark{
  width:19px; height:19px; border-radius:47% 53% 44% 56%;
  background:var(--ink);
  animation:wob 5.5s ease-in-out infinite;
}
@keyframes wob{
  0%,100%{border-radius:47% 53% 44% 56%; transform:rotate(0)}
  33%    {border-radius:58% 42% 61% 39%; transform:rotate(120deg)}
  66%    {border-radius:39% 61% 47% 53%; transform:rotate(240deg)}
}
.logo__txt{font-weight:600; font-size:12.5px; letter-spacing:-.005em; white-space:nowrap}

/* ── the canvas ───────────────────────────────────────────── */
/* aspect-ratio locks height to width, so every % position from
   the source mockup stays true at any viewport width.          */
.canvas{
  position:relative;
  width:100%;
  aspect-ratio:1382/5319;
  margin-top:calc(var(--bar-h) * -1);
}

.it{
  position:absolute;
  will-change:transform;
  transform:translate3d(var(--dx,0px),calc(var(--dy,0px) + var(--py,0px)),0) rotate(var(--rot,0deg));
}
.it img{
  width:100%; height:100%; display:block;
  object-fit:contain;
  -webkit-user-drag:none; user-select:none;
  pointer-events:none;
}

/* projects — clickable, lift on hover */
.it--project{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.it--project img{transition:opacity .35s ease, filter .35s ease}
.canvas.dim .it--project:not(:hover) img{opacity:.42; filter:saturate(.55)}
.it--project:hover{
  transform:translate3d(var(--dx,0px),calc(var(--dy,0px) + var(--py,0px) - 5px),0)
            rotate(var(--rot,0deg)) scale(1.014);
}

/* hover overlay — a 40% wash over the whole cover, name + year on top.
   Type scales with the thumbnail itself (cqw), so it fits the small
   pieces as well as the wide ones. */
.it--project{container-type:size}
.ov{
  position:absolute; inset:0; z-index:2;
  border-radius:inherit;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.4em; padding:6% 8%;
  text-align:center; color:var(--cream);
  background:rgba(26,23,20,.4);
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.it--project:hover .ov{opacity:1}
.ov__t{
  font-weight:600; line-height:1.15; letter-spacing:-.01em;
  font-size:clamp(12px,7cqw,26px);
}
.ov__y{
  letter-spacing:.08em; opacity:.85;
  font-size:clamp(10px,3.6cqw,14px);
}

/* stickers — inactive but draggable */
.it--sticker{touch-action:none}
.it--sticker.grab{
  transition:none;
  z-index:50;
  filter:drop-shadow(0 14px 26px rgba(26,23,20,.13));
}

/* ── footer ───────────────────────────────────────────────── */
.foot{
  display:flex; justify-content:space-between; gap:16px;
  padding:0 var(--pad) 34px;
  font-size:11px; color:var(--mute); letter-spacing:.02em;
}
.foot__c{color:var(--ink); opacity:.55}

/* ── custom cursor ────────────────────────────────────────── */
.cur{
  position:fixed; top:0; left:0; z-index:99;
  pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  width:11px; height:11px; border-radius:99px;
  background:var(--ink); color:var(--cream);
  transform:translate(-50%,-50%);
  transition:width .34s cubic-bezier(.22,1,.36,1),
             height .34s cubic-bezier(.22,1,.36,1),
             border-radius .34s, background .2s;
}
.cur.drag{width:34px; height:34px; background:transparent;
          border:1.5px solid var(--ink)}
.cur.hidden{opacity:0}

@media (hover:none),(pointer:coarse){ .cur{display:none} }

/* ── reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}