/*
 * Mon Multivers — humeur planeur : rendu, trajectoire, banderolle.
 * Dessin SVG : js/home/sky-plane-art.js
 * Construction / publication : js/home/sky-banner.js
 * Indépendant des réglages de l'humeur principale.
 */

/* Comme avant le refactoring, lever l'isolation du héros pendant le vol
   pour laisser passer l'avion et la banderolle devant les décors saisonniers. */
.hero:has(> #sky-humeur:not([hidden]):not(.is-hidden)) {
  isolation: auto;
}

/* Le planeur est un décor aérien ABSOLU. Le sélecteur générique
   « .hero > :not(.mm-calendar-canvas) » ne doit pas en faire un bloc
   du flux CSS Grid ni le déplacer sous le panneau Bienvenue. */
.hero > #sky-humeur {
  position: absolute;
  inset: 0 0 auto;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
  pointer-events: none;
  z-index: 48;
  --sky-plane-scale: 1;
  --sky-plane-pitch: 0deg;
  --sky-prop-duration: .19s;
  --sky-smoke-opacity: .7;
  --sky-smoke-scale: 1;
}

/* =====================================================
   ============ Humeur du planeur / banderolle ==========
   ===================================================== */
.sky-humeur {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: clamp(166px, 19vw, 220px);
  z-index: 34;
  pointer-events: none;
  overflow: hidden;
}

.sky-humeur-path {
  position: absolute;
  left: 10px;
  top: 0;
  width: max-content;
  animation: skyPlaneTraverse 28s linear infinite;
  will-change: transform;
}

.sky-humeur-rig {
  position: relative;
  left: 0;
  top: clamp(4px, .8vw, 16px);
  display: flex;
  align-items: flex-start;
  gap: clamp(52px, 5vw, 76px);
  transform-origin: 80% 50%;
  will-change: transform;
}

/* Dimensions PC / mobile indépendantes : dessin de profil plus allongé. */
.sky-plane {
  position: relative;
  width: calc(clamp(186px, 18.75vw, 251px) * var(--sky-plane-scale, 1));
  aspect-ratio: 320 / 126;
  height: auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 4px 8px rgba(20, 28, 35, .14));
  transform-origin: 84% 46%;
  transform: rotate(var(--sky-plane-pitch, 0deg));
  will-change: transform, width;
}
.sky-plane-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.sky-plane-shadowed {
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .12));
}
.sky-plane-strut,
.sky-plane-gear {
  fill: none;
  stroke: #10171a;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
}
.sky-plane-tail-gear {
  stroke-width: 1.8;
}
.sky-plane-wheel {
  fill: #191919;
  stroke: #d4dfe3;
  stroke-width: 1.05;
  vector-effect: non-scaling-stroke;
}
.sky-plane-tail-wheel { stroke: #2d3032; }
.sky-plane-wheel-hub { fill: #e4e9ec; }
.sky-plane-hub { fill: #141414; }
.sky-plane-propeller-disc {
  fill: rgba(229, 72, 60, .05);
}
.sky-plane-propeller-blade {
  fill: url(#mmSkyProp);
}
/* Origine de rotation LOCALISEE sur les pales (0,0 dans le groupe SVG).
   Sans transform-box: fill-box, "center" se rapporte au viewBox entier :
   l'helice orbite autour de l'avion au lieu de tourner sur son moyeu. */
.sky-plane-propeller-rotor {
  transform-box: fill-box;
  transform-origin: center center;
  animation: skyPlanePropSpin var(--sky-prop-duration, .19s) linear infinite;
  will-change: transform;
}
.sky-plane.is-engine-cut .sky-plane-propeller-rotor {
  animation-play-state: paused;
}

.sky-plane-smoke {
  position: absolute;
  right: 2.8%;
  top: 33%;
  width: 20%;
  height: 34%;
  pointer-events: none;
  overflow: visible;
}
.sky-plane-smoke-puff {
  position: absolute;
  right: 0;
  top: 40%;
  width: calc(12px * var(--sky-smoke-scale, 1) * var(--smoke-size-multiplier, 1));
  height: calc(12px * var(--sky-smoke-scale, 1) * var(--smoke-size-multiplier, 1));
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(92,92,92,.86) 0%, rgba(34,34,34,.82) 48%, rgba(10,10,10,0) 78%);
  opacity: 0;
  transform: translate(0,0) scale(.55);
  filter: blur(.35px);
}
.sky-plane.is-engine-cut .sky-plane-smoke-puff {
  animation: skyPlaneSmokePuff 1.35s ease-out infinite;
  animation-delay: var(--smoke-delay, 0s);
}

.sky-humeur-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.sky-humeur-link-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.sky-humeur-link-mast,
.sky-humeur-link-bridle,
.sky-humeur-link-tow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.sky-humeur-link-mast {
  stroke: url(#skyTowMast);
  stroke-width: 5.2;
}
.sky-humeur-link-cap {
  fill: #d89134;
  stroke: #8f5a1f;
  stroke-width: .8;
  vector-effect: non-scaling-stroke;
}
.sky-humeur-link-bridle {
  stroke: url(#skyTowLine);
  stroke-width: 2.2;
}
.sky-humeur-link-tow {
  stroke: url(#skyTowLine);
  stroke-width: 2;
}

.sky-humeur-banner {
  position: relative;
  z-index: 1;
  margin-top: 20px;
  width: min(var(--sky-banner-width, 32ch), 72vw);
  min-width: clamp(228px, 29vw, 330px);
  max-width: 72vw;
  transform-origin: right center;
  filter: drop-shadow(0 12px 20px rgba(15, 23, 42, .12));
}

.sky-humeur-banner-cloth {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(243,247,251,.985) 100%);
  border: 1px solid rgba(78, 103, 133, .16);
  clip-path: polygon(
    100% 16%,
    88% 12%,
    70% 11%,
    50% 14%,
    30% 18%,
    14% 24%,
    0 37%,
    9% 50%,
    0 63%,
    14% 76%,
    30% 82%,
    50% 86%,
    70% 89%,
    88% 88%,
    100% 84%
  );
  transform-origin: right center;
  will-change: clip-path;
}
.sky-humeur-banner-cloth::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(100deg,
      rgba(51, 96, 126, .20) 0%,
      rgba(255,255,255,.04) 12%,
      rgba(255,255,255,.54) 23%,
      rgba(87,130,154,.15) 40%,
      rgba(255,255,255,0) 58%);
  opacity: var(--sky-wave-shade, .28);
  background-size: 180% 100%;
  background-position: var(--sky-wave-shift, 0%) center;
  pointer-events: none;
}
.sky-humeur-banner-cloth::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.42), transparent 36%, rgba(59,96,114,.10) 100%);
  pointer-events: none;
}

.sky-humeur-banner-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-height: clamp(48px, 4.2vw, 58px);
  padding: .78rem 1.22rem .78rem 1.34rem;
  text-align: center;
  color: #385468;
  font-weight: 700;
  font-size: clamp(.95rem, 1.12vw, 1.05rem);
  letter-spacing: .012em;
  transform-origin: right center;
}
.sky-humeur-wave-word {
  display: inline-block;
  white-space: nowrap;
  transform-origin: center center;
  will-change: transform;
}
.sky-humeur-banner-texte {
  flex: 1 1 auto;
  white-space: pre-line;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 0 rgba(255,255,255,.94);
}
.sky-humeur-banner-emoji {
  flex: 0 0 auto;
  font-size: clamp(1.1rem, 1.85vw, 1.38rem);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.74));
}

@keyframes skyPlaneTraverse {
  0% { transform: translateX(-105%); }
  100% { transform: translateX(calc(100vw + 44px)); }
}
@keyframes skyPlanePropSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes skyPlaneSmokePuff {
  0% {
    opacity: calc(var(--sky-smoke-opacity, .7) * .18);
    transform: translate(0, 0) scale(.42);
  }
  22% {
    opacity: calc(var(--sky-smoke-opacity, .7) * .88);
    transform: translate(-4px, -4px) scale(.74);
  }
  62% {
    opacity: calc(var(--sky-smoke-opacity, .7) * .58);
    transform: translate(var(--smoke-drift, -10px), -15px) scale(1.08);
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--smoke-drift, -10px) * 1.25), -24px) scale(1.5);
  }
}
@media (max-width: 768px) {
  #sky-humeur {
    top: -2px;
    height: 132px;
  }
  .sky-humeur-path {
    animation-duration: 20s;
  }
  .sky-humeur-rig {
    top: 2px;
  }
  .sky-plane {
    width: calc(clamp(90px, 29.25vw, 118px) * var(--sky-plane-scale, 1));
    height: auto;
  }
  .sky-plane-svg {
    overflow: visible;
  }
  .sky-humeur-link {
    inset: 0;
  }
  .sky-humeur-banner {
    margin-top: 9px;
    width: min(var(--sky-banner-width, 32ch), 49vw);
    min-width: 0;
    max-width: 49vw;
  }
  .sky-humeur-banner-inner {
    min-height: 39px;
    padding: .68rem .85rem .68rem .98rem;
    font-size: .86rem;
    gap: .42rem;
  }
  .sky-humeur-banner-emoji {
    font-size: 1rem;
  }
}

/* La banderolle reste lisible même quand le mouvement est désactivé. */
@media (prefers-reduced-motion: reduce) {
  .hero > #sky-humeur .sky-humeur-path,
  .hero > #sky-humeur .sky-humeur-rig,
  .hero > #sky-humeur .sky-plane,
  .hero > #sky-humeur .sky-humeur-link,
  .hero > #sky-humeur .sky-humeur-banner,
  .hero > #sky-humeur .sky-humeur-banner-cloth,
  .hero > #sky-humeur .sky-humeur-banner-inner,
  .hero > #sky-humeur .sky-plane-propeller-rotor,
  .hero > #sky-humeur .sky-plane-smoke-puff {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}