@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  --portrait-background: #4e1475;
  --portrait-width: 430px;
  background: var(--portrait-background);
  color: white;
  color-scheme: dark;
  font-family: "Work Sans", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--portrait-background); }

.portrait {
  /* Track one-finger drags while retaining the browser's pinch-to-zoom gesture. */
  touch-action: pinch-zoom;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
  padding-top: max(24px, env(safe-area-inset-top));
}

.portrait__heading {
  flex: none;
  position: relative;
  z-index: 1;
  color: #fff;
  text-align: center;
  padding: 0 16px 28px;
}
h1 {
  margin: 0;
  font-family: "Work Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  letter-spacing: -3.5px;
  font-size: 3rem;
  line-height: normal;
}
h1 .daneasa { font-weight: 500; }
h1 .role {
  font-size: 1.5rem;
  letter-spacing: -1px;
  position: relative;
  top: -27px;
}

.portrait__frame {
  flex: none;
  position: relative;
  width: min(100%, var(--portrait-width), max(160px, calc((100dvh - 155px) * 1.00184)));
  aspect-ratio: 1088 / 1086;
  overflow: hidden;
  /* Trim only the original purple side margins; preserve the full fisherman and fish. */
  mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent), linear-gradient(to bottom, transparent, black 2%, black);
  mask-composite: intersect;
}
.portrait__art {
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 133.088235294%;
  max-width: none;
  height: auto;
}

@media (max-height: 500px) {
  .portrait { padding-top: 12px; }
  .portrait__heading { padding-bottom: 12px; }
  .portrait__frame { width: min(100%, var(--portrait-width), calc((100dvh - 145px) * 1.00184)); }
}

/* Give the illustration a little more presence on larger screens. */
@media (min-width: 1024px) and (min-height: 600px) {
  :root { --portrait-width: 520px; }
}

.gaze-pupil {
  transform: translate(var(--gaze-x, 0px), var(--gaze-y, 0px));
  transition: transform 140ms ease-out;
}

.portrait__art { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.portrait__art:focus-visible { outline: 2px solid white; outline-offset: -8px; }
.surprise-mouth { opacity: 0; pointer-events: none; }
.is-surprised .surprise-mouth { opacity: 1; }
.is-surprised .human-blink { opacity: 1; animation: none; }
.is-surprised .gaze-pupils { opacity: 0; animation: none; }
.is-surprised .art { animation: surprisedTilt 1.1s ease-in-out both; }
@keyframes surprisedTilt {
  0%, 100% { transform: translateY(0) rotate(0); }
  20%, 65% { transform: translateY(-5px) rotate(-0.8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .is-surprised .art { animation: none; }
}

/* Match the original human-blink timeline so moving pupils disappear under lids. */
.gaze-pupils { animation: eyesOpen 7.3s linear infinite; }
@keyframes eyesOpen {
  0%, 22%, 24.5%, 61%, 63.5%, 100% { opacity: 1; }
  22.7%, 23.8%, 61.7%, 62.8% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gaze-pupils { animation: none; }
  .gaze-pupil { transform: none; transition: none; }
}