/* ========================================
   Decorations — L'heure bleue
   Version 3 — Fines, spirituelles, bouddhistes
   Sumi-e délicat, mandalas linéaires, encens éthéré
   ======================================== */

/* --- Decoration containers --- */

.deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.deco svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Sections need relative positioning for deco elements */
.section,
.cta-reservation,
.hero {
  position: relative;
  overflow: hidden;
}

/* Ensure content stays above decorations */
.section > .container,
.cta-reservation > .container,
.hero__content {
  position: relative;
  z-index: 2;
}

/* ============================================
   WASHI PAPER TEXTURE — subtile, pas envahissante
   ============================================ */

.section--cream::before,
.section--sand::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(93, 138, 168, 0.035) 0%, transparent 45%),
    radial-gradient(circle at 75% 70%, rgba(210, 180, 140, 0.05) 0%, transparent 50%);
  z-index: 1;
  pointer-events: none;
}

/* Grain texture via SVG noise — atténué */
.section--cream::after,
.section--sand::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.54 0 0 0 0 0.66 0 0 0 0.3 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
  opacity: 0.35;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* ============================================
   HERO — Encens fin, ensō délicat, particules
   ============================================ */

/* Fines volutes d'encens sur les côtés au lieu de grosses taches */
.deco--hero-ink-left {
  top: 0;
  left: 4%;
  width: 140px;
  height: 100%;
  opacity: 0.5;
  z-index: 1;
}

.deco--hero-ink-right {
  top: 0;
  right: 5%;
  width: 120px;
  height: 100%;
  opacity: 0.4;
  z-index: 1;
}

.deco--hero-enso {
  top: 52%;
  right: 6%;
  transform: translateY(-50%);
  width: 360px;
  height: 360px;
  opacity: 0.18;
  z-index: 1;
  mix-blend-mode: screen;
}

.deco--hero-mandala {
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 520px;
  height: 520px;
  opacity: 0.07;
  z-index: 1;
  mix-blend-mode: screen;
  animation: slowSpin 120s linear infinite;
}

@keyframes slowSpin {
  from { transform: translateX(-50%) rotate(0deg); }
  to { transform: translateX(-50%) rotate(360deg); }
}

/* Floating dust particles — plus discrètes */
.deco--hero-particles {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  z-index: 1;
}

@keyframes floatUp {
  0% {
    transform: translateY(100vh) translateX(0);
    opacity: 0;
  }
  10% { opacity: 0.7; }
  90% { opacity: 0.4; }
  100% {
    transform: translateY(-100px) translateX(20px);
    opacity: 0;
  }
}

@keyframes floatUp2 {
  0% {
    transform: translateY(100vh) translateX(0);
    opacity: 0;
  }
  10% { opacity: 0.6; }
  90% { opacity: 0.3; }
  100% {
    transform: translateY(-100px) translateX(-30px);
    opacity: 0;
  }
}

.particle { animation: floatUp 22s linear infinite; }
.particle--alt { animation: floatUp2 26s linear infinite; }

/* ============================================
   CONCEPT — Mandala filigrane, calligraphie fine
   ============================================ */

.deco--concept-mandala {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 640px;
  height: 640px;
  opacity: 0.1;
  z-index: 1;
}

.deco--ink-top-right {
  top: 40px;
  right: 6%;
  width: 220px;
  height: 220px;
  opacity: 0.28;
  z-index: 1;
}

.deco--ink-bottom-left {
  bottom: 40px;
  left: 6%;
  width: 200px;
  height: 200px;
  opacity: 0.22;
  z-index: 1;
}

.deco--lotus {
  bottom: 8%;
  right: 8%;
  width: 130px;
  height: 130px;
  opacity: 0.28;
  z-index: 1;
}

/* ============================================
   PRATICIEN — Encens raffiné, branche de cerisier
   ============================================ */

.deco--incense-right {
  top: 8%;
  right: 5%;
  width: 70px;
  height: 380px;
  opacity: 0.45;
  z-index: 1;
}

/* Smoke animation — éthérée */
@keyframes smokeRise {
  0% {
    opacity: 0;
    transform: translateY(0) scaleX(1);
  }
  15% { opacity: 0.45; }
  55% {
    opacity: 0.3;
    transform: translateY(-40px) scaleX(1.3);
  }
  100% {
    opacity: 0;
    transform: translateY(-110px) scaleX(1.7);
  }
}

.deco__smoke-path {
  animation: smokeRise 7s ease-in-out infinite;
  transform-origin: center bottom;
}

.deco__smoke-path--delayed {
  animation: smokeRise 8s ease-in-out 1.8s infinite;
  transform-origin: center bottom;
}

.deco__smoke-path--slow {
  animation: smokeRise 10s ease-in-out 0.8s infinite;
  transform-origin: center bottom;
}

.deco--bamboo {
  top: 0;
  left: 0;
  width: 140px;
  height: 100%;
  opacity: 0.22;
  z-index: 1;
}

/* Cerisier en fleur — fin et poétique */
.deco--sakura-branch {
  top: 4%;
  right: 2%;
  width: 260px;
  height: 200px;
  opacity: 0.35;
  z-index: 1;
}

/* ============================================
   MASSAGES — Ensō fin + mudra + mantras
   ============================================ */

.deco--enso-large {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 720px;
  height: 720px;
  opacity: 0.14;
  z-index: 1;
}

.deco--mudra-right {
  top: 10%;
  right: 4%;
  width: 120px;
  height: 120px;
  opacity: 0.25;
  z-index: 1;
}

.deco--brush-stroke-diagonal {
  top: 20px;
  left: 0;
  width: 340px;
  height: 100px;
  opacity: 0.3;
  z-index: 1;
}

/* ============================================
   TESTIMONIALS — Chandelles fines + encens
   ============================================ */

.deco--candle-left {
  bottom: 6%;
  left: 5%;
  width: 48px;
  height: 220px;
  opacity: 0.55;
  z-index: 1;
}

.deco--candle-right {
  top: 10%;
  right: 6%;
  width: 42px;
  height: 190px;
  opacity: 0.5;
  z-index: 1;
}

/* Flame flicker — plus doux */
@keyframes flameFlicker {
  0%, 100% {
    transform: scaleY(1) scaleX(1) translateY(0);
    opacity: 1;
  }
  25% {
    transform: scaleY(1.08) scaleX(0.95) translateY(-1.5px);
    opacity: 0.92;
  }
  50% {
    transform: scaleY(0.95) scaleX(1.05) translateY(0.5px);
    opacity: 0.96;
  }
  75% {
    transform: scaleY(1.04) scaleX(0.97) translateY(-0.5px);
    opacity: 0.9;
  }
}

.deco__flame {
  transform-origin: center bottom;
  animation: flameFlicker 3s ease-in-out infinite;
}

.deco__flame--delayed {
  animation: flameFlicker 3.8s ease-in-out 0.8s infinite;
  transform-origin: center bottom;
}

@keyframes flameGlow {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.1);
  }
}

.deco__flame-glow {
  animation: flameGlow 3.5s ease-in-out infinite;
  transform-origin: center center;
}

/* Motif seigaiha (vagues bouddhistes) */
.deco--seigaiha {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  opacity: 0.15;
  z-index: 1;
}

/* ============================================
   CTA — Horizon fin + motif spirituel
   ============================================ */

.deco--brush-bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  opacity: 0.5;
  z-index: 1;
}

.deco--cta-bloom-left {
  top: 0;
  left: 0;
  width: 220px;
  height: 100%;
  opacity: 0.35;
  z-index: 1;
}

.deco--cta-bloom-right {
  top: 0;
  right: 0;
  width: 200px;
  height: 100%;
  opacity: 0.32;
  z-index: 1;
}

.deco--cta-mandala {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 700px;
  opacity: 0.08;
  z-index: 1;
}

/* ============================================
   FOOTER — Ink wash top + ensō filigrane
   ============================================ */

.footer {
  position: relative;
  overflow: hidden;
}

.footer > .container {
  position: relative;
  z-index: 2;
}

.deco--footer-wave {
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  opacity: 0.4;
}

.deco--footer-enso {
  top: 50%;
  right: -100px;
  transform: translateY(-50%);
  width: 380px;
  height: 380px;
  opacity: 0.08;
}

/* ============================================
   SECTION DIVIDERS
   ============================================ */

.ink-divider {
  position: relative;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  overflow: hidden;
}

.ink-divider svg {
  width: 60%;
  max-width: 600px;
  height: 100%;
  opacity: 0.45;
}

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

@media (max-width: 767px) {
  .deco--ink-top-right,
  .deco--ink-bottom-left {
    width: 140px;
    height: 140px;
    opacity: 0.2;
  }

  .deco--concept-mandala {
    width: 380px;
    height: 380px;
    opacity: 0.07;
  }

  .deco--enso-large {
    width: 380px;
    height: 380px;
    opacity: 0.1;
  }

  .deco--hero-enso {
    width: 240px;
    height: 240px;
    opacity: 0.12;
    right: -40px;
  }

  .deco--hero-mandala {
    width: 340px;
    height: 340px;
    opacity: 0.05;
  }

  .deco--incense-right {
    width: 50px;
    height: 260px;
    opacity: 0.35;
  }

  .deco--candle-left {
    width: 38px;
    height: 170px;
  }

  .deco--candle-right {
    width: 34px;
    height: 150px;
  }

  .deco--bamboo {
    width: 80px;
    opacity: 0.14;
  }

  .deco--sakura-branch {
    width: 160px;
    height: 130px;
    opacity: 0.25;
  }

  .deco--mudra-right {
    width: 80px;
    height: 80px;
    opacity: 0.2;
  }

  .deco--hero-ink-left {
    width: 70px;
    opacity: 0.4;
  }

  .deco--hero-ink-right {
    width: 60px;
    opacity: 0.3;
  }

  .deco--lotus {
    width: 90px;
    height: 90px;
  }

  .deco--cta-bloom-left,
  .deco--cta-bloom-right {
    width: 120px;
    opacity: 0.22;
  }

  .deco--cta-mandala {
    width: 380px;
    height: 380px;
    opacity: 0.06;
  }

  .deco--brush-stroke-diagonal {
    width: 200px;
    height: 70px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .deco__smoke-path,
  .deco__smoke-path--delayed,
  .deco__smoke-path--slow,
  .deco__flame,
  .deco__flame--delayed,
  .deco__flame-glow,
  .particle,
  .particle--alt,
  .deco--hero-mandala {
    animation: none;
  }
}