.seed-module {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 900;
}

.seed-rain {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.seed-hand {
  position: fixed;
  top: 6.25rem;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 910;
  animation: handFloat 4s ease-in-out infinite;
}

.seed-hand img {
  width: 11.25rem;
  display: block;
}

.seed-drop {
  position: absolute;
  pointer-events: none;
  animation: seedFall var(--fall-duration) linear forwards;
  z-index: 911;
}

.seed-drop-inner {
  width: 1.25rem;
  height: 1.75rem;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.45), transparent 22%),
    radial-gradient(circle at 65% 75%, rgba(0,0,0,.22), transparent 35%),
    linear-gradient(135deg, var(--seed-light), var(--seed-color) 45%, var(--seed-dark));
  border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%;
  box-shadow:
    inset -.1875rem -.25rem .375rem rgba(0,0,0,.28),
    inset .1875rem .1875rem .25rem rgba(255,255,255,.18),
    0 .125rem .375rem rgba(0,0,0,.45);
  cursor: pointer;
  pointer-events: auto;
  transform-origin: 50% 50%;
  animation: seedRotate var(--rotation-speed) linear infinite;
}

.seed-drop-inner::after {
  content: "";
  position: absolute;
  width: 38%;
  height: 75%;
  left: 31%;
  top: 12%;
  border-left: .0625rem solid rgba(70, 40, 15, .35);
  border-radius: 50%;
  transform: rotate(10deg);
  pointer-events: none;
}

.seed-dust {
  position: absolute;
  background: rgba(255, 242, 199, 0.85);
  border-radius: 50%;
  pointer-events: none;
  animation: seedDustFade .6s linear forwards;
}

.seed-wave {
  position: absolute;
  width: 7.5rem;
  height: 7.5rem;
  border: .125rem solid rgba(255, 210, 127, 0.65);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: seedWave 1.8s ease-out forwards;
}

.seed-name {
  position: absolute;
  font-size: clamp(1rem, 3vw, 1.375rem);
  color: var(--word-color, #FFD27F);
  text-shadow: 0 0 .5rem rgba(255,255,255,.45);
  font-weight: 600;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 2.5s ease-out;
  pointer-events: none;
  z-index: 912;
}

.seed-name.reveal {
  opacity: 1;
}

.seed-name.fadeout {
  opacity: 0;
}

@keyframes seedFall {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(100vh);
  }
}

@keyframes seedRotate {
  from {
    transform: rotate(0deg) scaleX(.82);
  }

  50% {
    transform: rotate(180deg) scaleX(1);
  }

  to {
    transform: rotate(360deg) scaleX(.82);
  }
}

@keyframes seedDustFade {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(.2);
  }
}

@keyframes seedWave {
  from {
    transform: translate(-50%, -50%) scale(.2);
    opacity: 1;
  }

  to {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 0;
  }
}

@keyframes handFloat {
  0% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(.5rem);
  }

  100% {
    transform: translateX(-50%) translateY(0);
  }
}

@media (max-width: 768px) {
  /* Le module décoratif reste sous le header interactif sur mobile. */
  .seed-module {
    z-index: 900;
  }

  .site-header {
    z-index: 1000;
    background: rgba(0, 0, 0, .98);
    backdrop-filter: blur(.5rem);
    box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .62);
  }

  /* La grande main est masquée sur petit écran afin de ne pas recouvrir le titre. */
  .seed-hand {
    top: 7.5rem !important;
    left: 50% !important;
    visibility: hidden;
  }

  .seed-hand img {
    width: 6.5rem !important;
  }
}

/* =========================================================
   V6 — main intégrée au flux, pluie indépendante
   ========================================================= */
.seed-module {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 900;
}

.seed-hand-stage {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 8.5rem;
  padding-top: 1.75rem;
  box-sizing: border-box;
  pointer-events: none;
}

.seed-hand {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  pointer-events: none;
  z-index: 2;
  animation: none;
}

.seed-hand img {
  width: 11.25rem;
  max-width: 38vw;
  display: block;
}

@media (max-width: 48rem) {
  .seed-hand-stage {
    min-height: 6.2rem;
    padding-top: .9rem;
  }

  .seed-hand {
    visibility: visible;
  }

  .seed-hand img {
    width: 7.25rem !important;
    max-width: 42vw;
  }
}

/* V6 mobile — annule les anciennes coordonnées fixes de la main. */
@media (max-width: 48rem) {
  .seed-hand {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    visibility: visible !important;
    animation: none !important;
  }
}

/* V6 placement final : la main commence réellement sous le header fixe. */
.seed-hand-stage {
  min-height: 11rem;
  padding-top: 5.8rem;
}

@media (max-width: 48rem) {
  .seed-hand-stage {
    min-height: 8.75rem;
    padding-top: 4.9rem;
  }
}


/* =========================================================
   V7 — accueil compact : main + titre rapprochés
   ========================================================= */
.seed-hand-stage {
  min-height: 0;
  padding-top: .85rem;
  padding-bottom: 0;
}

.seed-hand img {
  width: 9rem;
  max-width: 32vw;
}

.home-intro {
  padding-top: 1rem !important;
}

.home-intro > h1:first-child {
  margin-top: .75rem !important;
  margin-bottom: 1.5rem !important;
}

@media (max-width: 48rem) {
  .seed-hand-stage {
    min-height: 0;
    padding-top: .55rem;
  }

  .seed-hand img {
    width: 6.25rem !important;
    max-width: 38vw;
  }

  .home-intro {
    padding-top: .55rem !important;
  }

  .home-intro > h1:first-child {
    margin-top: .45rem !important;
    margin-bottom: 1.1rem !important;
  }
}

/* =========================================================
   V8 — main vivante dans le flux + accueil encore plus compact
   ========================================================= */
.seed-hand-stage {
  min-height: 0;
  padding-top: .25rem;
  padding-bottom: 0;
}

.seed-hand {
  animation: handFloatFlow 4s ease-in-out infinite !important;
  will-change: transform;
}

@keyframes handFloatFlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(.28rem); }
}

.seed-hand img {
  width: 8.5rem;
  max-width: 30vw;
}

.home-intro {
  padding-top: .35rem !important;
}

.home-intro > h1:first-child {
  margin-top: .15rem !important;
  margin-bottom: .8rem !important;
}

@media (max-width: 48rem) {
  .seed-hand-stage {
    min-height: 0;
    padding-top: .1rem;
  }

  .seed-hand {
    animation: handFloatFlow 4s ease-in-out infinite !important;
  }

  .seed-hand img {
    width: 5.75rem !important;
    max-width: 34vw;
  }

  .home-intro {
    padding-top: .2rem !important;
  }

  .home-intro > h1:first-child {
    margin-top: .05rem !important;
    margin-bottom: .65rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seed-hand { animation: none !important; }
}