/* ==========================================
   HERO KUSAMA — bulles interactives plein écran
   ========================================== */

.hero-expo {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;

  /* Fond & texte pilotés par le thème (DAY / NIGHT) */
  background: var(--bg-alt);
  color: var(--text-main);

  /* padding interne pour le texte */
  --hero-pad: clamp(3rem, 7vw, 5rem);

  /* Palette par défaut — sera écrasée par palette-random.js */
  --dot-color-1: #ffcf5c;
  --dot-color-2: #5a8cff;
  --dot-color-3: #ff6f91;
  --dot-color-4: #41e0d0;
  --dot-color-5: #b983ff;
  --dot-stroke: rgba(0, 0, 0, 0);
}

.hero-expo__inner {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  padding: var(--hero-pad) var(--hero-pad);
  display: flex;
  align-items: flex-end;      /* bloc collé en bas */
  justify-content: flex-start;/* à gauche */
}

/* SVG plein fond (bulles) */
.hero-expo__svg {
  position: absolute;
  inset: 0;
  width: 200%;
  height: 200%;
  display: block;
  transform: translate(-20vw, -15vh);
  pointer-events: none; /* interactions gérées par JS sur le SVG lui-même */
}

/* Bloc texte compact en bas gauche */
.hero-expo__content {
  position: relative;
  z-index: 1;
  max-width: 420px;
}

/* Typo : on se cale sur la couleur du thème, juste avec des opacités différentes */

.hero-expo__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.5;
  margin-bottom: 1.1rem;
}

.hero-expo__title {
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: currentColor;
  margin-bottom: 0.9rem;
}

.hero-expo__lead {
  font-size: 0.98rem;
  line-height: 1.6;
  color: currentColor;
  opacity: 0.7;
  margin-bottom: 1.7rem;
}

/* Boutons : layout uniquement, les couleurs viennent du système global (style.css) */

.hero-expo__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.hero-expo__cta {
  /* styles visuels (background, couleur, bordure, ombre)
     définis dans style.css via les classes :
       - .hero-expo__cta--primary
       - .hero-expo__cta--ghost
     pour coller au mode DAY / NIGHT */
}

/* ==========================================
   Clean SVG pour l’artwork (pas de contours)
   ========================================== */

.jk-kusama-art svg circle,
.jk-kusama-art svg ellipse,
.jk-kusama-art svg rect,
.jk-kusama-art svg polygon,
.jk-kusama-art svg path {
  stroke: none !important;
  outline: none !important;
  border: none !important;
  vector-effect: none !important;
}

.jk-kusama-art svg line {
  display: none !important;
}

body.home .jk-kusama-art {
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: absolute;
  inset: 0;
}

/* ==========================================
   Responsive
   ========================================== */

@media (max-width: 768px) {
  .hero-expo__inner {
    align-items: flex-start;
    padding: 80px 1.5rem 56px;
  }

  .hero-expo__content {
    max-width: 100%;
  }

  .hero-expo__svg {
    width: 220%;
    height: 220%;
    transform: translate(-60vw, -10vh);
  }
}