/* Hugo Harrison — HH logo intro overlay */
:root {
  --hh-line: #a8823a;        /* crane line work */
  --hh-text: #86662a;        /* tagline (darker for legibility) */
  --hh-bg: #ffffff;
}

/* Hide the page until the overlay is mounted (removed by hh-intro.js) */
html.hh-intro-pending body { visibility: hidden; }
html.hh-intro-lock,
html.hh-intro-lock body { overflow: hidden; }

.hh-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  visibility: visible;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 16px;
  background: var(--hh-bg);
  cursor: pointer;
  transition: transform 0.95s cubic-bezier(0.76, 0, 0.24, 1) 0.25s;
  will-change: transform;
}

.hh-intro__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.hh-intro__logo { width: min(74vw, 720px); }
.hh-intro__svg { display: block; width: 100%; height: auto; overflow: visible; }

.hh-fill { fill: var(--hh-line); stroke: none; }

.hh-line {
  fill: none;
  stroke: var(--hh-line);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hh-intro__rule {
  width: min(46vw, 420px);
  height: 1px;
  margin: clamp(20px, 3.4vw, 34px) 0 clamp(12px, 2vw, 18px);
  background: linear-gradient(90deg, transparent, var(--hh-line) 20%, var(--hh-line) 80%, transparent);
  transform: scaleX(0);
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.hh-intro__tag {
  margin: 0;
  padding-left: 0.32em;      /* balances the trailing letter-spacing */
  font: 500 clamp(10px, 1.3vw, 14px)/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, sans-serif;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--hh-text);
  opacity: 0;
  transition: opacity 0.9s ease 0.15s, letter-spacing 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.hh-intro.is-tag .hh-intro__rule { transform: scaleX(1); }
.hh-intro.is-tag .hh-intro__tag { opacity: 1; letter-spacing: 0.32em; }

.hh-intro__skip {
  position: absolute;
  right: 20px;
  bottom: 20px;
  padding: 8px 14px;
  font: 500 11px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hh-text);
  background: transparent;
  border: 1px solid rgba(168, 130, 58, 0.35);
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.hh-intro__skip:hover,
.hh-intro__skip:focus-visible { opacity: 1; border-color: var(--hh-line); outline: none; }

/* Exit: logo settles, then the overlay lifts away */
.hh-intro.is-leaving { transform: translateY(-100%); pointer-events: none; }
.hh-intro.is-leaving .hh-intro__stage { opacity: 0; transform: scale(0.96) translateY(-10px); }
.hh-intro.is-leaving .hh-intro__skip { opacity: 0; }

@media (max-width: 480px) {
  .hh-intro__logo { width: 82vw; }
  .hh-intro__tag { font-size: 9.5px; letter-spacing: 0.3em; padding-left: 0.2em; }
  .hh-intro.is-tag .hh-intro__tag { letter-spacing: 0.2em; }
  .hh-intro__skip { right: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .hh-intro { transition: opacity 0.5s ease; }
  .hh-intro.is-leaving { transform: none; opacity: 0; }
  .hh-intro__rule, .hh-intro__tag, .hh-intro__stage { transition: none; }
}