/* ============================================================
   ANIMATIONS — Paragon Hotel Company
   ============================================================ */

/* ── Reveal Base States ── */
/* Initial opacity/y states are now set by GSAP in main.js initScrollReveal().
   .is-visible kept as a no-op for any legacy references. */
.is-visible { /* intentionally empty — GSAP owns reveal state */ }

/* ── Nav scrolled transition ── */
#nav {
  transition: background 200ms ease, box-shadow 200ms ease;
}


/* ── Tab panel transition (handled by JS, but base here) ── */
.tab-panel {
  opacity: 1;
}

/* ── Section entry clip ── */
.section-outreach {
  clip-path: inset(0);
}

/* ── Stats counter initial state ── */
.stat-number {
  transition: none; /* Count-up handled by rAF */
}

/* ── Outreach grid stagger delays (applied per child) ── */
.outreach-card:nth-child(1) { transition-delay: 0.00s; }
.outreach-card:nth-child(2) { transition-delay: 0.08s; }
.outreach-card:nth-child(3) { transition-delay: 0.16s; }
.outreach-card:nth-child(4) { transition-delay: 0.24s; }
.outreach-card:nth-child(5) { transition-delay: 0.32s; }
.outreach-card:nth-child(6) { transition-delay: 0.40s; }

/* ── Sustainability item stagger delays ── */
.sustain-item:nth-child(1) { transition-delay: 0.00s; }
.sustain-item:nth-child(2) { transition-delay: 0.07s; }
.sustain-item:nth-child(3) { transition-delay: 0.14s; }
.sustain-item:nth-child(4) { transition-delay: 0.21s; }
.sustain-item:nth-child(5) { transition-delay: 0.28s; }
.sustain-item:nth-child(6) { transition-delay: 0.35s; }

/* ── Service section reveal stagger ── */
.services-right .reveal-up:nth-child(1) { transition-delay: 0.0s; }
.services-right .reveal-up:nth-child(2) { transition-delay: 0.1s; }
.services-right .reveal-up:nth-child(3) { transition-delay: 0.2s; }

/* ── Mobile nav link stagger (JS sets delays) ── */
.nav-mobile-link.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* ── Focus visible (accessibility) ── */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ── Smooth fade for hero mini-carousel cards ── */
.hero-card {
  transition: opacity 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
}

/* ── Hover lift for social icons ── */
.footer-social-link {
  transition: color 200ms ease, transform 200ms ease;
}