/* SECTION 01 — the hero, Girgit's living skin (js/skin.js). The hero is chameleon skin drawn by a WebGL
   shader; the headline is written by the scales (the real h1 stays in place, transparent, as the
   mask and for screen readers). It sits in a track one screen taller than itself: scrolling pulls the
   camera back in a match cut, from close on his flank out to the whole animal, the supplied photo of
   Girgit mid colour-change. Without WebGL, JS or with reduced motion: a still green version with the
   headline as plain text. The palette below is the site's (BRIEF.md). */

:root {
  --ivory: #F4EFE5;
  --black: #111111;
  --forest: #142118;
  --olive: #6E7B3B;
  --sage: #B5BEA0;
  --pink: #FF168C;
  --blue: #173BFF;
  --acid: #43FF18;
  --yellow: #FFE500;
  --satoshi: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.sk-track { position: relative; background: #0C2414; }
.sk {
  position: relative; isolation: isolate; overflow: hidden;
  height: calc(100svh - var(--nav-h)); min-height: 34rem;
  background: radial-gradient(120% 100% at 30% 40%, #1F6A30 0%, #12401F 55%, #0C2414 100%);
  color: var(--ivory); font-family: var(--satoshi);
}
.sk-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; }

/* ---------- The copy: the h1 is the mask the scales read; once the skin draws it, it goes transparent ---------- */
/* Centred, two lines: "Why fit in" over "when you can evolve?". Each word is a span (.w) so the mask
   follows the words wherever they wrap. Letter spacing is kept open: the letters are drawn in scales,
   and tight spacing let neighbouring letters merge into one blob. */
.sk-copy { position: relative; z-index: 2; display: grid; align-content: center; justify-items: center; height: 100%; padding: 0 var(--gutter); max-width: 96rem; margin: 0 auto; text-align: center; }
.sk-title { margin: 0; font: 900 clamp(2.4rem, 6vw, 6.5rem)/1.02 var(--satoshi); letter-spacing: 0.01em; word-spacing: 0.08em; text-transform: uppercase; color: #F2F55A; text-shadow: 0 0.04em 0.3em rgb(4 20 9 / 0.8); }
.sk-line { display: block; }
.sk-title .w { display: inline-block; }
.sk.has-skin .sk-title { color: transparent; text-shadow: none; }
.sk-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin: clamp(1.6rem, 5svh, 3rem) 0 0; }
.sk-btn { display: inline-flex; align-items: center; min-height: 3.2rem; padding: 0.8rem 1.6rem; border: 2px solid var(--ivory); border-radius: 999px; background: #0E3A1B; color: var(--ivory); text-decoration: none; font: 700 1rem/1 var(--satoshi); box-shadow: 0 6px 24px rgb(0 0 0 / 0.35); transition: translate 200ms var(--ease), background-color 200ms var(--ease), color 200ms var(--ease); }
.sk-btn--solid { background: #F6D3EC; border-color: #F6D3EC; color: var(--black); }
.sk-btn:hover { translate: 0 -2px; }
.sk-btn:not(.sk-btn--solid):hover { background: var(--ivory); color: var(--black); }
.sk-btn--solid:hover { background: #FFE6F6; }
.sk-btn:focus-visible, .sk-scroll:focus-visible { outline: 3px solid #E6F25A; outline-offset: 3px; }

.sk-hint, .sk-scroll { position: absolute; z-index: 2; bottom: clamp(1rem, 3svh, 1.8rem); margin: 0; font: 700 0.74rem/1 var(--satoshi); letter-spacing: 0.16em; text-transform: uppercase; color: rgb(244 239 229 / 0.85); }
.sk-hint { left: var(--gutter); }
.sk-scroll { right: var(--gutter); color: var(--ivory); text-decoration: none; }
html:not(.js) .sk-hint, .sk:not(.has-skin) .sk-hint { display: none; }



@media (max-width: 760px) {
  .sk-title { font-size: clamp(2.4rem, 11.5vw, 4.4rem); line-height: 1.04; }
  .sk-hint { display: none; }
}

/* Intro: the scales assemble the headline (js/skin.js), then the buttons rise in. */
@media (prefers-reduced-motion: no-preference) {
  .js .sk-ctas { animation: sk-rise 800ms var(--ease) 1.1s both; }
  @keyframes sk-rise { from { opacity: 0; translate: 0 18px; } }
}