/* Rumiru Games studio page. Colors are taken from the logo: yellow field, ink outline, llama pink.
   Shape rule: buttons and chips are pills, cards are 28px, inputs are 16px; one ink outline everywhere. */
:root {
  --yellow: #fdbe2e;
  --yellow-light: #ffd55f;
  --ink: #291e37;
  --ink-soft: #5b5068;
  --pink: #f25b80;
  --paper: #fffaeb;
  --card: #fffefa;
  --error: #c2244b;
  --line: 3px;
  --radius: 28px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  --spring: cubic-bezier(0.3, 1.5, 0.5, 1);
  --out: cubic-bezier(0.16, 1, 0.3, 1);
  /* layers: page 0, nav 10, dialog is in the browser's top layer */
  --z-nav: 10;
}

/* Bricolage Grotesque (SIL Open Font License), latin subset, variable weight 500-800. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3 {
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

a {
  color: inherit;
}

main {
  overflow-x: clip; /* the tilted band pokes past the edges */
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  fill: currentColor;
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}

/* Sticker button: pill, ink outline, hard ink shadow that the button sinks into when pressed. */
.btn {
  --bg: var(--card);
  --fg: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 28px;
  border: var(--line) solid var(--ink);
  border-radius: 999px;
  background: var(--bg);
  box-shadow: 0 6px 0 var(--ink);
  color: var(--fg);
  font: inherit;
  font-weight: 800;
  font-size: 18px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 0.18s var(--spring),
    box-shadow 0.18s var(--spring);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 var(--ink);
}

.btn:active {
  transform: translateY(5px);
  box-shadow: 0 1px 0 var(--ink);
}

.btn--ink {
  --bg: var(--ink);
  --fg: var(--paper);
  box-shadow: 0 6px 0 rgb(41 30 55 / 0.35);
}

.btn--ink:hover {
  box-shadow: 0 8px 0 rgb(41 30 55 / 0.35);
}

.btn--ink:active {
  box-shadow: 0 1px 0 rgb(41 30 55 / 0.35);
}

.btn--yellow {
  --bg: var(--yellow);
}

.btn--sm {
  min-height: 44px;
  padding: 0 20px;
  font-size: 16px;
  box-shadow: 0 4px 0 var(--ink);
}

.btn--sm:hover {
  box-shadow: 0 6px 0 var(--ink);
}

.btn .icon {
  transition: transform 0.25s var(--spring);
}

.btn:hover .icon--go {
  transform: translate(3px, -3px);
}

/* Nav: a floating pill */
.nav {
  position: fixed;
  inset: 16px 0 auto;
  z-index: var(--z-nav);
  padding-inline: var(--gutter);
  pointer-events: none;
}

.nav__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: var(--max);
  height: 64px;
  margin: 0 auto;
  padding: 0 10px 0 22px;
  border: var(--line) solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 6px 0 var(--ink);
  pointer-events: auto;
}

.nav__logo {
  margin-right: auto;
}

.nav__logo img {
  width: auto;
  height: 34px;
}

.nav__link {
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s;
}

.nav__link:hover {
  background: var(--yellow);
}

/* Hero: text on the left, the llama rises from the bottom edge on the right. */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--yellow);
  border-bottom: var(--line) solid var(--ink);
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  min-height: min(100dvh, 880px);
  padding-top: 96px;
}

.hero__text {
  padding-block: 32px 64px;
}

.hero h1 {
  font-size: clamp(42px, 5.4vw, 80px);
  line-height: 0.98;
}

/* The words are separate boxes so they can jump in one by one. */
.hero h1 span {
  display: inline-block;
}

.hero h1 .pop {
  padding: 0 0.16em 0.06em;
  margin-inline: -0.06em;
  border: var(--line) solid var(--ink);
  border-radius: 0.28em;
  background: var(--card);
  box-shadow: 0 0.07em 0 var(--ink);
  rotate: -2deg;
}

.hero__lead {
  max-width: 34ch;
  margin-top: 28px;
  font-size: clamp(18px, 1.7vw, 23px);
  font-weight: 500;
  line-height: 1.4;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 36px;
}

.hero__stage {
  position: relative;
  align-self: end;
  display: grid;
  justify-items: center;
  /* pointer offset from the stage centre, -1..1, set by main.js */
  --px: 0;
  --py: 0;
}

.hero__sun {
  position: absolute;
  left: 50%;
  bottom: -12%;
  width: min(125%, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--yellow-light);
  translate: -50% 0;
}

.llama-rise {
  position: relative;
  /* 0.5886 is the picture's width to height */
  width: min(72%, 380px, (100dvh - 170px) * 0.5886);
}

/* The llama from the logo. The eye whites and pupils are drawn on top of the picture
   so the pupils can follow the pointer. The box is the llama as the logo shows it; the picture
   has more neck below the box, hidden under the section edge, so a bounce never shows a cut. */
.llama {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 372 / 632;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-origin: 50% 100%;
  -webkit-tap-highlight-color: transparent;
}

.llama img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.llama__eye {
  position: absolute;
  top: 51.7%;
  left: var(--x);
  width: 13.6%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  translate: -50% -50%;
}

.llama__eye--left { --x: 24.7%; }
.llama__eye--right { --x: 74.3%; }

.llama__eye::after {
  content: "";
  position: absolute;
  inset: 26%;
  border-radius: 50%;
  background: radial-gradient(circle at 68% 30%, #fff 0 16%, var(--ink) 18%);
  translate: calc(var(--look-x, 0) * 50%) calc(var(--look-y, 0) * 50%);
  transition: translate 0.12s ease-out;
}

/* Game icons float around the llama. */
.orbit {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(64px, 7.4vw, 104px);
  aspect-ratio: 1;
  border: var(--line) solid var(--ink);
  border-radius: 24%;
  background: var(--card);
  box-shadow: 0 6px 0 var(--ink);
  object-fit: cover;
  rotate: var(--r);
  translate: calc(var(--px) * var(--depth) * 1px) calc(var(--py) * var(--depth) * 1px);
  transition: translate 0.5s var(--out);
}

/* Numbers */
.numbers {
  padding-block: clamp(72px, 10vw, 136px);
}

.numbers__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(24px, 5vw, 80px);
}

.numbers__big {
  font-weight: 800;
  font-size: clamp(64px, 14.5vw, 216px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.numbers__big span {
  color: var(--pink);
}

.numbers__caption {
  max-width: 22ch;
  margin-top: 20px;
  font-size: clamp(20px, 2.1vw, 28px);
  font-weight: 700;
  line-height: 1.2;
}

.numbers__stickers {
  display: grid;
  justify-items: start;
  gap: 20px;
}

.sticker {
  padding: 14px 24px;
  border: var(--line) solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 6px 0 var(--ink);
  font-weight: 800;
  font-size: clamp(18px, 1.9vw, 26px);
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  rotate: var(--r, -3deg);
}

.sticker--yellow {
  --r: 4deg;
  margin-left: clamp(16px, 4vw, 64px);
  background: var(--yellow);
}

/* Games: four cards of different widths */
.games {
  padding-bottom: clamp(72px, 10vw, 136px);
}

.section-title {
  font-size: clamp(40px, 5.6vw, 80px);
}

.section-sub {
  max-width: 44ch;
  margin-top: 16px;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 500;
  color: var(--ink-soft);
  text-wrap: balance;
}

.games__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3.4vw, 48px);
  margin-top: clamp(32px, 4vw, 56px);
  perspective: 1400px;
}

.game {
  display: flex;
  flex-direction: column;
  border: var(--line) solid var(--ink);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 10px 0 var(--ink);
  overflow: hidden;
  /* tilt toward the pointer, -1..1, set by main.js */
  --tx: 0;
  --ty: 0;
  transform: rotateX(calc(var(--ty) * -5deg)) rotateY(calc(var(--tx) * 5deg));
  transition:
    transform 0.4s var(--out),
    box-shadow 0.4s var(--out);
}

/* The right column sits lower, so the grid reads as a staggered wall, not a table. */
.game:nth-child(even) {
  translate: 0 clamp(32px, 5vw, 72px);
}

.games__grid {
  padding-bottom: clamp(32px, 5vw, 72px);
}

.game__art {
  aspect-ratio: 16 / 9;
  border-bottom: var(--line) solid var(--ink);
  background: var(--yellow-light);
  overflow: hidden;
}

.game__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.6s var(--out);
}

.game:hover .game__art img {
  scale: 1.06;
}

.game__body {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  align-items: end;
  gap: 10px 20px;
  flex: 1;
  padding: 22px 24px 26px;
}

.game__body > div {
  align-self: start;
}

.game__title {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: clamp(26px, 2.6vw, 36px);
}

.chip {
  padding: 5px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

.game__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--ink-soft);
}

.game__text {
  max-width: 40ch;
  margin-top: 6px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}

/* Marquee: the one moving text band on the page */
.band {
  overflow: hidden;
  padding: 18px 0;
  border-block: var(--line) solid var(--ink);
  background: var(--yellow);
  rotate: -1.5deg;
  scale: 1.03;
}

.band__track {
  display: flex;
  width: max-content;
}

.band__track span {
  display: flex;
  align-items: center;
  font-weight: 800;
  font-size: clamp(24px, 3.2vw, 44px);
  line-height: 1;
  white-space: nowrap;
}

.band__track img {
  width: auto;
  height: 1.5em;
  aspect-ratio: 372 / 632;
  margin-inline: 0.7em;
  object-fit: cover;
  object-position: top;
}

/* About: one big statement */
.about {
  padding-block: clamp(88px, 12vw, 168px);
}

.about__statement {
  max-width: 22ch;
  font-size: clamp(34px, 5.2vw, 76px);
  text-wrap: balance;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.about__note {
  max-width: 46ch;
  margin-top: 32px;
  margin-left: auto;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 500;
  color: var(--ink-soft);
}

/* Contact band */
.contact {
  position: relative;
  overflow: hidden;
  border-block: var(--line) solid var(--ink);
  background: var(--yellow);
}

.contact__inner {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  align-items: end;
  gap: clamp(24px, 5vw, 80px);
}

.contact__llama {
  width: min(100%, 280px);
  justify-self: center;
  margin-top: 56px;
}

.contact__text {
  padding-block: clamp(64px, 9vw, 120px);
}

.contact .section-sub {
  color: var(--ink);
}

.contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 36px;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 28px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
}

.footer img {
  width: auto;
  height: 30px;
}

/* Contact window */
.dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: var(--line) solid var(--ink);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 10px 0 var(--ink);
  color: var(--ink);
  overflow: auto;
}

.dialog::backdrop {
  background: rgb(41 30 55 / 0.55);
}

.dialog__inner {
  display: grid;
  gap: 20px;
  padding: clamp(22px, 4vw, 36px);
}

.dialog__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.dialog__head h2 {
  font-size: clamp(30px, 4vw, 42px);
}

.dialog__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: var(--line) solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
  transition: rotate 0.3s var(--spring);
}

.dialog__close:hover {
  rotate: 90deg;
}

.form {
  display: grid;
  gap: 16px;
}

.field {
  display: grid;
  gap: 8px;
}

.field label {
  font-weight: 800;
}

.field input,
.field textarea {
  width: 100%;
  padding: 13px 16px;
  border: var(--line) solid var(--ink);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 500;
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 0;
  box-shadow: 0 4px 0 var(--ink);
}

.field [aria-invalid="true"] {
  border-color: var(--error);
}

.field__error {
  min-height: 1.4em;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--error);
}

.form__status {
  font-weight: 700;
}

.form__status:empty {
  display: none;
}

.dialog__socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 2px dashed rgb(41 30 55 / 0.25);
  font-weight: 700;
}

.dialog__socials p {
  width: 100%;
}

/* While the form is hidden the links are the whole window: no divider above them. */
.form[hidden] + .dialog__socials {
  padding-top: 0;
  border-top: 0;
}

/* Motion. Everything below runs only when the visitor allows motion. */
@media (prefers-reduced-motion: no-preference) {
  /* Page load: the nav drops in, the headline words jump in one by one, the llama rises. */
  .nav__bar {
    animation: drop 0.7s var(--spring) 0.1s both;
  }

  .hero h1 span {
    animation: word 0.7s var(--spring) calc(0.15s + var(--i) * 0.07s) both;
  }

  .hero__lead,
  .hero__actions {
    animation: rise 0.7s var(--out) 0.75s both;
  }

  .hero__actions {
    animation-delay: 0.9s;
  }

  .hero__sun {
    animation: sun 1s var(--out) 0.2s both;
  }

  .llama-rise {
    animation: llama-up 1s var(--spring) 0.45s both;
  }

  .llama {
    animation: sway 5s ease-in-out 1.6s infinite;
  }

  .llama.is-boing {
    animation: boing 0.6s var(--spring);
  }

  .orbit {
    animation:
      orbit-in 0.6s var(--spring) calc(1.1s + var(--i) * 0.12s) both,
      float calc(4s + var(--i) * 0.7s) ease-in-out calc(1.8s + var(--i) * 0.3s) infinite;
  }

  /* Scroll reveals: main.js adds .fx to <html> and .is-in when a block enters the screen. */
  [data-reveal] {
    transition:
      opacity 0.7s var(--out) calc(var(--i, 0) * 0.09s),
      translate 0.7s var(--spring) calc(var(--i, 0) * 0.09s),
      rotate 0.7s var(--spring) calc(var(--i, 0) * 0.09s);
  }

  .fx [data-reveal]:not(.is-in) {
    opacity: 0;
    translate: 0 48px;
  }

  .fx .sticker[data-reveal]:not(.is-in) {
    rotate: -24deg;
  }

  .sticker[data-reveal] {
    transition:
      opacity 0.7s var(--out) calc(var(--i, 0) * 0.09s),
      translate 0.7s var(--spring) calc(var(--i, 0) * 0.09s),
      rotate 0.5s var(--spring),
      scale 0.3s var(--spring);
  }

  .game[data-reveal] {
    transition:
      opacity 0.7s var(--out) calc(var(--i, 0) * 0.12s),
      translate 0.7s var(--spring) calc(var(--i, 0) * 0.12s),
      transform 0.4s var(--out),
      box-shadow 0.4s var(--out);
  }

  .fx .game[data-reveal]:not(.is-in) {
    translate: 0 96px;
  }

  .sticker:hover {
    rotate: 0deg;
    scale: 1.06;
  }

  .game:hover {
    box-shadow: 0 18px 0 var(--ink);
  }

  .band__track {
    animation: band 28s linear infinite;
  }

  .contact__llama .llama {
    transition: translate 0.9s var(--spring) 0.15s;
  }

  .fx .contact__llama:not(.is-in) {
    opacity: 1;
    translate: none;
  }

  .fx .contact__llama:not(.is-in) .llama {
    translate: 0 105%;
  }

  /* About: the statement fills with ink word by word while it crosses the screen.
     main.js wraps the words; browsers without scroll timelines show plain ink text. */
  @supports (animation-timeline: view()) {
    .about__statement .w {
      animation: ink-in linear both;
      animation-timeline: view();
      animation-range: cover calc(12% + var(--i) * 1.1%) cover calc(24% + var(--i) * 1.1%);
    }
  }

  /* The contact window springs open. */
  .dialog {
    transition:
      opacity 0.3s ease,
      scale 0.45s var(--spring),
      translate 0.45s var(--spring),
      overlay 0.3s allow-discrete,
      display 0.3s allow-discrete;
  }

  .dialog::backdrop {
    transition:
      opacity 0.3s ease,
      overlay 0.3s allow-discrete,
      display 0.3s allow-discrete;
  }

  .dialog:not([open]),
  .dialog:not([open])::backdrop {
    opacity: 0;
  }

  .dialog:not([open]) {
    scale: 0.9;
    translate: 0 24px;
  }

  @starting-style {
    .dialog[open] {
      opacity: 0;
      scale: 0.8;
      translate: 0 40px;
    }

    .dialog[open]::backdrop {
      opacity: 0;
    }
  }

  @keyframes drop {
    from { opacity: 0; translate: 0 -120%; }
  }

  @keyframes word {
    from { opacity: 0; translate: 0 0.6em; rotate: 6deg; }
  }

  @keyframes rise {
    from { opacity: 0; translate: 0 24px; }
  }

  @keyframes sun {
    from { scale: 0.4; opacity: 0; }
  }

  @keyframes llama-up {
    from { translate: 0 105%; }
  }

  @keyframes sway {
    50% { transform: rotate(1.6deg) scaleY(1.015); }
  }

  @keyframes boing {
    30% { transform: scale(1.12, 0.84); }
    60% { transform: scale(0.94, 1.1); }
  }

  @keyframes orbit-in {
    from { opacity: 0; scale: 0; }
  }

  @keyframes float {
    50% { transform: translateY(-14px) rotate(4deg); }
  }

  @keyframes band {
    to { transform: translateX(-50%); }
  }

  @keyframes ink-in {
    from { opacity: 0.16; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .btn,
  .game,
  .game__art img,
  .llama__eye::after {
    transition: none;
  }
}

/* The tilt and the pointer parallax only make sense with a mouse. */
@media (hover: none) {
  .game {
    transform: none;
  }
}

/* Below this width the stickers no longer fit beside the big number: they go under it, in a row. */
@media (max-width: 1180px) {
  .numbers__inner {
    grid-template-columns: 1fr;
  }

  .numbers__stickers {
    grid-auto-flow: column;
    justify-content: start;
  }

  .sticker--yellow {
    margin-left: 0;
  }
}

@media (max-width: 900px) {
  .games__grid {
    grid-template-columns: 1fr;
    padding-bottom: 0;
  }

  .game:nth-child(even) {
    translate: none;
  }

  .contact__inner {
    grid-template-columns: 1fr;
  }

  .about__note {
    margin-left: 0;
  }

  .contact__llama {
    order: 2;
    width: 200px;
    margin-top: 0;
  }

  .contact__text {
    padding-bottom: 40px;
  }
}

@media (max-width: 760px) {
  .nav__link {
    display: none;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: 0;
  }

  .hero__text {
    padding-block: 32px 40px;
  }

  .hero__stage {
    padding-top: 24px;
  }

  .llama-rise {
    width: 230px;
  }

  .hero__sun {
    width: 420px;
  }

  .game__body {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .game__body .btn {
    justify-self: start;
  }

  .footer {
    justify-content: center;
    text-align: center;
  }
}