/* Goostep: type is the hero, two colours, inverted bands. Goose = small 3D cut-out on the word's baseline. */
@font-face { font-family: "Fredoka"; src: url("/fonts/fredoka.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("/fonts/nunitosans.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }

:root {
  --blue: #2B4FC6; --cream: #F1E8D4;
  --bg: var(--blue); --ink: var(--cream); --accent: var(--cream);
  --font-display: "Fredoka", "Nunito Sans", system-ui, sans-serif;
  --font-body: "Nunito Sans", system-ui, sans-serif;
  --container: min(1680px, 100% - 2 * var(--s5));
  --reading: min(820px, 100% - 2 * var(--s3));
  --body: 20px;
}
html { background: var(--blue); }
body { overflow-x: clip; }
a { color: inherit; }
button { background: none; border: 0; color: inherit; cursor: pointer; }

/* ---------- first screen ---------- */
.track { position: relative; height: 240svh; }
.screen { position: sticky; top: 0; height: 100svh; min-height: 600px; display: flex; flex-direction: column; }

.band--top { flex: 1 1 auto; background: var(--blue); color: var(--cream);
  display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--s4) var(--s5) var(--s3); min-height: 0; }

.mark { --fs: min(19.5vw, 46svh); margin: 0; font: 700 var(--fs)/1 var(--font-display); letter-spacing: -0.035em;
  display: flex; align-items: flex-end; justify-content: center; white-space: nowrap; }
.word { display: inline-flex; }
.ch { display: inline-block; transform-origin: 50% 85%; }
.mark.is-land .ch { animation: jelly .9s cubic-bezier(.3,.7,.3,1) both; animation-delay: calc(var(--i, 0) * 40ms); }
.ch:nth-child(1) { --i: 0 } .ch:nth-child(2) { --i: 1 } .ch:nth-child(3) { --i: 2 } .ch:nth-child(4) { --i: 3 }
.word--b .ch:nth-child(1) { --i: 3 } .word--b .ch:nth-child(2) { --i: 4 } .word--b .ch:nth-child(3) { --i: 5 } .word--b .ch:nth-child(4) { --i: 6 }
.is-paused .f { animation-play-state: paused; }
@keyframes jelly {
  0% { transform: scale(1, 1); } 18% { transform: scale(1.12, .82); } 36% { transform: scale(.92, 1.1); }
  54% { transform: scale(1.05, .95); } 72% { transform: scale(.98, 1.02); } 100% { transform: scale(1, 1); }
}

/* the stage: 1 source px = --u; shoes stand on the baseline */
.stage { --h: 1.02em; --u: calc(var(--h) / 718); position: relative; display: inline-block;
  width: calc(var(--u) * 600); height: var(--h); margin: 0 -0.02em 0.2em; font-size: inherit; }
.f { position: absolute; bottom: 0; left: 50%; max-width: none; height: auto; opacity: 0; pointer-events: none;
  transform: translateX(-50%); filter: drop-shadow(calc(var(--u) * 40) calc(var(--u) * 14) 0 rgba(20, 30, 90, .35)); }
.f.is-on { opacity: 1; }
.f-sit   { width: calc(var(--u) * 629); animation: breathe 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
.f-chair { width: calc(var(--u) * 442); margin-left: calc(var(--u) * -94); }
.f-stand { width: calc(var(--u) * 515); margin-left: calc(var(--u) * 90); animation: sway 1.1s ease-in-out infinite; transform-origin: 50% 100%; }
.f-split { width: calc(var(--u) * 832); margin-left: calc(var(--u) * 80); }
.f-fall  { width: calc(var(--u) * 1028); margin-left: calc(var(--u) * 160); }
.f-glide { width: calc(var(--u) * 498); margin-left: calc(var(--u) * 90); transition: translate 1.4s cubic-bezier(.45,0,.55,1); }
.f-glide.is-away { translate: calc(var(--u) * 900) 0; }
.f-sit2  { width: calc(var(--u) * 665); }
.f-sit3  { width: calc(var(--u) * 836); margin-left: calc(var(--u) * 40); }
.f-rise  { width: calc(var(--u) * 592); margin-left: calc(var(--u) * 20); }
.f-lift  { width: calc(var(--u) * 802); margin-left: calc(var(--u) * 150); }
.f-up    { width: calc(var(--u) * 757); margin-left: calc(var(--u) * 140); }
.stage.is-pop { animation: pop .6s cubic-bezier(.3,.7,.3,1); }
@keyframes pop { 30% { transform: scale(1.08, .92); } 60% { transform: scale(.96, 1.05); } }
.fx { position: absolute; left: 50%; bottom: 0; max-width: none; pointer-events: none; will-change: transform, opacity; }
.mark { transform: skewX(var(--skew, 0deg)); }
.ch:hover { animation: jelly .8s cubic-bezier(.3,.7,.3,1); }
@keyframes breathe { 50% { transform: translateX(-50%) scale(1.012, .99); } }
@keyframes sway { 0%, 100% { transform: translateX(-50%) rotate(-2.5deg); } 50% { transform: translateX(-50%) rotate(2.5deg); } }

.sub { margin: var(--s3) 0 0; font: 600 clamp(20px, 1.7vw, 32px)/1.3 var(--font-display); letter-spacing: .01em; text-align: center; }

/* inverted band */
.band--bottom { flex: 0 0 auto; background: var(--cream); color: var(--blue); padding: var(--s4) 0 var(--s4); }
.grid { width: var(--container); margin-inline: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s4); row-gap: var(--s2); align-items: center; }
.act { grid-column: 1 / span 4; grid-row: 1 / span 2; }
.ca { grid-column: 5 / -1; grid-row: 1; display: flex; align-items: baseline; gap: var(--s3); min-width: 0; }
.links { grid-column: 5 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }

.walk { position: relative; padding: .22em 0 .26em; min-height: 0; font: 700 clamp(84px, 9.6vw, 184px)/.9 var(--font-display);
  letter-spacing: -0.03em; color: var(--blue); transition: transform .6s cubic-bezier(.2,.9,.3,1); transform-origin: 30% 90%; }
.walk::after { content: ""; position: absolute; left: .03em; right: .1em; bottom: 0; height: .075em; border-radius: 1em;
  background: var(--blue); transform: rotate(-1.6deg); transform-origin: left; transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.walk:hover { animation: wob .7s cubic-bezier(.3,.7,.3,1); }
.walk:hover::after { transform: rotate(-1.6deg) scaleX(1.06); }
.walk:active { transform: scale(.96, .92); transition-duration: 35ms; }
.walk:focus-visible { outline: 4px solid var(--blue); outline-offset: 6px; }
@keyframes wob { 25% { transform: scale(1.06, .93); } 50% { transform: scale(.97, 1.04); } 75% { transform: scale(1.02, .98); } }
.count { margin: var(--s2) 0 0; font: 700 clamp(18px, 1.15vw, 24px)/1.3 var(--font-body); font-variant-numeric: tabular-nums; }

.ca-line { margin: 0; flex: 1 1 auto; min-width: 0; max-width: 100%; font: 600 clamp(24px, 2.3vw, 44px)/1.15 var(--font-display); }
.ca-label { margin-right: .25em; }
.ca code { display: block; font: 600 .8em/1.25 var(--font-display); overflow-wrap: anywhere; }
.copy { flex: none; min-height: 48px; padding: 0 .2em; font: 700 clamp(20px, 1.5vw, 28px)/1 var(--font-display);
  text-decoration: underline; text-decoration-thickness: .12em; text-underline-offset: .2em; color: var(--blue); }
.copy:focus-visible, .links a:focus-visible, .to a:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }

.links a { display: flex; align-items: center; gap: .45em; min-height: 56px; text-decoration: none;
  font: 600 clamp(24px, 2.3vw, 44px)/1 var(--font-display); color: var(--blue); transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.links a img { width: 1em; height: 1em; object-fit: contain; flex: none; }
.links a:hover { transform: translateY(-3px) rotate(-1.5deg); }
.links a.is-off:hover { transform: none; }

/* ---------- the problem ---------- */
.problem { background: var(--cream); color: var(--blue); padding: var(--s7) 0; overflow: hidden; }
.problem .container { width: var(--container); }
.say, .h2 { margin: 0; font: 700 clamp(48px, 7.4vw, 150px)/1 var(--font-display); letter-spacing: -0.03em; }
.say--b { text-align: right; margin-top: var(--s3); }
.inline-goose { display: inline-block; height: 1.45em; width: auto; vertical-align: -0.28em; margin: 0 .05em;
  filter: drop-shadow(12px 6px 0 rgba(43, 79, 198, .2)); transform-origin: 50% 100%; }
.lt { display: inline-block; white-space: pre; }
.js [data-say] .lt { opacity: 0; transform: translateY(.5em) scale(.4, 1.4); }
.js [data-say].is-in .lt { animation: popin .7s cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(var(--d) * 28ms); }
.js [data-say] .inline-goose { opacity: 0; transform: translateY(.4em) scale(.6); transition: opacity .3s, transform .7s cubic-bezier(.3,1.5,.5,1); transition-delay: .35s; }
.js [data-say].is-in .inline-goose { opacity: 1; transform: none; }
[data-say].is-in .inline-goose:hover { animation: wob .7s cubic-bezier(.3,.7,.3,1); }
@keyframes popin { 0% { opacity: 0; transform: translateY(.5em) scale(.4, 1.4); } 60% { opacity: 1; transform: translateY(-.06em) scale(1.08, .9); } 100% { opacity: 1; transform: none; } }

/* ---------- how to walk ---------- */
.howto { background: var(--blue); color: var(--cream); padding: var(--s7) 0; }
.howto .container { width: var(--container); }
.steps { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.steps li { display: grid; grid-template-rows: auto 1fr auto; align-items: end; justify-items: start; }
.steps .n { font: 700 clamp(56px, 6vw, 110px)/1 var(--font-display); }
.steps img { width: 100%; height: clamp(200px, 22vw, 380px); object-fit: contain; object-position: 50% 100%; margin: var(--s2) 0;
  filter: drop-shadow(14px 6px 0 rgba(10, 20, 80, .3)); transform-origin: 50% 100%; }
.steps li:hover img { animation: wob .7s cubic-bezier(.3,.7,.3,1); }
.steps .cap { font: 700 clamp(26px, 2.4vw, 44px)/1.1 var(--font-display); }
.js .steps li { opacity: 0; transform: translateY(40px) rotate(-2deg); transition: opacity .4s ease-out, transform .8s cubic-bezier(.3,1.5,.5,1); }
.js .steps.is-in li { opacity: 1; transform: none; }
.js .steps.is-in li:nth-child(2) { transition-delay: .18s; }
.js .steps.is-in li:nth-child(3) { transition-delay: .36s; }

/* ---------- step dominoes ---------- */
.domino { position: relative; height: 230svh; background: var(--cream); color: var(--blue); }
.domino-in { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.dword { position: relative; margin: 0; display: flex; align-items: flex-end; font: 700 clamp(120px, 30vw, 560px)/.9 var(--font-display); letter-spacing: -0.02em; padding-bottom: .12em; }
.dl { display: inline-block; transform-origin: 50% 86%; transform: perspective(900px) rotateX(var(--r, 0deg)); }
.dgoose { position: absolute; bottom: .08em; left: 0; height: .78em; width: auto; max-width: none; z-index: 1; transform: translateX(var(--x, -120%));
  filter: drop-shadow(12px 6px 0 rgba(43, 79, 198, .2)); }
.dcap { margin: var(--s4) 0 0; padding: 0 var(--s4); font: 700 clamp(24px, 2.4vw, 40px)/1.2 var(--font-display); text-align: center; }

/* ---------- lore ---------- */
.lore { background: var(--blue); color: var(--cream); padding: var(--s7) 0; }
.lore .container { width: var(--reading); }
.lore-text { margin: 0; font: 600 clamp(30px, 3.4vw, 56px)/1.15 var(--font-display); }
.to { margin: var(--s5) 0 0; font: 700 clamp(26px, 2.4vw, 40px)/1 var(--font-display); }
.to a { display: inline-block; padding: .2em 0; text-decoration: underline; text-decoration-thickness: .1em; text-underline-offset: .2em; }
.to a:hover { animation: wob .7s cubic-bezier(.3,.7,.3,1); }
.loose-shoe { display: inline-block; height: 1.3em; width: auto; vertical-align: -0.45em; margin-left: .4em; transform-origin: 30% 100%;
  transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.to a:hover + .loose-shoe, .to a:focus-visible + .loose-shoe { transform: translate(.15em, -.25em) rotate(-14deg); }
.risk { margin: var(--s6) 0 0; font: 500 16px/1.4 var(--font-body); opacity: .75; }

/* ---------- shoes page ---------- */
.shoes { background: var(--cream); color: var(--blue); min-height: 100svh; }
.shoes .wrap { width: var(--container); margin-inline: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s4);
  grid-template-rows: auto auto auto 1fr; padding: var(--s6) 0; align-content: center; min-height: 100svh; }
.shoes h1 { grid-column: 1 / span 7; grid-row: 1; margin: 0 0 var(--s4); font: 700 clamp(64px, 9vw, 180px)/.9 var(--font-display); letter-spacing: -0.03em; }
.chart { grid-column: 1 / span 7; grid-row: 2; margin: 0; padding: 0; list-style: none; font: 600 clamp(22px, 1.8vw, 32px)/1.2 var(--font-display); }
.chart li { display: grid; grid-template-columns: 3em 1fr; gap: var(--s3); padding: .5em 1.2em; border-top: 3px solid var(--blue); }
.chart li:last-child { border-bottom: 3px solid var(--blue); }
.chart b { font-variant-numeric: tabular-nums; }
.big { grid-column: 8 / -1; grid-row: 1 / span 4; align-self: center; margin: 0; }
.big img { width: 100%; height: auto; max-height: 82svh; object-fit: contain; filter: drop-shadow(18px 8px 0 rgba(43, 79, 198, .22)); transform-origin: 50% 100%; animation: breathe2 3.4s ease-in-out infinite; }
@keyframes breathe2 { 50% { transform: scale(1.012, .99); } }
.shoes .to { grid-column: 1 / span 7; grid-row: 3; margin-top: var(--s4); }
.shoes .risk { grid-column: 1 / span 7; grid-row: 4; margin-top: var(--s2); align-self: start; }

/* ---------- 404 ---------- */
.lost { min-height: 100svh; display: grid; place-content: center; justify-items: center; text-align: center; padding: var(--s5) var(--s3); }
.lost .mark { --fs: min(34vw, 50svh); }
.lost p { margin: var(--s3) 0 0; font: 600 clamp(24px, 2.6vw, 40px)/1.2 var(--font-display); }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .act { grid-column: 1 / -1; grid-row: auto; display: flex; align-items: flex-end; gap: var(--s4); flex-wrap: wrap; }
  .ca, .links { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 700px), (max-height: 760px) and (max-width: 1100px) {
  .track { height: auto; }
  .screen { position: relative; height: auto; min-height: 100svh; }
}
@media (max-width: 700px) {
  :root { --container: calc(100% - 2 * var(--s4)); --reading: calc(100% - 2 * var(--s4)); }
  .band--top { padding: var(--s5) var(--s4) var(--s3); }
  .mark { --fs: 27vw; flex-wrap: wrap; row-gap: 0; }
  .stage { order: -1; flex: 0 0 100%; --h: 1.25em; width: auto; margin: 0 0 -.08em; }
  .walk { font-size: 30vw; }
  .act { gap: var(--s2) var(--s3); }
  .grid, .shoes .wrap { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .ca { flex-direction: column; align-items: stretch; gap: 0; }
  .copy { align-self: flex-start; }
  .ca-line { font-size: 24px; }
  .ca code { font-size: 18px; }
  .links { grid-template-columns: 1fr; gap: 0; }
  .links a { font-size: 22px; min-height: 48px; }
  .lore { padding: var(--s6) 0; }
  .problem, .howto { padding: var(--s6) 0; }
  .say, .h2 { font-size: 13vw; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .steps img { height: 220px; }
  .domino { height: 200svh; }
  .shoes .wrap { padding: var(--s5) 0; }
  .shoes h1, .chart, .big, .shoes .to, .shoes .risk { grid-column: 1 / -1; grid-row: auto; }
  .big { order: -1; width: 70%; margin: 0 auto var(--s3); }
  .lost .mark { --fs: 34vw; flex-wrap: nowrap; }
  .lost .stage { order: 0; flex: none; --h: 1.02em; width: calc(var(--u) * 480); margin: 0 0 .2em; }
  .chart li { grid-template-columns: 2.4em 1fr; }
}
@media (max-width: 360px) {
  .walk { font-size: 26vw; }
}