/* effects.css — Titan Realms FX (embers/ash/dust/runes/heat-haze/stage glow/footer glow)
   FULL FILE — drop into: assets/css/effects.css
*/

:root{
  --fx-ember: rgba(255, 60, 60, 0.95);
  --fx-ember2: rgba(255, 120, 90, 0.65);

  --fx-ash: rgba(230, 230, 240, 0.30);
  --fx-dust: rgba(255, 255, 255, 0.18);

  --fx-rune: rgba(255, 80, 80, 0.22);
}

/* ==========================
   Stage overlay stack
   ========================== */

.stage__frame{
  position: relative;
  isolation: isolate;
}

/* Ambient breathing edge light */
.stage__frame::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  pointer-events:none;
  z-index: 2;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 0 30px rgba(255, 60, 60, .16),
    0 0 110px rgba(255, 60, 60, .10);
  opacity:.82;
  animation: trStageBreath 5.6s ease-in-out infinite;
}

@keyframes trStageBreath{
  0%   { opacity:.58; filter: brightness(1.00); }
  50%  { opacity:1.00; filter: brightness(1.10); }
  100% { opacity:.58; filter: brightness(1.00); }
}

/* FX layer sits ABOVE tiles */
.fx-layer{
  position:absolute;
  inset: 0;
  pointer-events:none;
  overflow:hidden;
  border-radius: inherit;
  z-index: 999;
}

/* Dust/ash veil */
.fx-veil{
  position:absolute;
  inset: 0;
  pointer-events:none;
  z-index: 1001;
  opacity: .30;
  background:
    radial-gradient(1100px 700px at 30% 20%, rgba(255,255,255,.12), transparent 62%),
    radial-gradient(900px 650px at 70% 80%, rgba(255,255,255,.10), transparent 65%),
    linear-gradient(180deg, transparent, rgba(0,0,0,.22));
  mix-blend-mode: screen;
  animation: trVeil 9.5s ease-in-out infinite;
}

@keyframes trVeil{
  0%   { opacity:.18; }
  50%  { opacity:.34; }
  100% { opacity:.18; }
}

/* Heat-haze band near the bottom (less “bubble perfect”) */
.fx-haze{
  position:absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  pointer-events:none;
  z-index: 1002;
  opacity: .36;
  background:
    radial-gradient(1200px 260px at 50% 108%, rgba(255,60,60,.22), transparent 68%),
    radial-gradient(980px 220px at 58% 110%, rgba(255,120,90,.12), transparent 72%),
    radial-gradient(1400px 320px at 30% 110%, rgba(255,60,60,.10), transparent 74%),
    linear-gradient(180deg, transparent, rgba(0,0,0,.14));
  filter: blur(1.35px) saturate(1.10);
  animation: trHaze 4.6s ease-in-out infinite;
}

@keyframes trHaze{
  0%   { transform: translateY(0px) translateX(0px); opacity: .22; }
  50%  { transform: translateY(-5px) translateX(10px); opacity: .44; }
  100% { transform: translateY(0px) translateX(0px); opacity: .22; }
}

/* ==========================
   Particles
   ========================== */

.fx-p{
  position:absolute;
  border-radius: 999px;
  will-change: transform, opacity;
  pointer-events:none;
}

/* Embers */
.fx-ember{
  width: 6px;
  height: 6px;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.30), transparent 52%),
    radial-gradient(circle at 50% 60%, var(--fx-ember), transparent 70%);
  opacity: .7;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 6px rgba(255,60,60,.34))
    drop-shadow(0 0 14px rgba(255,60,60,.18));
}

/* Sparks */
.fx-spark{
  width: 14px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--fx-ember), transparent);
  opacity: .55;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 10px rgba(255,60,60,.45));
}

/* Ash (make clearly visible now) */
.fx-ash{
  width: 5px;
  height: 5px;
  background:
    radial-gradient(circle at 45% 45%, rgba(255,255,255,.45), transparent 70%);
  opacity: .42;
  mix-blend-mode: screen;
  filter: blur(.2px);
}

/* Dust motes */
.fx-dust{
  width: 3px;
  height: 3px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.50), transparent 70%);
  opacity: .20;
  mix-blend-mode: screen;
  filter: blur(.25px);
}

/* ==========================
   RUNES — etched core + faint trail
   ========================== */

/* Main rune glyph */
.fx-rune{
  width: auto;
  height: auto;
  border-radius: 0;

  font-size: 28px;
  font-weight: 1100;
  letter-spacing: .7px;

  color: rgba(255, 110, 110, .78);

  text-shadow:
    0 0 2px rgba(255,255,255,.14),
    0 0 10px rgba(255,60,60,.38),
    0 0 22px rgba(255,60,60,.26),
    0 0 40px rgba(255,60,60,.14),
    0 2px 18px rgba(0,0,0,.78);

  opacity: 0;
  transform: translate(0,0) scale(1);
  mix-blend-mode: screen;

  filter:
    blur(.03px)
    saturate(1.15)
    drop-shadow(0 0 10px rgba(255,60,60,.22))
    drop-shadow(0 0 22px rgba(255,60,60,.14));
}

/* Ghost trail clones (created by JS) */
.fx-rune-ghost{
  position:absolute;
  width:auto;
  height:auto;
  border-radius:0;
  pointer-events:none;

  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;

  color: rgba(255, 90, 90, .18);
  text-shadow:
    0 0 12px rgba(255,60,60,.14),
    0 2px 18px rgba(0,0,0,.60);

  mix-blend-mode: screen;
  filter: blur(.35px) saturate(1.05);
  will-change: transform, opacity;
}

/* ==========================
   Footer glow (brighter)
   ========================== */

.side__footer{
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.side__footer::before{
  content:"";
  position:absolute;
  inset:-16px;
  border-radius: 18px;
  pointer-events:none;
  z-index: 0;
  background:
    radial-gradient(280px 90px at 20% 30%, rgba(255,60,60,.60), transparent 72%),
    radial-gradient(360px 120px at 80% 70%, rgba(255,60,60,.50), transparent 75%),
    radial-gradient(860px 280px at 50% 70%, rgba(255,60,60,.24), transparent 70%);
  filter: blur(2.4px);
  opacity: .98;
  animation: trFooterGlow 2.0s ease-in-out infinite;
}

@keyframes trFooterGlow{
  0%   { opacity:.72; transform: translateY(0); }
  50%  { opacity:1.00; transform: translateY(-1px); }
  100% { opacity:.72; transform: translateY(0); }
}

.side__footerTop,
.side__footerLinks{ position: relative; z-index: 2; }

.side__footerTop,
.side__footerLinks,
.side__copy,
.side__mark,
.side__dot,
.side__link{
  color: rgba(255,255,255,.95) !important;
  text-shadow:
    0 0 18px rgba(255,60,60,.28),
    0 2px 12px rgba(0,0,0,.70);
}

.side__link{
  text-decoration: none;
  border-bottom: 1px solid rgba(255,60,60,.28);
  padding-bottom: 1px;
}

.side__link:hover{
  border-bottom-color: rgba(255,60,60,.70);
  text-shadow:
    0 0 22px rgba(255,60,60,.46),
    0 2px 12px rgba(0,0,0,.70);
}

/* Stage “burn” flash hook */
.stage__frame.fx-burn{
  animation: trBurn 0.55s ease-out 1;
}

@keyframes trBurn{
  0%{ filter: brightness(1.00); }
  35%{ filter: brightness(1.14); }
  100%{ filter: brightness(1.00); }
}