/* The homepage (2026-10-25, HOMEPAGE_PLAN.md): a portfolio in the /homelab world. Builds on /styles.css and
   /homelab/homelab.css (the night tokens, the fixed canvas, buttons). The name sits behind the canvas so the handheld
   stands in front of it; everything you click sits above the canvas. */

.home .hm-hero {
  position: relative; min-height: 100svh; display: flex; flex-direction: column;
  padding: 0 max(var(--gutter), env(safe-area-inset-right, 0px)) 0 max(var(--gutter), env(safe-area-inset-left, 0px));
  overflow-x: clip;
}

/* layers: backdrop (3) < the name (4) < the handheld (5) < everything you can click (6). The backdrop is opaque, so
   the handheld gets its own transparent canvas rather than sharing the backdrop's (that hid the name, 2026-10-25). */
.home .hl-canvas { z-index: 3; }
.hm-gb { position: fixed; inset: 0; z-index: 5; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; }

/* the nav: four words spread across the top */
.hm-nav { position: relative; z-index: 6; padding-top: clamp(1.25rem, 2.4vw, 2rem); }
.hm-nav ul { display: flex; justify-content: space-between; gap: 1rem; }
.hm-nav a {
  color: var(--ink); text-decoration: none; text-transform: uppercase; letter-spacing: .06em;
  font: 600 clamp(.85rem, 1.5vw, 1.35rem)/1 var(--font); font-stretch: 85%;
  transition: color .2s;
}
.hm-nav a:hover { color: var(--signal); }

/* the name: one line, as wide as the page (home.js fits it exactly; the clamp is the no-JS size) */
.hm-name {
  position: relative; z-index: 4; margin-top: clamp(.75rem, 2vw, 1.5rem);
  font-size: clamp(3rem, 15.5vw, 22rem); font-weight: 880; font-stretch: 62%; line-height: .8;
  letter-spacing: -0.02em; text-transform: uppercase; white-space: nowrap; color: var(--ink);
  text-wrap: nowrap;
}
.hm-name .dot { color: var(--signal); }

/* the foot: the line on the left, the contact button on the right */
.hm-foot {
  position: relative; z-index: 6; margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1.5rem; padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.hm-line {
  max-width: 24ch; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em;
  font: 400 clamp(.78rem, 1.15vw, 1.05rem)/1.4 var(--font); font-stretch: 92%;
}
.hm-contact { flex: none; text-transform: uppercase; letter-spacing: .08em; font-size: clamp(.85rem, 1.1vw, 1rem); }

/* contact: the last screen, on the paper so the backdrop canvas doesn't show through */
.hm-contactsec {
  position: relative; z-index: 6; background: var(--paper); display: grid; justify-items: center; text-align: center;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(5rem, 10vw, 8rem) max(var(--gutter), env(safe-area-inset-right, 0px)) 2.5rem max(var(--gutter), env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--rule-soft);
}
.hm-contactsec .dot { color: var(--signal); }
.hm-contactline { max-width: 38ch; color: var(--ink-2); font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.55; }
.hm-contactlinks { justify-content: center; margin-top: 0; }
.hm-small { margin-top: clamp(2rem, 5vw, 4rem); color: var(--ink-2); font-size: .9rem; }

/* entrance: one authored moment on load, opacity and a short rise, top to bottom; the handheld follows (home.js) */
@media (prefers-reduced-motion: no-preference) {
  .hm-nav, .hm-name, .hm-line, .hm-contact { animation: hm-in .9s var(--ease-out) both; }
  .hm-nav { animation-delay: 0s; --rise: -12px; }
  .hm-name { animation-delay: .12s; --rise: 32px; }
  .hm-line { animation-delay: .3s; }
  .hm-contact { animation-delay: .42s; }
}
@keyframes hm-in { from { opacity: 0; transform: translateY(var(--rise, 16px)); } }

/* ---- phase 2: the apps, two strips sliding opposite ways with scroll ------------------------------------------ */
.hm-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.hm-strips { position: relative; z-index: 6; padding-block: clamp(6rem, 12vw, 10rem) 2.5rem; overflow-x: clip; }
.hm-track { display: grid; gap: .75rem; }
.hm-row { display: flex; gap: .75rem; width: max-content; will-change: transform; }
.hm-tile {
  position: relative; flex: none; width: clamp(10.5rem, 17vw, 15rem); aspect-ratio: 14 / 9;
  display: grid; place-items: center; align-content: center; gap: .9rem;
  background: var(--sheet); border: 1px solid var(--rule-soft); color: var(--ink);
  transition: color .25s, border-color .25s;
}
.hm-tile:hover { color: color-mix(in srgb, var(--brand, var(--ink)) 78%, var(--ink)); border-color: var(--ink-2); }
.hm-logo { width: clamp(2.2rem, 3.4vw, 3.2rem); height: clamp(2.2rem, 3.4vw, 3.2rem); fill: currentColor; }
.hm-word { font: 850 clamp(1.15rem, 1.9vw, 1.7rem)/1 var(--font); font-stretch: 70%; text-transform: uppercase; letter-spacing: .01em; }
.hm-app { color: var(--ink-2); font: 600 .78rem/1 var(--font); font-stretch: 90%; letter-spacing: .08em; text-transform: uppercase; }
.hm-tile.is-word .hm-app { display: none; }                        /* the word is already the name */
.hm-next {
  position: absolute; top: .6rem; right: .6rem; padding: .2rem .4rem; background: var(--signal); color: var(--on-signal);
  font: 700 .66rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase;
}
.hm-strips-note {
  width: min(100% - 2 * var(--gutter), var(--wrap)); margin: 1.75rem auto 0; color: var(--ink-2); font-size: .95rem;
}

/* ---- phase 3: About, centred, with four objects in the corners (drawn on the front canvas) ------------------- */
.hm-about {
  position: relative; z-index: 6; min-height: 100svh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: clamp(2.5rem, 5vw, 4rem); text-align: center;
  padding: 5rem max(var(--gutter), env(safe-area-inset-right, 0px)) 5rem max(var(--gutter), env(safe-area-inset-left, 0px));
}
.hm-big {
  font-size: clamp(3rem, 12vw, 10rem); font-weight: 880; font-stretch: 62%; line-height: .82; letter-spacing: -0.02em;
  text-transform: uppercase; color: var(--ink);
}
.hm-aboutcopy {
  max-width: 34rem; color: var(--ink); font: 500 clamp(1.05rem, 2vw, 1.4rem)/1.55 var(--font); text-wrap: pretty;
}
.hm-aboutcopy .w { opacity: var(--o, 1); transition: opacity .15s linear; }   /* home.js sets --o per word from scroll */
.hm-about .hm-contact { margin-top: clamp(1rem, 3vw, 2.5rem); }

/* ---- phase 4: projects as stacked cards. Each card sticks a little lower than the last; home.js shrinks the ones
   underneath as the stack grows (the prompt's card stack). Square corners and a ruled edge, as on /homelab. ---------- */
.hm-projects {
  position: relative; z-index: 6; background: var(--paper);
  padding: clamp(5rem, 9vw, 8rem) max(var(--gutter), env(safe-area-inset-right, 0px)) clamp(3rem, 6vw, 5rem) max(var(--gutter), env(safe-area-inset-left, 0px));
}
.hm-projects .hm-big { text-align: center; margin-bottom: clamp(3rem, 6vw, 5rem); }
.hm-cards { width: min(100%, var(--wrap)); margin-inline: auto; }
.hm-cardwrap { height: 78svh; min-height: 30rem; }
.hm-cardwrap:last-child { height: auto; }
.hm-card {
  position: sticky; top: calc(5.5rem + var(--i, 0) * 1.75rem);
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); padding: clamp(1.25rem, 3vw, 2.5rem);
  background: var(--sheet); border: 1.5px solid var(--ink);
  transform: scale(var(--s, 1)); transform-origin: 50% 0;
}
.hm-cardhead { display: flex; align-items: flex-start; gap: clamp(1rem, 3vw, 2rem); flex-wrap: wrap; }
.hm-num { font: 880 clamp(3.2rem, 8vw, 7rem)/.8 var(--font); font-stretch: 62%; color: var(--signal); letter-spacing: -0.02em; }
.hm-cardtitle { flex: 1 1 20rem; min-width: 0; display: grid; gap: .6rem; padding-top: .2rem; }
.hm-cardtitle h3 { font-size: clamp(1.6rem, 3.4vw, 2.9rem); font-weight: 850; font-stretch: 66%; line-height: .95; text-transform: uppercase; }
.hm-status {
  justify-self: start; padding: .25rem .5rem; border: 1px solid var(--ink-2); color: var(--ink-2);
  font: 700 .72rem/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
}
.hm-status.is-next { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
.hm-see { align-self: center; text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; }
.hm-cardbody { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.hm-cardbody p { max-width: 52ch; color: var(--ink); font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.55; }
.hm-uses { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; }
.hm-use {
  display: grid; justify-items: center; align-content: center; gap: .55rem; width: 7.5rem; aspect-ratio: 1;
  border: 1px solid var(--rule-soft); background: var(--paper); color: var(--ink);
}
.hm-use .hm-logo { width: 2.1rem; height: 2.1rem; }
.hm-use span { color: var(--ink-2); font: 600 .68rem/1.1 var(--font); letter-spacing: .06em; text-transform: uppercase; text-align: center; padding-inline: .3rem; }
.hm-use.is-word span { color: var(--ink); font: 850 1.1rem/1 var(--font); font-stretch: 70%; letter-spacing: .01em; }
@media (max-width: 760px) {
  .hm-cardwrap { height: auto; min-height: 0; margin-bottom: 1rem; }
  .hm-card { position: relative; top: 0; }                                         /* phones: a plain list */
  .hm-cardbody { grid-template-columns: 1fr; }
  .hm-uses { justify-content: flex-start; }
  .hm-use { width: 6rem; }
}

@media (max-width: 760px) {
  .hm-nav a { letter-spacing: .03em; }
  .hm-foot { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  .hm-line { max-width: 30ch; }
}

/* brand colours for the logos' hover (from Simple Icons; near-black marks stay pale on this dark ground) */
.hm-tile[data-si="docker"] { --brand: #2496ED; }
.hm-tile[data-si="tailscale"] { --brand: var(--ink); }
.hm-tile[data-si="cloudflare"] { --brand: #F38020; }
.hm-tile[data-si="caddy"] { --brand: #1F88C0; }
.hm-tile[data-si="authelia"] { --brand: var(--ink); }
.hm-tile[data-si="adguard"] { --brand: #68BC71; }
.hm-tile[data-si="wireguard"] { --brand: var(--ink); }
.hm-tile[data-si="ubiquiti"] { --brand: #0559C9; }
.hm-tile[data-si="ntfy"] { --brand: #317F6F; }
.hm-tile[data-si="backblaze"] { --brand: #E21E29; }
.hm-tile[data-si="jellyfin"] { --brand: #00A4DC; }
.hm-tile[data-si="audiobookshelf"] { --brand: #82612C; }
.hm-tile[data-si="vaultwarden"] { --brand: var(--ink); }
.hm-tile[data-si="paperlessngx"] { --brand: #17541F; }
.hm-tile[data-si="frigate"] { --brand: var(--ink); }
.hm-tile[data-si="fireflyiii"] { --brand: #CD5029; }
.hm-tile[data-si="homepage"] { --brand: #009BD5; }
.hm-tile[data-si="homeassistant"] { --brand: #18BCF2; }
.hm-tile[data-si="immich"] { --brand: #4250AF; }