/* Reveal-on-scroll baseline */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-luxury),
              transform var(--dur-slow) var(--ease-luxury);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children inside revealed section */
.section__head[data-reveal].is-visible + * [data-reveal],
.services__grid [data-reveal]:nth-child(1) { --reveal-delay: 80ms; }
.services__grid [data-reveal]:nth-child(2) { --reveal-delay: 160ms; }
.services__grid [data-reveal]:nth-child(3) { --reveal-delay: 240ms; }
.services__grid [data-reveal]:nth-child(4) { --reveal-delay: 320ms; }
.services__grid [data-reveal]:nth-child(5) { --reveal-delay: 400ms; }
.services__grid [data-reveal]:nth-child(6) { --reveal-delay: 480ms; }

.contacts__grid [data-reveal]:nth-child(1) { --reveal-delay: 100ms; }
.contacts__grid [data-reveal]:nth-child(2) { --reveal-delay: 220ms; }
.contacts__grid [data-reveal]:nth-child(3) { --reveal-delay: 340ms; }

/* Hero element-specific reveal delays */
.hero__inner [data-reveal]:nth-child(1) { --reveal-delay: 100ms; }
.hero__inner [data-reveal]:nth-child(2) { --reveal-delay: 250ms; }
.hero__inner [data-reveal]:nth-child(3) { --reveal-delay: 450ms; }
.hero__inner [data-reveal]:nth-child(4) { --reveal-delay: 650ms; }
.hero__inner [data-reveal]:nth-child(5) { --reveal-delay: 850ms; }

/* Language switch fade */
.lang-fading [data-i18n] {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 180ms var(--ease-luxury), transform 180ms var(--ease-luxury);
}

/* Reduced motion: keep things visible without movement */
@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;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .hero__canvas { display: none; }
  .hero__gradient {
    background:
      radial-gradient(ellipse 60% 50% at 50% 50%, rgba(201, 169, 97, 0.20) 0%, transparent 60%),
      linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-base) 100%);
  }
}