/* Floating header. Everything is prefixed .fh-. Geometry comes from Figma CV-2026 / "Menu" (415:1748). */
.fh-root{
  --fh-surface:#1B1919; --fh-white:#fff; --fh-muted:rgba(255,255,255,.7); --fh-active:#EBEBEB; --fh-email:#F5F5F5; --fh-ink:#1B1919;
  --fh-ease:cubic-bezier(.2,.8,.2,1); --fh-dur:400ms;
  --fh-gap:16px; --fh-circle:60px; --fh-closed-w:393px; --fh-open-w:450px; --fh-open-h:257px;
  --fh-port-w:156px; --fh-port-h:246px; --fh-info-left:178px;
  position:fixed; top:24px; left:50%; z-index:99990;
  width:calc(var(--fh-circle) + var(--fh-gap) + var(--fh-closed-w)); height:60px;
  transform:translateX(-50%); pointer-events:none;
  font-family:"Funnel Display",system-ui,sans-serif; color:var(--fh-white);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
body.admin-bar .fh-root{top:calc(24px + 32px)}
.fh-root *,.fh-root *::before,.fh-root *::after{box-sizing:border-box}
.fh-root.fh-root a,.fh-root.fh-root button{
  font-family:inherit; letter-spacing:normal; text-transform:none; text-decoration:none;
  border:0; margin:0; box-shadow:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.fh-root.fh-root :focus-visible{outline:2px solid var(--fh-white); outline-offset:2px}
.fh-root svg{display:block; flex:none}

/* Round home / back button */
.fh-root.fh-root .fh-circle{
  position:absolute; top:0; left:0; width:var(--fh-circle); height:var(--fh-circle); padding:0;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:var(--fh-surface); color:var(--fh-white); pointer-events:auto;
  transition:transform var(--fh-dur) var(--fh-ease),background-color 150ms ease,opacity 200ms ease;
}
.fh-root.fh-root .fh-circle:hover{background:#2C2929; color:var(--fh-white)}
.fh-root.fh-root .fh-circle:active{background:#000}
.fh-root.is-open .fh-circle{transform:translateX(calc(var(--fh-closed-w) - var(--fh-open-w)))}
/* Icon: 26px at rest, grows alongside the home-to-arrow morph (same 120ms). */
.fh-root .fh-circle .fh-morph{width:26px; height:26px; transition:transform 120ms ease-out}
@media (hover:hover){.fh-root .fh-circle:hover .fh-morph{transform:scale(1.15)}}
.fh-root .fh-circle:focus-visible .fh-morph{transform:scale(1.15)}

/* The pill that morphs into the panel. Its right edge stays put so the tabs barely move under the cursor. */
.fh-panel{
  position:absolute; top:0; right:0; width:var(--fh-closed-w); height:60px; overflow:hidden;
  border-radius:30px; background:var(--fh-surface); pointer-events:auto;
  transition:width var(--fh-dur) var(--fh-ease),height var(--fh-dur) var(--fh-ease),border-radius var(--fh-dur) var(--fh-ease);
}
.fh-root.is-open .fh-panel{width:var(--fh-open-w); height:var(--fh-open-h); border-radius:26px}

/* Avatar: one element for all three states */
.fh-avatar{
  position:absolute; left:6px; top:5px; width:50px; height:50px; margin:0; overflow:hidden;
  border-radius:25px; background:#3a3838;
  transition:width var(--fh-dur) var(--fh-ease),height var(--fh-dur) var(--fh-ease),top var(--fh-dur) var(--fh-ease),border-radius var(--fh-dur) var(--fh-ease);
}
.fh-root .fh-avatar img{display:block; width:100%; height:100%; max-width:none; border-radius:0; object-fit:cover; object-position:65% 50%}
.fh-root[data-state="projects"] .fh-avatar{top:6px; width:44px; height:44px; border-radius:22px}
.fh-root[data-state="contact"] .fh-avatar{width:var(--fh-port-w); height:var(--fh-port-h); border-radius:22px}

/* Name */
.fh-id{
  position:absolute; left:72px; top:11px; display:flex; flex-direction:column; white-space:nowrap;
  transition:opacity 200ms ease 120ms,transform var(--fh-dur) var(--fh-ease);
}
.fh-id__nick{font-size:18px; line-height:23px; font-weight:600}
.fh-id__name{font-size:12px; line-height:15px; font-weight:400; color:var(--fh-muted)}
.fh-root.is-open .fh-id{opacity:0; transform:translateY(-4px); transition:opacity 100ms ease,transform var(--fh-dur) var(--fh-ease); visibility:hidden}

/* Tabs */
.fh-root.fh-root .fh-tab{
  position:absolute; top:7px; height:46px; padding:0; display:block; text-align:center;
  font-size:16px; line-height:19px; font-weight:500; white-space:nowrap;
  border-radius:999px; background:transparent; color:var(--fh-white);
  transition:right var(--fh-dur) var(--fh-ease),top var(--fh-dur) var(--fh-ease),width var(--fh-dur) var(--fh-ease),height var(--fh-dur) var(--fh-ease),background-color 200ms ease,color 200ms ease;
}
.fh-root.fh-root .fh-tab:hover,.fh-root.fh-root .fh-tab:focus{background:transparent; color:var(--fh-white)}
.fh-root.fh-root .fh-tab--projects{right:95px; width:76px}
.fh-root.fh-root .fh-tab--contact{right:21px; width:74px}
.fh-root.fh-root[data-state="projects"] .fh-tab{top:6px; height:40px; width:108px}
.fh-root.fh-root[data-state="projects"] .fh-tab--projects{right:113px; background:var(--fh-active); color:var(--fh-ink)}
.fh-root.fh-root[data-state="projects"] .fh-tab--contact{right:5px}
.fh-root.fh-root[data-state="contact"] .fh-tab{top:9px; height:40px; width:108px}
.fh-root.fh-root[data-state="contact"] .fh-tab--projects{right:116px}
.fh-root.fh-root[data-state="contact"] .fh-tab--contact{right:8px; background:var(--fh-white); color:var(--fh-ink)}
@media (hover:hover){
  .fh-root.fh-root[data-state="projects"] .fh-tab--contact:hover,
  .fh-root.fh-root[data-state="contact"] .fh-tab--projects:hover{background:rgba(255,255,255,.1)}
}

/* Panes stay out of the tab order until they are showing */
.fh-pane{position:absolute; visibility:hidden; opacity:0; transition:opacity 120ms ease,visibility 0s linear 120ms}
.fh-root[data-state="projects"] .fh-pane--projects,
.fh-root[data-state="contact"] .fh-pane--contact{visibility:visible; opacity:1; transition:opacity 220ms ease 120ms,visibility 0s}

/* Carousel */
.fh-pane--projects{left:0; right:0; top:77px; width:var(--fh-pane-w,var(--fh-open-w))}
.fh-track{
  display:flex; gap:10px; margin:0; padding:0 9px 9px; list-style:none; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity; scroll-padding-left:9px; overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; cursor:grab; touch-action:pan-x;
}
.fh-track::-webkit-scrollbar{display:none}
.fh-track.is-dragging{cursor:grabbing; scroll-snap-type:none; user-select:none}
.fh-track.is-dragging a{pointer-events:none}
.fh-track > li{flex:none; margin:0; padding:0; scroll-snap-align:start; list-style:none}
.fh-root.fh-root .fh-card{
  position:relative; display:block; width:118px; height:171px; overflow:hidden; border-radius:16px;
  background:#2C2929; color:var(--fh-white); cursor:inherit;
}
.fh-root.fh-root .fh-card:focus-visible{outline-offset:-3px}
.fh-root .fh-card img{display:block; width:100%; height:100%; max-width:none; border-radius:0; object-fit:cover; transition:transform 400ms var(--fh-ease); -webkit-user-drag:none; user-select:none}
.fh-card__title{
  position:absolute; inset:auto 0 0; padding:28px 10px 10px; font-size:12px; line-height:15px; font-weight:500; color:var(--fh-white);
  background:linear-gradient(to top,rgba(0,0,0,.88) 40%,rgba(0,0,0,0));
  opacity:0; transform:translateY(4px); transition:opacity 180ms ease,transform 180ms ease; pointer-events:none;
}
.fh-card__title span{display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
@media (hover:hover){
  .fh-root .fh-card:hover img{transform:scale(1.04)}
  .fh-root .fh-card:hover .fh-card__title{opacity:1; transform:none}
}
.fh-root .fh-card:focus-visible .fh-card__title{opacity:1; transform:none}
@media (hover:none){.fh-card__title{opacity:1; transform:none; padding-top:22px}}
.fh-card--skeleton{display:block; width:118px; height:171px; border-radius:16px; background:#2C2929}
.fh-root.fh-root .fh-fallback{display:inline-block; padding:12px 9px; font-size:14px; line-height:18px; font-weight:500; color:var(--fh-white); text-decoration:underline; text-underline-offset:3px}

/* Contact */
.fh-pane--contact{left:var(--fh-info-left); right:12px; bottom:15px; display:flex; flex-direction:column; width:calc(var(--fh-open-w) - var(--fh-info-left) - 12px)}
.fh-rise{opacity:0; transform:translateY(6px); transition:opacity 120ms ease,transform 120ms ease}
.fh-root[data-state="contact"] .fh-rise{opacity:1; transform:none; transition:opacity 280ms ease,transform 400ms var(--fh-ease)}
.fh-root[data-state="contact"] .fh-rise:nth-child(1){transition-delay:90ms}
.fh-root[data-state="contact"] .fh-rise:nth-child(2){transition-delay:130ms}
.fh-root[data-state="contact"] .fh-rise:nth-child(3){transition-delay:170ms}
.fh-root[data-state="contact"] .fh-rise:nth-child(4){transition-delay:210ms}
.fh-info__name{margin:0; padding:0 0 2px; font-family:inherit; font-size:22px; line-height:26px; font-weight:600; color:var(--fh-white)}
.fh-info__role,.fh-info__place{margin:0; font-size:12px; line-height:15px; font-weight:400; color:var(--fh-muted)}
.fh-info__role{display:flex; flex-wrap:wrap; align-items:center; column-gap:8px}
.fh-info__role i{display:block; width:4px; height:4px; border-radius:50%; background:currentColor; font-style:normal}
.fh-info__place{margin-top:2px}
.fh-actions{display:flex; align-items:center; gap:8px; margin-top:20px}
.fh-root.fh-root .fh-icon-btn{
  display:flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0; flex:none;
  border-radius:50%; background:var(--fh-white); color:var(--fh-ink); transition:background-color 150ms ease,transform 150ms ease;
}
.fh-root.fh-root .fh-email{
  display:flex; align-items:center; gap:9px; height:42px; padding:0 20px; flex:none;
  border-radius:21px; background:var(--fh-email); color:var(--fh-ink);
  font-size:16px; line-height:19px; font-weight:500; transition:background-color 150ms ease,transform 150ms ease;
}
.fh-root.fh-root .fh-icon-btn:hover,.fh-root.fh-root .fh-email:hover{background:var(--fh-active); color:var(--fh-ink)}
.fh-root.fh-root .fh-email:focus{background:var(--fh-email); color:var(--fh-ink)}
.fh-root.fh-root .fh-icon-btn:active,.fh-root.fh-root .fh-email:active{transform:scale(.96)}
.fh-email__label{display:block; min-width:41px; text-align:left}
.fh-sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* Homepage: no round button; the pill stays centred and grows from its middle. */
body.home .fh-root{--fh-circle:0px; --fh-gap:0px}
body.home .fh-root.fh-root .fh-circle{display:none}
body.home .fh-panel{right:auto; left:50%; transform:translateX(-50%)}

/* Between 480 and 560 there is no room to slide the round button sideways: the panel covers it instead. */
@media (max-width:560px){
  .fh-root.is-open .fh-circle{transform:none; opacity:0; pointer-events:none}
}
/* Phones */
@media (max-width:480px){
  .fh-root{
    --fh-gap:8px; --fh-open-w:calc(100vw - 32px); --fh-closed-w:calc(100vw - 32px - var(--fh-circle) - var(--fh-gap));
    --fh-port-w:clamp(96px,32vw,126px); --fh-info-left:calc(var(--fh-port-w) + 18px);
  }
  body.home .fh-root{--fh-gap:0px}
  .fh-id{display:none}
  .fh-info__role i:nth-of-type(2){display:none}
  .fh-root.fh-root[data-state="projects"] .fh-tab,
  .fh-root.fh-root[data-state="contact"] .fh-tab{width:88px}
  .fh-root.fh-root[data-state="projects"] .fh-tab--projects{right:93px}
  .fh-root.fh-root[data-state="contact"] .fh-tab--projects{right:96px}
  .fh-actions{gap:6px}
  .fh-root.fh-root .fh-email{padding:0 13px; gap:6px}
}
/* Homepage on phones: the pill is full width, so the nickname fits when there's room for it. */
@media (min-width:372px) and (max-width:480px){
  body.home .fh-id{display:flex; top:18px}
  body.home .fh-id__name{display:none}
}
@media (max-width:782px){body.admin-bar .fh-root{top:calc(24px + 46px)}}
@media (max-width:350px){.fh-root .fh-email svg{display:none}}

@media (prefers-reduced-motion:reduce){
  .fh-root *,.fh-root *::before,.fh-root *::after{transition:none !important; transition-delay:0s !important}
  .fh-track{scroll-behavior:auto}
  .fh-root .fh-circle .fh-morph,.fh-root .fh-circle:hover .fh-morph,.fh-root .fh-circle:focus-visible .fh-morph{transform:none}
}