/* ==========================================================================
   SITE_HEADER
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: var(--sbw);   /* Stops at the scrollbar */
  z-index: 20;
  height: var(--header-h);
  padding: var(--header-pad-y) var(--header-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--c-header);
  color: var(--c-header-text);
}

/* IDENTITY_BLOCK */
.identity {
  display: flex;
  flex-direction: column;
  gap: var(--identity-gap);
}

.identity__name {
  display: block;
  font-family: var(--font-grotesk);
  font-weight: var(--w-medium);
  font-size: var(--t-name-size);
  line-height: var(--t-name-lh);
  white-space: nowrap;
}

.desc-short { display: none; }   /* mobile-only wording (css/responsive.css) */

.identity__description {
  font-family: var(--font-grotesk);
  font-weight: var(--w-light);
  font-size: var(--t-desc-size);
  line-height: var(--t-desc-lh);
  white-space: nowrap;
}

/* Clip wrapper used by the entrance "curtain" reveal. The negative insets
   keep glyphs that overhang the line box visible in the resting state. */
.reveal {
  display: block;
  clip-path: inset(-24px -24px -24px -24px);
}

/* HEADER_LINKS — hugs its contents, 30px gap */
.header-links {
  display: flex;
  align-items: center;
  gap: var(--header-links-gap);
}

.header-link {
  display: block;
  line-height: 0;
  color: var(--c-icon);
  transition: color var(--dur-icon) var(--ease-out);
}
@media (hover: hover) {
  .header-link:hover { color: var(--c-icon-hover); }
}
.header-link:focus-visible { color: var(--c-icon-hover); }
.header-link svg { display: block; height: var(--icon-h); width: auto; }

/* ==========================================================================
   PROJECT_RETURN_TAB
   Positioned so that 12px shows beneath the header at rest and 36px on
   hover (PEEK 80x47 → EXTENDED 80x71). It sits behind the header.
   ========================================================================== */

.return-tab {
  position: fixed;
  z-index: 19;
  top: calc(var(--header-h) - var(--tab-h) + var(--tab-visible));
  right: var(--tab-right);
  width: var(--tab-w);
  height: var(--tab-h);
  background: var(--c-tab);
  border-radius: 0 0 var(--tab-radius) var(--tab-radius);
  color: var(--c-icon);   /* Version 4: inactive grey, as the header icons */
  /* Hidden fully behind the header until a project is open */
  transform: translate3d(0, calc(-1 * var(--tab-visible) - 2px), 0);
  pointer-events: none;
  transition:
    height var(--dur-tab) var(--ease-gentle-767),
    transform var(--dur-tab) var(--ease-gentle-767),
    color var(--dur-tab) var(--ease-out);   /* accompanies the extension */
}

.return-tab.is-positioned {
  right: auto;
  left: var(--tab-left);
}

.return-tab.is-visible {
  transform: none;
  pointer-events: auto;
}

/* Hover only where a real hover exists, so touch devices don't get a
   "stuck" extended tab after a tap (desktop behaviour unchanged). */
@media (hover: hover) {
  .return-tab.is-visible:hover {
    height: var(--tab-h-hover);
    color: var(--c-icon-hover);   /* active white, as the header icons */
  }
}
.return-tab.is-visible:focus-visible {
  height: var(--tab-h-hover);
  color: var(--c-icon-hover);
}

.return-tab__icon {
  position: absolute;
  left: 50%;
  bottom: var(--tab-icon-bottom);
  transform: translateX(-50%);
}

/* ==========================================================================
   SITE ENTRANCE (first launch only — see js/app.js)
   ========================================================================== */

/* Before scripts decide whether the entrance runs, hide the header content
   so nothing flashes in its final position. */
body.is-loading .identity,
body.is-loading .header-links { visibility: hidden; }

/* Starting state: name and description clipped from their bottom edge,
   icons transparent. Nothing moves — only the clip changes. */
body.entrance-pending .reveal {
  clip-path: inset(calc(100% + 24px) -24px -24px -24px);
}
body.entrance-pending .header-links { opacity: 0; }

/* Running: the clip lifts upward like a curtain, icons fade in. */
body.entrance-run .reveal {
  clip-path: inset(-24px -24px -24px -24px);
  transition: clip-path var(--entrance-reveal-dur) var(--ease-reveal);
}
body.entrance-run [data-reveal="name"] { transition-delay: var(--entrance-start); }
body.entrance-run [data-reveal="description"] {
  transition-delay: calc(var(--entrance-start) + var(--entrance-desc-delay));
}
body.entrance-run .header-links {
  opacity: 1;
  transition: opacity var(--entrance-icons-dur) var(--ease-out);
  transition-delay: calc(var(--entrance-start) + var(--entrance-icons-delay));
}