/* ==========================================================================
   HH loader + page transitions
   States (classes on <html>):
     hh-cover    page is hidden behind the loader (set instantly in <head>)
     hh-first    first page of the session -> long, drawn-out intro
     hh-reveal   loader lifts away to show the page
     hh-leaving  visitor clicked a link -> loader sweeps in
     hh-done     loader finished
   ========================================================================== */
:root{
  --hh-cream:#f4ebd8; --hh-ink:#272725;
  --hh-yellow:#eabd26; --hh-red:#b14b25; --hh-green:#67943c;
  --hh-ease:cubic-bezier(.76,0,.24,1);
}

/* Hidden by default, so with JS off (no hh-cover class) it never shows. */
#hh-loader{
  position:fixed; inset:0; z-index:2147483000;
  pointer-events:none; visibility:hidden; overflow:hidden;
}
.hh-cover #hh-loader, .hh-reveal #hh-loader, .hh-leaving #hh-loader{ visibility:visible; }
.hh-leaving #hh-loader{ pointer-events:auto; cursor:progress; }

/* ---- the sweeping panel ------------------------------------------------- */
.hh-p{
  position:absolute; inset:0; background:var(--hh-cream); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  opacity:0;
}
.hh-cover .hh-p{ opacity:1; transition:none; }
.hh-leaving .hh-p{ opacity:1; transition:opacity .45s ease; }
.hh-reveal .hh-p{ opacity:0; transition:opacity .8s ease; }

/* ---- brand colour: halftone blocks tucked against the page edges --------- */
.hh-blk{ position:absolute; display:block; height:auto; max-width:none; }
/* hanging off the edges: upper-left and lower-right corners, ~40% of each photo outside the viewport */
.hh-blk--l{ width:clamp(320px,46vw,740px); left:calc(clamp(320px,46vw,740px) * -.4); top:-7vh; --r:-4deg; --x:-140px; --y:-40px; transform:rotate(var(--r)); }
.hh-blk--r{ width:clamp(340px,50vw,800px); right:calc(clamp(340px,50vw,800px) * -.4); bottom:-9vh; --r:3deg; --x:140px; --y:40px; transform:rotate(var(--r)); }

/* ---- the mark (straight) ------------------------------------------------- */
.hh-stage{ display:flex; align-items:center; justify-content:center; }
.hh-mark{ width:clamp(96px,13vw,180px); height:auto; overflow:visible; display:block; }
.hh-ink{
  fill:var(--hh-ink); fill-opacity:1;
  stroke:var(--hh-ink); stroke-width:4; stroke-linejoin:round;
  stroke-dasharray:1 1; stroke-dashoffset:0;
}

/* first visit: HH leads, halftone photos fade in just after */
.hh-first.hh-cover .hh-stage{ animation:hh-fadein .25s ease-out .05s both; }
.hh-first.hh-cover .hh-ink{ animation:hh-draw 1.8s cubic-bezier(.45,0,.25,1) .05s both; }
.hh-first.hh-cover .hh-blk{ animation:hh-blkin .6s ease-out .6s both; }
.hh-first.hh-cover .hh-alt{ animation:hh-rise .5s ease-out .15s both; }
/* later pages: same order, quicker */
html:not(.hh-first).hh-cover .hh-stage{ animation:hh-fadein .2s ease-out 0s both; }
html:not(.hh-first).hh-cover .hh-ink{ animation:hh-draw 1.4s cubic-bezier(.45,0,.25,1) 0s both; }
html:not(.hh-first).hh-cover .hh-blk{ animation:hh-blkin .5s ease-out .45s both; }
html:not(.hh-first).hh-cover .hh-alt{ animation:hh-rise .5s ease-out .1s both; }
/* leaving: only the cream fades in; photos fade in with the HH on the next page */
.hh-leaving .hh-stage, .hh-leaving .hh-alt, .hh-leaving .hh-blk{ opacity:0; }

@keyframes hh-blkin{ from{ opacity:0; } to{ opacity:1; } }
@keyframes hh-fadein{ from{ opacity:0; transform:scale(.97); } to{ opacity:1; transform:none; } }
@keyframes hh-draw{
  0%  { stroke-dashoffset:1; fill-opacity:0; }
  72% { stroke-dashoffset:0; fill-opacity:0; }   /* outline draws slowly... */
  100%{ stroke-dashoffset:0; fill-opacity:1; }   /* ...then the ink fills in */
}
@keyframes hh-rise{ from{ opacity:0; transform:translate(-50%,8px); } to{ opacity:1; transform:translate(-50%,0); } }

/* ---- altitude counter ---------------------------------------------------- */
.hh-alt{
  position:absolute; left:50%; bottom:clamp(28px,7vh,72px); transform:translateX(-50%); margin:0; display:grid; grid-template-columns:auto auto; justify-content:center; align-items:baseline;
  column-gap:.4em; row-gap:.55em;
  font-family:'Signal No2','Arial Narrow',sans-serif; text-transform:uppercase;
  color:var(--hh-ink); letter-spacing:.18em;
}
.hh-alt__n{ font-size:clamp(20px,2.6vw,30px); font-variant-numeric:tabular-nums; min-width:4.2ch; text-align:right; }
.hh-alt__u{ font-size:clamp(12px,1.3vw,15px); text-align:left; }
.hh-alt__l{ grid-column:1/-1; text-align:center; font-size:11px; letter-spacing:.32em; color:var(--hh-red); }

/* ---- reduced motion: plain crossfade ------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .hh-p{ opacity:1 !important; transition:none !important; }
  #hh-loader{ opacity:0; transition:opacity .25s ease; }
  .hh-cover #hh-loader, .hh-leaving #hh-loader{ opacity:1; }
  .hh-ink,.hh-blk,.hh-alt,.hh-stage{ animation:none !important; transition:none !important; }
  .hh-reveal #hh-loader{ opacity:0; }
}