/* Omar YT Play Gaming Blog - Home Page Styles */

.main-content {
  padding-top: 80px; /* Offset for fixed header */
  position: relative;
}

/* Global section spacing */
section {
  position: relative;
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Section transitions */
.section-enter {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.section-enter.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Gaming cursor effect */
body {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="none" stroke="%2300ff88" stroke-width="2"/><circle cx="10" cy="10" r="2" fill="%2300ff88"/></svg>'), auto;
}

a, button, .clickable {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="none" stroke="%23ff6b00" stroke-width="2"/><circle cx="10" cy="10" r="3" fill="%23ff6b00"/></svg>'), pointer;
}

/* Loading states */
.loading {
  position: relative;
  overflow: hidden;
}

.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.2), transparent);
  animation: loading-sweep 2s infinite;
}

@keyframes loading-sweep {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Image lazy loading */
img[data-src] {
  opacity: 0;
  transition: opacity 0.3s;
}

img[data-src].loaded {
  opacity: 1;
}

/* Error states */
.error-state {
  text-align: center;
  padding: var(--spacing-2xl);
  color: var(--text-muted);
}

.error-state h3 {
  color: #ff4444;
  margin-bottom: var(--spacing-md);
}

/* Success states */
.success-state {
  text-align: center;
  padding: var(--spacing-xl);
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid var(--primary-color);
  border-radius: var(--border-radius-md);
  color: var(--primary-color);
}

/* Gaming performance indicators */
.fps-counter {
  position: fixed;
  top: 100px;
  right: var(--spacing-md);
  background: rgba(0, 0, 0, 0.8);
  color: var(--primary-color);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  font-family: monospace;
  font-size: var(--text-xs);
  z-index: 1001;
  opacity: 0.7;
}

/* Scroll progress indicator */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  z-index: 1001;
  transition: width 0.1s ease;
}

/* Parallax effects */
.parallax-element {
  will-change: transform;
}

/* Gaming grid background */
.gaming-grid-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(rgba(0, 255, 136, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 136, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  animation: grid-move 20s linear infinite;
}

@keyframes grid-move {
  from { transform: translate(0, 0); }
  to { transform: translate(50px, 50px); }
}

/* Intersection observer animations */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

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

.slide-in-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.6s ease;
}

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

.slide-in-right {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.6s ease;
}

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

.scale-in {
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.6s ease;
}

.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

/* Gaming effects for interactive elements */
.gaming-hover {
  position: relative;
  overflow: hidden;
}

.gaming-hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.2), transparent);
  transition: left 0.5s ease;
}

.gaming-hover:hover::before {
  left: 100%;
}

/* Glitch effect for special elements */
.glitch {
  position: relative;
  color: var(--text-primary);
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch::before {
  animation: glitch-anim-1 0.2s infinite linear alternate-reverse;
  color: var(--primary-color);
  z-index: -1;
}

.glitch::after {
  animation: glitch-anim-2 0.2s infinite linear alternate-reverse;
  color: var(--secondary-color);
  z-index: -2;
}

@keyframes glitch-anim-1 {
  0% { clip: rect(42px, 9999px, 44px, 0); }
  5% { clip: rect(12px, 9999px, 59px, 0); }
  10% { clip: rect(48px, 9999px, 29px, 0); }
  15% { clip: rect(42px, 9999px, 73px, 0); }
  20% { clip: rect(63px, 9999px, 27px, 0); }
  25% { clip: rect(34px, 9999px, 55px, 0); }
  30% { clip: rect(86px, 9999px, 73px, 0); }
  35% { clip: rect(20px, 9999px, 20px, 0); }
  40% { clip: rect(26px, 9999px, 60px, 0); }
  45% { clip: rect(25px, 9999px, 66px, 0); }
  50% { clip: rect(57px, 9999px, 98px, 0); }
  55% { clip: rect(5px, 9999px, 46px, 0); }
  60% { clip: rect(82px, 9999px, 31px, 0); }
  65% { clip: rect(54px, 9999px, 27px, 0); }
  70% { clip: rect(28px, 9999px, 99px, 0); }
  75% { clip: rect(45px, 9999px, 69px, 0); }
  80% { clip: rect(23px, 9999px, 85px, 0); }
  85% { clip: rect(54px, 9999px, 84px, 0); }
  90% { clip: rect(45px, 9999px, 47px, 0); }
  95% { clip: rect(37px, 9999px, 20px, 0); }
  100% { clip: rect(4px, 9999px, 91px, 0); }
}

@keyframes glitch-anim-2 {
  0% { clip: rect(65px, 9999px, 100px, 0); }
  5% { clip: rect(52px, 9999px, 74px, 0); }
  10% { clip: rect(79px, 9999px, 85px, 0); }
  15% { clip: rect(75px, 9999px, 5px, 0); }
  20% { clip: rect(67px, 9999px, 61px, 0); }
  25% { clip: rect(14px, 9999px, 79px, 0); }
  30% { clip: rect(1px, 9999px, 66px, 0); }
  35% { clip: rect(86px, 9999px, 30px, 0); }
  40% { clip: rect(23px, 9999px, 98px, 0); }
  45% { clip: rect(85px, 9999px, 72px, 0); }
  50% { clip: rect(71px, 9999px, 75px, 0); }
  55% { clip: rect(2px, 9999px, 48px, 0); }
  60% { clip: rect(30px, 9999px, 16px, 0); }
  65% { clip: rect(59px, 9999px, 50px, 0); }
  70% { clip: rect(41px, 9999px, 62px, 0); }
  75% { clip: rect(2px, 9999px, 82px, 0); }
  80% { clip: rect(47px, 9999px, 73px, 0); }
  85% { clip: rect(3px, 9999px, 27px, 0); }
  90% { clip: rect(26px, 9999px, 55px, 0); }
  95% { clip: rect(54px, 9999px, 26px, 0); }
  100% { clip: rect(83px, 9999px, 7px, 0); }
}

/* Dark mode specific adjustments */
@media (prefers-color-scheme: dark) {
  .main-content {
    background: var(--bg-primary);
  }
}

/* High performance mode */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .gaming-grid-bg {
    animation: none;
  }
  
  .parallax-element {
    transform: none !important;
  }
}

/* Print optimizations */
@media print {
  .main-content {
    padding-top: 0;
  }
  
  .gaming-grid-bg,
  .scroll-progress,
  .fps-counter {
    display: none;
  }
  
  .fade-in,
  .slide-in-left,
  .slide-in-right,
  .scale-in {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .gaming-grid-bg {
    background-size: 30px 30px;
  }
  
  .fps-counter {
    display: none;
  }
  
  body {
    cursor: auto;
  }
  
  a, button, .clickable {
    cursor: pointer;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .gaming-hover::before {
    display: none;
  }
  
  .gaming-hover:active::before {
    display: block;
    left: 0;
  }
}