/* ============================
   HERO — CINEMATIC OVERHAUL
   (drop-in for src/ui/Hero.css)
   ============================ */

.hero {
  position: relative;
  height: 100vh;
  border-radius: 0 !important;
  overflow: hidden;

  /* Base cinematic veil (soft radial) */
  background: radial-gradient(
    1200px 700px at 50% 30%,
    rgba(255,255,255,0.04),
    rgba(0,0,0,0.45)
  );
}

/* THEME (par univers, sans toucher au HTML) */
.universe[data-universe="cosmos"]  { --u-accent:#6ee6ff; --u-from:#2a74ff; --u-to:#b23aff; --u-warm: rgba(110,230,255,0.26); }
.universe[data-universe="dragon"]  { --u-accent:#ff7a3a; --u-from:#ff5b2e; --u-to:#ffcc66; --u-warm: rgba(255,122,58,0.28); }
.universe[data-universe="ruines"]  { --u-accent:#f39c12; --u-from:#ffb347; --u-to:#7f8c8d; --u-warm: rgba(243,156,18,0.22); }
.universe[data-universe="vitesse"] { --u-accent:#70fff0; --u-from:#00ffd5; --u-to:#2f7cff; --u-warm: rgba(112,255,240,0.20); }
.universe[data-universe="paysage"] { --u-accent:#b38cff; --u-from:#b38cff; --u-to:#ff7dbb; --u-warm: rgba(179,140,255,0.22); }
.universe[data-universe="horizon"] { --u-accent:#ffd2a6; --u-from:#ffd2a6; --u-to:#7bdcff; --u-warm: rgba(255,210,166,0.22); }

/* ===== STACKING ORDER (du plus loin au plus proche) ===== */
.hero__bg        { z-index: 0; }
.hero__veil      { z-index: 1; }
.hero::before    { z-index: 2; } /* Dynamic light halo */
.hero__grain     { z-index: 3; }
.hero::after     { z-index: 4; } /* Subtle lens flare */
.hero__fx        { z-index: var(--z-canvas, 5); }
.hero__micro     { z-index: var(--z-decor, 6); }
.hero__content   { z-index: var(--z-content, 7); }

/* Background image layer : “lens” style */
.hero__bg {
  position: absolute;
  inset: -4%;
  background-size: cover;
  background-position: center;
  will-change: transform;
  filter: saturate(1.03) contrast(1.02) brightness(1);
  box-shadow: inset 0 0 140px rgba(0,0,0,0.55);

  /* La transformation de base est intégrée dans l'animation
     pour permettre la parallaxe + breathing simultanément */
  animation: heroCamera 22s ease-in-out infinite;
}

/* === HERO BG SOURCES === */
.hero__bg[data-hero="cosmos"] { background-image: url("../../assets/hero/cosmos.jpg"); }
.hero__bg[data-hero="dragon"] { background-image: url("../../assets/hero/dragon.jpg"); }
.hero__bg[data-hero="ruines"] { background-image: url("../../assets/hero/ruines.jpg"); }
.hero__bg[data-hero="vitesse"] { background-image: url("../../assets/hero/vitesse.jpg"); }
.hero__bg[data-hero="paysage"] { background-image: url("../../assets/hero/paysage.jpg"); }
.hero__bg[data-hero="horizon"] { background-image: url("../../assets/hero/horizon.jpg"); }

@supports (background-image: image-set(url("x.webp") 1x)) {
  .hero__bg[data-hero="cosmos"] {
    background-image: image-set(
      url("../../assets/hero/cosmos-640.webp") 1x,
      url("../../assets/hero/cosmos-1280.webp") 2x
    );
  }
  .hero__bg[data-hero="dragon"] {
    background-image: image-set(
      url("../../assets/hero/dragon-640.webp") 1x,
      url("../../assets/hero/dragon-1280.webp") 2x
    );
  }
  .hero__bg[data-hero="ruines"] {
    background-image: image-set(
      url("../../assets/hero/ruines-640.webp") 1x,
      url("../../assets/hero/ruines-1280.webp") 2x
    );
  }
  .hero__bg[data-hero="vitesse"] {
    background-image: image-set(
      url("../../assets/hero/vitesse-640.webp") 1x,
      url("../../assets/hero/vitesse-1280.webp") 2x
    );
  }
  .hero__bg[data-hero="paysage"] {
    background-image: image-set(
      url("../../assets/hero/paysage-640.webp") 1x,
      url("../../assets/hero/paysage-1280.webp") 2x
    );
  }
  .hero__bg[data-hero="horizon"] {
    background-image: image-set(
      url("../../assets/hero/horizon-640.webp") 1x,
      url("../../assets/hero/horizon-1280.webp") 2x
    );
  }
}

/* Cinematic veil: lumière directionnelle + vignetting */
.hero__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      900px 650px at var(--hero-fx-x, 50%) 24%,
      color-mix(in oklab, var(--u-accent, #6ee6ff) 12%, transparent),
      rgba(0,0,0,0.35) 70%
    ),
    radial-gradient(
      1400px 800px at 50% 120%,
      rgba(0,0,0,0),
      rgba(0,0,0,0.55) 70%
    );
}

/* Grain: plus vivant + “film gate” */
.hero__grain {
  position: absolute;
  inset: -20%;
  opacity: 0.16;
  background-image: url("../../assets/img/grain.png");
  background-size: 420px 420px;
  mix-blend-mode: overlay;
  transform: translate3d(0,0,0);
  animation: heroGrain 6s steps(8) infinite;
}

@keyframes heroGrain {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.04); }
  25%  { transform: translate3d(1%, 2%, 0)  scale(1.05); }
  50%  { transform: translate3d(2%, -2%, 0) scale(1.04); }
  75%  { transform: translate3d(-1%, 1%, 0) scale(1.05); }
  100% { transform: translate3d(-2%, -1%, 0) scale(1.04); }
}

/* Canvas FX stays above bg */
.hero__fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.98;
}

/* =================================
   DYNAMIC LIGHT HALO (pseudo)
   ================================= */
.hero::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(
    900px 500px at var(--hero-fx-x, 50%) var(--hero-fx-y, 40%),
    color-mix(in oklab, var(--u-accent, #6ee6ff) 22%, transparent),
    transparent 70%
  );
  opacity: 0.55;
  mix-blend-mode: screen;
  pointer-events: none;
  filter: blur(40px);
}

/* =================================
   SUBTLE LENS FLARE (pseudo)
   ================================= */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    260px 120px at 70% 18%,
    rgba(255,255,255,0.18),
    transparent 70%
  );
  mix-blend-mode: screen;
  opacity: 0.35;
  pointer-events: none;
  filter: blur(6px);
}

/* =================================
   CAMERA BREATH + PARALLAX (fusion)
   ================================= */
@keyframes heroCamera {
  0% {
    transform:
      scale(1.06)
      translate3d(
        calc(var(--hero-parallax-x, 0) * 1px),
        calc(var(--hero-parallax-y, 0) * 1px),
        0
      );
  }
  50% {
    transform:
      scale(1.085)
      translate3d(
        calc(var(--hero-parallax-x, 0) * 1px),
        calc(var(--hero-parallax-y, 0) * 1px - 6px),
        0
      );
  }
  100% {
    transform:
      scale(1.06)
      translate3d(
        calc(var(--hero-parallax-x, 0) * 1px),
        calc(var(--hero-parallax-y, 0) * 1px),
        0
      );
  }
}

/* Content — plus “affiche de film” */
.hero__content {
  position: relative;
  height: 100%;
  padding: calc(var(--header-h) + 86px) 8vw calc(var(--footer-h) + 78px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  transform: translateZ(0);
}

/* Subtle entrance — sans JS */
.hero__content > * {
  animation: heroReveal 1.2s cubic-bezier(.2,.9,.2,1) both;
}
.hero__content > *:nth-child(1) { animation-delay: .05s; }
.hero__content > *:nth-child(2) { animation-delay: .12s; }
.hero__content > *:nth-child(3) { animation-delay: .20s; }
.hero__content > *:nth-child(4) { animation-delay: .28s; }
.hero__content > *:nth-child(5) { animation-delay: .36s; }

@keyframes heroReveal {
  from { opacity: 0; transform: translate3d(0, 18px, 0); filter: blur(6px); }
  to   { opacity: 1; transform: translate3d(0, 0, 0);  filter: blur(0); }
}

.hero__content--left  { text-align: left;  margin-left: max(6vw, 40px); margin-right: auto; max-width: 920px; }
.hero__content--right { text-align: right; margin-right: max(6vw, 40px); margin-left: auto;  max-width: 920px; }

.hero__kicker {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.38em;
  color: rgba(255,255,255,0.66);
  font-size: 12px;
  text-transform: uppercase;
  position: relative;
}

/* Title: gradient ciné + glow + “chromatic whisper” */
.hero__title {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.06em;
  margin: 14px 0 10px;
  font-size: clamp(54px, 7vw, 96px);
  line-height: 0.92;
  color: rgba(255,255,255,0.92);
  text-shadow:
    0 35px 70px rgba(0,0,0,0.60),
    0 0 26px color-mix(in oklab, var(--u-accent, #6ee6ff) 30%, transparent),
    /* Chromatic aberration */
    -1px 0 rgba(255,0,120,0.15),
    1px 0 rgba(0,180,255,0.18);

  /* “cinematic ink” */
  background: linear-gradient(135deg,
    rgba(255,255,255,0.98),
    color-mix(in oklab, var(--u-accent, #6ee6ff) 40%, rgba(255,255,255,0.9)),
    rgba(255,255,255,0.9));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  position: relative;
}

.hero__title::after {
  content: "";
  display: block;
  height: 2px;
  width: min(360px, 60%);
  margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, var(--u-accent, #6ee6ff), transparent);
  opacity: 0.75;
  filter: blur(0.2px);
  transform-origin: center;
  animation: heroLine 3.8s ease-in-out infinite;
}

@keyframes heroLine {
  0%, 100% { transform: scaleX(0.72); opacity: 0.55; }
  50%      { transform: scaleX(1);    opacity: 0.95; }
}

.hero__title--small { font-size: clamp(40px, 5vw, 64px); }

.hero__sub {
  margin: 0;
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.06em;
}

.hero__line {
  margin: 18px auto 0;
  max-width: 64ch;
  color: rgba(255,255,255,0.82);
  font-size: 16px;
  line-height: 1.7;
  text-wrap: pretty;
  position: relative;
}

/* Hint becomes a “subtitle card” */
.hero__hint {
  margin-top: 26px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);

  display: inline-block;
  align-self: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.02));
  box-shadow:
    0 18px 45px rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.08);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Micro decor stays above */
.hero__micro {
  position: absolute;
  inset: auto 0 calc(var(--footer-h) + 22px) 0;
  display: flex;
  justify-content: center;
  gap: 16px;
  pointer-events: none;
  opacity: 0.9;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.35));
}

/* OPTIONAL: add a subtle glow to existing .micro elements without knowing their internals */
.hero__micro .micro {
  box-shadow: 0 0 18px color-mix(in oklab, var(--u-accent, #6ee6ff) 35%, transparent);
  animation: microPulse 4.2s ease-in-out infinite;
}
.hero__micro .micro:nth-child(2) { animation-delay: .7s; }
.hero__micro .micro:nth-child(3) { animation-delay: 1.4s; }

@keyframes microPulse {
  0%,100% { transform: translate3d(0,0,0) scale(0.98); opacity: 0.75; }
  50%     { transform: translate3d(0,-2px,0) scale(1.03); opacity: 1; }
}

@media (orientation: landscape) and (max-height: 500px) {
  .hero { height: auto; min-height: 100vh; }
  .hero__content { padding: 20px 4vw; }
  .hero__title { font-size: clamp(24px, 6vh, 36px); }
  .hero__title--small { font-size: clamp(18px, 4vh, 28px); }
  .hero__line { font-size: 12px; }
  .hero__micro { display: none; }
}

/* ===== RÉDUCTION DE MOUVEMENT ===== */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .vortex-canvas,
  .hero__fx,
  .transition-overlay {
    display: none !important;
  }
}