/**
 * ═══════════════════════════════════════════════════════════════════════════════
 * BACKGROUND EFFECTS — AJUTOR GAZDE PAGE
 * ═══════════════════════════════════════════════════════════════════════════════
 * 
 * Efecte subtile de background care NU schimbă culorile existente
 * Adaugă doar texturi, pattern-uri și ambient effects
 * 
 * ═══════════════════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════════════════════
   NOISE TEXTURE OVERLAY — Subtle grain pentru depth
   ═══════════════════════════════════════════════════════════════════════════════ */

.page-host-help::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SUBTLE DOT PATTERN — Grid pattern pentru secțiuni
   ═══════════════════════════════════════════════════════════════════════════════ */

.page-host-help main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle at center, currentColor 0.5px, transparent 0.5px);
  background-size: 30px 30px;
  opacity: 0.02;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, black 10%, black 90%, transparent 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   AMBIENT GLOW SHAPES — Floating soft shapes (no color change)
   ═══════════════════════════════════════════════════════════════════════════════ */

.page-host-help main {
  position: relative;
}

.page-host-help main::after {
  content: '';
  position: fixed;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, currentColor 0%, transparent 70%);
  filter: blur(100px);
  opacity: 0.015;
  top: 30%;
  right: -100px;
  z-index: -1;
  pointer-events: none;
  animation: ambient-drift 40s ease-in-out infinite;
}

@keyframes ambient-drift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-30px, 30px); }
  50% { transform: translate(20px, -20px); }
  75% { transform: translate(-20px, -30px); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION SEPARATORS — Subtle dividers between sections
   ═══════════════════════════════════════════════════════════════════════════════ */

.hostguide-hero + section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(80%, 600px);
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0.08;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CARD HOVER GLOW — Subtle glow effect pe carduri
   ═══════════════════════════════════════════════════════════════════════════════ */

.page-host-help [class*="card"]:hover {
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 20px 40px -10px rgba(0, 0, 0, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   VIGNETTE EFFECT — Subtle edge darkening
   ═══════════════════════════════════════════════════════════════════════════════ */

.page-host-help::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, transparent 50%, rgba(0, 0, 0, 0.15) 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SMOOTH SCROLL INDICATOR — Line on side
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1200px) {
  .page-host-help {
    position: relative;
  }
  
  .page-host-help .scroll-line {
    position: fixed;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 100px;
    background: linear-gradient(180deg, transparent, currentColor, transparent);
    opacity: 0.1;
    border-radius: 1px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PARALLAX HINT — Subtle layer movement on scroll
   ═══════════════════════════════════════════════════════════════════════════════ */

@supports (animation-timeline: scroll()) {
  .hero-glow-orb {
    animation: parallax-orb linear both;
    animation-timeline: scroll();
    animation-range: 0 500px;
  }
  
  @keyframes parallax-orb {
    from { transform: translateY(0); }
    to { transform: translateY(100px); opacity: 0; }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY — Reduce motion support
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .page-host-help main::after,
  .hero-glow-orb {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .page-host-help::before {
    opacity: 0.02;
  }
  
  .page-host-help main::after {
    display: none;
  }
  
  .page-host-help::after {
    background: radial-gradient(ellipse 100% 80% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.1) 100%);
  }
}