/* Portfolio editorial - hommage à la composition en deux métiers d'Adham Dannaway.
   Mise en œuvre originale, photographie et textes propres à Djochrist K. */
.about-hero { padding-top: 0; }
.hero-stage {
  --portrait-size: clamp(450px, 45vw, 650px);
  --pointer-split: 50%;
  --portrait-lean: 0px;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items: center;
  position: relative;
  isolation: isolate;
  min-height: clamp(530px, 47vw, 665px);
  width: min(1380px, calc(100% - 96px));
  margin-inline: auto;
  overflow: hidden;
}
.hero-mode,
.hero-mode-build,
.hero-mode-lead {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(13px,1.5vw,23px);
  min-width: 0;
  min-height: 100%;
  position: relative;
  z-index: 4;
  text-align: left;
  text-decoration: none;
  background: transparent;
  color: var(--ink);
  padding-block: 80px;
  cursor: pointer;
}
.hero-mode-build { padding-left: 0; padding-right: calc(var(--portrait-size) / 2 + 22px); }
.hero-mode-lead { padding-left: calc(var(--portrait-size) / 2 + 22px); padding-right: 0; }
.hero-mode-title,
.hero-mode-lead .hero-mode-title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(31px, 3.85vw, 56px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.062em;
  color: var(--ink);
  white-space: nowrap;
  max-width: none;
  transition: none;
  transform: none;
}
.hero-mode-lead .hero-mode-title { font-size: clamp(29px, 3.25vw, 48px); }
.hero-mode-detail {
  display: block;
  max-width: 390px;
  width: 100%;
  font-family: var(--font-body);
  font-size: clamp(13px,1.17vw,17px);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -.015em;
  color: var(--ink);
  opacity: .83;
  text-decoration: none;
  text-transform: none;
}
/* Pas de changement de couleur au survol, ni de déplacement des textes. */
.hero-stage .hero-mode:is(:hover,:focus-visible) { background: transparent; color: var(--ink); }
.hero-stage .hero-mode:is(:hover,:focus-visible) .hero-mode-title { color: var(--ink); transform: none; }
.hero-stage .hero-mode:is(:hover,:focus-visible) .hero-mode-detail { text-decoration: none; color: var(--ink); }
.hero-portrait {
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 50%;
  width: var(--portrait-size);
  height: var(--portrait-size);
  pointer-events: none;
  transform: translateX(-50%);
  overflow: visible;
}
.hero-portrait::before,
.hero-portrait::after { content: none; }
.hero-portrait img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: none;
}
.hero-portrait .portrait-natural {
  transform: translate3d(var(--portrait-lean), 0, 0);
  will-change: transform;
}
/* Deux rendus COULEUR du même visage : masque piloté par la souris,
   sans noir et blanc, peinture ni animation continue agressive. */
.hero-portrait .portrait-editorial {
  clip-path: inset(0 calc(100% - var(--pointer-split)) 0 0);
  filter: saturate(1.18) contrast(1.06) sepia(.045);
  transform: translate3d(var(--portrait-lean), 0, 0);
  will-change: clip-path, transform;
}
.hero-portrait::selection { background: transparent; }
.hero-summary {
  position: relative;
  display: block;
  border-top: 1px solid var(--line);
  padding-block: 36px 48px;
  text-align: center;
}
.hero-summary > p {
  max-width: 650px;
  margin: 0 auto;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(19px, 2vw, 25px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -.03em;
}
.hero-summary .inline-link { display: inline-block; margin-top: 23px; font-size: 15px; }
@media (prefers-reduced-motion: no-preference) {
  .hero-stage.hero-ready .hero-portrait { animation: hero-face-in 900ms cubic-bezier(.2,.85,.2,1) both; }
  .hero-stage.hero-ready .hero-mode-title { animation: hero-type-in 690ms cubic-bezier(.18,.8,.2,1) both; }
  .hero-stage.hero-ready .hero-mode-detail { animation: hero-type-in 790ms cubic-bezier(.18,.8,.2,1) both; }
  .hero-stage.hero-ready .hero-mode-lead :is(.hero-mode-title,.hero-mode-detail) { animation-delay: .17s; }
  @keyframes hero-face-in { from { opacity: .01; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
  @keyframes hero-type-in { from { opacity: .01; translate: 0 20px; } to { opacity: 1; translate: 0 0; } }
}
@media (max-width: 1210px) {
  .hero-stage { --portrait-size: clamp(410px,46vw,580px); width: calc(100% - 70px); }
  .hero-mode-build { padding-right: calc(var(--portrait-size) / 2 + 12px); }
  .hero-mode-lead { padding-left: calc(var(--portrait-size) / 2 + 12px); }
  .hero-mode-title { font-size: clamp(27px, 3.35vw, 43px); }
  .hero-mode-lead .hero-mode-title { font-size: clamp(25px, 2.9vw, 40px); }
  .hero-mode-detail { font-size: clamp(12px, 1.15vw, 15px); }
}
@media (max-width: 940px) {
  .hero-stage { --portrait-size: clamp(330px,49vw,485px); min-height: 525px; width: calc(100% - 55px); }
  .hero-mode-build { padding-right: calc(var(--portrait-size) / 2 + 9px); }
  .hero-mode-lead { padding-left: calc(var(--portrait-size) / 2 + 9px); }
  .hero-mode-title { font-size: clamp(22px, 2.7vw, 31px); }
  .hero-mode-lead .hero-mode-title { font-size: clamp(20px, 2.5vw, 29px); }
  .hero-mode-detail { font-size: 12px; line-height: 1.5; }
}
@media (max-width: 700px) {
  .hero-stage {
    --portrait-size: min(103vw, 510px);
    min-height: calc(var(--portrait-size) + 125px);
    width: calc(100% - 38px);
    align-items: start;
    overflow: hidden;
  }
  .hero-mode,
  .hero-mode-build,
  .hero-mode-lead { min-height: auto; padding-top: 28px; padding-bottom: 0; gap: 12px; }
  .hero-mode-build { padding-left: 0; padding-right: 7px; }
  .hero-mode-lead { padding-left: 7px; padding-right: 0; }
  .hero-mode-title { font-size: clamp(17px, 3.75vw, 26px); letter-spacing: -.06em; }
  .hero-mode-lead .hero-mode-title { font-size: clamp(16px, 3.35vw, 24px); }
  .hero-mode-detail { font-size: clamp(10px, 2vw, 12px); line-height: 1.48; }
  .hero-summary { padding-block: 26px 36px; }
  .hero-summary > p { font-size: clamp(17px, 4vw, 21px); }
}
@media (max-width: 370px) {
  .hero-stage { --portrait-size: 105vw; min-height: calc(var(--portrait-size) + 142px); width: calc(100% - 28px); }
  .hero-mode-title { font-size: 16px; }
  .hero-mode-lead .hero-mode-title { font-size: 15px; }
  .hero-mode-detail { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-portrait, .hero-mode-title, .hero-mode-detail { animation: none !important; }
}