/* Kite in the wind: a late summer sky that warms towards the horizon, a coral and sunflower kite with a teal
   heart, a navy title and a green hill. */
:root {
  --sky-top: #7fb8e2;       /* the sky high up */
  --sky-low: #f7e6c4;       /* the sky at the horizon */
  --ink: #1b2a44;           /* the title and the words */
  --cloud: #ffffff;         /* the clouds */
  --cloud-shade: #dfe9f3;   /* the underside of the clouds */
  --bird: #4b5a70;          /* the birds far away */
  --wind: #ffffff;          /* the wind lines */
  --sail-a: #ec5a3f;        /* the kite: two panels */
  --sail-b: #f6c240;        /* the kite: the other two panels */
  --sail-c: #1f7f8f;        /* the kite: the diamond in the middle */
  --hem: #8a2f1f;           /* the hem around the kite */
  --spar: #6b4a2b;          /* the wooden spars */
  --string: #2d3443;        /* the string */
  --bow-a: #ec5a3f;         /* the tail: one colour of bows */
  --bow-b: #1f7f8f;         /* the tail: the other colour of bows */
  --hill-far: #bcd99c;      /* the hill far away */
  --ground: #74aa5c;        /* the field in front */
  --grass-dark: #4f8a43;    /* the darker blades */
  --grass-light: #93c46c;   /* the lighter blades */
}

* {
  box-sizing: border-box;
}

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

body {
  background: var(--sky-top);
  color: var(--ink);
  font-family: 'Bricolage Grotesque Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--sky-top) 0%, color-mix(in srgb, var(--sky-top) 55%, var(--sky-low)) 52%, var(--sky-low) 88%);
  user-select: none;
  -webkit-user-select: none;
}

.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.layer--back {
  z-index: 1;
}

.layer--front {
  z-index: 3;
}

/* ---- the title: every letter is two spans, the outer one for the entrance, the inner one for the wind ---- */
.poster {
  position: absolute;
  z-index: 2;
  left: clamp(20px, 5vw, 72px);
  top: clamp(24px, 6vh, 64px);
  max-width: min(44rem, 88vw);
  pointer-events: none;
}

.poster__title {
  margin: 0;
  font-size: clamp(2.6rem, 7.2vw, 6.4rem);
  font-weight: 760;
  line-height: 0.92;
  letter-spacing: -0.035em;
}

.word {
  display: inline-block;
  white-space: nowrap;
}

.char {
  display: inline-block;
}

.char__in {
  display: inline-block;
  transform-origin: 50% 90%;
  will-change: transform;
}

.poster__line {
  margin: 1.1rem 0 0;
  max-width: 26rem;
  font-size: clamp(0.98rem, 1.3vw, 1.15rem);
  font-weight: 450;
  line-height: 1.45;
  opacity: 0.86;
}

.hint {
  position: absolute;
  z-index: 4;
  right: clamp(16px, 4vw, 48px);
  bottom: clamp(14px, 3vh, 28px);
  margin: 0;
  font-size: 0.86rem;
  font-weight: 560;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(20, 50, 20, 0.35);
  pointer-events: none;
}

/* ---- the drawing ---- */
.hill--far {
  fill: var(--hill-far);
}

.cloud {
  fill: var(--cloud);
}

.cloud-shade {
  fill: var(--cloud-shade);
}

.bird {
  fill: none;
  stroke: var(--bird);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wind-line {
  fill: none;
  stroke: var(--wind);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.string {
  fill: none;
  stroke: var(--string);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tail__line {
  fill: none;
  stroke: var(--string);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}

.bow--a {
  fill: var(--bow-a);
}

.bow--b {
  fill: var(--bow-b);
}

.bow-knot {
  fill: var(--hem);
}

.sail--a {
  fill: var(--sail-a);
}

.sail--b {
  fill: var(--sail-b);
}

.sail--c {
  fill: var(--sail-c);
}

.sail-shade {
  fill: #0b1830;
  fill-opacity: 0;
}

.fold {
  fill: none;
  stroke: #ffffff;
  stroke-linecap: round;
  stroke-opacity: 0;
}

.hem {
  fill: none;
  stroke: var(--hem);
  stroke-linejoin: round;
}

.spar {
  fill: none;
  stroke: var(--spar);
  stroke-linecap: round;
}

.bridle {
  fill: none;
  stroke: var(--string);
  stroke-linecap: round;
  opacity: 0.8;
}

.ground {
  fill: var(--ground);
}

.grass {
  stroke: none;
}

.grass--dark {
  fill: var(--grass-dark);
}

.grass--light {
  fill: var(--grass-light);
}

/* ---- the sky as a button ---- */
.catch {
  position: absolute;
  z-index: 5;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.catch.is-pulling {
  cursor: grabbing;
}

.catch:focus {
  outline: none;
}

.catch:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: -8px;
  border-radius: 18px;
}

@media (max-width: 640px) {
  .poster__line {
    margin-top: 0.8rem;
    max-width: 19rem;
  }

  .hint {
    left: 16px;
    right: 16px;
    text-align: center;
  }
}