/* =========================================================
   TDD Alchimie V1.10.3 — Recalage des effets Atelier
   AUCUNE REGLE DU GRIMOIRE.
   Basé sur la géométrie réelle de alchemy-workshop-bg.webp.
   ========================================================= */

/* ---------------------------------------------------------
   LIQUIDE
   Ouverture réelle du chaudron : centre ~46% de la scène.
   --------------------------------------------------------- */
.alchemy-workshop-liquid-fx{
  --brew-rgb:91,220,151;
  position:absolute;
  z-index:10;
  left:50%;
  top:46.2%;
  width:48%;
  height:13.5%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  overflow:hidden;
  pointer-events:none;
  opacity:.66;
  mix-blend-mode:screen;
  background:
    radial-gradient(ellipse at 50% 53%,
      rgba(229,255,233,.12) 0%,
      rgba(var(--brew-rgb),.08) 45%,
      transparent 72%);
  box-shadow:
    inset 0 0 16px rgba(225,255,231,.06),
    0 0 16px rgba(var(--brew-rgb),.10);
  animation:tddWorkshopLiquidPulse 3.8s ease-in-out infinite;
}

.alchemy-workshop-liquid-shimmer{
  position:absolute;
  left:-42%;
  top:28%;
  width:43%;
  height:34%;
  border-radius:50%;
  background:linear-gradient(
    100deg,
    transparent 0%,
    rgba(238,255,241,.08) 25%,
    rgba(238,255,241,.34) 50%,
    rgba(185,255,206,.08) 72%,
    transparent 100%
  );
  filter:blur(3px);
  transform:skewX(-16deg);
  animation:tddWorkshopShimmer 5.4s ease-in-out infinite;
}

.alchemy-workshop-liquid-fx i{
  position:absolute;
  width:8px;
  height:3px;
  border:1px solid rgba(227,255,233,.38);
  border-radius:50%;
  opacity:0;
  box-shadow:0 0 4px rgba(197,255,214,.22);
  animation:tddWorkshopBubble 4.2s ease-in-out infinite;
}
.alchemy-workshop-liquid-fx i:nth-of-type(1){left:23%;top:56%;animation-delay:.2s}
.alchemy-workshop-liquid-fx i:nth-of-type(2){left:41%;top:38%;width:11px;height:4px;animation-delay:1.35s}
.alchemy-workshop-liquid-fx i:nth-of-type(3){left:61%;top:58%;width:7px;animation-delay:2.4s}
.alchemy-workshop-liquid-fx i:nth-of-type(4){left:76%;top:44%;width:9px;animation-delay:3.25s}

.alchemy-workshop-liquid-fx.is-active{
  opacity:.78;
  box-shadow:
    inset 0 0 18px rgba(230,255,236,.08),
    0 0 20px rgba(var(--brew-rgb),.16);
}

/* ---------------------------------------------------------
   VAPEUR
   L'image contient déjà une vapeur très riche :
   seulement deux voiles diffus supplémentaires.
   --------------------------------------------------------- */
.alchemy-workshop-steam-fx{
  position:absolute;
  z-index:9;
  left:50%;
  top:31%;
  width:42%;
  height:31%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  overflow:visible;
}

.alchemy-workshop-steam-fx i{
  position:absolute;
  bottom:0;
  width:25%;
  height:66%;
  border-radius:50%;
  background:
    radial-gradient(ellipse at 50% 70%,
      rgba(227,238,229,.12),
      rgba(227,238,229,.045) 42%,
      transparent 70%);
  filter:blur(10px);
  opacity:0;
  animation:tddWorkshopSteamDrift 7.6s ease-out infinite;
}
.alchemy-workshop-steam-fx i:first-child{
  left:25%;
  animation-delay:-1.2s;
}
.alchemy-workshop-steam-fx i:last-child{
  left:55%;
  height:78%;
  animation-delay:-4.8s;
  animation-duration:8.7s;
}

/* ---------------------------------------------------------
   FEU
   Foyer réel : autour de 82–85% de la scène.
   Pas de nouvelles flammes : on fait fluctuer l'éclairage
   du feu déjà peint dans le background.
   --------------------------------------------------------- */
.alchemy-workshop-fire-fx{
  position:absolute;
  z-index:8;
  left:50%;
  top:82.8%;
  width:43%;
  height:14%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
  mix-blend-mode:screen;
  background:
    radial-gradient(ellipse at 50% 48%,
      rgba(255,216,112,.26) 0%,
      rgba(255,143,46,.22) 28%,
      rgba(239,70,19,.13) 52%,
      transparent 76%);
  filter:blur(4px);
  opacity:.34;
  transform-origin:center;
  animation:tddWorkshopFireGlow .82s steps(3,end) infinite alternate;
}

.alchemy-workshop-fire-fx::before,
.alchemy-workshop-fire-fx::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.alchemy-workshop-fire-fx::before{
  left:13%;
  right:13%;
  top:17%;
  bottom:10%;
  background:radial-gradient(
    ellipse,
    rgba(255,197,78,.28) 0%,
    rgba(255,93,24,.14) 48%,
    transparent 72%);
  filter:blur(7px);
  animation:tddWorkshopFireCore .57s steps(2,end) infinite alternate;
}
.alchemy-workshop-fire-fx::after{
  left:29%;
  right:29%;
  top:-10%;
  height:52%;
  background:radial-gradient(
    ellipse,
    rgba(255,224,147,.20),
    rgba(255,117,35,.08) 50%,
    transparent 74%);
  filter:blur(9px);
  animation:tddWorkshopHeatHaze 1.6s ease-in-out infinite alternate;
}

/* ---------------------------------------------------------
   ANIMATIONS
   --------------------------------------------------------- */
@keyframes tddWorkshopLiquidPulse{
  0%,100%{
    transform:translate(-50%,-50%) scaleX(.985) scaleY(.96);
    filter:brightness(.92);
  }
  50%{
    transform:translate(-50%,-50%) scaleX(1.018) scaleY(1.035);
    filter:brightness(1.10);
  }
}

@keyframes tddWorkshopShimmer{
  0%{left:-42%;opacity:0}
  16%{opacity:.12}
  48%{opacity:.58}
  78%{opacity:.14}
  100%{left:105%;opacity:0}
}

@keyframes tddWorkshopBubble{
  0%,62%{opacity:0;transform:scale(.3)}
  72%{opacity:.22;transform:scale(.7)}
  82%{opacity:.60;transform:scale(1)}
  100%{opacity:0;transform:scale(1.55)}
}

@keyframes tddWorkshopSteamDrift{
  0%{
    opacity:0;
    transform:translate(0,12px) scale(.72) rotate(-5deg);
  }
  18%{opacity:.12}
  42%{opacity:.20}
  72%{opacity:.08}
  100%{
    opacity:0;
    transform:translate(21px,-72px) scale(1.38) rotate(13deg);
  }
}

@keyframes tddWorkshopFireGlow{
  0%{
    opacity:.23;
    transform:translate(-50%,-50%) scaleX(.92) scaleY(.78);
    filter:blur(5px) brightness(.92);
  }
  34%{
    opacity:.43;
    transform:translate(-50%,-50%) scaleX(1.04) scaleY(.96);
    filter:blur(4px) brightness(1.16);
  }
  68%{
    opacity:.29;
    transform:translate(-50%,-50%) scaleX(.97) scaleY(1.04);
    filter:blur(5px) brightness(.98);
  }
  100%{
    opacity:.48;
    transform:translate(-50%,-50%) scaleX(1.08) scaleY(.88);
    filter:blur(3.5px) brightness(1.24);
  }
}

@keyframes tddWorkshopFireCore{
  from{opacity:.35;transform:scale(.88,.72)}
  to{opacity:.75;transform:scale(1.10,1.06)}
}

@keyframes tddWorkshopHeatHaze{
  from{opacity:.20;transform:translateY(3px) scaleX(.92)}
  to{opacity:.48;transform:translateY(-5px) scaleX(1.08)}
}

/* Responsive : recalage conservé sur l'image en cover. */
@media (min-width:901px) and (max-width:1180px){
  .alchemy-workshop-liquid-fx{top:46.5%;width:50%}
  .alchemy-workshop-steam-fx{top:31.5%;width:44%}
  .alchemy-workshop-fire-fx{top:82.5%;width:45%}
}
@media (min-width:721px) and (max-width:900px){
  .alchemy-workshop-liquid-fx{top:47%;width:53%;height:13%}
  .alchemy-workshop-steam-fx{top:32%;width:47%}
  .alchemy-workshop-fire-fx{top:82%;width:48%;height:13%}
}
@media (max-width:720px){
  .alchemy-workshop-liquid-fx{top:51%;width:57%;height:12%}
  .alchemy-workshop-steam-fx{top:36%;width:51%;height:27%}
  .alchemy-workshop-fire-fx{top:81%;width:51%;height:12%}
}

@media (prefers-reduced-motion:reduce){
  .alchemy-workshop-liquid-fx,
  .alchemy-workshop-liquid-shimmer,
  .alchemy-workshop-liquid-fx i,
  .alchemy-workshop-steam-fx i,
  .alchemy-workshop-fire-fx,
  .alchemy-workshop-fire-fx::before,
  .alchemy-workshop-fire-fx::after{
    animation:none!important;
  }
}