/* Dank Poet hero smoke (VIDEO version), copied unchanged from the live homepage widget
   (hero-smoke/exports/PASTE-INTO-ELEMENTOR-running-version.html, matches dankpoet.com 2026-10-02).
   Only change: image URLs point at local copies so they load from this subdomain. */
.dp-smoke-host { position: relative !important; overflow: hidden !important; isolation: isolate; }
  /* keep every real hero child above the smoke layer */
  .dp-smoke-host > *:not(.dp-smoke-layer):not(.elementor-background-video-container):not(.elementor-background-overlay):not(.elementor-shape) { position: relative; z-index: 2; }
  /* if the old Elementor background video is still set, hide it */
  .dp-smoke-host > .elementor-background-video-container,
  .dp-smoke-host > .e-con-inner > .elementor-background-video-container { display: none !important; }
  /* the Elementor widget wrapper that carried this code takes no space */
  .dp-smoke-host .dp-smoke-widget-hidden { display: none !important; }

  .dp-smoke-layer {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
    background: #000 url("smoke-poster.webp") 50% 50% / cover no-repeat;
  }
  .dp-smoke-video, .dp-smoke-canvas, .dp-smoke-tint, .dp-smoke-deco {
    position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  }
  .dp-smoke-video { object-fit: cover; }
  .dp-smoke-video-b { opacity: 0; }
  /* WebGL draws the video itself once it's ready; until then (or if WebGL
     is unavailable) the normal <video> shows and the smoke is screened on top */
  /* Keep both <video>s at full opacity (the opaque canvas covers them). Safari can pause muted
     autoplay videos it considers invisible, which froze the video on Macs while the smoke went on. */
  .dp-smoke-layer.dp-gl-video .dp-smoke-video { opacity: 1 !important; }
  .dp-smoke-layer:not(.dp-gl-video) .dp-smoke-canvas { mix-blend-mode: screen; }
  /* darken the left so the headline stays readable */
  .dp-smoke-tint {
    background:
      linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 75%),
      linear-gradient(0deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 35%);
  }
  /* purple diagonal stripes, bottom-right (was the container overlay) */
  .dp-smoke-deco {
    background: url("smoke-stripes.webp") right bottom / auto no-repeat;
  }
  @media (max-width: 767px) {
    .dp-smoke-video { object-position: 72% 50%; }  /* keep the video's smoke in frame */
    .dp-smoke-layer { background-position: 72% 50%; }
    .dp-smoke-tint { background: linear-gradient(0deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 100%); }
  }

  /* Elementor editor: show a small tag so the widget can still be clicked */
  .elementor-editor-active .dp-smoke-editor-tag {
    display: inline-block; padding: 6px 10px; font: 600 11px/1 sans-serif; letter-spacing: .08em;
    color: #FFB000; border: 1px dashed #FFB000; background: rgba(0,0,0,.6);
  }
  .dp-smoke-editor-tag { display: none; }