/* =====================================================================
   AardDesign — Hero decorative layer
   Replaces the old WebGL shader with a sophisticated SVG/CSS composition
   ===================================================================== */

/* Canvas is kept in the DOM for backward compat but hidden on the light theme */
.shader-canvas {
  display: none;
}

.shader-canvas--mini {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Décor hero : composition SVG/CSS (remplace le shader) */
.shader-fallback {
  position: absolute;
  inset: 0;
  z-index: var(--z-shader);
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
}

/* Cercle terre cuite (flottant) */
.shader-fallback::before {
  content: "";
  position: absolute;
  top: 12%;
  right: 8%;
  width: clamp(200px, 32vw, 460px);
  height: clamp(200px, 32vw, 460px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 35%,
      rgba(184, 99, 43, 0.22) 0%,
      rgba(184, 99, 43, 0.08) 40%,
      transparent 70%);
  filter: blur(2px);
  animation: floatSoft 18s var(--ease) infinite alternate;
}

/* Cercle olive (flottant, en contrepoint) */
.shader-fallback::after {
  content: "";
  position: absolute;
  bottom: 8%;
  left: 4%;
  width: clamp(180px, 28vw, 380px);
  height: clamp(180px, 28vw, 380px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 60% 45%,
      rgba(90, 107, 61, 0.18) 0%,
      rgba(90, 107, 61, 0.06) 40%,
      transparent 70%);
  filter: blur(2px);
  animation: floatSoft 22s var(--ease) infinite alternate-reverse;
}

@keyframes floatSoft {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-20px, -30px) scale(1.06); }
  100% { transform: translate(20px, 10px) scale(0.98); }
}

/* SVG overlay "graphic trace" — circle rings and ornament */
.hero-ornament {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.22;
}
.hero-ornament svg {
  width: min(85vw, 900px);
  height: auto;
  color: var(--color-accent);
}

/* Vignette bord doux */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(to bottom, transparent 0%, transparent 70%, color-mix(in srgb, var(--color-bg) 100%, transparent) 100%);
}