/* creatiu.vallespinosa — botó de tornada de les mini webs
   Un cercle taronja amb una fletxa negra, a la mateixa posició que l'ull de la portada.
   No toca el disseny de la mini web: cada una té el seu. Tot porta el prefix .ck. */

.ck {
  --ck-orange: #f26f63;
  --ck-ink: #1c1c1a;
  --ck-gutter: clamp(1rem, 0.4rem + 2.6vw, 3rem);
  --ck-header: clamp(3.5rem, 3.3rem + 0.6vw, 4rem);
  position: fixed; z-index: 2147483000;
  /* La mateixa posició que l'ull de la portada */
  top: calc((var(--ck-header) - 2.75rem) / 2);
  right: calc(max(var(--ck-gutter), (100vw - 100rem) / 2) + 0.3rem);
  display: flex; align-items: center;
}

.ck-back {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border-radius: 50%;
  background: var(--ck-orange); color: var(--ck-ink);
  text-decoration: none;
  transition: scale .25s cubic-bezier(.2, .7, .2, 1);
}
.ck-back:hover { scale: 1.08; }
.ck-back:focus-visible { outline: 3px solid var(--ck-ink); outline-offset: 3px; }
.ck-back svg { width: 1.35rem; height: 1.35rem; }

/* De tant en tant, la fletxa fa un gest cap enrere */
.ck-back.is-nudging svg { animation: ck-nudge .9s cubic-bezier(.2, .7, .2, 1); }
@keyframes ck-nudge {
  30% { translate: -0.3rem 0; }
  55% { translate: 0.08rem 0; }
  75% { translate: -0.12rem 0; }
}

/* La signatura del peu: «Fet amb tecnologia i imaginació»
   Tota la frase en lletra de màquina i del mateix color; el cursor taronja, al final.
   Sempre del mateix color fosc que a la portada. */
.ck-sig {
  margin: 0; padding: 1.25rem 1rem 2.25rem;
  text-align: center; text-wrap: balance;
  font: 400 0.9rem/1.6 ui-monospace, "SF Mono", Menlo, Consolas, "PingFang SC", "Microsoft YaHei", monospace;
  letter-spacing: 0.02em;
  /* El mateix color que a la portada. Una mini web de fons fosc el pot canviar amb --ck-sig-color. */
  color: var(--ck-sig-color, #1c1c1a);
}
/* El cursor és un bloc dibuixat (no un caràcter), perquè surti igual de gruixut amb qualsevol lletra */
.ck-sig::after {
  content: ""; display: inline-block; width: 0.45em; height: 1.05em; margin-left: 0.12em;
  vertical-align: -0.17em; background: #f26f63;
  animation: ck-caret 1s steps(1) infinite;
}
@keyframes ck-caret { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ck-back { transition: none; }
  .ck-back.is-nudging svg { animation: none; }
  .ck-sig::after { animation: none; }
}