/* Root variables for Halloween theme */
:root {
  --halloween-orange: #ff6b35;
  --halloween-purple: #6a0dad;
  --halloween-black: #1a1a1a;
  --halloween-green: #39ff14;
  --dark-bg: #0a0a0a;
  --card-bg: #1f1f1f;
  --text-light: #e0e0e0;
  --shadow-color: rgba(255, 107, 53, 0.3);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  font-family: "Creepster", Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(
    135deg,
    var(--dark-bg) 0%,
    var(--halloween-purple) 100%
  );
  color: var(--text-light);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><text y="24" font-size="28">🕷️</text></svg>'),
    auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .invitation-card {
    width: 90%;
    padding: 1.5rem;
  }

  .card-header h1 {
    font-size: 2rem;
  }

  .event-details .detail-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .features {
    flex-direction: column;
    gap: 1rem;
  }

  .rsvp-button {
    font-size: 1rem;
    padding: 0.8rem 1.2rem;
  }

  .timeline-section {
    display: flex;
    justify-items: flex-start;
    padding: 1rem 1rem;
    /* width: 75%; */
  }

  .timeline-item {
    width: 80%;
    margin: 1rem 0;
  }
}

.parallax-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: url("assets/loader.jpg") no-repeat center center / cover;
  z-index: -2;
  transform: translateZ(0);
  background-attachment: fixed;
  will-change: background-position;
  animation: parallaxMove 20s infinite linear alternate;
  filter: brightness(0.4) contrast(1.2);
}

@keyframes parallaxMove {
  0% {
    background-position: center top;
  }
  100% {
    background-position: center bottom;
  }
}

/* Animated stars background */
.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.stars::before,
.stars::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  box-shadow: 100px 100px white, 200px 150px white, 300px 200px white,
    400px 100px white, 500px 250px white, 600px 180px white, 700px 120px white,
    800px 280px white, 900px 160px white, 50px 300px white, 150px 350px white,
    250px 400px white, 350px 320px white, 450px 380px white, 550px 340px white,
    650px 360px white, 750px 390px white, 850px 330px white, 100px 500px white,
    200px 550px white, 300px 580px white, 400px 520px white, 500px 560px white,
    600px 540px white;
  animation: twinkle 3s infinite alternate;
}

.stars::after {
  animation-delay: 1.5s;
  transform: translateX(50px) translateY(50px);
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

/* Fog effect */
.fog {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(to top, rgba(106, 13, 173, 0.3), transparent);
  pointer-events: none;
  z-index: 2;
  animation: fogMove 10s ease-in-out infinite;
}

@keyframes fogMove {
  0%,
  100% {
    opacity: 0.3;
    transform: translateX(0);
  }
  50% {
    opacity: 0.6;
    transform: translateX(20px);
  }
}

/* Container */
.container {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  backdrop-filter: blur(2px);
}

/* Floating ghosts */
.ghost {
  position: absolute;
  font-size: 3rem;
  animation: float 4s ease-in-out infinite;
  opacity: 0.7;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

.ghost-1 {
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.ghost-2 {
  top: 20%;
  right: 15%;
  animation-delay: 1.5s;
}

.ghost-3 {
  bottom: 15%;
  left: 15%;
  animation-delay: 3s;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(-5deg);
  }
  50% {
    transform: translateY(-30px) rotate(5deg);
  }
}

/* Flying bats */
.bat {
  position: absolute;
  font-size: 2rem;
  animation: flyBat 8s ease-in-out infinite;
  opacity: 0.8;
}

.bat-1 {
  top: 15%;
  left: -50px;
  animation-delay: 0s;
}

.bat-2 {
  top: 40%;
  left: -50px;
  animation-delay: 3s;
}

.bat-3 {
  top: 60%;
  left: -50px;
  animation-delay: 6s;
}

@keyframes flyBat {
  0% {
    left: -50px;
    transform: scale(1);
  }
  50% {
    transform: scale(0.8) translateY(-20px);
  }
  100% {
    left: 110%;
    transform: scale(1);
  }
}

/* Main invitation card */
.invitation-card {
  background: linear-gradient(145deg, var(--card-bg), #2a2a2a);
  border-radius: 20px;
  max-width: 700px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px var(--shadow-color),
    inset 0 0 20px rgba(255, 107, 53, 0.1);
  overflow: hidden;
  animation: cardEntrance 1s ease-out;
  position: relative;
  border: 2px solid rgba(255, 107, 53, 0.3);
}

@keyframes cardEntrance {
  0% {
    opacity: 0;
    transform: scale(0.8) rotateX(30deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotateX(0);
  }
}

/* Card Header */
.card-header {
  background: linear-gradient(
    135deg,
    var(--halloween-orange),
    var(--halloween-purple)
  );
  padding: 40px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.card-header::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 70%
  );
  animation: shine 3s linear infinite;
}

@keyframes shine {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.pumpkin-decoration {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.pumpkin {
  font-size: 2.5rem;
  animation: bounce 2s ease-in-out infinite;
  display: inline-block;
}

.pumpkin:nth-child(1) {
  animation-delay: 0s;
}
.pumpkin:nth-child(2) {
  animation-delay: 0.3s;
}
.pumpkin:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

.title {
  position: relative;
  z-index: 1;
}

.spooky-text {
  font-size: 3rem;
  font-weight: bold;
  background: linear-gradient(45deg, #fff, var(--halloween-green), #fff);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientText 3s ease infinite;
  text-shadow: 0 0 30px rgba(57, 255, 20, 0.5);
  display: inline-block;
}

@keyframes gradientText {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.skull-decoration {
  font-size: 2rem;
  margin-top: 15px;
  animation: rotate 4s linear infinite;
  display: inline-block;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Card Body */
.card-body {
  padding: 40px 30px;
}

.event-details {
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin-bottom: 30px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: rgba(255, 107, 53, 0.1);
  border-radius: 15px;
  border-left: 4px solid var(--halloween-orange);
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateX(-50px);
  animation: slideIn 0.5s ease forwards;
}

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.detail-item:nth-child(1) {
  animation-delay: 0.1s;
}
.detail-item:nth-child(2) {
  animation-delay: 0.2s;
}
.detail-item:nth-child(3) {
  animation-delay: 0.3s;
}
.detail-item:nth-child(4) {
  animation-delay: 0.4s;
}
.detail-item:nth-child(5) {
  animation-delay: 0.5s;
}

.detail-item:hover {
  transform: translateX(10px) scale(1.02);
  background: rgba(255, 107, 53, 0.2);
  box-shadow: 0 5px 20px rgba(255, 107, 53, 0.3);
}

.icon {
  font-size: 2.5rem;
  min-width: 50px;
  text-align: center;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.detail-content h3 {
  color: var(--halloween-orange);
  margin-bottom: 5px;
  font-size: 1.2rem;
}

.detail-content p {
  color: var(--text-light);
  font-size: 1rem;
}

/* Divider */
.divider {
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--halloween-orange),
    transparent
  );
  margin: 30px 0;
  animation: glow 2s ease-in-out infinite;
}

@keyframes glow {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 20px var(--halloween-orange);
  }
}

/* Features */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.feature {
  text-align: center;
  padding: 20px;
  background: rgba(106, 13, 173, 0.2);
  border-radius: 15px;
  transition: all 0.3s ease;
  opacity: 0;
  transform: scale(0);
  animation: zoomIn 0.5s ease forwards;
}

@keyframes zoomIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.feature:nth-child(1) {
  animation-delay: 0.6s;
}
.feature:nth-child(2) {
  animation-delay: 0.7s;
}
.feature:nth-child(3) {
  animation-delay: 0.8s;
}
.feature:nth-child(4) {
  animation-delay: 0.9s;
}

.feature:hover {
  transform: translateY(-10px) scale(1.05);
  background: rgba(106, 13, 173, 0.4);
  box-shadow: 0 10px 30px rgba(106, 13, 173, 0.5);
}

.feature-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 10px;
  animation: wiggle 1s ease-in-out infinite;
}

@keyframes wiggle {
  0%,
  100% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
}

.feature p {
  font-size: 0.9rem;
  color: var(--text-light);
}

/* RSVP Button */
.rsvp-button {
  width: 100%;
  padding: 18px 40px;
  font-size: 1.3rem;
  font-family: "Creepster", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bold;
  color: white;
  background: linear-gradient(135deg, var(--halloween-orange), #ff8c42);
  border: none;
  border-radius: 50px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 5px 25px rgba(255, 107, 53, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.rsvp-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.rsvp-button:hover::before {
  width: 400px;
  height: 400px;
}

.rsvp-button:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 35px rgba(255, 107, 53, 0.6);
}

.rsvp-button:active {
  transform: scale(0.98);
}

.button-text,
.button-icon {
  position: relative;
  z-index: 1;
}

.button-icon {
  font-size: 1.5rem;
  animation: float 2s ease-in-out infinite;
}

/* Card Footer */
.card-footer {
  background: rgba(0, 0, 0, 0.3);
  padding: 20px;
  text-align: center;
  position: relative;
}

.footer-text {
  font-size: 1rem;
  color: var(--text-light);
  margin-bottom: 10px;
}

.spider-web {
  font-size: 2rem;
  opacity: 0.5;
}

/* Particles */
.particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--halloween-orange);
  border-radius: 50%;
  animation: fall linear infinite;
  opacity: 0.6;
}

@keyframes fall {
  0% {
    transform: translateY(-10px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-content {
  background: linear-gradient(145deg, var(--card-bg), #2a2a2a);
  margin: 5% auto;
  padding: 40px;
  border-radius: 20px;
  max-width: 500px;
  width: 90%;
  position: relative;
  animation: modalSlideIn 0.4s ease;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 40px var(--shadow-color);
  border: 2px solid rgba(255, 107, 53, 0.3);
}

@keyframes modalSlideIn {
  from {
    transform: translateY(-100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.close-button {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 2rem;
  font-weight: bold;
  color: var(--text-light);
  transition: all 0.3s ease;
  line-height: 1;
}

.close-button:hover {
  color: var(--halloween-orange);
  transform: rotate(90deg);
}

.modal-content h2 {
  text-align: center;
  color: var(--halloween-orange);
  margin-bottom: 30px;
  font-size: 1.8rem;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-light);
  font-weight: 600;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 12px 15px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 107, 53, 0.3);
  border-radius: 10px;
  color: var(--text-light);
  font-size: 1rem;
  transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--halloween-orange);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 15px rgba(255, 107, 53, 0.3);
}

.form-group input::placeholder {
  color: rgba(224, 224, 224, 0.5);
}

.submit-button {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, var(--halloween-orange), #ff8c42);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: bold;
  transition: all 0.3s ease;
  margin-top: 10px;
}

.submit-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 20px rgba(255, 107, 53, 0.5);
}

.submit-button:active {
  transform: translateY(0);
}

button:hover::after {
  content: " 🩸";
  font-size: 1.4rem;
  animation: drip 1s ease infinite alternate;
}

@keyframes drip {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(5px);
    opacity: 0.6;
  }
}
.success-message {
  display: none;
  text-align: center;
  padding: 30px;
  animation: successPop 0.5s ease;
}

@keyframes successPop {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.success-message h3 {
  color: var(--halloween-green);
  font-size: 2rem;
  margin-bottom: 15px;
}

.success-message p {
  color: var(--text-light);
  font-size: 1.2rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .spooky-text {
    font-size: 2rem;
  }

  .pumpkin {
    font-size: 2rem;
  }

  .detail-item {
    flex-direction: column;
    text-align: center;
  }

  .features {
    grid-template-columns: repeat(2, 1fr);
  }

  .ghost,
  .bat {
    font-size: 2rem;
  }

  .card-body {
    padding: 30px 20px;
  }

  .modal-content {
    margin: 10% auto;
    padding: 30px 20px;
  }
}

@media (max-width: 480px) {
  .spooky-text {
    font-size: 1.5rem;
  }

  .features {
    grid-template-columns: 1fr;
  }

  .rsvp-button {
    font-size: 1.1rem;
    padding: 15px 30px;
  }
}

.creepster-regular {
  font-family: "Creepster", system-ui;
  font-weight: 400;
  font-style: normal;
}

#loader {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 1s ease, visibility 1s;
}
#loader img {
  width: 160px;
  height: auto;
  border-radius: 50%;
  animation: pulseGlow 2s infinite alternate;
}
@keyframes pulseGlow {
  from {
    box-shadow: 0 0 20px #ff6b35;
    transform: scale(1);
  }
  to {
    box-shadow: 0 0 60px #ff6b35;
    transform: scale(1.1);
  }
}
#loader.hidden {
  opacity: 0;
  visibility: hidden;
}

.timeline-section {
  margin-top: 4rem;
  text-align: center;
  position: relative;
  padding: 3rem 1rem;
  /* background: rgba(10, 10, 10, 0.85); */
  backdrop-filter: blur(2px);
}

.timeline {
  position: relative;
  margin: 3rem auto;
  max-width: 700px;
  border-left: 3px solid #ff6b35;
  padding-left: 1rem;
}

.timeline-item {
  opacity: 0;
  transform: translateX(-30px);
  margin: 2rem 0;
  animation: fadeSlideIn 0.8s ease forwards;
}

.timeline-item span {
  font-weight: bold;
  color: #ffa500;
  font-size: 1.2rem;
}

.timeline-item p {
  color: #ccc;
  font-size: 1rem;
  margin-top: 0.5rem;
}

.timeline-item::before {
  content: attr(data-year);
  position: absolute;
  left: -3.5rem;
  background: #ff6b35;
  color: #000;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  box-shadow: 0 0 10px #ff6b35;
}

@keyframes fadeSlideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.ghost,
.bat,
.fog,
.parallax-bg,
.particles,
.invitation-card {
  will-change: transform, opacity;
  transform: translateZ(0);
}

.footer {
  text-align: center;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.8); /* dark spooky background */
  color: #ff6f61; /* pumpkin-orange text */
  font-family: "Creepster", cursive;
  position: relative;
  z-index: 10;
  margin-top: 50px;
  border-top: 0.5px solid #ff6f61;
}

.footer a {
  color: #ff6b35; /* bright yellow for the link */
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease, transform 0.3s ease;
}

.footer a:hover {
  color: #ff6f61;
  transform: scale(1.1);
}