/**
 * Everlasting Flame - Main Stylesheet
 * A dark, atmospheric visual experience with floating text and flame effects.
 */

/* Import Rubik Lines font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Rubik+Lines&display=swap');

/* --------------------------------------
   CSS Variables / Custom Properties
   -------------------------------------- */
:root {
  /* Base colors */
  --color-black: #000000;
  --color-background: #0a0a0a; /* Very dark grey, almost black background */
  
  /* Flame color palette - sickly, smoldering oranges/reds */
  --color-flame-core: #8C3B00;      /* Deep, smoldering orange/red for the flame's heart */
  --color-flame-glow: #B35A1F;      /* Slightly brighter, dim sickly orange for the glow */
  --color-flame-outer-glow: #D97B3F; /* Fainter, more diffused sickly orange */
  
  /* Animation timing */
  --flesh-wall-pulse-duration: 7s;
  --flame-pulse-duration: 1s;
}

/* --------------------------------------
   Base/Reset Styles
   -------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden; /* Prevent default scrollbars, using custom animation instead */
}

body {
  background-color: var(--color-background);
  font-family: sans-serif;
  line-height: 1.6;
}

/* @keyframes subtleDrift - REMOVED */
/* No longer needed as we are using a static generated image for the background */
/*
@keyframes subtleDrift {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 0% 200%; 
  }
}
*/

/* --------------------------------------
   Animation Keyframes
   -------------------------------------- */
/* Flesh wall pulsing animation */
@keyframes fleshWallPulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.02);
    filter: brightness(1.05);
  }
}

/* Flame pulsing animation */
@keyframes pulse-flame {
  0%, 100% {
    box-shadow: 
      0 0 20px 10px var(--color-flame-outer-glow),
      0 0 40px 20px var(--color-flame-glow),
      inset 0 0 10px 5px var(--color-flame-core);
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    box-shadow: 
      0 0 25px 12px var(--color-flame-outer-glow), /* Slightly larger outer glow */
      0 0 45px 24px var(--color-flame-glow),       /* Slightly larger inner glow */
      inset 0 0 12px 6px var(--color-flame-core);  /* Slightly more intense core */
    transform: translate(-50%, -50%) scale(1.03);  /* Subtle scale pulse */
  }
}

/* --------------------------------------
   Main Container
   -------------------------------------- */
#main-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Ensures content clipping for infinite scroll illusion */
  
  /* Background styling */
  background-color: var(--color-background); /* Fallback color */
  background-image: url('img/flesh_wall_background.jpg'); /* Fallback for browsers that don't support WebP */
  background-image: url('img/flesh_wall_background.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* animation: subtleDrift 90s linear infinite; - REMOVED */
}

/* Pulsing flesh wall overlay effect */
#main-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* Duplicate the background image for the pulsing effect */
  background-image: url('img/flesh_wall_background.jpg'); /* Fallback for browsers that don't support WebP */
  background-image: url('img/flesh_wall_background.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  
  opacity: 0.7;
  z-index: 0;
  animation: fleshWallPulse var(--flesh-wall-pulse-duration) infinite ease-in-out;
  pointer-events: none; /* Allow clicks to pass through to elements below */
}

/* --------------------------------------
   Flame Element
   -------------------------------------- */
#flame-element {
  /* Positioning */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;
  border-radius: 50%; /* Circular shape */
  z-index: 10; /* Above the pulsing overlay */
  
  /* Radial gradient for the flame core */
  background: radial-gradient(
    ellipse at center,
    var(--color-flame-core) 0%,
    var(--color-flame-glow) 40%,
    rgba(0, 0, 0, 0) 70% /* Fade to transparent to blend with shadows */
  );

  /* Layered box-shadows for ember-like glow */
  box-shadow: 
    0 0 20px 10px var(--color-flame-outer-glow), /* Outer, diffused glow */
    0 0 40px 20px var(--color-flame-glow),       /* Inner, more intense glow */
    inset 0 0 10px 5px var(--color-flame-core);  /* Subtle core emphasis */

  /* Animation */
  animation: pulse-flame var(--flame-pulse-duration) infinite ease-in-out;
}

/* --------------------------------------
   Text Snippets
   -------------------------------------- */
.text-snippet {
  /* Positioning */
  position: absolute; /* For JS-controlled positioning and parallax */
  
  /* Typography */
  font-family: 'Rubik Lines', cursive; /* Google Font replacement */
  text-transform: uppercase; /* Creates stark, declarative feel */
  font-size: 2.5rem;
  letter-spacing: 0.08em; /* Spacing for uppercase starkness */
  white-space: nowrap; /* Keep snippet on a single line */
  
  /* Visual styling */
  color: #9a9a9a; /* Lighter, desaturated gray for readability */
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7); /* Eroding, etched feel */
  opacity: 0.85; /* Slightly faded for ethereal/eroding effect */
  
  /* Interaction */
  pointer-events: none; /* Text should not interfere with mouse events */
  z-index: 5; /* Above pulsing overlay but below flame */
}