/* ===================================
   SELF-HOSTED METAL MANIA FONT
   =================================== */
@font-face {
  font-family: 'Metal Mania';
  src: url('metal-mania.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ===================================
   BODY & BACKGROUND IMAGE
   =================================== */

body {
  background-color: #000000;
  background-image: url('smin.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: #ffffff;
  font-family: Verdana, Geneva, sans-serif;
  margin: 0;
  padding: 20px;
  position: relative;
}

/* ✅ Dark Overlay for Readability */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: -1;
  pointer-events: none;
}

/* ===================================
   HEADINGS - Metal Mania
   =================================== */

h1, h2, h3 {
  font-family: 'Metal Mania', cursive !important;
  color: #ffffff;
  text-shadow: 1px 1px 3px rgba(255,255,255,0.3);
  font-weight: normal;
  text-align: center;
  letter-spacing: 1.5px;
  line-height: 1.5;
  margin-top: 0;
}

h1 { font-size: 3.5em; letter-spacing: 2px; }
h2 { font-size: 2.3em; letter-spacing: 1.5px; }
h3 { font-size: 1.7em; letter-spacing: 1px; }

/* ===================================
   PARAGRAPHS & TEXT
   =================================== */

p, li, td, th, label, input, textarea {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600; /* ✅ Semi-bold */
  color: #ffffff; /* ✅ Pure white */
  font-size: 1.5em; /* ✅ Increased from 1.35em */
  line-height: 2; /* ✅ Slightly more spacing for larger text */
  letter-spacing: 0.3px;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8); /* ✅ Subtle shadow for contrast */
}
/* ===================================
   LINKS
   =================================== */

a {
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px dotted #666;
  transition: all 0.2s;
}
a:hover {
  color: #ffffff;
  border-bottom: 1px solid #fff;
  text-decoration: none;
}

/* ===================================
   GALLERY GRID
   =================================== */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
  max-width: 1200px;
  margin: 0 auto;
}
.gallery img {
  width: 100%;
  height: 300px;
  object-fit: contain;
  background-color: #000000;
  border: none; /* ✅ Removed red border */
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s;
  display: block;
}
.gallery img:hover {
  transform: scale(1.02);
}

/* ===================================
   NAVIGATION
   =================================== */

.nav-container { text-align: center; margin: 30px 0; }

.btn {
  display: inline-block;
  padding: 10px 20px;
  background: #000000;
  color: #ffffff;
  text-decoration: none;
  border-radius: 5px;
  margin: 0 10px;
  font-weight: bold;
  font-family: Verdana, Geneva, sans-serif;
  border: none; /* ✅ Removed red border */
}
.btn:hover {
  background: #111111;
}

.back-link {
  display: inline-block;
  margin-bottom: 20px;
  text-decoration: none;
  color: #cccccc;
  font-weight: bold;
  font-family: Verdana, Geneva, sans-serif;
  border-bottom: none;
}
.back-link:hover { color: #ffffff; }

/* ===================================
   LIGHTBOX
   =================================== */

.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.95);
  justify-content: center;
  align-items: center;
}
.modal-content {
  max-width: 95%;
  max-height: 90vh;
  border: none; /* ✅ Removed red border */
  border-radius: 4px;
  display: block;
}
.close {
  position: absolute;
  top: 15px; right: 25px;
  color: #ffffff;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
  font-family: 'Metal Mania', cursive !important;
  z-index: 10000;
}
.close:hover { color: #cccccc; }

/* ===================================
   BLOG / NEWS
   =================================== */

.blog-preview-container {
  max-width: 800px;
  margin: 50px auto;
  padding: 0 20px;
}
.blog-post-preview {
  background: #000000;
  border: none; /* ✅ Removed red border */
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 25px;
  transition: transform 0.2s;
}
.blog-post-preview:hover {
  transform: translateY(-2px);
}
.blog-post-preview img {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border-radius: 6px;
  border: none; /* ✅ Removed red border */
  margin-bottom: 15px;
}
.blog-post-preview h3 {
  font-family: 'Metal Mania', cursive !important;
  margin: 0 0 8px 0;
  font-size: 1.6em;
  text-align: left;
}
.blog-post-date {
  color: #666;
  font-size: 0.85em;
  margin-bottom: 12px;
  font-family: Verdana, sans-serif;
}
.blog-post-preview p {
  color: #ccc;
  line-height: 1.6;
  margin-bottom: 15px;
  text-align: left;
}
.read-more-btn {
  display: inline-block;
  padding: 8px 16px;
  background: #000000;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  border: none; /* ✅ Removed red border */
  font-family: Verdana, sans-serif;
  font-size: 0.9em;
  transition: all 0.2s;
}
.read-more-btn:hover {
  background: #111111;
}

.blog-full-container {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
}
.blog-post-full {
  background: #000000;
  border: none; /* ✅ Removed red border */
  border-radius: 10px;
  padding: 25px;
  margin-bottom: 30px;
}
.blog-post-full img {
  width: 100%;
  max-height: 500px;
  object-fit: cover;
  border-radius: 6px;
  border: none; /* ✅ Removed red border */
  margin: 15px 0;
}
.blog-post-full h3 {
  font-family: 'Metal Mania', cursive !important;
  margin: 0 0 8px 0;
  font-size: 1.8em;
  text-align: left;
}
.blog-post-full p {
  color: #ccc;
  line-height: 1.7;
  text-align: left;
}
.no-posts {
  text-align: center;
  color: #666;
  padding: 40px;
  font-style: italic;
}

/* ===================================
   POETRY
   =================================== */

.poetry-container {
  max-width: 700px;
  margin: 40px auto;
  padding: 0 20px;
}
.poem-card {
  background: #000000;
  border: none; /* ✅ Removed red border */
  border-radius: 10px;
  padding: 30px;
  margin-bottom: 30px;
  transition: transform 0.2s;
}
.poem-card:hover {
  transform: translateY(-2px);
}
.poem-card h3 {
  font-family: 'Metal Mania', cursive !important;
  margin: 0 0 8px 0;
  font-size: 1.8em;
  text-align: center;
}
.poem-date {
  text-align: center;
  color: #666;
  font-size: 0.85em;
  margin-bottom: 25px;
  font-family: Verdana, sans-serif;
}
.poem-text {
  color: #ccc;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 1.1em;
  line-height: 2;
  white-space: pre-line;
  text-align: center;
  margin: 0;
}
.poem-divider {
  text-align: center;
  color: #444; /* ✅ Changed from red to dark gray */
  font-size: 1.5em;
  margin: 30px 0;
}

/* ===================================
   CHAT & INTERESTS (HOME)
   =================================== */

.gothic-chat-wrapper {
  max-width: 520px;
  margin: 50px auto 30px;
  background: #000000;
  border: none; /* ✅ Removed red border */
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.gothic-chat-wrapper h3 {
  font-family: 'Metal Mania', cursive !important;
  color: #fff;
  text-align: center;
  margin: 0 0 10px 0;
  font-size: 1.8em;
  text-shadow: 1px 1px 3px rgba(255,255,255,0.2);
}
.gothic-chat-wrapper p.chat-note {
  text-align: center;
  color: #999;
  font-size: 0.9em;
  margin: 0 0 15px 0;
  font-family: Verdana, sans-serif;
}
.gothic-chat-wrapper iframe {
  border-radius: 6px !important;
  display: block;
  width: 100% !important;
}

h2 + ul {
  display: table;
  margin: 20px auto;
  padding: 0;
  list-style-position: inside;
  text-align: left;
}
h2 + ul li { margin: 8px 0; }

/* ===================================
   CONTENT CONTAINER
   =================================== */

.content {
  background: #000000;
  max-width: 800px;
  margin: 50px auto;
  padding: 20px;
  border-radius: 10px;
  border: none; /* ✅ Removed red border */
}

/* ===================================
   MOBILE OPTIMIZATION
   =================================== */

@media (max-width: 768px) {
  body::before {
    background: rgba(0, 0, 0, 0.5);
  }
}

/* ===================================
   GLITCH EFFECT (BEHIND TEXT - MORE VISIBLE)
   =================================== */

h1[data-text], h2[data-text], h3[data-text] {
  position: relative;
  display: block !important;
  text-align: center !important;
  z-index: 10;
}

/* Multiple glitch layers - BEHIND text */
h1[data-text]::before, h1[data-text]::after,
h2[data-text]::before, h2[data-text]::after,
h3[data-text]::before, h3[data-text]::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: -1;
}

/* Red glitch layer - top slices */
h1[data-text]::before,
h2[data-text]::before,
h3[data-text]::before {
  color: #ff0000;
  opacity: 0.8;
  animation: glitch-real-1 2s infinite linear alternate-reverse;
  clip-path: polygon(0 0, 100% 0, 100% 15%, 0 15%, 0 20%, 100% 20%, 100% 35%, 0 35%, 0 50%, 100% 50%, 100% 60%, 0 60%, 0 75%, 100% 75%, 100% 85%, 0 85%);
}

/* Second red layer - different slices, offset timing */
h1[data-text]::after,
h2[data-text]::after,
h3[data-text]::after {
  color: #cc0000;
  opacity: 0.7;
  animation: glitch-real-2 1.8s infinite linear alternate-reverse;
  clip-path: polygon(0 10%, 100% 10%, 100% 25%, 0 25%, 0 40%, 100% 40%, 100% 55%, 0 55%, 0 70%, 100% 70%, 100% 90%, 0 90%);
}

@keyframes glitch-real-1 {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3px, 0); }
  40% { transform: translate(3px, 0); }
  60% { transform: translate(-2px, 0); }
  80% { transform: translate(2px, 0); }
  100% { transform: translate(0, 0); }
}

@keyframes glitch-real-2 {
  0% { transform: translate(0, 0); }
  20% { transform: translate(3px, 0); }
  40% { transform: translate(-3px, 0); }
  60% { transform: translate(2px, 0); }
  80% { transform: translate(-2px, 0); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  h1[data-text]::before, h1[data-text]::after,
  h2[data-text]::before, h2[data-text]::after,
  h3[data-text]::before, h3[data-text]::after {
    display: none !important;
  }
}

/* ===================================
   WELCOME TEXT SPACING
   =================================== */

.welcome-text {
  text-align: center !important;
  line-height: 1.8;
  margin-bottom: 30px;
  max-width: 700px; /* ✅ Constrain width for readability */
  margin-left: auto; /* ✅ Center the constrained block */
  margin-right: auto;
}

/* ===================================
   ACTIVISM BUTTONS (INFINITE SCROLL RIGHT)
   =================================== */

.activism-container {
  max-width: 100%;
  margin: 50px auto;
  padding: 20px 0;
  overflow: hidden;
  position: relative;
}

.activism-track {
  display: flex;
  gap: 30px;
  width: max-content;
  animation: scroll-right 30s linear infinite; /* ✅ Right scroll */
}

.activism-track:hover {
  animation-play-state: paused;
}

.activism-btn {
  width: auto !important;
  max-width: 150px !important;
  height: auto !important;
  border: none;
  border-radius: 8px;
  transition: all 0.3s;
  filter: brightness(0.9);
  display: block !important;
  flex-shrink: 0;
}

.activism-btn:hover {
  filter: brightness(1.2);
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

/* ✅ Infinite scroll RIGHT animation */
@keyframes scroll-right {
  0% { transform: translateX(-50%); } /* ✅ Start at -50% */
  100% { transform: translateX(0); } /* ✅ End at 0 */
}

/* Mobile: slower scroll, smaller buttons */
@media (max-width: 768px) {
  .activism-track {
    animation: scroll-right 40s linear infinite;
  }
  .activism-btn {
    max-width: 120px !important;
  }
}
/* ===================================
   MAIN LOGO STYLING
   =================================== */

.main-logo {
  display: block;
  max-width: 600px;
  max-height: 250px;
  width: auto;
  height: auto;
  margin: 0 auto 30px;
  filter: drop-shadow(0 0 15px rgba(139, 0, 0, 0.6));
  transition: filter 0.3s;
  object-fit: contain;
  animation: logo-pulse 3s infinite;
}

.main-logo:hover {
  filter: drop-shadow(0 0 25px rgba(139, 0, 0, 0.9));
}

@keyframes logo-pulse {
  0%, 100% { filter: drop-shadow(0 0 15px rgba(139, 0, 0, 0.6)); }
  50% { filter: drop-shadow(0 0 25px rgba(204, 0, 0, 0.8)); }
}

/* Mobile adjustments - BIGGER */
@media (max-width: 768px) {
  .main-logo {
    max-width: 380px;       /* ✅ Increased from 280px */
    max-height: 160px;      /* ✅ Increased from 120px */
  }
}

/* Tablet adjustment */
@media (min-width: 769px) and (max-width: 1024px) {
  .main-logo {
    max-width: 500px;
    max-height: 200px;
  }
}