/* Hero : titre, photo, statut et nom, puis la séquence d'ouverture (reveal.js) et la profondeur au départ
   (--hero-p, motion.js). Les halos dérivent aussi dans le contact (même animation halo-drift). */

/* ---------- Hero : deux colonnes sur grand écran (titre + photo à gauche, statut + nom à droite) ---------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  padding: calc(var(--nav-h) + 82px) 0 96px;
  overflow: hidden;
}
.hero-halo {
  position: absolute;
  z-index: -1;
  top: 8%;
  right: -22vw;
  width: 70vw;
  height: 70vw;
  border-radius: 50%;
  background: radial-gradient(circle, #e2dfd6 0%, rgb(226 223 214 / 0.55) 32%, rgb(var(--bg-rgb) / 0) 66%);
  animation: halo-drift 22s ease-in-out infinite alternate;
}
@keyframes halo-drift {
  to {
    transform: translate(-14vw, 10vh) scale(1.08);
  }
}
/* Second halo, plus clair, qui dérive en sens inverse derrière la photo. */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -20vw;
  top: 38%;
  width: 56vw;
  height: 56vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / 0.75) 0%, rgb(255 255 255 / 0.3) 34%, rgb(255 255 255 / 0) 66%);
  animation: halo-drift-b 17s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes halo-drift-b {
  to {
    transform: translate(16vw, -12vh) scale(1.12);
  }
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 720fr) minmax(0, 560fr);
  grid-template-areas:
    "head status"
    "media side";
  row-gap: 40px;
}
.hero-head {
  grid-area: head;
}
/* Interligne un peu plus ouvert que le nom : l'accent du « É » ne doit pas rentrer dans le « B » au-dessus. */
.hero-title {
  font: 900 clamp(3.375rem, 0.5rem + 6.04vw, 7.75rem) / 0.96 var(--sans);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  /* « & DÉVELOPPEUR » dépasse la colonne : il déborde dans le vide de droite plutôt que de passer à la ligne. */
  white-space: nowrap;
}
.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.tag {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(var(--chip-rgb) / 0.6);
  font: 400 9px / 1 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}
.tag:hover {
  background: var(--chip);
  border-color: var(--ink-3);
}
.hero-status {
  grid-area: status;
  display: grid;
  justify-items: end;
  align-content: start;
  text-align: right;
  padding-top: 5px;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 20px;
  padding: 0 10px 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(var(--chip-rgb) / 0.6);
  font-size: 9px;
  letter-spacing: 0.18em;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22a35a;
  box-shadow: 0 0 0 3px rgb(34 163 90 / 0.15);
}
.hero-index {
  margin-top: 14px;
  color: var(--ink-2);
}
.hero-from {
  margin-top: 8px;
  letter-spacing: 0.26em;
  color: var(--ink-2);
}
.hero-media {
  grid-area: media;
}
.hero-media-label {
  display: none;
}
.hero-figure {
  position: relative;
  aspect-ratio: 720 / 268;
  overflow: hidden;
  background: #1a1a1a;
}
.hero-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
}
.corner {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 9px;
  height: 9px;
  border-top: 1px solid rgb(var(--bg-rgb) / 0.75);
  border-left: 1px solid rgb(var(--bg-rgb) / 0.75);
}
.hero-note {
  display: grid;
  grid-template-columns: 123px 1fr;
  align-items: start;
  margin-top: 22px;
}
.hero-arrow {
  font-size: 22px;
  line-height: 1;
}
.hero-note .mono {
  padding-top: 3px;
}
.hero-credit {
  margin-top: 22px;
  color: var(--ink-2);
}
.hero-side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.hero-pitch {
  font-size: 11px;
  line-height: 16.5px;
  letter-spacing: 0.22em;
}
.hero-pitch-sub {
  margin-top: 12px;
  letter-spacing: 0.24em;
  color: var(--ink-2);
}
.hero-name {
  margin-top: 32px;
  font: 900 clamp(3.375rem, 0.5rem + 6.14vw, 7.875rem) / 0.88 var(--sans);
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.hero-year {
  margin-top: 32px;
  letter-spacing: 0.26em;
  color: var(--ink-2);
}
.ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  margin-top: 24px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  letter-spacing: 0.24em;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.ghost-btn .icon {
  font-size: 13px;
}
.ghost-btn:hover {
  background: var(--ink);
  color: var(--bg);
}

/* Téléphone : une colonne, dans l'ordre statut, titre, photo, nom, puis la note et le crédit. */
@media (max-width: 767px) {
  .hero {
    min-height: 0;
    padding: calc(var(--nav-h) + 16px) 0 72px;
  }
  .hero-grid {
    display: flex;
    flex-direction: column;
    row-gap: 0;
  }
  .hero-media,
  .hero-side {
    display: contents;
  }
  .hero-status {
    order: 1;
    grid-template-columns: 1fr auto;
    justify-items: start;
    text-align: left;
    padding-top: 0;
  }
  .status-pill {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: start;
    margin-top: 6px;
  }
  .hero-index {
    margin-top: 0;
  }
  .hero-head {
    order: 2;
    margin-top: 46px;
  }
  .hero-title {
    font-size: clamp(2.25rem, 0.5rem + 8.95vw, 4.75rem);
    letter-spacing: -0.05em;
  }
  .hero-tags {
    flex-wrap: nowrap;
    gap: 6px;
  }
  .tag {
    padding: 0 9px;
    letter-spacing: 0.1em;
  }
  .hero-media-label {
    display: block;
    order: 3;
    margin-top: 16px;
    color: var(--ink-2);
  }
  .hero-figure {
    order: 4;
    margin-top: 9px;
    aspect-ratio: 358 / 200;
  }
  .hero-pitch {
    order: 5;
    margin-top: 17px;
    text-align: right;
  }
  .hero-pitch-sub {
    order: 6;
    margin-top: 8px;
    text-align: right;
  }
  .hero-name {
    order: 7;
    margin-top: 16px;
    font-size: clamp(2.625rem, 0.5rem + 10.95vw, 5.75rem);
    text-align: right;
  }
  .hero-year {
    order: 8;
    margin-top: 16px;
    text-align: right;
  }
  .hero-note {
    order: 9;
    grid-template-columns: 62px 1fr;
    margin-top: 12px;
  }
  .ghost-btn {
    order: 10;
    align-self: flex-end;
    margin-top: 12px;
  }
  .hero-credit {
    order: 11;
    align-self: flex-end;
    margin-top: 16px;
    text-align: right;
  }
}
/* Écran tactile : les pastilles et le bouton gardent 44 px de haut sous le doigt (voir base.css). */
@media (pointer: coarse) {
  .tag,
  .ghost-btn {
    position: relative;
  }
  .tag::after,
  .ghost-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    translate: -50% -50%;
  }
}

/* ---------- Animations (états posés par reveal.js et motion.js ; rien n'est masqué sans .has-motion) ---------- */
.has-motion [data-intro] > * {
  opacity: 0;
}
.has-motion.is-loaded [data-intro] > * {
  opacity: 1;
  transition: opacity 0.5s ease calc(var(--i, 0) * 60ms);
}
.hero-title {
  --delay: 0.12s;
}
.hero-name {
  --delay: 0.6s;
}
/* La photo se découvre de bas en haut pendant que le cadrage se resserre ; elle descend un peu plus lentement
   que la page quand le hero s'en va (--hero-p, motion.js). */
.has-motion .hero-figure {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.5s var(--ease-curtain) 0.3s;
}
.has-motion .hero-figure img {
  scale: 1.4;
  translate: 0 calc(min(var(--hero-p, 0), 0.5) * 10%);
  transition: scale 2.4s var(--ease-expo) 0.3s;
}
.has-motion.is-loaded .hero-figure {
  clip-path: inset(0 0 0 0);
}
.has-motion.is-loaded .hero-figure img {
  scale: 1.1;
}
.has-motion .corner,
.has-motion .hero-tags li,
.has-motion .hero-arrow {
  opacity: 0;
  translate: 0 12px;
  transition:
    opacity 0.7s var(--ease-out) var(--at, 1.2s),
    translate 1s var(--ease-expo) var(--at, 1.2s);
}
/* Le bouton n'utilise pas translate à l'entrée : pointer.js s'en sert pour l'effet aimanté. */
.has-motion .ghost-btn {
  opacity: 0;
  scale: 0.9;
  transition:
    opacity 0.7s var(--ease-out) 1.2s,
    scale 1s var(--ease-expo) 1.2s,
    background-color 0.2s ease,
    color 0.2s ease;
}
.has-motion.is-loaded .ghost-btn {
  opacity: 1;
  scale: 1;
}
.hero-tags li:nth-child(1) {
  --at: 0.75s;
}
.hero-tags li:nth-child(2) {
  --at: 0.83s;
}
.hero-tags li:nth-child(3) {
  --at: 0.91s;
}
.has-motion .corner {
  --at: 1.5s;
}
.has-motion .hero-arrow {
  --at: 1.1s;
  translate: -12px 0;
}
.has-motion.is-loaded .corner,
.has-motion.is-loaded .hero-tags li,
.has-motion.is-loaded .hero-arrow {
  opacity: 1;
  translate: 0 0;
}
.has-motion.is-loaded .hero-arrow .icon {
  animation: arrow-nudge 2.2s var(--ease-io) 2s infinite;
}
@keyframes arrow-nudge {
  0%,
  60%,
  100% {
    translate: 0 0;
  }
  30% {
    translate: 7px 0;
  }
}
/* Les halos apparaissent doucement, le point « projets ouverts » pulse. */
.has-motion .hero-halo,
.has-motion .hero::before {
  opacity: 0;
  transition: opacity 2.2s ease 0.1s;
}
.has-motion.is-loaded .hero-halo,
.has-motion.is-loaded .hero::before {
  opacity: 1;
}
.has-motion .status-dot {
  position: relative;
}
.has-motion .status-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #22a35a;
  animation: status-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes status-ping {
  70%,
  100% {
    scale: 2.8;
    opacity: 0;
  }
}
/* En quittant le hero, le titre et le nom montent plus vite que la page : un léger effet de profondeur. */
.has-motion .hero-head {
  translate: 0 calc(var(--hero-p, 0) * -70px);
}
.has-motion .hero-side {
  translate: 0 calc(var(--hero-p, 0) * -150px);
}

@media (prefers-reduced-motion: reduce) {
  .hero-halo {
    animation: none;
  }
}