/* ===========================
   AEVUM — Shared Styles
   =========================== */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --void: #0d0b09;
  --char: #151110;
  --iron: #1e1915;
  --scorched: #2a2018;
  --ember: #c4541a;
  --flame: #e8731a;
  --bone: #c9b89a;
  --parchment: #e2d4bc;
  --ash: #8d7e6d;
  --soot: #3d3329;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Noise texture overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* Ember vignette from bottom + fire source glow */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 15% at 50% 105%, rgba(196, 84, 26, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 120% 60% at 50% 110%, rgba(196, 84, 26, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 40%, rgba(10, 8, 6, 0.7) 100%);
}

/* Silhouette horizon — jagged terrain at the bottom edge */
.horizon {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  z-index: 96;
  pointer-events: none;
  background: var(--void);
  will-change: transform;
  -webkit-mask-image: polygon(
    0% 100%,
    0% 65%, 3% 58%, 5% 62%, 8% 45%, 10% 50%, 13% 38%,
    15% 42%, 18% 30%, 20% 35%, 22% 28%, 25% 40%,
    27% 32%, 30% 45%, 32% 38%, 35% 50%, 37% 42%,
    40% 55%, 42% 48%, 45% 35%, 47% 40%, 50% 30%,
    52% 38%, 55% 45%, 57% 40%, 60% 52%, 62% 42%,
    65% 55%, 67% 48%, 70% 38%, 72% 45%, 75% 35%,
    78% 42%, 80% 50%, 82% 40%, 85% 55%, 87% 45%,
    90% 52%, 92% 58%, 95% 48%, 97% 55%, 100% 60%,
    100% 100%
  );
  mask-image: polygon(
    0% 100%,
    0% 65%, 3% 58%, 5% 62%, 8% 45%, 10% 50%, 13% 38%,
    15% 42%, 18% 30%, 20% 35%, 22% 28%, 25% 40%,
    27% 32%, 30% 45%, 32% 38%, 35% 50%, 37% 42%,
    40% 55%, 42% 48%, 45% 35%, 47% 40%, 50% 30%,
    52% 38%, 55% 45%, 57% 40%, 60% 52%, 62% 42%,
    65% 55%, 67% 48%, 70% 38%, 72% 45%, 75% 35%,
    78% 42%, 80% 50%, 82% 40%, 85% 55%, 87% 45%,
    90% 52%, 92% 58%, 95% 48%, 97% 55%, 100% 60%,
    100% 100%
  );
  clip-path: polygon(
    0% 100%,
    0% 65%, 3% 58%, 5% 62%, 8% 45%, 10% 50%, 13% 38%,
    15% 42%, 18% 30%, 20% 35%, 22% 28%, 25% 40%,
    27% 32%, 30% 45%, 32% 38%, 35% 50%, 37% 42%,
    40% 55%, 42% 48%, 45% 35%, 47% 40%, 50% 30%,
    52% 38%, 55% 45%, 57% 40%, 60% 52%, 62% 42%,
    65% 55%, 67% 48%, 70% 38%, 72% 45%, 75% 35%,
    78% 42%, 80% 50%, 82% 40%, 85% 55%, 87% 45%,
    90% 52%, 92% 58%, 95% 48%, 97% 55%, 100% 60%,
    100% 100%
  );
}

/* Heat shimmer — subtle distortion above the fire */
.heat-shimmer {
  position: fixed;
  bottom: 0;
  left: 25%;
  right: 25%;
  height: 20vh;
  z-index: 95;
  pointer-events: none;
  will-change: transform, filter;
  animation: shimmer 3s ease-in-out infinite;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 100%);
  mask-image: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 100%);
}

@keyframes shimmer {
  0%, 100% {
    filter: blur(0px);
    transform: scaleY(1);
  }
  25% {
    filter: blur(0.5px);
    transform: scaleY(1.002);
  }
  50% {
    filter: blur(0.3px);
    transform: scaleY(0.998);
  }
  75% {
    filter: blur(0.6px);
    transform: scaleY(1.003);
  }
}

/* Animated fire glow at the base — layered box-shadows with erratic flicker */
.fire-glow {
  position: fixed;
  bottom: -70px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  z-index: 97;
  pointer-events: none;
  will-change: transform, opacity;
  background: rgba(232, 115, 26, 0.6);
  box-shadow:
    0 0 100px 60px rgba(196, 84, 26, 0.25),
    0 0 200px 110px rgba(196, 84, 26, 0.15),
    0 0 320px 180px rgba(196, 84, 26, 0.08),
    0 0 500px 260px rgba(196, 84, 26, 0.04);
  animation: fire-flicker 8s linear infinite;
}

/* Second glow layer — offset timing for organic feel */
.fire-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow:
    -40px -10px 130px 70px rgba(232, 115, 26, 0.12),
    40px -10px 130px 70px rgba(232, 115, 26, 0.1);
  animation: fire-flicker-side 6s linear infinite;
}

/* Third glow — tight hot core */
.fire-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow:
    0 0 60px 30px rgba(232, 115, 26, 0.3),
    0 0 110px 50px rgba(196, 84, 26, 0.15);
  animation: fire-flicker-core 5s linear infinite;
}

/* Irregular flicker — clustered keyframes for erratic jumps */
@keyframes fire-flicker {
  0%       { opacity: 0.8; }
  5%       { opacity: 1; }
  8%       { opacity: 0.6; }
  13%      { opacity: 0.9; }
  16%      { opacity: 0.7; }
  20%      { opacity: 1; }
  27%      { opacity: 0.85; }
  30%      { opacity: 0.65; }
  33%      { opacity: 0.95; }
  40%      { opacity: 0.75; }
  45%      { opacity: 1; }
  48%      { opacity: 0.6; }
  52%      { opacity: 0.9; }
  58%      { opacity: 0.7; }
  62%      { opacity: 1; }
  67%      { opacity: 0.8; }
  72%      { opacity: 0.55; }
  76%      { opacity: 0.95; }
  82%      { opacity: 0.7; }
  87%      { opacity: 1; }
  92%      { opacity: 0.75; }
  96%      { opacity: 0.9; }
  100%     { opacity: 0.8; }
}

/* Side glows sway left-right */
@keyframes fire-flicker-side {
  0%       { opacity: 0.7; transform: translateX(-3px); }
  12%      { opacity: 1; transform: translateX(2px); }
  25%      { opacity: 0.6; transform: translateX(-5px); }
  38%      { opacity: 0.9; transform: translateX(4px); }
  50%      { opacity: 0.5; transform: translateX(-2px); }
  63%      { opacity: 1; transform: translateX(3px); }
  75%      { opacity: 0.7; transform: translateX(-4px); }
  88%      { opacity: 0.9; transform: translateX(1px); }
  100%     { opacity: 0.7; transform: translateX(-3px); }
}

/* Core pulses tighter and faster */
@keyframes fire-flicker-core {
  0%       { opacity: 0.6; }
  7%       { opacity: 1; }
  15%      { opacity: 0.4; }
  22%      { opacity: 0.9; }
  30%      { opacity: 0.5; }
  40%      { opacity: 1; }
  50%      { opacity: 0.6; }
  57%      { opacity: 0.95; }
  65%      { opacity: 0.45; }
  75%      { opacity: 1; }
  85%      { opacity: 0.55; }
  92%      { opacity: 0.9; }
  100%     { opacity: 0.6; }
}

/* Subtle ember particles */
.embers {
  position: fixed;
  inset: -60px;
  z-index: 98;
  pointer-events: none;
  overflow: hidden;
  will-change: transform;
}

.ember-particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--ember);
  border-radius: 50%;
  opacity: 0;
  animation: float-up linear infinite;
  --drift: 0px;
}

@keyframes float-up {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(0) scale(1);
  }
  5% {
    opacity: 0.9;
  }
  25% {
    opacity: 0.7;
    transform: translateY(-25vh) translateX(calc(var(--drift) * 0.4)) scale(0.85);
  }
  50% {
    opacity: 0.35;
    transform: translateY(-50vh) translateX(var(--drift)) scale(0.6);
  }
  100% {
    opacity: 0;
    transform: translateY(-105vh) translateX(calc(var(--drift) * 0.7)) scale(0.15);
  }
}

/* Smoke wisps — warm haze rising from the same source as embers */
.smoke-particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(60% 60% at 50% 50%,
    rgba(100, 80, 60, 0.6) 0%,
    rgba(80, 65, 50, 0) 65%);
  filter: blur(var(--smoke-blur-start, 5px));
  will-change: transform, opacity, filter;
  animation: smoke-rise ease-out infinite;
  --smoke-dx: 0px;
  --smoke-spin: 0deg;
  --smoke-scale-end: 2;
  --smoke-blur-start: 5px;
  --smoke-blur-end: 14px;
}

/* Pseudo-elements create overlapping blobs for organic shape */
.smoke-particle::before,
.smoke-particle::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  inset: 0;
  background: radial-gradient(65% 65% at 50% 50%,
    rgba(100, 80, 60, 0.5) 0%,
    rgba(80, 65, 50, 0) 68%);
}

.smoke-particle::before {
  width: 75%;
  height: 75%;
  left: -18%;
  top: 12%;
}

.smoke-particle::after {
  width: 60%;
  height: 60%;
  right: -12%;
  top: -8%;
}

@keyframes smoke-rise {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5) rotate(0deg);
    filter: blur(var(--smoke-blur-start, 5px));
  }
  8% {
    opacity: var(--smoke-opacity, 0.2);
  }
  40% {
    opacity: calc(var(--smoke-opacity, 0.2) * 0.5);
    transform: translateY(-35vh) translateX(var(--smoke-dx))
               scale(calc(var(--smoke-scale-end) * 0.6))
               rotate(calc(var(--smoke-spin) * 0.5));
    filter: blur(calc((var(--smoke-blur-start, 5px) + var(--smoke-blur-end, 14px)) / 2));
  }
  100% {
    opacity: 0;
    transform: translateY(-70vh)
               translateX(calc(var(--smoke-dx) * 1.5))
               scale(var(--smoke-scale-end))
               rotate(var(--smoke-spin));
    filter: blur(var(--smoke-blur-end, 14px));
  }
}

/* Falling ash — tiny flecks drifting down, the aftermath of fire */
.ash-particle {
  position: absolute;
  width: 1px;
  height: 1px;
  background: var(--ash);
  border-radius: 50%;
  opacity: 0;
  animation: ash-fall linear infinite;
  --ash-sway: 0px;
}

@keyframes ash-fall {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  10% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.25;
    transform: translateY(50vh) translateX(var(--ash-sway)) rotate(180deg);
  }
  100% {
    opacity: 0;
    transform: translateY(105vh) translateX(calc(var(--ash-sway) * -0.6)) rotate(360deg);
  }
}

/* Dust motes — slow-drifting particles catching ambient light */
.dust-mote {
  position: absolute;
  width: 1px;
  height: 1px;
  background: var(--bone);
  border-radius: 50%;
  opacity: 0;
  animation: mote-drift linear infinite;
  --mote-x: 0px;
  --mote-y: 0px;
}

@keyframes mote-drift {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  20% {
    opacity: var(--mote-opacity, 0.25);
  }
  50% {
    opacity: var(--mote-opacity, 0.25);
    transform: translate(var(--mote-x), var(--mote-y));
  }
  80% {
    opacity: var(--mote-opacity, 0.25);
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--mote-x) * -0.3), calc(var(--mote-y) + 20px));
  }
}

/* Scar keyframes (shared between pages) */
@keyframes scar-crack {
  to { transform: scaleX(1); }
}

@keyframes ember-dot {
  to { transform: translateX(-50%) scale(1); }
}

/* Ember sweep on buttons */
@keyframes ember-sweep {
  to { left: 120%; }
}

/* Reveal animation */
@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}