.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(6rem, 11vw, 8rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  padding-inline: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 1rem 0 auto;
  height: min(34rem, 78vw);
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    linear-gradient(115deg, transparent 0 46%, var(--color-accent-soft) 46.2% 46.5%, transparent 46.7% 100%),
    repeating-linear-gradient(0deg, transparent 0 0.6rem, color-mix(in srgb, var(--color-accent) 14%, transparent) 0.65rem 0.72rem),
    repeating-linear-gradient(90deg, transparent 0 0.6rem, color-mix(in srgb, var(--color-accent) 10%, transparent) 0.65rem 0.72rem);
  mask-image: radial-gradient(ellipse at center, #000 0 38%, transparent 75%);
}

/* Anneau façon planète : dégradé conique continu et coloré (façon
   aurore/nébuleuse) plutôt que des bandes en hachures, avec un léger
   scintillement animé pour lui donner vie sans surcharger l'oeil.
   Positionné par rapport au portrait (et non au haut du .hero) pour
   rester centré sur le globe quelle que soit la taille d'écran. */
.hero__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(16rem, 42vw, 30rem);
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-18deg) scaleY(0.42);
}

.hero__ring__layer {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  /* Transition de masque volontairement large et douce (plutôt que le
     bord net d'avant) : la couleur se dissout progressivement des deux
     côtés, comme de la matière vaporeuse plutôt qu'un ruban découpé. */
  mask: radial-gradient(ellipse at center, transparent 0 52%, #000 64% 69%, transparent 82%);
  /* Le flou est appliqué ici, sur la couleur elle-même, plutôt qu'en
     drop-shadow sur tout le bloc : ça adoucit vraiment la matière au
     lieu de coller un halo uniforme tout autour de sa silhouette. */
  filter: blur(0.35rem);
}

/* Halo doux, en arrière-plan : un dégradé radial flou qui ne suit pas
   la forme exacte de l'anneau, pour évoquer une lumière ambiante qui
   se diffuse dans son voisinage plutôt qu'un contour éclairé. */
.hero__ring__halo {
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    transparent 0 40%,
    color-mix(in srgb, var(--color-accent) 30%, transparent) 58%,
    color-mix(in srgb, var(--color-secondary) 22%, transparent) 68%,
    transparent 84%
  );
  filter: blur(1.4rem);
  opacity: 0.9;
}

/* Couche 1 : le ruban de couleur principal, un dégradé conique fluide
   qui tourne en continu (pas de motif répété, juste une transition de
   teinte douce tout autour de l'anneau). */
.hero__ring__layer--flow {
  background: conic-gradient(
    from 0deg,
    var(--color-accent) 0deg,
    var(--color-secondary) 90deg,
    var(--color-accent-strong) 180deg,
    color-mix(in srgb, var(--color-secondary) 80%, var(--color-accent)) 270deg,
    var(--color-accent) 360deg
  );
  animation: hero-ring-spin 11s linear infinite;
  will-change: transform;
}

/* Couche 2 : un second ruban, plus fin et plus saturé, en contre-rotation
   et légèrement décalé, pour donner de la profondeur sans jamais former
   de hachures : juste deux voiles de couleur qui glissent l'un sur
   l'autre. */
.hero__ring__layer--flow-alt {
  background: conic-gradient(
    from 140deg,
    transparent 0deg,
    color-mix(in srgb, var(--color-secondary) 90%, transparent) 60deg,
    transparent 130deg,
    color-mix(in srgb, var(--color-accent-strong) 85%, transparent) 220deg,
    transparent 300deg,
    color-mix(in srgb, var(--color-secondary) 70%, transparent) 340deg,
    transparent 360deg
  );
  mix-blend-mode: screen;
  opacity: 0.85;
  animation: hero-ring-spin-reverse 16s linear infinite;
  will-change: transform;
}

/* Couche 3 : scintillement, un point de lumière chaude qui pulse en
   intensité pour évoquer une source qui brille par intermittence, sans
   jamais tourner. Flou plus marqué : c'est une lueur, pas un trait. */
.hero__ring__layer--shimmer {
  background: conic-gradient(
    from 40deg,
    transparent 0deg,
    color-mix(in srgb, #FFFFFF 55%, var(--color-secondary)) 18deg,
    transparent 55deg,
    transparent 360deg
  );
  mix-blend-mode: overlay;
  filter: blur(0.6rem);
  animation: hero-ring-shimmer 5.5s ease-in-out infinite;
  will-change: opacity;
}

@keyframes hero-ring-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes hero-ring-spin-reverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes hero-ring-shimmer {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.9; }
}

/* Couche 4 : grain/poussière — un bruit fin superposé à l'anneau pour
   casser la propreté du dégradé et évoquer de la matière granuleuse
   (poussière d'étoiles) plutôt qu'une texture plastique lisse. Le bruit
   est généré en SVG (feTurbulence) et suit le même masque en anneau que
   les autres couches, pour rester confiné à sa silhouette. */
.hero__ring__grain {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  mask: radial-gradient(ellipse at center, transparent 0 52%, #000 64% 69%, transparent 82%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  mix-blend-mode: soft-light;
  opacity: 0.55;
  animation: hero-ring-shimmer 5.5s ease-in-out infinite;
  animation-delay: -1.5s;
  will-change: opacity;
}

/* Coupe les animations (rotation, contre-rotation, scintillement,
   grain) quand le hero est hors du viewport (piloté par
   scripts/hero-ring.js via IntersectionObserver). Le rendu final ne
   change pas : on économise juste le calcul quand personne ne le voit,
   par exemple une fois qu'on a scrollé plus bas dans la page. */
.hero__ring--paused .hero__ring__layer--flow,
.hero__ring--paused .hero__ring__layer--flow-alt,
.hero__ring--paused .hero__ring__layer--shimmer,
.hero__ring--paused .hero__ring__grain {
  animation-play-state: paused;
}

.hero__portrait-wrap {
  position: relative;
  margin-bottom: var(--space-7);
}

.hero__portrait {
  position: relative;
  width: clamp(12rem, 30vw, 17rem);
  height: clamp(12rem, 30vw, 17rem);
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--color-paper-raised);
  box-shadow: 0 0 0 2px var(--color-accent), 0 0 0 9px var(--color-accent-soft), 0 0 2.5rem color-mix(in srgb, var(--color-accent) 52%, transparent), var(--shadow-raised);
  transition: transform var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease-standard);
}

.hero__portrait:hover {
  transform: translateY(-0.35rem) rotate(2deg) scale(1.03);
  box-shadow: 0 0 0 2px var(--color-accent-strong), 0 0 0 10px var(--color-accent-soft), 0 0 3.5rem color-mix(in srgb, var(--color-accent) 72%, transparent), var(--shadow-raised);
}

.hero__portrait:hover img {
  transform: scale(1.06);
}

.hero__name {
  font-size: clamp(2.5rem, 7vw, var(--step-3xl));
  letter-spacing: -0.01em;
}

.hero__name-first {
  display: block;
  color: var(--color-accent-strong);
}

.hero__name-last {
  display: block;
}

.hero__tagline {
  margin-top: var(--space-4);
  max-width: 34rem;
  font-size: var(--step-md);
  color: var(--color-ink-muted);
}

/* Les deux liens d'action du hero (projets + CV) sont regroupés :
   la marge haute et l'espacement passent au conteneur, et ils
   passent à la ligne proprement sur petit écran. */
.hero__actions {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4) var(--space-6);
}

.hero__cta svg {
  width: 1rem;
  height: 1rem;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: var(--step-sm);
  color: var(--color-ink);
  padding-bottom: var(--space-1);
  border-bottom: 2px solid var(--color-secondary);
  transition: color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.hero__cta:hover {
  color: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
}

/* La règle globale (base.css) réduit déjà animation-duration à ~0ms
   partout, ce qui suffit à stopper visuellement la rotation. Mais pour
   l'anneau, ça laisse chaque couche figée sur l'état où son timing
   quasi instantané est tombé — par exemple hero-ring-shimmer peut se
   figer en plein pic d'opacité plutôt qu'à un niveau de repos choisi.
   On coupe donc ici explicitement les 4 animations et on fixe pour
   chaque couche l'opacité de repos qu'elle aurait dans un cycle "calme"
   (ex: hero-ring-shimmer à son minimum, 0.25, plutôt qu'à son pic à 0.9),
   pour un rendu statique intentionnel plutôt qu'un instantané aléatoire. */
/* Aperçu des projets sous les boutons : 4 jaquettes cliquables, pour qu'un
   visiteur voie du travail avant même d'avoir défilé. Sur un écran court,
   la rangée dépasse du bas : elle sert alors d'invitation à défiler. */
.hero__preview {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  width: min(100%, 26rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.hero__preview-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  text-decoration: none;
  font-size: var(--step-xs);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-ink-muted);
}

.hero__preview-item img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  background-color: var(--color-accent-soft);
  box-shadow: var(--shadow-soft);
  transition: transform var(--duration-base) var(--ease-standard);
}

.hero__preview-item:hover img,
.hero__preview-item:focus-visible img {
  transform: translateY(-4px);
}

.hero__preview-item:hover .hero__preview-name,
.hero__preview-item:focus-visible .hero__preview-name {
  color: var(--color-ink);
}

/* Fenêtres peu hautes (portables : une fenêtre de 1366x768 ne laisse qu'environ
   650 px utiles). Le hero se compacte pour que l'aperçu des projets reste
   visible sans défiler ; l'anneau est réduit dans la même proportion que le
   portrait pour garder le même rendu. Les grands écrans ne sont pas touchés. */
@media (min-width: 48rem) and (max-height: 900px) {
  .hero {
    padding-top: 6rem;
  }

  .hero__portrait-wrap {
    margin-bottom: var(--space-5);
  }

  .hero__portrait {
    width: 11rem;
    height: 11rem;
  }

  .hero__ring {
    width: min(42vw, 19.5rem);
  }

  .hero__name {
    font-size: clamp(2.25rem, 4.5vw, 3rem);
  }

  .hero__tagline {
    margin-top: var(--space-3);
  }

  .hero__actions {
    margin-top: var(--space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__preview-item img {
    transition: none;
  }

  .hero__ring__layer--flow,
  .hero__ring__layer--flow-alt,
  .hero__ring__layer--shimmer,
  .hero__ring__grain {
    animation: none;
  }

  .hero__ring__layer--shimmer {
    opacity: 0.25;
  }

  .hero__ring__grain {
    opacity: 0.35;
  }

  .hero__portrait,
  .hero__portrait img {
    transition: none;
  }

  .hero__portrait:hover {
    transform: none;
  }

  .hero__portrait:hover img {
    transform: none;
  }

  .hero__cta {
    transition: none;
  }
}