/* Licia Marasciulo – temporary homepage */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-500-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700-latin.woff2") format("woff2");
}

:root {
  /* Original #A06A9F darkened a touch so body text passes WCAG AA (4.6:1). */
  --bg: #966095;
  --text: #f3fdff;
  --focus: #fff;
  --font: "Poppins", Helvetica, Arial, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
  text-align: center;
}

.avatar {
  display: block;
  width: min(190px, 52vw);
  height: auto;
  margin-bottom: 0.75rem;
}

.avatar-wrap {
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Pause toggle: shown on hover/keyboard focus, never on touch screens. */
.avatar-pause {
  position: absolute;
  right: 0;
  bottom: calc(0.75rem + 2px);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  cursor: pointer;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.18);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.avatar-pause[hidden] {
  display: none;
}

.avatar-wrap:hover .avatar-pause,
.avatar-pause:focus-visible {
  opacity: 1;
  transform: none;
}

@media (hover: none) {
  .avatar-pause {
    display: none;
  }
}

.avatar-pause:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.avatar-pause__icon {
  fill: currentColor;
}

.avatar-pause[aria-pressed="false"] .avatar-pause__icon--play,
.avatar-pause[aria-pressed="true"] .avatar-pause__icon--pause {
  display: none;
}

@media (forced-colors: active) {
  .avatar-pause {
    border: 2px solid ButtonText;
  }
}

h1,
h2 {
  margin: 0;
  padding-bottom: 10px;
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2rem);
  margin-bottom: 0.75rem;
}

h2 {
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.625rem);
}

p {
  margin: 0;
  padding-bottom: 1em;
  max-width: 40rem;
  text-wrap: pretty;
}

.moved p:last-child {
  padding-bottom: 0;
}

a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
  border-radius: 2px;
}

a:hover {
  text-decoration-thickness: 0.15em;
}

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

@media (forced-colors: active) {
  a:focus-visible {
    outline-color: Highlight;
  }
}

/* ---------------------------------------------------------------------
   Animated avatar
   Intro plays once (under 5s, WCAG 2.2.2); after that the avatar only
   moves when the visitor hovers/taps it or moves the pointer (eyes).
   Everything is skipped for prefers-reduced-motion.
   Origins are in SVG user units (viewBox 0 0 434.75 477).
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .avatar-wrap.is-done {
    cursor: pointer;
  }

  .av-bg {
    transform-origin: 217.4px 263.5px;
  }

  .av-character {
    transform-origin: 217px 477px;
  }

  .av-head {
    transform-origin: 217px 335px;
  }

  .av-hair {
    transform-origin: 217px 170px;
  }

  .av-bun {
    transform-origin: 217px 135px;
  }

  .av-pencil,
  .av-pupil,
  .av-glasses {
    transform-box: fill-box;
  }

  .av-pencil--blue {
    transform-origin: 100% 100%;
  }

  .av-pencil--red {
    transform-origin: 0% 100%;
  }

  .av-pupil,
  .av-glasses {
    transform-origin: 50% 50%;
  }

  .av-eyes {
    transition: transform 0.18s ease-out;
  }

  /* Intro ------------------------------------------------------------ */
  .avatar-wrap:not(.is-done) .av-bg {
    animation: av-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  .avatar-wrap:not(.is-done) .av-character {
    animation: av-rise 0.95s 0.25s ease-out both;
  }

  .avatar-wrap:not(.is-done) .av-bun {
    animation: av-squash 0.6s 0.75s ease-in-out both;
  }

  .avatar-wrap:not(.is-done) .av-pencil--blue {
    animation: av-pencil-in 0.85s 0.95s ease-out both;
  }

  .avatar-wrap:not(.is-done) .av-pencil--red {
    animation: av-pencil-in-r 0.85s 1.08s ease-out both;
  }

  .avatar-wrap:not(.is-done) .av-hair {
    animation: av-sway 1.2s 0.8s ease-in-out both;
  }

  .avatar-wrap:not(.is-done) .av-head {
    animation: av-hello 1s 1.9s ease-in-out both;
  }

  .avatar-wrap:not(.is-done) .av-pupil {
    animation: av-blink-twice 0.7s 2.25s ease-in-out both;
  }

  .avatar-wrap:not(.is-done) .av-glasses {
    animation: av-hop 0.6s 2.15s ease-out both;
  }

  .page > h1,
  .moved > * {
    animation: av-fade-up 0.6s ease-out both;
  }

  .page > h1 { animation-delay: 0.9s; }
  .moved > h2 { animation-delay: 1.05s; }
  .moved > p:nth-of-type(1) { animation-delay: 1.2s; }
  .moved > p:nth-of-type(2) { animation-delay: 1.35s; }

  /* Idle: an occasional blink (single, then a double) every 9s ------- */
  .avatar-wrap.is-done:not(.is-paused):not(.is-boing) .av-pupil {
    animation: av-idle-blink 9s 1.5s infinite;
  }

  .avatar-wrap.is-paused {
    cursor: auto;
  }

  .motion-paused .page > h1,
  .motion-paused .moved > * {
    animation: none;
  }

  /* Boing (hover / tap) --------------------------------------------- */
  .avatar-wrap.is-boing .av-head {
    animation: av-jelly 0.9s ease-in-out;
  }

  .avatar-wrap.is-boing .av-bun {
    animation: av-squash 0.6s 0.08s ease-in-out;
  }

  .avatar-wrap.is-boing .av-pencil--blue {
    animation: av-wiggle 0.9s 0.12s ease-in-out;
  }

  .avatar-wrap.is-boing .av-pencil--red {
    animation: av-wiggle-r 0.9s 0.16s ease-in-out;
  }

  .avatar-wrap.is-boing .av-hair {
    animation: av-sway 1.1s 0.1s ease-in-out;
  }

  .avatar-wrap.is-boing .av-glasses {
    animation: av-hop 0.6s ease-out;
  }

  .avatar-wrap.is-boing .av-pupil {
    animation: av-blink 0.3s 0.3s ease-in-out;
  }
}

@keyframes av-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.08); }
  80%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

@keyframes av-rise {
  0%   { transform: translateY(490px) scale(0.92, 1.1); }
  55%  { transform: translateY(-24px) scale(0.96, 1.05); }
  72%  { transform: translateY(6px) scale(1.05, 0.95); }
  86%  { transform: translateY(-3px) scale(0.99, 1.01); }
  100% { transform: none; }
}

@keyframes av-squash {
  0%   { transform: none; }
  30%  { transform: scale(1.12, 0.82); }
  55%  { transform: scale(0.94, 1.1); }
  78%  { transform: scale(1.03, 0.97); }
  100% { transform: none; }
}

@keyframes av-pencil-in {
  0%   { transform: scale(0) rotate(-35deg); }
  45%  { transform: scale(1.1) rotate(12deg); }
  65%  { transform: scale(1) rotate(-7deg); }
  82%  { transform: rotate(3deg); }
  100% { transform: none; }
}

@keyframes av-pencil-in-r {
  0%   { transform: scale(0) rotate(35deg); }
  45%  { transform: scale(1.1) rotate(-12deg); }
  65%  { transform: scale(1) rotate(7deg); }
  82%  { transform: rotate(-3deg); }
  100% { transform: none; }
}

@keyframes av-wiggle {
  0%   { transform: none; }
  20%  { transform: rotate(-16deg); }
  40%  { transform: rotate(11deg); }
  60%  { transform: rotate(-6deg); }
  80%  { transform: rotate(3deg); }
  100% { transform: none; }
}

@keyframes av-wiggle-r {
  0%   { transform: none; }
  20%  { transform: rotate(16deg); }
  40%  { transform: rotate(-11deg); }
  60%  { transform: rotate(6deg); }
  80%  { transform: rotate(-3deg); }
  100% { transform: none; }
}

@keyframes av-sway {
  0%   { transform: none; }
  25%  { transform: rotate(2.2deg) skewX(-1.5deg); }
  50%  { transform: rotate(-1.6deg) skewX(1deg); }
  75%  { transform: rotate(0.7deg); }
  100% { transform: none; }
}

@keyframes av-hello {
  0%   { transform: none; }
  25%  { transform: rotate(-7deg); }
  50%  { transform: rotate(5deg); }
  75%  { transform: rotate(-2deg); }
  100% { transform: none; }
}

@keyframes av-jelly {
  0%   { transform: none; }
  15%  { transform: scale(1.06, 0.94) rotate(-4deg); }
  35%  { transform: scale(0.96, 1.05) rotate(5deg); }
  55%  { transform: scale(1.02, 0.98) rotate(-3deg); }
  75%  { transform: rotate(1.5deg); }
  100% { transform: none; }
}

@keyframes av-hop {
  0%   { transform: none; }
  35%  { transform: translateY(-14px); }
  65%  { transform: translateY(3px); }
  100% { transform: none; }
}

@keyframes av-blink {
  0%, 100% { transform: none; }
  50%      { transform: scaleY(0.1); }
}

@keyframes av-blink-twice {
  0%, 40%, 100% { transform: none; }
  20%, 60%      { transform: scaleY(0.1); }
  80%           { transform: none; }
}

@keyframes av-idle-blink {
  0%, 44%, 47%, 88%, 91%, 94%, 100% { transform: none; }
  45.5%, 89.5%, 92.5%               { transform: scaleY(0.1); }
}

@keyframes av-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}