/* ============================================================
   POC — Subtle Hazard Atmosphere Effects  (v2 — observable)
   Purely additive. Layers on top of existing .guide-hero-*
   without modifying any existing styles.

   v2 changes vs v1:
   - All opacities ~2–3x stronger
   - Motion amplitudes larger
   - Cycles shorter / events more frequent
   This is a tuning pass for evaluation. Final values will
   come down once direction is approved.
   ============================================================ */

.guide-hero { overflow: hidden; }

.fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* ============================================================
   FLOOD — visible rising water + slow horizontal ripple drift
   ============================================================ */
.fx-flood-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background:
    /* horizontal ripple bands — drifts sideways over time */
    repeating-linear-gradient(
      180deg,
      rgba(61, 106, 122, 0.00) 0px,
      rgba(61, 106, 122, 0.00) 12px,
      rgba(61, 106, 122, 0.10) 13px,
      rgba(61, 106, 122, 0.00) 14px
    ),
    /* gradient body of water */
    linear-gradient(
      180deg,
      rgba(61, 106, 122, 0.00) 0%,
      rgba(61, 106, 122, 0.10) 40%,
      rgba(61, 106, 122, 0.22) 100%
    );
  background-size: 200% 100%, 100% 100%;
  background-position: 0 0, 0 0;
  transform: translateY(0);
  animation:
    fx-flood-rise 7s ease-in-out infinite,
    fx-flood-drift 9s linear infinite;
  mix-blend-mode: multiply;
}

@keyframes fx-flood-rise {
  0%, 100% { transform: translateY(6px); }
  50%      { transform: translateY(-6px); }
}
@keyframes fx-flood-drift {
  from { background-position: 0 0,   0 0; }
  to   { background-position: 200px 0, 0 0; }
}

/* ============================================================
   WILDFIRE — top glow + organic SVG-turbulence smoke + ember rim
   The smoke is real noise (feTurbulence), so no stripes.
   ============================================================ */
.fx-fire-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      130% 70% at 50% -10%,
      rgba(200, 145, 58, 0.38) 0%,
      rgba(200, 145, 58, 0.18) 35%,
      rgba(200, 145, 58, 0)    70%
    );
  animation: fx-fire-pulse 5s ease-in-out infinite;
  mix-blend-mode: multiply;
}

/* SVG fractal-noise smoke. Tinted burnt-orange via feColorMatrix.
   stitchTiles='stitch' makes the noise tile seamlessly. */
.fx-fire-haze {
  position: absolute;
  left: -25%;
  right: -25%;
  top: -10%;
  height: 75%;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='400'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.026' numOctaves='3' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.72  0 0 0 0 0.36  0 0 0 0 0.23  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23s)'/></svg>");
  background-size: 800px 400px;
  background-repeat: repeat;
  mix-blend-mode: multiply;
  opacity: 0.55;
  filter: blur(1px);
  animation: fx-fire-drift 22s linear infinite;
}

/* Warm rim along the bottom — a low ember-light */
.fx-fire-ember {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  background: linear-gradient(
    180deg,
    rgba(184, 92, 58, 0)    0%,
    rgba(184, 92, 58, 0.05) 60%,
    rgba(184, 92, 58, 0.20) 100%
  );
  mix-blend-mode: multiply;
  animation: fx-fire-pulse 5s ease-in-out infinite reverse;
}

@keyframes fx-fire-pulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1;   }
}
@keyframes fx-fire-drift {
  from { background-position: 0 0; }
  to   { background-position: -800px 0; }
}

/* ============================================================
   WINTER STORM — irregular flakes (SVG-placed, no grid look)
   Two layers at different scales / speeds → no visible repeat.
   Geometric wind hatch removed.
   ============================================================ */
.fx-storm-wind { display: none; }   /* deprecated layer */

.fx-storm-flakes {
  position: absolute;
  inset: -10% -5% 0 -5%;
  background-image:
    /* near layer — bigger, brighter flakes */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='720' height='480' viewBox='0 0 720 480'><g fill='white'><circle cx='34' cy='22' r='2.4' opacity='0.95'/><circle cx='118' cy='61' r='1.6' opacity='0.85'/><circle cx='196' cy='14' r='2.0' opacity='0.9'/><circle cx='268' cy='73' r='2.7' opacity='0.95'/><circle cx='342' cy='35' r='1.4' opacity='0.8'/><circle cx='419' cy='55' r='1.8' opacity='0.9'/><circle cx='495' cy='19' r='2.2' opacity='0.95'/><circle cx='569' cy='66' r='1.5' opacity='0.85'/><circle cx='642' cy='28' r='2.0' opacity='0.9'/><circle cx='698' cy='71' r='1.3' opacity='0.8'/><circle cx='28' cy='132' r='1.7' opacity='0.9'/><circle cx='95' cy='168' r='2.5' opacity='0.95'/><circle cx='168' cy='148' r='1.5' opacity='0.85'/><circle cx='234' cy='195' r='1.9' opacity='0.9'/><circle cx='304' cy='124' r='2.7' opacity='0.95'/><circle cx='378' cy='172' r='1.4' opacity='0.8'/><circle cx='447' cy='142' r='2.0' opacity='0.9'/><circle cx='518' cy='184' r='2.3' opacity='0.95'/><circle cx='585' cy='130' r='1.6' opacity='0.85'/><circle cx='658' cy='176' r='1.8' opacity='0.9'/><circle cx='14' cy='244' r='2.1' opacity='0.95'/><circle cx='82' cy='284' r='1.5' opacity='0.85'/><circle cx='159' cy='262' r='1.8' opacity='0.9'/><circle cx='226' cy='305' r='2.5' opacity='0.95'/><circle cx='293' cy='254' r='1.6' opacity='0.85'/><circle cx='366' cy='298' r='1.4' opacity='0.8'/><circle cx='431' cy='266' r='2.3' opacity='0.95'/><circle cx='498' cy='289' r='1.7' opacity='0.9'/><circle cx='562' cy='246' r='1.5' opacity='0.85'/><circle cx='631' cy='298' r='1.9' opacity='0.9'/><circle cx='694' cy='256' r='2.1' opacity='0.95'/><circle cx='42' cy='358' r='1.7' opacity='0.9'/><circle cx='112' cy='402' r='2.2' opacity='0.95'/><circle cx='178' cy='366' r='1.5' opacity='0.85'/><circle cx='245' cy='414' r='1.8' opacity='0.9'/><circle cx='318' cy='378' r='2.6' opacity='0.95'/><circle cx='389' cy='415' r='1.4' opacity='0.8'/><circle cx='458' cy='372' r='2.0' opacity='0.9'/><circle cx='527' cy='405' r='1.6' opacity='0.85'/><circle cx='592' cy='362' r='2.3' opacity='0.95'/><circle cx='661' cy='402' r='1.7' opacity='0.9'/></g></svg>"),
    /* far layer — smaller, dimmer flakes for parallax */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='540' height='360' viewBox='0 0 540 360'><g fill='white'><circle cx='18' cy='12' r='1.0' opacity='0.55'/><circle cx='62' cy='38' r='0.9' opacity='0.5'/><circle cx='108' cy='22' r='1.2' opacity='0.6'/><circle cx='154' cy='52' r='0.8' opacity='0.45'/><circle cx='198' cy='15' r='1.1' opacity='0.55'/><circle cx='246' cy='44' r='0.9' opacity='0.5'/><circle cx='292' cy='28' r='1.3' opacity='0.6'/><circle cx='338' cy='58' r='0.8' opacity='0.45'/><circle cx='384' cy='18' r='1.0' opacity='0.55'/><circle cx='430' cy='48' r='1.1' opacity='0.55'/><circle cx='478' cy='25' r='0.9' opacity='0.5'/><circle cx='522' cy='52' r='1.2' opacity='0.6'/><circle cx='14' cy='98' r='0.9' opacity='0.5'/><circle cx='58' cy='128' r='1.2' opacity='0.6'/><circle cx='104' cy='112' r='0.8' opacity='0.45'/><circle cx='148' cy='142' r='1.0' opacity='0.55'/><circle cx='194' cy='118' r='1.3' opacity='0.6'/><circle cx='238' cy='148' r='0.9' opacity='0.5'/><circle cx='284' cy='122' r='1.1' opacity='0.55'/><circle cx='328' cy='152' r='0.8' opacity='0.45'/><circle cx='374' cy='128' r='1.2' opacity='0.6'/><circle cx='418' cy='148' r='1.0' opacity='0.55'/><circle cx='464' cy='118' r='0.9' opacity='0.5'/><circle cx='510' cy='142' r='1.1' opacity='0.55'/><circle cx='22' cy='192' r='1.2' opacity='0.6'/><circle cx='66' cy='218' r='0.9' opacity='0.5'/><circle cx='112' cy='202' r='1.0' opacity='0.55'/><circle cx='158' cy='232' r='0.8' opacity='0.45'/><circle cx='204' cy='208' r='1.3' opacity='0.6'/><circle cx='248' cy='238' r='0.9' opacity='0.5'/><circle cx='294' cy='212' r='1.1' opacity='0.55'/><circle cx='340' cy='242' r='1.0' opacity='0.55'/><circle cx='386' cy='218' r='1.2' opacity='0.6'/><circle cx='432' cy='248' r='0.8' opacity='0.45'/><circle cx='478' cy='208' r='1.1' opacity='0.55'/><circle cx='524' cy='238' r='0.9' opacity='0.5'/><circle cx='28' cy='282' r='1.0' opacity='0.55'/><circle cx='74' cy='312' r='1.3' opacity='0.6'/><circle cx='118' cy='292' r='0.9' opacity='0.5'/><circle cx='164' cy='322' r='1.1' opacity='0.55'/><circle cx='208' cy='298' r='0.8' opacity='0.45'/><circle cx='254' cy='328' r='1.2' opacity='0.6'/><circle cx='298' cy='302' r='0.9' opacity='0.5'/><circle cx='344' cy='332' r='1.0' opacity='0.55'/><circle cx='388' cy='308' r='1.3' opacity='0.6'/><circle cx='434' cy='338' r='0.9' opacity='0.5'/><circle cx='480' cy='312' r='1.1' opacity='0.55'/><circle cx='524' cy='342' r='1.0' opacity='0.55'/></g></svg>");
  background-size: 720px 480px, 540px 360px;
  background-position: 0 0, 60px 40px;
  opacity: 1;
  animation: fx-storm-fall 11s linear infinite;
  /* slight blur on near layer feels like flakes are passing the camera */
  filter: blur(0.3px);
}

/* Two layers fall at different vertical speeds → parallax + decorrelation */
@keyframes fx-storm-fall {
  from { background-position: 0   0,    60px  40px; }
  to   { background-position: -90px 480px, 30px 360px; }
}

/* ============================================================
   EARTHQUAKE — frequent, clearly felt tremor
   Every 8s, ~900ms shake, up to 3px
   ============================================================ */
.fx-quake-target {
  animation: fx-quake-tremor 8s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
}

@keyframes fx-quake-tremor {
  0%, 88%, 100% { transform: translate(0, 0); }

  88.5% { transform: translate(-2px, 1px); }
  89%   { transform: translate(2px, -1px); }
  89.5% { transform: translate(-3px, 1.5px); }
  90%   { transform: translate(3px, -1px); }
  90.5% { transform: translate(-2px, 1.5px); }
  91%   { transform: translate(2px, -1.5px); }
  91.5% { transform: translate(-2px, 1px); }
  92%   { transform: translate(1.5px, -1px); }
  92.5% { transform: translate(-1px, 0.5px); }
  93%   { transform: translate(1px, 0); }
  93.5% { transform: translate(-0.5px, 0); }
}

/* Visible hairline fault hinted at the bottom edge */
.fx-quake-fault {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 0;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(61, 58, 54, 0.25) 14%,
      rgba(61, 58, 54, 0.45) 30%,
      rgba(61, 58, 54, 0.10) 31%,
      rgba(61, 58, 54, 0.40) 48%,
      rgba(61, 58, 54, 0.08) 49%,
      rgba(61, 58, 54, 0.42) 70%,
      rgba(61, 58, 54, 0.15) 86%,
      transparent 100%
    );
  opacity: 1;
}

/* ============================================================
   Reduced motion — every effect off
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .fx-flood-line,
  .fx-fire-glow,
  .fx-fire-haze,
  .fx-fire-ember,
  .fx-storm-wind,
  .fx-storm-flakes,
  .fx-quake-target {
    animation: none !important;
  }
}