/*******************************************************ash effects**************************/
/* ---------------------------------------------------------
   SAFE & SOUND — FIRE SEASON BACKGROUND
   Full-height drifting ember environment
    radial-gradient(rgba(255,120,60,0.15), transparent 70%),
    url('embers-layer.png'); /* placeholder */
   /--------------------------------------------------------- */

 



/* ---------------------------------------------------------
   SAFE & SOUND — FIRE SEASON BACKGROUND
   Full-height drifting ember environment


   ----------------------------------------------------hide -----  
body { position: relative; }


.sascadu-fire-bg {
  position: absolute;
  top: 100vh;
  left: 0;
  right: 0;

  display: block;
  min-height: 300vh;

  z-index: -10 !important;
  pointer-events: none;

  background:
    radial-gradient(rgba(255,120,60,0.15), transparent 100%),
    url('assets/images/embers-layer.png');

  background-size: cover;
  background-repeat: repeat-y;
  background-clip: border-box;

  animation: ember-drift 18s linear infinite;
  filter: sepia(0.4) contrast(1.1);
}

@keyframes ember-drift {
  0% { background-position: 0 0; }
  100% { background-position: 0 -600px; }
}

--------------------------------------------------------- */

















/* ---------------------------------------------------------
   SAFE & SOUND — FIRE STACK (CLEAN + CORRECTED + DRAMATIC)
   --------------------------------------------------------- */

/* Ember + Spark Field Container */
#emberField {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999; /* FIXED — bring fire in front */
}

/* ---------------------------------------------------------
   EMBERS (mid-layer)
   --------------------------------------------------------- */
.ember {
  position: absolute;
  background: rgba(255, 140, 60, 0.9);
  border-radius: 50%;
  opacity: 0.9;
  animation: emberRise linear forwards;
  box-shadow: 0 0 12px rgba(255, 120, 40, 0.9);
}

.ember.bg {
  transform: scale(0.6);
  opacity: 0.4;
  box-shadow: 0 0 6px rgba(255, 120, 40, 0.4);
}

.ember.mg {
  opacity: 0.8;
}

.ember.fg {
  transform: scale(1.4);
  opacity: 1;
  box-shadow: 0 0 18px rgba(255, 160, 60, 1);
}

/* EMBER RISE — unified, dramatic */
@keyframes emberRise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.9;
  }
  80% {
    opacity: 0.95;
  }
  100% {
    transform: translateY(-4800px) scale(0.4);
    opacity: 0.35;
  }
}

/* ---------------------------------------------------------
   SPARKS (foreground — bright + fast)
   --------------------------------------------------------- */
.spark {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(255, 200, 120, 1);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(255, 200, 120, 1);
  pointer-events: none;
  animation: sparkRise linear forwards;
}

/* SPARK RISE — unified, dramatic */
@keyframes sparkRise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-4800px) scale(0.2);
    opacity: 0;
  }
}

/* ---------------------------------------------------------
   HEAT HAZE (subtle distortion across entire page)
   --------------------------------------------------------- */
@keyframes heatHaze {
  0% { filter: none; }
  50% { filter: blur(0.6px) brightness(1.03) contrast(1.02); }
  100% { filter: none; }
}

/* ---------------------------------------------------------
   FIRELIGHT FLICKER (global warm pulse)
   --------------------------------------------------------- */
@keyframes fireFlicker {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.06); }
  100% { filter: brightness(1); }
}

/* APPLY BOTH EFFECTS TO ENTIRE PAGE */
body {
  animation:
    heatHaze 6s ease-in-out infinite,
    fireFlicker 3.5s ease-in-out infinite;
}









body {
  animation:
    heatHaze 6s ease-in-out infinite,
    fireFlicker 3.5s ease-in-out infinite;
}
.sascadu-body {
  animation:
    heatHaze 6s ease-in-out infinite,
    fireFlicker 3.5s ease-in-out infinite;
}
#emberField {
  z-index: -1;
}
#emberField {
  z-index: 9999;
}













/*******************inferno attempt*******************/



/* ---------------------------------------------------------
   PARALLAX CANYON — STRONG (Firewatch-style)
   --------------------------------------------------------- */

#str-parallax {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: -2;
}

.str-layer {
  position: absolute;
  width: 120%;
  height: 120%;
  top: -10%;
  left: -10%;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.9;
}

.str-layer.far {
  background-image: url('assets/str/canyon-far.png');
  animation: strParallaxFar 60s linear infinite;
}

.str-layer.mid {
  background-image: url('assets/str/canyon-mid.png');
  animation: strParallaxMid 40s linear infinite;
}

.str-layer.fg {
  background-image: url('assets/str/canyon-fg-haze.png');
  opacity: 0.6;
  animation: strParallaxFG 20s linear infinite;
}

@keyframes strParallaxFar {
  0% { transform: translateX(0); }
  100% { transform: translateX(-40px); }
}

@keyframes strParallaxMid {
  0% { transform: translateX(0); }
  100% { transform: translateX(-120px); }
}

@keyframes strParallaxFG {
  0% { transform: translateX(0); }
  100% { transform: translateX(-240px); }
}






































<script>
let emberInterval;
let sparkInterval;

function startEmberVeil() {
  if (emberInterval) return;

  emberInterval = setInterval(() => {
    const ember = document.createElement('div');
    ember.classList.add('ember');

    // assign depth layer
    const r = Math.random();
    if (r < 0.2) ember.classList.add('bg');
    else if (r < 0.8) ember.classList.add('mg');
    else ember.classList.add('fg');

    // random horizontal position
    ember.style.left = `${Math.random() * window.innerWidth}px`;

    // random size
    const size = 3 + Math.random() * 6;
    ember.style.width = ember.style.height = `${size}px`;

    // long drift
    const duration = 12 + Math.random() * 10; // 12–22 seconds
    ember.style.animationDuration = `${duration}s`;

    document.getElementById('emberField').appendChild(ember);

    setTimeout(() => ember.remove(), duration * 1000);
  }, 120 + Math.random() * 120);

  // bright sparks
  sparkInterval = setInterval(() => {
    const spark = document.createElement('div');
    spark.classList.add('spark');

    spark.style.left = `${Math.random() * window.innerWidth}px`;
    spark.style.animationDuration = `${2 + Math.random() * 1}s`;

    document.getElementById('emberField').appendChild(spark);

    setTimeout(() => spark.remove(), 3000);
  }, 400 + Math.random() * 400);
}

document.addEventListener("DOMContentLoaded", () => {
  startEmberVeil();
});


</script>


<script>
let sparkInterval;

function startSparks() {
  if (sparkInterval) return;

  sparkInterval = setInterval(() => {
    const spark = document.createElement('div');
    spark.classList.add('spark');

    spark.style.left = `${Math.random() * window.innerWidth}px`;
    const duration = 1.5 + Math.random() * 1.5; // 1.5–3s
    spark.style.animationDuration = `${duration}s`;

    document.getElementById('emberField').appendChild(spark);

    setTimeout(() => spark.remove(), duration * 1000);
  }, 120 + Math.random() * 180); // frequent sparks
}

document.addEventListener("DOMContentLoaded", () => {
  startEmberVeil();
  startSparks();
});
</script>




















<script>
/* ---------------------------------------------------------
   FIREWATCH PARALLAX + LAST OF US DUST + FIRE STACK ENGINE
   STRONG VERSION — drop-in
   --------------------------------------------------------- */

/* --------------------------
   1. DUST / SPORES ENGINE
   -------------------------- */
function startDust() {
  const field = document.getElementById('dustField');
  if (!field) return;

  const count = 250; // strong version

  for (let i = 0; i < count; i++) {
    const d = document.createElement('div');
    d.classList.add('dust');

    d.style.left = Math.random() * window.innerWidth + 'px';
    d.style.top = Math.random() * window.innerHeight + 'px';

    const duration = 10 + Math.random() * 20;
    d.style.animationDuration = duration + 's';

    field.appendChild(d);

    setTimeout(() => d.remove(), duration * 1000);
  }

  // respawn continuously
  setInterval(startDust, 8000);
}

/* --------------------------
   2. EMBER ENGINE
   -------------------------- */
function startEmbers() {
  const field = document.getElementById('emberField');
  if (!field) return;

  setInterval(() => {
    const ember = document.createElement('div');
    ember.classList.add('ember');

    // depth class
    const depth = Math.random();
    if (depth < 0.33) ember.classList.add('bg');
    else if (depth < 0.66) ember.classList.add('mg');
    else ember.classList.add('fg');

    ember.style.left = Math.random() * window.innerWidth + 'px';

    const size = 4 + Math.random() * 10;
    ember.style.width = size + 'px';
    ember.style.height = size + 'px';

    const duration = 6 + Math.random() * 6;
    ember.style.animationDuration = duration + 's';

    field.appendChild(ember);

    setTimeout(() => ember.remove(), duration * 1000);
  }, 120);
}

/* --------------------------
   3. SPARK ENGINE
   -------------------------- */
function startSparks() {
  const field = document.getElementById('emberField');
  if (!field) return;

  setInterval(() => {
    const spark = document.createElement('div');
    spark.classList.add('spark');

    spark.style.left = Math.random() * window.innerWidth + 'px';

    const duration = 1 + Math.random() * 1.5;
    spark.style.animationDuration = duration + 's';

    field.appendChild(spark);

    setTimeout(() => spark.remove(), duration * 1000);
  }, 80); // strong version
}

/* --------------------------
   4. START EVERYTHING
   -------------------------- */
document.addEventListener("DOMContentLoaded", () => {
  startDust();
  startEmbers();
  startSparks();
});
</script>