/* Wordmark fonts. Each is subset to e h k n only. size-adjust equalizes ascender height.
   To add a font: add an @font-face here AND its family name to FONTS in morph.js. */
@font-face { font-family: "ehk-inter";              src: url("/fonts/inter-display.woff2") format("woff2");        font-display: block; size-adjust: 100%; }
@font-face { font-family: "ehk-space-grotesk";      src: url("/fonts/space-grotesk.woff2") format("woff2");        font-display: block; size-adjust: 104%; }
@font-face { font-family: "ehk-cactus-jack";        src: url("/fonts/cactus-jack.woff2") format("woff2");          font-display: block; size-adjust: 160%; }
@font-face { font-family: "ehk-cs-branco";          src: url("/fonts/cs-branco.woff2") format("woff2");            font-display: block; size-adjust: 97%; }
@font-face { font-family: "ehk-golden-goose";       src: url("/fonts/golden-goose.woff2") format("woff2");         font-display: block; size-adjust: 96%; }
@font-face { font-family: "ehk-hello-organic-hand"; src: url("/fonts/hello-organic-hand.woff2") format("woff2");   font-display: block; size-adjust: 113%; }
@font-face { font-family: "ehk-moranga";            src: url("/fonts/moranga.woff2") format("woff2");              font-display: block; size-adjust: 97%; }
@font-face { font-family: "ehk-portofino";          src: url("/fonts/portofino-gelateria.woff2") format("woff2");  font-display: block; size-adjust: 87%; }
@font-face { font-family: "ehk-retro-parade";       src: url("/fonts/retro-parade-sans.woff2") format("woff2");    font-display: block; size-adjust: 102%; }
@font-face { font-family: "ehk-very-vogue";         src: url("/fonts/very-vogue-display.woff2") format("woff2");   font-display: block; size-adjust: 110%; }

/* Links font (subset: P O R T F L I C H S Z) */
@font-face { font-family: "Inter"; src: url("/fonts/inter.woff2") format("woff2"); font-display: swap; }

:root {
  --bg: #D6BCF1;
  --word: #F3EAFC;
  --ink: #1E1430;
  --word-size: clamp(48px, 20vw, 260px);
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  height: 100%;
  overflow: hidden; /* glyph layer boxes are wider than the glyphs; never let them scroll the page */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  gap: clamp(20px, 3vw, 36px);
}

/* ---- Wordmark ---- */
.word {
  margin: 0;
  font-weight: 400;
  font-family: "ehk-inter", system-ui, sans-serif;
  font-size: var(--word-size);
  color: var(--word);
  /* Fixed line box: nothing below ever moves when fonts change. */
  height: 1em;
  line-height: 1em;
  display: flex;
  justify-content: center;
  white-space: nowrap;
  max-width: 100%;
  /* Decorative: glyph boxes overhang (tall ascent/descent fonts) and must never
     cover the links or show a text cursor. Still selectable (select-all,
     long-press, dragging from the links). */
  pointer-events: none;
}

/* Inverted brand highlight. */
::selection {
  background: var(--ink);
  color: var(--bg);
}

/* With JS, the wordmark's native highlight (box height varies per font) is
   replaced by one even bar behind the word. Its width (--word-w, set by
   morph.js) eases in step with the letters, so it hugs the word as it changes. */
@property --word-w {
  syntax: "<length>";
  inherits: false;
  initial-value: 0em;
}
.word.morph ::selection {
  background: transparent;
  color: var(--bg);
}
.word.morph::before {
  content: "";
  position: absolute;
  top: 0.06em;
  left: calc(var(--word-w) / -2 - 0.04em);
  width: calc(var(--word-w) + 0.08em);
  height: 1.04em;
  background: var(--ink);
  opacity: 0;
  transition: opacity 120ms linear, --word-w 320ms cubic-bezier(.25, .8, .25, 1);
}
.word.is-selected::before { opacity: 1; }

.letter {
  position: relative;
  display: block;
  height: 1em;
  flex: none;
}

/* Layer = fixed strut font (Inter) so the baseline is identical for every glyph font. */
.layer {
  display: block;
  height: 1em;
  line-height: 1em;
  font-family: "ehk-inter", system-ui, sans-serif;
  text-align: center;
}

/* .t = the actual glyph in its own font; line-height 0 so it never affects the line box. */
.t {
  display: inline-block;
  line-height: 0;
}

/* The default wordmark: "ehknee" as one joined run in Portofino. Shown without JS,
   with reduced motion, and as the first frame before the morph unzips it.
   Same strut as .layer so its baseline matches the morph letters exactly. */
.static {
  display: block;
  height: 1em;
  line-height: 1em;
  font-family: "ehk-inter", system-ui, sans-serif;
  text-align: center;
}
.static .t { font-family: "ehk-portofino", system-ui, sans-serif; }
.word:not(.morph) .letter { display: none; }

/* JS-enhanced mode: letters are zero-width anchors positioned around the word's
   centre with transforms (set by morph.js); each holds two stacked glyph layers. */
.word.morph {
  display: block;
  position: relative;
  width: 0;
}
.morph .letter {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  transition: transform 320ms cubic-bezier(.25, .8, .25, 1);
  will-change: transform;
}
/* Wide box centred on the anchor (overflowing text would start-align, not centre). */
.morph .layer {
  position: absolute;
  left: -2em;
  top: 0;
  width: 4em;
  will-change: opacity;
}
.morph .layer.is-off { opacity: 0; }
/* Glyph re-centring eases too, so the joined word unzips smoothly. */
.morph .t { transition: transform 320ms cubic-bezier(.25, .8, .25, 1); }
/* Kept in layout (centred on the anchor) so morph.js can measure the joined positions. */
.word.morph .static {
  position: absolute;
  left: -5em;
  top: 0;
  width: 10em;
  visibility: hidden;
  user-select: none;
}

/* ---- Links ---- */
.links {
  position: relative;
  z-index: 1;
  /* Two equal columns; each link centres in its column, so the links sit at
     ±width/4 from centre. 3.2 × word size puts them under the "h" and the
     first "e" of "ee", matching the Figma. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  width: calc(var(--word-size) * 3.2);
  max-width: 100%;
}

.links a {
  font-family: "Inter", system-ui, sans-serif;
  /* ~8px on a small phone → 13px on large screens */
  font-size: clamp(8px, calc(6.4px + 0.5vw), 13px);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0.08em;
  margin-right: -0.08em; /* offset trailing tracking so the pair stays optically centered */
  color: var(--ink);
  text-decoration: none;
  padding: 10px 0;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 0 1px no-repeat;
  transition: background-size 300ms cubic-bezier(.4, 0, .2, 1);
}

.links a:hover,
.links a:focus-visible {
  background-size: 100% 1px;
}

.links a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

/* ---- Link cursor (built by morph.js on mouse/trackpad devices) ---- */
.has-cursor-e .links a { cursor: none; }
.cursor-e {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  pointer-events: none;
  font-size: 30px;
  color: var(--ink);
  will-change: transform;
}
/* 1em box with the pointer near the e's top-left (like an arrow's tip), so the e
   sits below-right of the pointer instead of covering the link text.
   Inter strut keeps the baseline steady as fonts flick. */
.cursor-box {
  display: block;
  width: 1em;
  height: 1em;
  margin: -0.2em 0 0 -0.1em;
  line-height: 1em;
  transform-origin: 0.1em 0.2em;
  text-align: center;
  font-family: "ehk-inter", system-ui, sans-serif;
  transform: scale(0);
  transition: transform 180ms cubic-bezier(.3, 1.5, .5, 1);
}
.cursor-e.is-on .cursor-box { transform: scale(1); }
.cursor-e.is-on.is-down .cursor-box { transform: scale(.7); transition-duration: 90ms; }

@media (prefers-reduced-motion: reduce) {
  .links a, .morph .letter, .morph .t, .cursor-box { transition: none; }
}