/* ========================================
   AETHER EPOCHS - LANDING PAGE STYLES
   Advanced CSS with Parallax, 3D Effects & Animations
   ======================================== */

/* === BASE STYLES === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow-x: hidden;
}

/* === PARALLAX BACKGROUND LAYERS === */
.parallax-bg {
  will-change: transform;
}

.parallax-layer-1 {
  background: radial-gradient(
    ellipse at 30% 20%,
    rgba(99, 102, 241, 0.15) 0%,
    transparent 50%
  );
  transform: translateZ(0);
}

.parallax-layer-2 {
  background: radial-gradient(
    ellipse at 70% 60%,
    rgba(236, 138, 44, 0.1) 0%,
    transparent 50%
  );
  transform: translateZ(0);
}

.parallax-layer-3 {
  background: radial-gradient(
    ellipse at 50% 80%,
    rgba(99, 102, 241, 0.08) 0%,
    transparent 60%
  );
  transform: translateZ(0);
}

/* === SCROLL REVEAL ANIMATIONS === */
.reveal-element {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal-element.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* === 3D CARD EFFECTS === */
.card-3d {
  perspective: 1000px;
  cursor: pointer;
  height: 400px;
  position: relative;
  transition: transform 0.1s ease-out;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card-3d.flipped .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.card-back {
  transform: rotateY(180deg);
}

/* Card tilt effect on hover */
.card-3d:hover {
  transform: scale(1.05);
}

/* Dynamic glow effect for cards */
.card-3d[data-card-type="attack"] .card-front {
  box-shadow: 0 10px 40px rgba(239, 68, 68, 0.3);
}

.card-3d[data-card-type="attack"]:hover .card-front {
  box-shadow: 0 15px 60px rgba(239, 68, 68, 0.5),
              0 0 30px rgba(239, 68, 68, 0.3);
}

.card-3d[data-card-type="defense"] .card-front {
  box-shadow: 0 10px 40px rgba(59, 130, 246, 0.3);
}

.card-3d[data-card-type="defense"]:hover .card-front {
  box-shadow: 0 15px 60px rgba(59, 130, 246, 0.5),
              0 0 30px rgba(59, 130, 246, 0.3);
}

.card-3d[data-card-type="skill"] .card-front {
  box-shadow: 0 10px 40px rgba(168, 85, 247, 0.3);
}

.card-3d[data-card-type="skill"]:hover .card-front {
  box-shadow: 0 15px 60px rgba(168, 85, 247, 0.5),
              0 0 30px rgba(168, 85, 247, 0.3);
}

.card-3d[data-card-type="powerup"] .card-front {
  box-shadow: 0 10px 40px rgba(245, 158, 11, 0.3);
}

.card-3d[data-card-type="powerup"]:hover .card-front {
  box-shadow: 0 15px 60px rgba(245, 158, 11, 0.5),
              0 0 30px rgba(245, 158, 11, 0.3);
}

/* === ENHANCED HOVER EFFECTS === */
.faction-card {
  transition: all 0.3s ease-out;
}

.faction-card:hover {
  transform: translateY(-8px) scale(1.02);
}

.feature-item {
  transition: all 0.3s ease-out;
}

.feature-item:hover {
  transform: translateY(-5px);
}

.anomaly-card {
  transition: all 0.3s ease-out;
}

.anomaly-card:hover {
  transform: translateY(-3px) scale(1.02);
}

.roadmap-item {
  transition: all 0.3s ease-out;
}

.roadmap-item:hover {
  transform: translateX(8px);
}

/* === CTA BUTTON GLOW EFFECTS === */
.cta-button {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-out;
}

.cta-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;
}

.cta-button:hover::before {
  width: 300px;
  height: 300px;
}

.cta-button:active {
  transform: scale(0.95);
}

/* === SHIMMER EFFECT === */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* === GRADIENT BORDERS === */
.gradient-border {
  position: relative;
  background: linear-gradient(
    to right,
    rgba(99, 102, 241, 0.3),
    rgba(236, 138, 44, 0.3)
  );
  padding: 2px;
  border-radius: 1rem;
}

.gradient-border-inner {
  background: rgba(15, 23, 42, 0.9);
  border-radius: calc(1rem - 2px);
  padding: 2rem;
}

/* === MOBILE RESPONSIVE ADJUSTMENTS === */
@media (max-width: 1024px) {
  .card-3d {
    height: 380px;
  }
}

@media (max-width: 768px) {
  .card-3d {
    height: 360px;
  }

  .parallax-layer-1,
  .parallax-layer-2,
  .parallax-layer-3 {
    transform: none !important;
  }
}

@media (max-width: 640px) {
  .card-3d {
    height: 340px;
  }
}

/* === SMOOTH TRANSITIONS === */
a,
button {
  transition: all 0.2s ease-out;
}

/* === LOADING ANIMATIONS === */
@keyframes pulse-slow {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.pulse-slow {
  animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* === BACKDROP FILTERS === */
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  .backdrop-blur-custom {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* === SELECTION STYLES === */
::selection {
  background: rgba(99, 102, 241, 0.3);
  color: white;
}

::-moz-selection {
  background: rgba(99, 102, 241, 0.3);
  color: white;
}

/* === SCROLLBAR CUSTOM STYLES === */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.5);
}

::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.5);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.7);
}

/* === FOCUS STYLES === */
button:focus-visible,
a:focus-visible {
  outline: 2px solid rgba(99, 102, 241, 0.8);
  outline-offset: 2px;
}

/* === ACCESSIBILITY === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === TEXT GRADIENT ANIMATIONS === */
.text-gradient-animate {
  background: linear-gradient(
    90deg,
    #818cf8,
    #eca04f,
    #818cf8
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
}

/* === CARD HOVER LIGHT EFFECT === */
.card-3d::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 255, 255, 0.1) 0%,
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  border-radius: 1rem;
}

.card-3d:hover::after {
  opacity: 1;
}

/* === GLASS MORPHISM === */
.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* === NEON GLOW TEXT === */
.neon-text {
  text-shadow:
    0 0 10px rgba(99, 102, 241, 0.8),
    0 0 20px rgba(99, 102, 241, 0.6),
    0 0 30px rgba(99, 102, 241, 0.4);
}

/* === PARTICLE EFFECT (Optional Enhancement) === */
@keyframes float-particle {
  0%, 100% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) translateX(50px);
    opacity: 0;
  }
}

/* === PERFORMANCE OPTIMIZATIONS === */
.card-3d,
.faction-card,
.feature-item,
.anomaly-card,
.roadmap-item {
  will-change: transform;
}

/* Remove will-change after animations */
.card-3d:not(:hover),
.faction-card:not(:hover),
.feature-item:not(:hover),
.anomaly-card:not(:hover),
.roadmap-item:not(:hover) {
  will-change: auto;
}