/* ==========================================================================
   Jobson Garden — motion
   Transitions, and the prefers-reduced-motion branch (working rule 7).
   JS-driven motion branches in assets/js/animations.js instead.
   Load order: tokens.css, main.css, responsive.css, animations.css.
   ========================================================================== */

/* --- Reduced motion --------------------------------------------------------
   Rule 7: every animation needs a branch here. Motion that lives in JS
   (the count-up figures) branches in main.js instead. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .btn:hover { transition: none; transform: none; }
  .link-arrow::after, .site-nav a::after { transition: none; }
}

/* --- Scroll reveal ---------------------------------------------------------
   Elements marked .reveal start hidden and are shown by assets/js/scroll.js when
   they enter the viewport. The hidden state is scoped to .js, which is set
   before first paint — so if scripting fails, nothing is ever stuck
   invisible, the page just renders flat.
   ------------------------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity var(--duration-slow) var(--ease),
    transform var(--duration-slow) var(--ease);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Stagger children so a section arrives as a sequence, not all at once. */
.js .reveal--stagger > * { transition-delay: calc(var(--i, 0) * 70ms); }

/* --- Floating Navbar Entrance & Page Name Reveal Animation --------------- */

@keyframes navLogoSlide {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes navItemReveal {
  0% {
    opacity: 0;
    transform: translateY(-9px) scale(0.92);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes navActivePop {
  0% {
    transform: scale(0.94);
    box-shadow: 0 0 0 0 rgba(44, 95, 56, 0.35);
  }
  60% {
    transform: scale(1.04);
    box-shadow: 0 0 0 4px rgba(44, 95, 56, 0.12), 0 4px 12px rgba(44, 95, 56, 0.22);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(44, 95, 56, 0.22);
  }
}

@keyframes navActionsSlide {
  0% {
    opacity: 0;
    transform: translateX(10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Navbar load entrance animations (background capsule stays fixed and static, no drop animation) */
.brand {
  animation: navLogoSlide 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
}

.site-nav li {
  animation: navItemReveal 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.1s + var(--nav-i, 1) * 0.05s);
}

.site-nav a.is-current {
  animation: navActivePop 0.55s cubic-bezier(0.16, 1, 0.3, 1) calc(0.15s + var(--nav-i, 1) * 0.05s) both;
}

.site-header__actions {
  animation: navActionsSlide 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

/* --- Page Content Entrance & Reveal Animation (Services, Garden Tips, Contact) --- */

@keyframes pageContentReveal {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.985);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Services Page Entrance */
body.page-services .page-cover__eyebrow {
  animation: pageContentReveal 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
}
body.page-services .page-cover__title {
  animation: pageContentReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both;
}
body.page-services .page-cover__lede {
  animation: pageContentReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both;
}
body.page-services #plantation .feature__media {
  animation: pageContentReveal 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.32s both;
}
body.page-services #plantation .feature__body {
  animation: pageContentReveal 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.40s both;
}

/* Garden Tips Page (Blog) Entrance */
body.page-blog .page-cover__eyebrow {
  animation: pageContentReveal 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
}
body.page-blog .page-cover__title {
  animation: pageContentReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both;
}
body.page-blog .page-cover__lede {
  animation: pageContentReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both;
}
body.page-blog .blog-col-left .blog-card-tall:nth-child(1) {
  animation: pageContentReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.30s both;
}
body.page-blog .blog-col-right .blog-row:nth-child(1) {
  animation: pageContentReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.36s both;
}
body.page-blog .blog-col-right .blog-row:nth-child(2) {
  animation: pageContentReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.44s both;
}
body.page-blog .blog-col-left .blog-card-tall:nth-child(2) {
  animation: pageContentReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.50s both;
}
body.page-blog .blog-col-right .blog-row:nth-child(3) {
  animation: pageContentReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.56s both;
}
body.page-blog .blog-col-right .blog-row:nth-child(4) {
  animation: pageContentReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.62s both;
}
body.page-blog .blog-col-right .blog-row:nth-child(5) {
  animation: pageContentReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.68s both;
}
body.page-blog .blog-col-right .blog-row:nth-child(6) {
  animation: pageContentReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.74s both;
}

/* Contact Page Entrance */
body.page-contact .contact-head__eyebrow {
  animation: pageContentReveal 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
}
body.page-contact .contact-head__title {
  animation: pageContentReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both;
}
body.page-contact .contact-head__subtitle {
  animation: pageContentReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both;
}
body.page-contact .contact-card {
  animation: pageContentReveal 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.32s both;
}
body.page-contact .contact-feature-media {
  animation: pageContentReveal 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.40s both;
}
body.page-contact .contact-info-col:nth-child(1) {
  animation: pageContentReveal 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.48s both;
}
body.page-contact .contact-info-col:nth-child(2) {
  animation: pageContentReveal 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.54s both;
}
body.page-contact .contact-info-col:nth-child(3) {
  animation: pageContentReveal 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.60s both;
}
body.page-contact .contact-promo-card {
  animation: pageContentReveal 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.66s both;
}

/* About Page Cover Entrance */
body.page-about .page-cover__eyebrow {
  animation: pageContentReveal 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
}
body.page-about .page-cover__title {
  animation: pageContentReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both;
}
body.page-about .page-cover__lede {
  animation: pageContentReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal.is-in,
  .site-header__inner,
  .brand,
  .site-nav li,
  .site-nav a.is-current,
  .site-header__actions,
  body.page-services .page-cover__eyebrow,
  body.page-services .page-cover__title,
  body.page-services .page-cover__lede,
  body.page-services #plantation .feature__media,
  body.page-services #plantation .feature__body,
  body.page-blog .page-cover__eyebrow,
  body.page-blog .page-cover__title,
  body.page-blog .page-cover__lede,
  body.page-blog .blog-col-left .blog-card-tall,
  body.page-blog .blog-col-right .blog-row,
  body.page-contact .contact-head__eyebrow,
  body.page-contact .contact-head__title,
  body.page-contact .contact-head__subtitle,
  body.page-contact .contact-card,
  body.page-contact .contact-feature-media,
  body.page-contact .contact-info-col,
  body.page-contact .contact-promo-card,
  body.page-about .page-cover__eyebrow,
  body.page-about .page-cover__title,
  body.page-about .page-cover__lede {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    filter: none !important;
  }
}