/* Artist pages (/artist/<id>, generated from artist.html): round portrait, name, the painter's quote written out word by word, a short
   biography with the rest folded away, the works (style.css), and the handover to the next painter.
   Everything here is CSS, so it also replays when the language switch re-renders the page. */

/* the site header stays at the top here as on every page (style.css) */

/* ---------- opening: portrait → name → quote → short biography ---------- */

.intro { max-width: 760px; margin: 0 auto; padding: clamp(20px, 5vh, 56px) var(--gutter) 0; text-align: center; }
/* round, like the dots in the logo */
.intro__portrait {
  width: clamp(150px, 22vw, 230px); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; overflow: hidden;
  background: var(--paper); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .4);
  animation: intro-portrait 1.1s cubic-bezier(.22, .7, .2, 1) both;
}
.intro__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.intro__role {
  margin: 26px 0 0; font-family: var(--display); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted);
  animation: intro-fade .8s ease .5s both;
}
.intro__name {
  margin: 8px 0 0; font-weight: 400; font-size: clamp(28px, 4vw, 42px); letter-spacing: .16em; text-transform: uppercase; line-height: 1.15;
  animation: intro-fade .8s ease .6s both;
}
/* each word comes up in turn, as if being written */
.intro__quote { margin: clamp(26px, 4vh, 40px) auto 0; max-width: 22em; font-style: italic; font-size: clamp(22px, 3vw, 34px); line-height: 1.4; color: var(--ink); }
.intro__quote span { opacity: .14; animation: intro-word .5s ease both; animation-delay: calc(1.1s + var(--i) * 90ms); }
.intro__bio {
  margin: clamp(28px, 4vh, 44px) auto 0; max-width: 36em; text-align: left;
  font-size: 18.5px; line-height: 1.65; letter-spacing: .02em; color: var(--ink-soft);
  animation: intro-fade .9s ease both; animation-delay: calc(1.4s + var(--words, 0) * 90ms);
}
.intro__bio p { margin: 0 0 1em; }
.intro__bio .link-arrow { margin-top: 6px; }
.bio-quote { font-style: italic; color: var(--ink); border-left: 1px solid var(--accent); padding-left: 18px; }

@keyframes intro-portrait { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes intro-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes intro-word { from { opacity: .14; } to { opacity: 1; } }

/* ---------- handover to the next painter ---------- */

.handover { text-align: center; padding: clamp(70px, 12vh, 130px) var(--gutter) clamp(60px, 10vh, 110px); }
.handover .dots { gap: 18px; }
.handover .dots i { width: 22px; height: 22px; }
.handover p { margin: 30px 0 22px; font-size: 20px; color: var(--ink-soft); }
.hand { display: inline-flex; flex-direction: column; align-items: center; color: inherit; text-decoration: none; }
.hand__faces { display: flex; gap: 14px; justify-content: center; }
.hand__face {
  display: block; width: 130px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--paper);
  box-shadow: 0 24px 46px -30px rgba(0, 0, 0, .45); transition: transform .6s cubic-bezier(.22, .7, .2, 1);
}
.hand__faces--three .hand__face { width: 96px; }
.hand__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hand:hover .hand__face, .hand:focus-visible .hand__face { transform: translateY(-6px); }
.hand__role { margin-top: 22px; font-family: var(--display); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.hand__name { margin-top: 6px; font-size: 26px; letter-spacing: .12em; text-transform: uppercase; }
.hand .link-arrow { margin-top: 18px; }
/* the dots and the next painter come in as the end of the page scrolls into view */
@supports (animation-timeline: view()) {
  .handover .dots i { animation: hand-dot linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
  .handover .dots i:nth-child(2) { animation-range: entry 20% cover 35%; }
  .handover .dots i:nth-child(3) { animation-range: entry 30% cover 40%; }
  .hand { animation: intro-fade linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
}
@keyframes hand-dot { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@media (max-width: 600px) {
  .intro__portrait { width: 150px; }
  .intro__bio { font-size: 16.5px; }
  .hand__face { width: 110px; }
  .hand__faces--three .hand__face { width: 82px; }
  .hand__faces { gap: 10px; }
  .hand__name { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro__portrait, .intro__role, .intro__name, .intro__quote span, .intro__bio, .handover .dots i, .hand { animation: none; opacity: 1; transform: none; }
}