/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Uncial+Antiqua&family=Cinzel:wght@400;700&family=Poppins:wght@300;400;700&display=swap');

/* Root Colors */
:root {
    --mystic-blue: #3B4CCA;
    --lantern-gold: #F5A623;
    --ancient-sand: #E4C16F;
    --arcane-purple: #7E57C2;
    --shield-bronze: #9C6644;
    --shadow-gray: #2C2C2C;

    --title-font: 'Uncial Antiqua', serif;
    --subtitle-font: 'Cinzel', serif;
    --body-font: 'Poppins', sans-serif;
}
html{
  overflow-x: hidden;
    scroll-behavior: smooth;
}

/* Body Styling */
body {
    font-family: var(--body-font);
    background-color: var(--shadow-gray);
    color: var(--ancient-sand);
    overflow-x: hidden;
    scroll-behavior: smooth;
}



/* Navbar General */
.mystic-lantern-shield-navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.85);
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
  padding: 15px 0;
  z-index: 1000;
}

/* Navbar Container */
.navbar-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

/* Logo Central */
.navbar-logo img {
  height: 80px;
  filter: drop-shadow(0px 0px 10px var(--lantern-gold));
  transition: transform 0.3s ease-in-out;
}

.navbar-logo img:hover {
  transform: scale(1.1) rotate(5deg);
}

/* Navbar Menu */
.navbar-menu ul {
  display: flex;
  list-style: none;
  gap: 20px;
  padding: 0;
  margin: 0;
}

/* Navbar Items */
.navbar-menu ul li {
  position: relative;
}

/* Scuturi Animate */
.navbar-menu ul li a {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  background: linear-gradient(145deg, var(--shield-bronze), var(--arcane-purple));
  border-radius: 50%;
  color: var(--ancient-sand);
  font-size: 18px;
  font-family: var(--subtitle-font);
  font-weight: bold;
  text-decoration: none;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Emoji Scut */
.shield {
  font-size: 24px;
  margin-right: 8px;
}

/* Hover Effect - Scuturile Se Rotește și Strălucesc */
.navbar-menu ul li a:hover {
  transform: rotate(10deg) scale(1.1);
  box-shadow: 0px 4px 12px rgba(255, 223, 0, 0.8);
}

/* Active Link */
.navbar-menu ul li a:active {
  transform: scale(0.95);
}


/* Hero Section */
.mystic-lantern-shield-hero {
  position: relative;
  height: 100vh;
  background: url('hero-background.jpg') center/cover no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--neutral-white);
  overflow: hidden;
}

/* Overlay */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

/* Hero Content */
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  padding: 20px;
  animation: fadeIn 1.5s ease-in-out;
}

/* Title */
.hero-content h1 {
  font-family: var(--title-font);
  font-size: 50px;
  text-transform: uppercase;
  color: var(--lantern-gold);
  text-shadow: 0px 4px 10px rgba(255, 223, 0, 0.8);
}

/* Highlight */
.hero-content h1 span {
  color: var(--mystic-blue);
}

/* Subtitle */
.hero-content p {
  font-size: 20px;
  line-height: 1.5;
  margin-top: 10px;
  color: var(--ancient-sand);
}

/* Hero Button */
.hero-button {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 25px;
  font-size: 20px;
  background: var(--shield-bronze);
  color: var(--neutral-white);
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 4px 12px rgba(255, 223, 0, 0.6);
}

/* Hover Effect */
.hero-button:hover {
  background: var(--arcane-purple);
  transform: scale(1.05);
}

/* ANIMATIONS */
@keyframes fadeIn {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}



/* About Us Section */
.mystic-lantern-shield-about {
  text-align: center;
  padding: 80px 50px;
  background: linear-gradient(135deg, var(--mystic-blue), var(--shield-bronze));
  color: var(--neutral-white);
  overflow: hidden;
}

/* Title */
.about-title {
  font-family: var(--title-font);
  font-size: 42px;
  margin-bottom: 20px;
  color: var(--lantern-gold);
  text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
  animation: fadeInDown 1s ease-in-out;
}

/* Intro Text */
.about-intro {
  font-size: 18px;
  max-width: 700px;
  margin: 0 auto 40px;
  line-height: 1.6;
  animation: fadeIn 1.5s ease-in-out;
}

/* About Content */
.about-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  justify-content: center;
  align-items: center;
  max-width: 1000px;
  margin: auto;
}

/* Individual About Items */
.about-item {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  cursor: pointer;
  animation: fadeInUp 1.5s ease-in-out;
}

/* About Item Hover Effects */
.about-item:hover {
  transform: scale(1.05) rotate(-2deg);
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.5);
  background: rgba(255, 255, 255, 0.2);
}

/* About Item Titles */
.about-item h3 {
  font-size: 22px;
  margin-bottom: 10px;
  color: var(--festive-gold);
  transition: color 0.3s ease-in-out;
}

/* Hover Effect on Titles */
.about-item:hover h3 {
  color: var(--neutral-white);
}

/* About Item Text */
.about-item p {
  font-size: 16px;
  line-height: 1.4;
  transition: opacity 0.3s ease-in-out;
}

/* Hover Effect on Text */
.about-item:hover p {
  opacity: 0.9;
}

/* ANIMATIONS */

/* Fade In */
@keyframes fadeIn {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

/* Fade In Down */
@keyframes fadeInDown {
  0% {
      opacity: 0;
      transform: translateY(-20px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

/* Fade In Up */
@keyframes fadeInUp {
  0% {
      opacity: 0;
      transform: translateY(20px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

/* About Games Section */
.mystic-lantern-shield-about-games {
  text-align: center;
  padding: 80px 50px;
  background: linear-gradient(135deg, var(--shadow-gray), var(--mystic-blue));
  color: var(--neutral-white);
  overflow: hidden;
}

/* Title */
.games-title {
  font-family: var(--title-font);
  font-size: 42px;
  margin-bottom: 40px;
  color: var(--lantern-gold);
  text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
  animation: fadeInDown 1s ease-in-out;
}

/* Game Item */
.game-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  max-width: 1000px;
  margin: auto;
  margin-bottom: 50px;
  animation: fadeInUp 1.5s ease-in-out;
}

/* Alternate Layout */


/* Game Text */
.game-text {
  flex: 1;
  text-align: left;
  padding: 20px;
}

.game-text h3 {
  font-size: 26px;
  margin-bottom: 10px;
  color: var(--festive-gold);
  transition: color 0.3s ease-in-out;
}

/* Hover Effect on Titles */
.game-text h3:hover {
  color: var(--neutral-white);
}

/* Game Description */
.game-text p {
  font-size: 18px;
  line-height: 1.5;
  transition: opacity 0.3s ease-in-out;
}

/* Hover Effect on Text */
.game-text:hover p {
  opacity: 0.9;
}

/* Game Image */
.game-image {
  flex: 1;
  text-align: center;
}

.game-image img {
  width: 100%;
  max-width: 400px;
  border-radius: 12px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Hover Effect on Images */
.game-image img:hover {
  transform: scale(1.05);
  box-shadow: 0px 6px 12px rgba(255, 255, 255, 0.5);
}

/* ANIMATIONS */

/* Fade In */
@keyframes fadeIn {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

/* Fade In Down */
@keyframes fadeInDown {
  0% {
      opacity: 0;
      transform: translateY(-20px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

/* Fade In Up */
@keyframes fadeInUp {
  0% {
      opacity: 0;
      transform: translateY(20px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

/* Leaderboard Section */
.mystic-lantern-shield-leaderboard {
  text-align: center;
  padding: 80px 50px;
  background: linear-gradient(135deg, var(--arcane-purple), var(--shield-bronze));
  color: var(--neutral-white);
  overflow: hidden;
}

/* Title */
.leaderboard-title {
  font-family: var(--title-font);
  font-size: 42px;
  margin-bottom: 20px;
  color: var(--lantern-gold);
  text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
  animation: fadeInDown 1s ease-in-out;
}

/* Description */
.leaderboard-description {
  font-size: 18px;
  margin-bottom: 40px;
}

/* Leaderboard Table */
.leaderboard-table {
  max-width: 600px;
  margin: auto;
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  animation: fadeInUp 1.5s ease-in-out;
}

/* Leaderboard Header */
.leaderboard-header {
  display: flex;
  justify-content: space-between;
  font-size: 22px;
  font-weight: bold;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--neutral-white);
}

/* Leaderboard Entries */
.leaderboard-entry {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  padding: 10px 0;
  transition: transform 0.3s ease-in-out;
}

/* Hover Effect */
.leaderboard-entry:hover {
  transform: scale(1.05);
}



/* Hardcore Challenges Section */
.mystic-lantern-shield-hardcore-challenges {
  text-align: center;
  padding: 80px 50px;
  background: linear-gradient(135deg, black, var(--mystic-blue));
  color: var(--neutral-white);
}

/* Title */
.hardcore-title {
  font-family: var(--title-font);
  font-size: 42px;
  margin-bottom: 20px;
  color: var(--lantern-gold);
  text-shadow: 3px 3px 8px rgba(255, 0, 0, 0.7);
  animation: fadeInDown 1s ease-in-out;
}

/* Description */
.hardcore-description {
  font-size: 18px;
  margin-bottom: 40px;
  font-style: italic;
}

/* Hardcore Container */
.hardcore-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 900px;
  margin: auto;
}

/* Hardcore Challenge Cards */
.hardcore-card {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.7);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  cursor: pointer;
  animation: fadeInUp 1.5s ease-in-out;
  position: relative;
}

/* Hover Effect - Make it look unreachable */
.hardcore-card:hover {
  transform: translateY(-10px) scale(1.1) rotate(-1deg);
  box-shadow: 0px 6px 12px rgba(255, 0, 0, 0.8);
}

/* Hardcore Titles */
.hardcore-card h3 {
  font-size: 24px;
  margin-bottom: 10px;
  color: var(--festive-gold);
  transition: color 0.3s ease-in-out;
}

/* Impossible Effect */
.hardcore-card:hover h3 {
  color: red;
}

/* Challenge Description */
.hardcore-card p {
  font-size: 16px;
  line-height: 1.4;
  transition: opacity 0.3s ease-in-out;
}

/* Hover Effect on Text */
.hardcore-card:hover p {
  opacity: 0.7;
}



/* Mystic Storyline Section */
.mystic-lantern-shield-story {
  text-align: center;
  padding: 80px 50px;
  background: linear-gradient(135deg, var(--shadow-gray), var(--mystic-blue));
  color: var(--neutral-white);
  overflow: hidden;
}

/* Title */
.story-title {
  font-family: var(--title-font);
  font-size: 42px;
  margin-bottom: 20px;
  color: var(--lantern-gold);
  text-shadow: 3px 3px 8px rgba(255, 255, 255, 0.3);
  animation: fadeInDown 1s ease-in-out;
}

/* Introduction */
.story-intro {
  font-size: 18px;
  max-width: 700px;
  margin: 0 auto 40px;
  line-height: 1.6;
  animation: fadeIn 1.5s ease-in-out;
}

/* Story Chapters */
.story-chapter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  max-width: 1000px;
  margin: auto;
  margin-bottom: 50px;
  animation: fadeInUp 1.5s ease-in-out;
}

/* Alternate Layout */


/* Story Text */
.story-text {
  flex: 1;
  text-align: left;
  padding: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  cursor: pointer;
}

/* Story Text Hover */
.story-text:hover {
  transform: scale(1.05);
  box-shadow: 0px 6px 12px rgba(255, 255, 255, 0.5);
}

/* Story Titles */
.story-text h3 {
  font-size: 24px;
  margin-bottom: 10px;
  color: var(--festive-gold);
  transition: color 0.3s ease-in-out;
}

/* Hover Effect on Titles */
.story-text:hover h3 {
  color: var(--neutral-white);
}

/* Story Description */
.story-text p {
  font-size: 16px;
  line-height: 1.4;
  transition: opacity 0.3s ease-in-out;
}

/* Hover Effect on Text */
.story-text:hover p {
  opacity: 0.9;
}

/* Story Image */
.story-image {
  flex: 1;
  text-align: center;
}

.story-image img {
  width: 100%;
  max-width: 400px;
  border-radius: 12px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Hover Effect on Images */
.story-image img:hover {
  transform: scale(1.05);
  box-shadow: 0px 6px 12px rgba(255, 255, 255, 0.5);
}

/* ANIMATIONS */

/* Fade In */
@keyframes fadeIn {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

/* Fade In Down */
@keyframes fadeInDown {
  0% {
      opacity: 0;
      transform: translateY(-20px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

/* Fade In Up */
@keyframes fadeInUp {
  0% {
      opacity: 0;
      transform: translateY(20px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}


/* Play Games Section */
.mystic-lantern-shield-playgames {
  text-align: center;
  padding: 80px 50px;
  background: linear-gradient(135deg, var(--mystic-blue), var(--shield-bronze));
  color: var(--neutral-white);
}

/* Title */
.playgames-title {
  font-family: var(--title-font);
  font-size: 42px;
  margin-bottom: 20px;
  color: var(--lantern-gold);
  text-shadow: 3px 3px 8px rgba(255, 255, 255, 0.3);
  animation: fadeInDown 1s ease-in-out;
}

/* Description */
.playgames-description {
  font-size: 18px;
  margin-bottom: 40px;
}

/* Games Grid */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  max-width: 1000px;
  margin: auto;
}

/* Game Card */
.game-card {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  cursor: pointer;
  animation: fadeInUp 1.5s ease-in-out;
}

/* Hover Effect */
.game-card:hover {
  transform: scale(1.05);
  box-shadow: 0px 6px 12px rgba(255, 255, 255, 0.5);
}

/* Game Card Title */
.game-card h3 {
  font-size: 22px;
  margin-top: 10px;
  color: var(--festive-gold);
  transition: color 0.3s ease-in-out;
}

/* Hover Effect on Titles */
.game-card:hover h3 {
  color: var(--neutral-white);
}

/* Game Image */
.game-card img {
  width: 100%;
  max-width: 300px;
  border-radius: 12px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Hover Effect on Images */
.game-card:hover img {
  transform: scale(1.05);
  box-shadow: 0px 6px 12px rgba(255, 255, 255, 0.5);
}

/* Play Button */
.play-button {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 20px;
  background: var(--arcane-purple);
  color: var(--neutral-white);
  border-radius: 8px;
  text-decoration: none;
  font-size: 18px;
  transition: all 0.3s ease-in-out;
}

/* Hover Effect on Button */
.play-button:hover {
  background: var(--lantern-gold);
  transform: scale(1.05);
}


/* Footer General */
.mystic-lantern-shield-footer {
  background: linear-gradient(135deg, var(--shadow-gray), var(--mystic-blue));
  color: var(--neutral-white);
  padding: 50px 20px;
  text-align: center;
  position: relative;
}

/* Footer Container */
.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  max-width: 1000px;
  margin: auto;
}

/* Footer Sections */
.footer-container h3 {
  font-size: 22px;
  margin-bottom: 15px;
  color: var(--lantern-gold);
  text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.3);
}

/* 18+ Disclaimer */
.footer-disclaimer {
  background: rgba(255, 0, 0, 0.2);
  padding: 15px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 0px 0px 10px rgba(255, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  animation: pulseGlow 1.5s infinite alternate;
}

/* Disclaimer Icon */
.disclaimer-icon {
  font-size: 24px;
}

/* Business Summary */
.footer-business p {
  font-size: 16px;
  line-height: 1.5;
}

/* Quick Links */
.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-links ul li {
  margin: 8px 0;
}

.footer-links ul li a {
  color: var(--neutral-white);
  text-decoration: none;
  font-size: 16px;
  transition: color 0.3s ease-in-out;
}

.footer-links ul li a:hover {
  color: var(--lantern-gold);
  text-shadow: 0px 0px 8px rgba(255, 223, 0, 0.7);
}

/* Social Media */
.footer-social a {
  display: block;
  margin: 8px 0;
  font-size: 16px;
  text-decoration: none;
  color: var(--neutral-white);
  transition: transform 0.3s ease-in-out;
}

.footer-social a span {
  margin-right: 5px;
}

/* Social Media Hover Effect */
.footer-social a:hover {
  transform: scale(1.1);
  color: var(--festive-gold);
}

/* Newsletter */
.footer-newsletter form {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.footer-newsletter input {
  padding: 10px;
  border: none;
  border-radius: 5px;
  width: 60%;
  font-size: 16px;
}

.footer-newsletter button {
  padding: 10px 15px;
  background: var(--arcane-purple);
  color: var(--neutral-white);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s ease-in-out;
}

/* Newsletter Button Hover */
.footer-newsletter button:hover {
  background: var(--lantern-gold);
}

/* Footer Bottom */
.footer-bottom {
  margin-top: 30px;
  font-size: 16px;
  text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.3);
}

/* ANIMATIONS */

/* Disclaimer Glow */
@keyframes pulseGlow {
  0% {
      box-shadow: 0px 0px 10px rgba(255, 0, 0, 0.8);
  }
  100% {
      box-shadow: 0px 0px 20px rgba(255, 0, 0, 1);
  }
}


/* About Page Section */
.mystic-lantern-shield-about-page {
  text-align: center;
  padding: 80px 50px;
  background: linear-gradient(135deg, var(--mystic-blue), var(--shadow-gray));
  color: var(--neutral-white);
  overflow: hidden;
}

/* Title */
.about-title {
  font-family: var(--title-font);
  font-size: 42px;
  margin-bottom: 20px;
  color: var(--lantern-gold);
  text-shadow: 3px 3px 8px rgba(255, 255, 255, 0.3);
  animation: fadeInDown 1s ease-in-out;
}

/* Introduction */
.about-intro {
  font-size: 18px;
  max-width: 700px;
  margin: 0 auto 40px;
  line-height: 1.6;
  animation: fadeIn 1.5s ease-in-out;
}

/* About Content */
.about-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  justify-content: center;
  align-items: center;
  max-width: 1000px;
  margin: auto;
}

/* About Sections */
.about-section {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  cursor: pointer;
  animation: fadeInUp 1.5s ease-in-out;
}

/* Hover Effect */
.about-section:hover {
  transform: scale(1.05) rotate(-1deg);
  box-shadow: 0px 6px 12px rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.2);
}

/* Section Titles */
.about-section h3 {
  font-size: 22px;
  margin-bottom: 10px;
  color: var(--festive-gold);
  transition: color 0.3s ease-in-out;
}

/* Hover Effect on Titles */
.about-section:hover h3 {
  color: var(--neutral-white);
}

/* Section Text */
.about-section p {
  font-size: 16px;
  line-height: 1.4;
  transition: opacity 0.3s ease-in-out;
}

/* Hover Effect on Text */
.about-section:hover p {
  opacity: 0.9;
}

/* ANIMATIONS */

/* Fade In */
@keyframes fadeIn {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

/* Fade In Down */
@keyframes fadeInDown {
  0% {
      opacity: 0;
      transform: translateY(-20px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

/* Fade In Up */
@keyframes fadeInUp {
  0% {
      opacity: 0;
      transform: translateY(20px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}


/* Contact Section */
.mystic-lantern-shield-contact {
  text-align: center;
  padding: 80px 50px;
  background: linear-gradient(135deg, var(--shadow-gray), var(--mystic-blue));
  color: var(--neutral-white);
}

/* Title */
.contact-title {
  font-family: var(--title-font);
  font-size: 42px;
  margin-bottom: 20px;
  color: var(--lantern-gold);
  text-shadow: 3px 3px 8px rgba(255, 255, 255, 0.3);
  animation: fadeInDown 1s ease-in-out;
}

/* Description */
.contact-description {
  font-size: 18px;
  margin-bottom: 40px;
}

/* Contact Form */
.contact-form {
  max-width: 600px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Labels */
.contact-form label {
  font-size: 16px;
  font-weight: bold;
  color: var(--festive-gold);
  text-align: left;
}

/* Input Fields */
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: none;
  font-size: 16px;
  transition: all 0.3s ease-in-out;
}

/* Focus Effects */
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3);
}

/* Submit Button */
.submit-button {
  padding: 10px 20px;
  background: var(--arcane-purple);
  color: var(--neutral-white);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.3s ease-in-out;
}

/* Hover Effect */
.submit-button:hover {
  background: var(--lantern-gold);
  transform: scale(1.05);
}



/* Legal Section */
.mystic-lantern-shield-legal {
  text-align: left;
  padding: 80px 50px;
  background: linear-gradient(135deg, var(--shadow-gray), var(--mystic-blue));
  color: var(--neutral-white);
  max-width: 900px;
  margin: auto;
  border-radius: 12px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

/* Title */
.legal-title {
  font-family: var(--title-font);
  font-size: 36px;
  margin-bottom: 20px;
  color: var(--lantern-gold);
  text-shadow: 3px 3px 8px rgba(255, 255, 255, 0.3);
  animation: fadeInDown 1s ease-in-out;
}

/* Date */
.legal-date {
  font-size: 14px;
  margin-bottom: 20px;
  font-style: italic;
}

/* Legal Content */
.legal-content {
  font-size: 16px;
  line-height: 1.6;
}

/* Headings */
.legal-content h3 {
  font-size: 22px;
  margin-top: 20px;
  color: var(--festive-gold);
}

.legal-content h4 {
  font-size: 18px;
  margin-top: 15px;
  color: var(--neutral-white);
}

/* Lists */
.legal-content ul {
  padding-left: 20px;
}

.legal-content ul li {
  margin-bottom: 8px;
}

/* Links */
.legal-content a {
  color: var(--festive-gold);
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}

.legal-content a:hover {
  color: var(--neutral-white);
  text-shadow: 0px 0px 8px rgba(255, 223, 0, 0.7);
}

/* ANIMATIONS */

/* Fade In */
@keyframes fadeIn {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

/* Fade In Down */
@keyframes fadeInDown {
  0% {
      opacity: 0;
      transform: translateY(-20px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}



/* Overlay Background */
.age-verification-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Pop-Up Box */
.age-verification-popup {
  background: linear-gradient(135deg, var(--shadow-gray), var(--mystic-blue));
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.3);
  max-width: 400px;
  color: var(--neutral-white);
  animation: fadeIn 0.5s ease-in-out;
}

/* Title */
.age-verification-popup h2 {
  font-size: 24px;
  color: var(--lantern-gold);
  text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.3);
}

/* Text */
.age-verification-popup p {
  font-size: 18px;
  margin: 15px 0;
}

/* Checkbox */
.age-checkbox {
  margin: 15px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Buttons */
.age-buttons {
  margin-top: 20px;
}

.age-buttons button {
  padding: 10px 20px;
  font-size: 18px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

/* Enter Button (Disabled by Default) */
#enter-site {
  background: var(--festive-gold);
  color: var(--neutral-white);
  cursor: not-allowed;
  opacity: 0.5;
}

#enter-site.enabled {
  cursor: pointer;
  opacity: 1;
}

/* Exit Button */
#exit-site {
  background: crimson;
  color: white;
  margin-left: 10px;
}

/* Button Hover Effects */
.age-buttons button:hover {
  transform: scale(1.05);
}