/* PAROLA PAROLA. Muro, tag, una domanda. No Inter. No em dash. */

*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, p, ul, ol, figure, form, fieldset, legend { margin: 0; padding: 0; }
fieldset { border: 0; }
ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; background: none; border: 0; }
a { color: inherit; text-decoration: none; }

:root {
  --spray: #FF4E00;
  --hot: #FF6A1A;
  --outline: #C91F12;
  --tag: #EDE4D8;
  --mute: rgba(237, 228, 216, 0.55);
  --ink: #0C0B0A;
  --panel: rgba(10, 9, 8, 0.86);
  --field: #12100e;
  --display: "Sedgwick Ave Display", sans-serif;
  --marker: "Permanent Marker", cursive;
  --pad: 1.5rem;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

html {
  background: var(--ink);
  color-scheme: dark;
}

body {
  font-family: var(--marker);
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--tag);
  background: var(--ink);
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
}

.skip {
  position: absolute;
  left: var(--pad);
  top: -4rem;
  z-index: 30;
  background: var(--spray);
  color: #fff;
  padding: 0.6rem 1rem;
}
.skip:focus { top: var(--pad); }

.wall {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
}

.walls {
  position: absolute;
  inset: -5%;
  z-index: 0;
  pointer-events: none;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.05);
  transition: transform 0.45s var(--ease);
  will-change: transform;
}

.wall__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  opacity: 0;
  transform: scale(1.08);
  filter: saturate(1.05) contrast(1.04);
  transition: opacity 0.7s ease, transform 1.35s var(--ease);
}
.wall__art[data-wall="0"] { object-position: 50% 32%; }
.wall__art[data-wall="1"] { object-position: 50% 38%; }
.wall__art[data-wall="2"] { object-position: 50% 48%; }
.wall__art[data-wall="3"] { object-position: 50% 42%; }
.wall__art[data-wall="4"] { object-position: 50% 40%; }
.wall__art[data-wall="done"] { object-position: 50% 36%; }
.wall__art.is-on {
  opacity: 1;
  transform: scale(1);
}

.wall::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 58%, transparent 8%, rgba(8, 7, 6, 0.55) 100%),
    linear-gradient(to top, rgba(8, 7, 6, 0.42) 0%, transparent 38%);
}

.brand,
.ask {
  position: relative;
  z-index: 2;
}

.brand {
  grid-row: 1;
  padding: var(--pad) var(--pad) 0;
  pointer-events: none;
}
.brand h1 {
  width: min(18rem, 78vw);
}
.brand h1 img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.7));
}

.ask {
  grid-row: 2;
  align-self: center;
  width: min(26.5rem, calc(100% - 3rem));
  margin: 1.2rem 0 calc(var(--pad) + 0.4rem);
  padding: 1.45rem 1.4rem 1.25rem;
  background: var(--panel);
  border: 3px solid var(--spray);
  box-shadow:
    0 0 0 4px var(--ink),
    7px 9px 0 var(--outline),
    0 22px 40px rgba(0, 0, 0, 0.55);
  transform: rotate(-0.6deg);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.ask:focus-within {
  border-color: var(--hot);
  box-shadow:
    0 0 0 4px var(--ink),
    7px 9px 0 var(--outline),
    0 0 36px rgba(255, 78, 0, 0.22);
}
.ask.is-shake {
  animation: shake 0.42s ease;
}

.form { position: relative; }

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.step[hidden] { display: none; }
.step.is-on {
  display: block;
  animation: slap 0.38s var(--ease);
}

.q {
  display: block;
  font-family: var(--display);
  font-size: 2.05rem;
  line-height: 1;
  color: var(--tag);
  margin-bottom: 0.9rem;
  transform: rotate(-1.4deg);
  transform-origin: left center;
  text-shadow:
    0 0 10px rgba(0, 0, 0, 0.9),
    2px 3px 0 var(--ink);
}

.step input[type="text"],
.step input[type="email"],
.step textarea {
  display: block;
  width: 100%;
  padding: 0.6rem 0.8rem 0.5rem;
  background: var(--field);
  border: 2px solid #2a2420;
  border-bottom: 3px solid var(--spray);
  color: var(--spray);
  font-family: var(--marker);
  font-size: 1.4rem;
  caret-color: var(--spray);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.step input::placeholder,
.step textarea::placeholder {
  color: rgba(255, 78, 0, 0.38);
}
.step textarea {
  min-height: 8rem;
  resize: vertical;
  border: 2px solid #2a2420;
  border-bottom: 3px solid var(--spray);
}
.step input:hover,
.step textarea:hover {
  border-color: var(--spray);
  background: #161310;
}
.step input:focus,
.step textarea:focus {
  outline: none;
  background: #191512;
  border-color: var(--hot);
  box-shadow: 0 0 0 3px rgba(255, 78, 0, 0.22), inset 0 -2px 0 var(--outline);
}

.go {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 1.1rem;
  padding: 0.55rem 1.2rem 0.4rem;
  background: var(--spray);
  color: #fff;
  font-family: var(--display);
  font-size: 1.7rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 3px solid var(--outline);
  transform: rotate(-1.1deg);
  transition: transform 0.16s var(--ease), background 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease;
}
.go:hover,
.go:focus-visible {
  background: var(--hot);
  transform: rotate(-2.4deg) scale(1.04);
  filter: brightness(1.06);
  box-shadow: 4px 6px 0 var(--outline);
  outline: none;
}
.go:active {
  transform: rotate(0.4deg) scale(0.97);
  background: var(--outline);
  box-shadow: none;
}
.go:disabled {
  opacity: 0.5;
  cursor: wait;
  transform: none;
  filter: none;
}

.tags {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.tag {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.5rem 0.85rem 0.35rem;
  font-family: var(--display);
  font-size: 1.65rem;
  color: var(--tag);
  background: var(--field);
  border: 3px solid var(--spray);
  cursor: pointer;
  user-select: none;
  transform: rotate(-0.6deg);
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s var(--ease), border-color 0.16s ease, box-shadow 0.16s ease;
}
.tag:nth-child(2) { transform: rotate(0.8deg); }
.tag:nth-child(3) { transform: rotate(-1.1deg); }
.tag input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tag:hover {
  background: rgba(255, 78, 0, 0.18);
  box-shadow: 3px 4px 0 var(--outline);
}
.tag:nth-child(1):hover { transform: rotate(-1.5deg) scale(1.03); }
.tag:nth-child(2):hover { transform: rotate(1.4deg) scale(1.03); }
.tag:nth-child(3):hover { transform: rotate(-1.8deg) scale(1.03); }
.tag:active { transform: scale(0.97) rotate(0deg); }
.tag:has(input:focus-visible) {
  outline: 2px solid var(--tag);
  outline-offset: 3px;
}
.tag:has(input:checked) {
  background: var(--spray);
  border-color: var(--outline);
  color: #fff;
  animation: stamp 0.28s var(--ease);
}

.done {
  margin-top: 0.35rem;
  font-size: 1.15rem;
  color: var(--mute);
}

.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.2rem;
  min-height: 1.4rem;
}
.back {
  font-family: var(--marker);
  font-size: 1rem;
  color: var(--mute);
  cursor: pointer;
  transition: color 0.16s ease, transform 0.16s ease;
}
.back:hover,
.back:focus-visible {
  color: var(--spray);
  transform: rotate(-3deg);
  outline: none;
}
.back[hidden] { display: none; }

.dots {
  display: flex;
  gap: 0.45rem;
  margin-left: auto;
}
.dots li {
  width: 0.62rem;
  height: 0.62rem;
  background: rgba(237, 228, 216, 0.22);
  transform: rotate(12deg);
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s var(--ease), box-shadow 0.18s ease;
}
.dots li:hover {
  background: var(--tag);
  transform: rotate(12deg) scale(1.35);
}
.dots li.is-on {
  background: var(--spray);
  box-shadow: 0 0 0 3px rgba(255, 78, 0, 0.28);
}

.form__note {
  min-height: 1.2em;
  margin-top: 0.65rem;
  font-size: 1rem;
  color: var(--mute);
}
.form__note.is-err { color: var(--spray); }

.mail {
  display: inline-block;
  margin-top: 0.85rem;
  font-size: 1rem;
  color: var(--mute);
  transition: color 0.16s ease, transform 0.16s ease;
}
.mail:hover,
.mail:focus-visible {
  color: var(--spray);
  transform: rotate(-2deg);
  outline: none;
}

@keyframes slap {
  from {
    opacity: 0;
    transform: translateY(12px) rotate(-2deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes stamp {
  0% { transform: scale(0.92) rotate(-3deg); }
  60% { transform: scale(1.05) rotate(1.2deg); }
  100% { transform: scale(1) rotate(-0.6deg); }
}

@keyframes shake {
  0%, 100% { transform: rotate(-0.6deg) translateX(0); }
  20% { transform: rotate(-2deg) translateX(-7px); }
  40% { transform: rotate(1.1deg) translateX(7px); }
  60% { transform: rotate(-1.5deg) translateX(-4px); }
  80% { transform: rotate(0.3deg) translateX(3px); }
}

@media (min-width: 861px) {
  .brand h1 { width: 20rem; }
  .q { font-size: 2.3rem; }
  .ask { width: min(28rem, calc(100% - 3rem)); }
}

@media (prefers-reduced-motion: reduce) {
  .walls,
  .wall__art,
  .go,
  .tag,
  .back,
  .mail,
  .dots li,
  .ask,
  .step input,
  .step textarea {
    transition: none;
  }
  .step.is-on,
  .tag:has(input:checked),
  .ask.is-shake {
    animation: none;
  }
}