/* ── Layla's eyes + smoke wrap ───────────────────────────────────────────────── */
/* Fragment: html/layla-smoke.html                                                */

#layla-eyes-wrap {
  position: absolute;
  z-index: 6;
  top: 33%;
  left: 20%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  animation: wrapScene 11s ease-in-out both;
  animation-delay: 1.5s;
}

#layla-eyes {
  position: relative;
  z-index: 2;
  height: clamp(18px, 2.2vw, 28px);
  width: auto;
  image-rendering: pixelated;
  filter: sepia(0.3) brightness(1.1);
  display: block;
  margin: 0 auto;
  opacity: 0;
  animation: eyesFadeIn 11s ease-in-out both;
  animation-delay: 1.5s;
}

.smoke-wisp {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform-origin: center center;
  background: radial-gradient(ellipse at center,
    rgba(150, 148, 145, 0.30) 0%,
    rgba(125, 122, 118, 0.15) 40%,
    rgba(100,  98,  94, 0.05) 65%,
    transparent 82%
  );
  filter: blur(var(--blur, 7px));
  animation: wispRise var(--dur, 5s) ease-in-out infinite;
  animation-delay: var(--dly, 0s);
}

.smoke-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160px;
  height: 52px;
  margin-left: -80px;
  margin-top: -26px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(155, 150, 140, 0.22) 0%,
    rgba(130, 125, 115, 0.10) 52%,
    transparent 78%
  );
  filter: blur(12px);
  animation: coreBreath 6s ease-in-out infinite;
  z-index: 1;
}

@keyframes coreBreath {
  0%, 100% { opacity: 0.6; transform: scaleX(1)   scaleY(1);   }
  50%       { opacity: 1;   transform: scaleX(1.2) scaleY(1.3); }
}

@keyframes wispRise {
  0%   {
    opacity: 0;
    transform: translate(calc(-50% + var(--x0, 0px)), calc(-50% + var(--y0, 10px)))
               scale(0.5) rotate(0deg);
  }
  18%  { opacity: var(--peak-op, 0.9); }
  65%  { opacity: 0.5; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--x1, 0px)), calc(-50% + var(--y1, -40px)))
               scale(1.8) rotate(var(--rot, 15deg));
  }
}

@keyframes wrapScene {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes eyesFadeIn {
  0%   { opacity: 0;   transform: translateX(5px);  }
  45%  { opacity: 0.1; transform: translateX(0);    }
  82%  { opacity: 0.2; transform: translateX(0);    }
  88%  { opacity: 0.1; transform: translateX(0);    }
  100% { opacity: 0;   transform: translateX(-4px); }
}