/* Wildcraft Group teaser. Palette from the ultraviolet brand kit (2026-09-15):
   ultraviolet #6236C9, ink #23242A, white #FFFFFF, silver #D5D8DE. Text in Inter. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/inter-latin.woff2?v=6e29cd5) format('woff2');
}

:root {
  --ultraviolet: #6236C9;
  --ink: #23242A;
  --white: #FFFFFF;
  --silver: #D5D8DE;

  /* light ground: the primary lockup as supplied */
  --bg: var(--white);
  --mark: var(--ultraviolet);
  --letters: var(--ink);
  --text: var(--ink);
  --muted: rgba(35, 36, 42, 0.56);
  --rule: var(--silver);
  --sheen: rgba(255, 255, 255, 0.34);
  --focus: var(--ultraviolet);
  --lava: #E9E2FB #DCD0F8 #F1ECFD #CFBDF5;
  --lava-strength: 1;
}

:root[data-ground="ink"] {
  --bg: var(--ink);
  --mark: var(--white);
  --letters: var(--white);
  --text: var(--white);
  --muted: rgba(255, 255, 255, 0.58);
  --rule: rgba(255, 255, 255, 0.14);
  --sheen: rgba(98, 54, 201, 0.42);
  --focus: var(--white);
  --lava: #6236C9 #7C55DD #3D2A8C #8746D8;
  --lava-strength: 0.9;
}

:root[data-ground="ultraviolet"] {
  --bg: var(--ultraviolet);
  --mark: var(--white);
  --letters: var(--white);
  --text: var(--white);
  --muted: rgba(255, 255, 255, 0.66);
  --rule: rgba(255, 255, 255, 0.18);
  --sheen: rgba(35, 36, 42, 0.16);
  --focus: var(--white);
  --lava: #7A52DE #8C68E8 #5228B0 #9A7CEE;
  --lava-strength: 1;
}

* { box-sizing: border-box; }

html { height: 100%; background: var(--bg); }

body {
  margin: 0;
  min-height: 100%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a { color: inherit; }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }

.stage {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12vh 6vw 8vh;
}

/* the lava field: a coarse canvas stretched over the viewport, the browser's
   own upscaling does the softening */
.lava {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}

.stage, .foot { position: relative; z-index: 1; }

/* the lockup: W box and lettering box placed exactly as in the primary logo (2400 x 700 kit canvas) */
.lockup {
  position: relative;
  margin: 0;
  width: min(88vw, 1040px);
  aspect-ratio: 2110.3 / 375.4;
  display: block;
  text-decoration: none;
  color: var(--letters);
}

.mark {
  position: absolute;
  left: 0;
  top: 0;
  width: 32.966%;   /* 695.7 / 2110.3 */
  height: 100%;
  display: block;
}

.mark-canvas {
  position: absolute;
  /* room for the wave excursions around the resting mark */
  left: -26%;
  width: 152%;
  top: -34%;
  height: 168%;
  display: block;
}

.mark-static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--mark);
  display: block;
}

/* the engine takes over the static W once it is running */
.has-canvas .mark-static { visibility: hidden; }

.letters {
  position: absolute;
  left: 34.474%;    /* (872.3 - 144.8) / 2110.3 */
  top: 0;
  width: 65.526%;   /* 1382.8 / 2110.3 */
  height: 99.41%;   /* 373.2 / 375.4 */
  display: block;
  color: var(--letters);
}

.has-canvas .letters {
  animation: letters-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 1.55s both;
}

@keyframes letters-in {
  from { opacity: 0; transform: translateY(2.5%); }
  to { opacity: 1; transform: none; }
}

.line {
  margin: clamp(2.2rem, 6vh, 3.6rem) 0 0;
  max-width: 34ch;
  text-align: center;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.soon {
  margin: 1.1rem 0 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.soon a { text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 2px; }

.has-canvas .line,
.has-canvas .soon { animation: copy-in 0.9s ease-out 2.0s both; }
.has-canvas .soon { animation-delay: 2.2s; }

@keyframes copy-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.foot {
  padding: 1.4rem 6vw 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.foot p {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* the Tallest Giant credit, as on the other sites: label plus the wordmark as a mask in the text colour */
.credit {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.credit:hover { color: var(--text); }

.credit-wordmark {
  width: clamp(5.4rem, 7vw, 6.4rem);
  aspect-ratio: 874 / 374;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url(/assets/tallest-giant-wordmark.svg?v=6e29cd5) center / contain no-repeat;
  mask: url(/assets/tallest-giant-wordmark.svg?v=6e29cd5) center / contain no-repeat;
}

/* narrow screens: the W alone at size, lettering beneath it (kit allows the W alone
   when the full lockup would make GROUP too small) */
@media (max-width: 640px) {
  .lockup {
    width: 100%;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .mark {
    position: relative;
    width: 64vw;
    aspect-ratio: 695.7 / 375.4;
    height: auto;
  }
  .letters {
    position: relative;
    left: auto;
    top: auto;
    width: 62vw;
    height: auto;
    margin-top: 7vw;
  }
  .line { margin-top: 2rem; }
  .foot { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .has-canvas .letters,
  .has-canvas .line,
  .has-canvas .soon { animation: none; }
}

/* frozen frames (?t=): entrances show their state at the frozen time */
.is-frozen .letters,
.is-frozen .line,
.is-frozen .soon { animation-play-state: paused; }
.is-frozen .letters { animation-delay: calc(1.55s - var(--seek, 0s)); }
.is-frozen .line { animation-delay: calc(2s - var(--seek, 0s)); }
.is-frozen .soon { animation-delay: calc(2.2s - var(--seek, 0s)); }

/* social image render (?og=1): just the lockup on the lava */
.is-og .soon, .is-og .foot { display: none; }
.is-og .stage { padding: 0; min-height: 100svh; }
.is-og .lockup { width: 76vw; }