/* ==========================================================
   01 — HERO
   Maquette Figma : 01_HERO (1440 × 900 px)
   Les positions sont dans le HTML (--x, --y, --w, --h).
   Ici : couleurs, typographies, superpositions et survols.
   ========================================================== */

.hero {
  aspect-ratio: 1440 / 900;
  --hauteur: 900;
  background-color: var(--vert-olive);
  color: var(--creme);
}

/* ---------- Décor ---------- */

.hero__palmier {
  object-fit: cover;
  opacity: 0.42;
}

/* Grands écrans : le cocotier reste ancré au bord gauche de l'écran.
   Il s'agrandit (sans déformation) pour occuper aussi la marge, son bord droit
   ne bouge pas, et le centre de l'image reste au milieu du Hero.
   Sans marge, on retrouve exactement la position Figma du HTML. */
.hero .hero__palmier {
  --largeur-palmier: calc(var(--marge) + 750.6 * var(--u));
  left: 0;
  width: var(--largeur-palmier);
  height: calc(var(--largeur-palmier) * 1334.4 / 750.6);
  top: calc(450 * var(--u) - var(--largeur-palmier) * 596 / 750.6);
}

/* Fondu du palmier vers le vert, au milieu de la section */
.hero__fondu {
  background: linear-gradient(to left, var(--vert-olive), rgba(56, 71, 31, 0));
}

/* ---------- Logo ---------- */

.hero__logo {
  color: var(--creme);
  font-family: var(--police-capitales);
  font-size: calc(24 * var(--u));
  line-height: normal;
  text-decoration: none;
  white-space: nowrap;
}

/* Logo et lien du site : alignés sur le même axe, près du bord gauche de l'écran
   (et non de la composition de 1200 px). 24 px sur ordinateur, 10 px minimum sur mobile. */
.hero .hero__logo,
.hero .hero__site {
  left: clamp(10px, calc(24 * 100cqw / 1440), 24px);
}

.hero__logo-t {
  font-family: var(--police-script);
  font-size: calc(var(--police-script-echelle) * 1em);
  /* Petit espace entre le « T » calligraphique et « HELMOI » */
  margin-right: 0.18em;
}

/* ---------- Navigation ---------- */

.hero__nav-lien {
  color: var(--creme);
  font-family: var(--police-navigation);
  font-size: calc(24 * var(--u));
  line-height: normal;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

.hero__nav-lien:hover {
  opacity: 0.7;
}

.hero__logo:focus-visible,
.hero__nav-lien:focus-visible,
.hero__bouton-cv:focus-visible {
  outline: 2px solid var(--creme);
  outline-offset: 4px;
}

/* ---------- Titre ---------- */

.hero__titre {
  margin: 0;
  font-weight: 400;
}

.hero__prenom {
  font-family: var(--police-script);
  font-weight: 700;
  font-size: calc(110 * var(--u));
  line-height: normal;
  /* Garde la ligne de base du prénom au même endroit malgré la taille plus grande
     (ascendante d'Aston Script : 1,48 × la taille) */
  margin-top: calc(-28.8 * var(--u));
  white-space: nowrap;
  transform: rotate(0.26deg);
}

.hero__nom {
  font-family: var(--police-texte);
  font-size: calc(180 * var(--u));
  /* Lettres légèrement resserrées pour correspondre au rendu Figma à 180 px */
  font-variation-settings: "opsz" 18;
  line-height: normal;
  white-space: nowrap;
  transform: rotate(0.5deg);
}

.hero__sous-titre,
.hero__site {
  margin: 0;
  font-family: var(--police-texte);
  line-height: normal;
  white-space: nowrap;
}

.hero__sous-titre {
  font-size: calc(30 * var(--u));
}

.hero__site {
  font-size: calc(24 * var(--u));
}

/* ---------- Bouton « Télécharger mon CV » ---------- */

.hero__bouton-cv {
  display: flex;
  align-items: center;
  justify-content: center;
  border: calc(2 * var(--u)) solid var(--noir);
  border-radius: calc(38 * var(--u));
  background-color: var(--gris-bouton);
  color: var(--noir);
  font-family: var(--police-texte);
  font-size: calc(24 * var(--u));
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hero__bouton-cv:hover {
  transform: translateY(calc(-2 * var(--u)));
  box-shadow: 0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.25);
}

/* ---------- Photo principale ----------
   Dans Figma, l'image déborde légèrement de son cadre (104 % × 103 %)
   et le bas de la photo est coupé par la fin de la section. */

.hero__photo {
  overflow: hidden;
  opacity: 0.89;
}

.hero__photo img {
  position: absolute;
  top: -3.48%;
  left: 0;
  width: 104.37%;
  max-width: none;
  height: 103.48%;
}

/* ---------- Fenêtres de code ----------
   Flottement : propriété « translate » ; survol et rebond : « scale ».
   Elles restent séparées de « transform » pour ne pas écraser
   la légère rotation de la fenêtre « ideas ». */

.hero__fenetre {
  --flottement-duree: 7s;
  --flottement-decalage: 0s;
  cursor: pointer;
  animation: hero-flottement var(--flottement-duree) ease-in-out var(--flottement-decalage) infinite;
  transition: scale 0.4s ease, filter 0.4s ease;
  will-change: translate;
}

/* Durées et départs différents : les fenêtres ne bougent jamais ensemble */
.hero__fenetre:nth-child(1) { --flottement-duree: 7.4s; --flottement-decalage: -1.2s; }
.hero__fenetre:nth-child(2) { --flottement-duree: 6.6s; --flottement-decalage: -4.1s; }
.hero__fenetre:nth-child(3) { --flottement-duree: 8.2s; --flottement-decalage: -2.7s; }
.hero__fenetre:nth-child(4) { --flottement-duree: 7.0s; --flottement-decalage: -5.6s; }
.hero__fenetre:nth-child(5) { --flottement-duree: 7.8s; --flottement-decalage: -0.4s; }
.hero__fenetre:nth-child(6) { --flottement-duree: 6.9s; --flottement-decalage: -3.3s; }

.hero__fenetre:hover {
  scale: 1.04;
  filter: drop-shadow(0 calc(6 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.25));
}

.hero__fenetre--ideas {
  transform: rotate(-0.11deg);
}

@keyframes hero-flottement {
  0%, 100% { translate: 0 0; }
  30%      { translate: calc(2 * var(--u)) calc(-7 * var(--u)); }
  65%      { translate: calc(-2 * var(--u)) calc(-3 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__fenetre {
    animation: none;
    transition: filter 0.4s ease;
  }

  .hero__fenetre:hover {
    scale: none;
  }
}

/* ---------- Bulles de savon ----------
   Créées par js/interactions.js au survol d'une fenêtre de code.
   La bulle (.hero__bulle) porte la position, mise à jour à chaque image par le script
   (flottement, souffle du curseur, fondu final) ; son corps (.hero__bulle-corps) porte l'apparition.
   Aucune bulle ne capte la souris ni le doigt. */

.hero__bulles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__bulle {
  aspect-ratio: 1;
  pointer-events: none;
  will-change: left, top, opacity;
}

.hero__bulle-corps {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* Sphère nacrée : centre voilé de lavande, lumière douce venue du haut à gauche,
     bord légèrement plus dense ; les ombres internes teintent le contour en rose et en bleu */
  background:
    radial-gradient(circle at 35% 30%,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.04) 35%,
      rgba(255, 255, 255, 0) 55%),
    radial-gradient(circle at 50% 50%,
      rgba(236, 222, 255, 0.07) 0%,
      rgba(236, 222, 255, 0.1) 55%,
      rgba(255, 228, 246, 0.14) 80%,
      rgba(255, 255, 255, 0.24) 96%,
      rgba(255, 255, 255, 0.12) 100%);
  box-shadow:
    inset calc(var(--w) * 0.06 * var(--u)) calc(var(--w) * 0.05 * var(--u)) calc(var(--w) * 0.1 * var(--u)) rgba(255, 160, 214, 0.55),
    inset calc(var(--w) * -0.06 * var(--u)) calc(var(--w) * -0.05 * var(--u)) calc(var(--w) * 0.1 * var(--u)) rgba(150, 190, 255, 0.5),
    inset 0 0 calc(var(--w) * 0.03 * var(--u)) rgba(255, 255, 255, 0.25),
    0 0 calc(var(--w) * 0.08 * var(--u)) rgba(232, 208, 255, 0.18);
  animation: hero-bulle-apparition 0.9s cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
}

/* Contour irisé : rose pastel, mauve, lavande et bleu tendre, qui tournent lentement */
.hero__bulle-corps::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 200deg,
    rgba(255, 158, 212, 0.95),
    rgba(212, 146, 240, 0.9),
    rgba(176, 156, 255, 0.88),
    rgba(144, 192, 255, 0.85),
    rgba(255, 236, 248, 0.5),
    rgba(255, 170, 220, 0.92),
    rgba(196, 140, 236, 0.9),
    rgba(156, 204, 255, 0.82),
    rgba(255, 158, 212, 0.95));
  -webkit-mask-image: radial-gradient(circle, transparent 52%, rgba(0, 0, 0, 0.4) 72%, rgba(0, 0, 0, 0.9) 90%, #000 96%, rgba(0, 0, 0, 0.55) 100%);
  mask-image: radial-gradient(circle, transparent 52%, rgba(0, 0, 0, 0.4) 72%, rgba(0, 0, 0, 0.9) 90%, #000 96%, rgba(0, 0, 0, 0.55) 100%);
  animation: hero-bulle-irisation 12s linear var(--decalage-irisation, 0s) infinite;
}

/* Reflets : une fenêtre de lumière vive en haut à gauche, un éclat plus discret en bas à droite */
.hero__bulle-corps::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 22% 13% at 31% 24%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.6) 45%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle at 25% 38%, rgba(255, 255, 255, 0.55) 0 2.5%, rgba(255, 255, 255, 0) 5%),
    radial-gradient(ellipse 16% 9% at 70% 78%, rgba(255, 244, 252, 0.4) 0%, rgba(255, 244, 252, 0) 100%);
  transform: rotate(-20deg);
}

@keyframes hero-bulle-apparition {
  from { opacity: 0; scale: 0.4; }
}

@keyframes hero-bulle-irisation {
  to { rotate: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bulle-corps,
  .hero__bulle-corps::before {
    animation: none;
  }
}