/* ============================================
   CoColour Life — Component & Animation Styles
   ============================================ */

/* Scroll-reveal stagger for children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.reveal-stagger.revealed > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.revealed > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.revealed > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.revealed > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.revealed > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.revealed > *:nth-child(6) { transition-delay: 400ms; }

.reveal-stagger.revealed > * {
  opacity: 1;
  transform: translateY(0);
}

/* Decorative rainbow line */
.rainbow-line {
  width: 60px;
  height: 3px;
  background: var(--gradient-rainbow);
  border-radius: 2px;
}

/* Section divider ring */
.section-ring {
  width: 40px;
  height: 40px;
  margin: 0 auto var(--space-2xl);
  opacity: 0.15;
}

/* Subtle grain overlay */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.02;
  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");
}

/* Cursor glow (decorative touch for desktop) */
.cursor-glow {
  position: fixed;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(0,201,167,0.04) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  z-index: 0;
  transition: opacity 0.3s;
  opacity: 0;
}

.cursor-glow.active {
  opacity: 1;
}

/* Page transition */
.main-site {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.main-site.visible {
  opacity: 1;
}

/* Smooth anchor offset for fixed nav */
:target {
  scroll-margin-top: 80px;
}

/* Focus styles for accessibility */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* Reduced motion */
@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;
  }

  .landing-logo {
    animation: none;
  }

  .logo-ring {
    animation: none;
  }

  .hero-ring {
    animation: none;
  }
}