/* AlterSmoke vapor system — elegant, low-cost radial bloom.
   Reusable smoke layer (hero, footer, future placements).

   Design:
   - Few, large, slow particles — editorial not kinetic.
   - Radial gradients feather to transparent natively: no filter: blur() cost.
   - Only transform + opacity animate: compositor-only, zero paint.

   Variants: --hero (full section), --footer (discreet ambient band). */

.as-smoke-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  /* Soft top edge so wisps dissolve into the dark chapter. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 18%,
    #000 46%,
    #000 100%
  );
          mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 18%,
    #000 46%,
    #000 100%
  );
  contain: layout style paint;
  animation: asep-layer-reveal 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* --------------------------------------------------------------------------
   Keyframes — compositor-only transforms + opacity.
   -------------------------------------------------------------------------- */
@keyframes asep-layer-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes asep-drift-a {
  0%   { transform: translate3d(0, 0, 0) scale(1);           opacity: 0; }
  18%  { opacity: .3; }
  52%  { transform: translate3d(40px, -36vh, 0) scale(1.35); opacity: .22; }
  100% { transform: translate3d(-20px, -70vh, 0) scale(1.7); opacity: 0; }
}

@keyframes asep-drift-b {
  0%   { transform: translate3d(0, 0, 0) scale(1);            opacity: 0; }
  20%  { opacity: .26; }
  56%  { transform: translate3d(-55px, -30vh, 0) scale(1.4);  opacity: .18; }
  100% { transform: translate3d(30px, -62vh, 0) scale(1.75);  opacity: 0; }
}

@keyframes asep-drift-footer {
  0%   { transform: translate3d(0, 0, 0) scale(1);         opacity: 0; }
  22%  { opacity: .2; }
  62%  { transform: translate3d(26px, -60%, 0) scale(1.3);  opacity: .12; }
  100% { transform: translate3d(-12px, -100%, 0) scale(1.5); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Particles — radial gradients feather naturally; no blur filter.
   -------------------------------------------------------------------------- */
.as-vapor {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 55%,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0.14) 28%,
    rgba(255, 255, 255, 0.04) 55%,
    transparent 72%
  );
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

/* Hero variant — four stratified particles, generous scale, long cycles. */
.as-smoke-layer--hero .as-vapor--1 {
  width: 520px; height: 340px;
  left: 6%; bottom: -120px;
  animation: asep-drift-a 18s ease-in-out infinite;
  animation-delay: -2s;
}

.as-smoke-layer--hero .as-vapor--2 {
  width: 440px; height: 300px;
  left: 34%; bottom: -90px;
  animation: asep-drift-b 22s ease-in-out infinite;
  animation-delay: -9s;
}

.as-smoke-layer--hero .as-vapor--3 {
  width: 580px; height: 360px;
  left: 58%; bottom: -140px;
  animation: asep-drift-a 24s ease-in-out infinite;
  animation-delay: -6s;
}

.as-smoke-layer--hero .as-vapor--4 {
  width: 420px; height: 280px;
  left: 78%; bottom: -110px;
  animation: asep-drift-b 20s ease-in-out infinite;
  animation-delay: -14s;
}

/* --------------------------------------------------------------------------
   Variant: footer — two discreet ambient particles.
   -------------------------------------------------------------------------- */
.as-smoke-layer--footer {
  position: fixed;
  inset: auto 0 0 0;
  height: 220px;
  z-index: 1;
}

.as-smoke-layer--footer .as-vapor--1 {
  width: 280px; height: 200px;
  left: 12%; bottom: -40px;
  animation: asep-drift-footer 26s ease-in-out infinite;
  animation-delay: -4s;
}

.as-smoke-layer--footer .as-vapor--2,
.as-smoke-layer--footer .as-vapor--3 {
  display: none;
}

.as-smoke-layer--footer .as-vapor--4 {
  width: 320px; height: 220px;
  left: 66%; bottom: -50px;
  animation: asep-drift-footer 32s ease-in-out infinite;
  animation-delay: -16s;
}

/* --------------------------------------------------------------------------
   Responsive — reduce density further on small screens.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .as-smoke-layer--hero .as-vapor--2,
  .as-smoke-layer--hero .as-vapor--4 {
    display: none;
  }

  .as-smoke-layer--footer {
    height: 140px;
  }

  .as-smoke-layer--footer .as-vapor--4 {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Accessibility & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .as-smoke-layer {
    display: none;
  }
}

@media print {
  .as-smoke-layer {
    display: none;
  }
}