/*
 * Block Editor Styles
 * Provides offset grid, parallax, and immersive effects
 */

/* ========================================
   OFFSET GRID SYSTEM
   ======================================== */

/* Offset containers */
.offset-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
  padding: 4rem 80px;
  position: relative;
  max-width: 1800px;
  margin: 0 auto;
}

/* Column spans for offset positioning */
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }
.col-span-8 { grid-column: span 8; }
.col-span-9 { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }

/* Column start positions for offset */
.col-start-1 { grid-column-start: 1; }
.col-start-2 { grid-column-start: 2; }
.col-start-3 { grid-column-start: 3; }
.col-start-4 { grid-column-start: 4; }
.col-start-5 { grid-column-start: 5; }
.col-start-6 { grid-column-start: 6; }
.col-start-7 { grid-column-start: 7; }
.col-start-8 { grid-column-start: 8; }
.col-start-9 { grid-column-start: 9; }
.col-start-10 { grid-column-start: 10; }
.col-start-11 { grid-column-start: 11; }
.col-start-12 { grid-column-start: 12; }

/* ========================================
   PARALLAX & MOTION EFFECTS
   ======================================== */

/* Parallax speeds (data attributes) */
[data-parallax-speed] {
  will-change: transform;
}

/* Fade in on scroll */
.fade-in-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Slide in from sides */
.slide-in-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.slide-in-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

@media (max-width: 1024px) {
  .offset-grid {
    grid-template-columns: repeat(8, 1fr);
    gap: 1.5rem;
    padding: 3rem 1.5rem;
  }

  /* Tablet column spans */
  .col-span-md-1 { grid-column: span 1; }
  .col-span-md-2 { grid-column: span 2; }
  .col-span-md-3 { grid-column: span 3; }
  .col-span-md-4 { grid-column: span 4; }
  .col-span-md-5 { grid-column: span 5; }
  .col-span-md-6 { grid-column: span 6; }
  .col-span-md-7 { grid-column: span 7; }
  .col-span-md-8 { grid-column: span 8; }

  .col-start-md-1 { grid-column-start: 1; }
  .col-start-md-2 { grid-column-start: 2; }
  .col-start-md-3 { grid-column-start: 3; }
  .col-start-md-4 { grid-column-start: 4; }
  .col-start-md-5 { grid-column-start: 5; }
  .col-start-md-6 { grid-column-start: 6; }
  .col-start-md-7 { grid-column-start: 7; }
  .col-start-md-8 { grid-column-start: 8; }
}

@media (max-width: 768px) {
  .offset-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 2rem 1rem;
  }

  /* Mobile column spans */
  .col-span-sm-1 { grid-column: span 1; }
  .col-span-sm-2 { grid-column: span 2; }
  .col-span-sm-3 { grid-column: span 3; }
  .col-span-sm-4 { grid-column: span 4; }

  .col-start-sm-1 { grid-column-start: 1; }
  .col-start-sm-2 { grid-column-start: 2; }
  .col-start-sm-3 { grid-column-start: 3; }
  .col-start-sm-4 { grid-column-start: 4; }
}

/* ========================================
   IMMERSIVE EFFECTS
   ======================================== */

/* Glassmorphism cards */
.glass-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 2rem;
}

/* Neon glow effect */
.neon-glow {
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.3),
              0 0 40px rgba(0, 255, 255, 0.2);
  transition: box-shadow 0.3s ease;
}

.neon-glow:hover {
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.5),
              0 0 60px rgba(0, 255, 255, 0.3);
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(90deg, #00ffff, #ff00ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Floating animation */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.floating {
  animation: float 6s ease-in-out infinite;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Spacing */
.mt-sm { margin-top: 1rem; }
.mt-md { margin-top: 2rem; }
.mt-lg { margin-top: 4rem; }
.mt-xl { margin-top: 6rem; }

.mb-sm { margin-bottom: 1rem; }
.mb-md { margin-bottom: 2rem; }
.mb-lg { margin-bottom: 4rem; }
.mb-xl { margin-bottom: 6rem; }

.pt-sm { padding-top: 1rem; }
.pt-md { padding-top: 2rem; }
.pt-lg { padding-top: 4rem; }
.pt-xl { padding-top: 6rem; }

.pb-sm { padding-bottom: 1rem; }
.pb-md { padding-bottom: 2rem; }
.pb-lg { padding-bottom: 4rem; }
.pb-xl { padding-bottom: 6rem; }

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Z-index layers */
.z-1 { position: relative; z-index: 1; }
.z-2 { position: relative; z-index: 2; }
.z-3 { position: relative; z-index: 3; }
.z-10 { position: relative; z-index: 10; }