/* ===================================================================
   SHELL - chrome shared by every page

   The header, the logo mark and the transition veil live here so the front
   page and the project pages cannot drift apart. Loaded by the project
   pages directly, and by index.html via an @import at the top of
   horizon.css (so index.html itself needs no change).

   Load order matters on project pages: this file must come AFTER
   components.css, which also styles .logo-container.
   =================================================================== */

/* ============ Header ============ */

.hz-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.75rem 2rem;
  pointer-events: none;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  mix-blend-mode: normal;
}

.hz-header > * { pointer-events: auto; }

.hz-links {
  display: flex;
  gap: 2rem;
}

.hz-links a {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  text-decoration: none;
  transition: color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.hz-links a:hover,
.hz-links a:focus-visible {
  color: #ffffff;
  opacity: 1;
}

.hz-links a::after { display: none; }   /* cancel the global link wipe */

/* ============ Logo ============ */

.hz-header .logo-container {
  display: block;
  width: 3rem;
  height: 1.5rem;
  position: relative;
  margin: 0;
  cursor: pointer;
  outline: none;
  border: none;
  mix-blend-mode: normal;
  isolation: auto;
}

.hz-header .logo-container::after { display: none; }

.hz-header .logo-circles {
  position: relative;
  width: 100%;
  height: 100%;
}

.hz-header .circle {
  position: absolute;
  width: 0;
  height: 0;
  top: 50%;
  border-style: solid;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.hz-header .circle-1 {
  left: 0;
  transform: translate(0, -50%);
  border-width: 0 0.7rem 1.2rem 0.7rem;
  border-color: transparent transparent #ffffff transparent;
}

.hz-header .circle-2 {
  left: 0.8rem;
  transform: translate(0, -50%) rotate(180deg);
  border-width: 0 0.7rem 1.2rem 0.7rem;
  border-color: transparent transparent #ffffff transparent;
}

.hz-header .logo-container:hover .circle-1 {
  transform: translate(-0.5rem, -50%);
}

.hz-header .logo-container:hover .circle-2 {
  transform: translate(0.5rem, -50%) rotate(180deg);
}

/* ============ Transition veil ============

   One black sheet above everything, carrying a backdrop blur. The blur is
   applied to the BACKDROP rather than to the page content, which matters:
   the gallery ring uses transform-style: preserve-3d, and setting opacity
   or filter on that element forces the browser to flatten the scene, which
   collapses the 3D sort order and makes the cards stack on top of each
   other for a frame. Blurring through an overlay never touches it. */

.veil {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000000;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, backdrop-filter;
}

.veil.is-active { pointer-events: all; }

/* Set by an inline head script before first paint, so a page arrived at
   mid-transition never flashes its content unblurred. */
.hz-entering .veil {
  opacity: 1;
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  pointer-events: all;
}

/* ============ Mobile ============ */

@media (max-width: 768px) {
  .hz-header {
    padding: 1rem 1.25rem;
  }

  .hz-links {
    display: none;              /* the hamburger owns navigation here */
  }

  .hz-header .logo-container {
    width: 2.5rem;
    height: 1.25rem;
  }

  .hz-header .circle-1,
  .hz-header .circle-2 {
    border-width: 0 0.6rem 1rem 0.6rem;
  }

  .hz-header .circle-2 { left: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .veil { transition: none !important; }
}