/* ==== Smokey Stanza Slideshow (layered PNG/WebP smoke) ==== */

/* Container that sits over your existing page background */
.smoke-stage {
  position: relative;
  width: 100%;
  min-height: 60svh; /* adjust to taste */
  display: grid;
  place-items: center;
  pointer-events: none; /* text still selectable */
  isolation: isolate;
}

/* The drifting smoke layers */
.smoke-layer {
  position: absolute;
  inset: -10% -10%;          /* bleed over edges to hide seams */
  background-size: 900px 900px; /* tune to your texture */
  background-repeat: repeat;
  opacity: 0.18;             /* idle opacity */
  filter: blur(2px);         /* soften the texture */
  will-change: transform, opacity;
  z-index: 0;
}

/* Two different textures + motions for parallax feel */
.layer1 {
  background-image: url("/assets/img/smoke1.png"); /* or .webp */
  animation: driftA 80s linear infinite;
}
.layer2 {
  background-image: url("/assets/img/smoke2.png");
  animation: driftB 120s linear infinite reverse;
  opacity: 0.14;
}

/* When entering/exiting a stanza, intensify the smoke slightly */
.smoke-stage.smoke-active .smoke-layer {
  opacity: 0.32;
  transition: opacity 500ms ease;
}

/* The stanza text */
.stanza {
  position: relative;
  z-index: 1;
  color: #eae7df; /* light parchment */
  text-align: center;
  max-width: 38ch;
  white-space: pre-line; /* keep your manual line breaks */
  font-family: "Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.35;
  letter-spacing: 0.3px;

  opacity: 0;
  transform: translate3d(0, 8px, 0) scale(0.99);
  will-change: opacity, transform;
  pointer-events: auto; /* allow selection / long-press copy */
}

/* Enter/exit animations without any speckle on the solid phase */
@keyframes fogIn {
  0%   { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.985); }
  50%  { opacity: 1; transform: translate3d(0, 2px, 0)  scale(0.997); }
  100% { opacity: 1; transform: translate3d(0, 0, 0)   scale(1); }
}
@keyframes fogOut {
  0%   { opacity: 1; transform: translate3d(0, 0, 0)   scale(1); }
  100% { opacity: 0; transform: translate3d(0, -10px, 0) scale(1.01); }
}

.stanza.entering { animation: fogIn 1200ms ease-out forwards; }
.stanza.exiting  { animation: fogOut 900ms ease-in forwards; }

/* Subtle continuous breathing while fully visible (optional) */
.stanza.idle {
  animation: textDrift 9s ease-in-out infinite;
}
@keyframes textDrift {
  0%,100% { transform: translateY(0) }
  50%     { transform: translateY(-1px) }
}

/* Smoke motions */
@keyframes driftA {
  from { transform: translate3d(-8%, -6%, 0) scale(1.15); }
  to   { transform: translate3d(-28%, -22%, 0) scale(1.15); }
}
@keyframes driftB {
  from { transform: translate3d(-12%, -14%, 0) scale(1.12); }
  to   { transform: translate3d(-42%, -38%, 0) scale(1.12); }
}

/* Accessibility: if user prefers reduced motion, keep it simple */
@media (prefers-reduced-motion: reduce) {
  .smoke-layer { animation: none; opacity: 0.15 !important; }
  .stanza { animation: none !important; opacity: 1 !important; transform: none !important; }
}