/* ============================================================
   SAHU AGRO — Scroll & page-load animations
   Everything is gated behind the `.anim` class on <html>, which
   is only added when the visitor has NOT asked for reduced motion.
   Elements only start hidden once js/animations.js has tagged them
   with data-reveal, so if JS ever fails the page simply shows normally.
   ============================================================ */

:root{ --ease: cubic-bezier(.22, 1, .36, 1); }

/* Stops sideways slides from creating a horizontal scrollbar */
html, body{ overflow-x: clip; }

/* ---------------- Scroll progress bar ---------------- */
#scroll-progress{
  position: fixed; top: 0; left: 0; width: 100%; height: 3px;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--red), var(--amber), var(--sage));
  z-index: 300; pointer-events: none;
}

/* ---------------- Header: slide in, hide on scroll down ---------------- */
.site-header{
  transition: background .25s ease, box-shadow .25s ease, transform .45s var(--ease);
}
.site-header.hide{ transform: translateY(-100%); }
.anim .site-header{ animation: headerIn .9s var(--ease) .1s backwards; }
@keyframes headerIn{
  from{ opacity: 0; transform: translateY(-100%); }
  to{ opacity: 1; transform: none; }
}

/* ---------------- Home hero ---------------- */
.anim .photo-hero h1 .line{
  display: inline-block;
  animation: heroRise 1.1s var(--ease) backwards;
}
.anim .photo-hero h1 .line:nth-of-type(1){ animation-delay: .25s; }
.anim .photo-hero h1 .line:nth-of-type(2){ animation-delay: .5s; }
.anim .photo-hero .btn{ animation: heroRise 1s var(--ease) .85s backwards; }
@keyframes heroRise{
  from{ opacity: 0; transform: translateY(36px); }
  to{ opacity: 1; transform: none; }
}

/* ---------------- Reveal on scroll ---------------- */
[data-reveal]{
  transition:
    opacity .7s var(--ease) var(--d, 0ms),
    transform .7s var(--ease) var(--d, 0ms);
}
.anim [data-reveal="up"],
.anim [data-reveal="left"],
.anim [data-reveal="right"],
.anim [data-reveal="zoom"],
.anim [data-reveal="fade"],
.anim [data-reveal="clip"]{ opacity: 0; }

.anim [data-reveal="up"]{    transform: translate3d(0, 28px, 0); }
.anim [data-reveal="left"]{  transform: translate3d(-40px, 0, 0); }
.anim [data-reveal="right"]{ transform: translate3d(40px, 0, 0); }
.anim [data-reveal="zoom"]{  transform: scale(.92); }

/* photos: soft fade + settle */
.anim [data-reveal="clip"]{ transform: scale(1.04); }

.anim [data-reveal].in{
  opacity: 1;
  transform: none;
}
/* once finished, hand control back so hover effects stay snappy */
.anim [data-reveal].done{
  transition: transform .35s var(--ease);
}

/* ---------------- Split-word headings ---------------- */
.anim .split-h .w{
  display: inline-block; overflow: hidden; vertical-align: top;
  padding: 0 .05em .14em; margin: 0 -.05em -.14em;
}
.anim .split-h .wi{
  display: inline-block;
  transform: translateY(112%);
  transition: transform .75s var(--ease) calc(var(--i, 0) * 45ms);
}
.anim .split-h.in .wi{ transform: none; }

/* ---------------- Details ---------------- */
/* icon chips pop in after their card */
.anim .icon-card .icon-chip{
  transform: scale(.3) rotate(-25deg);
  transition: transform .8s cubic-bezier(.34, 1.56, .64, 1) .35s;
}
.anim .icon-card.in .icon-chip{ transform: none; }

/* timeline: line draws downward, dots pop in */
.anim .timeline{ border-left-color: transparent; position: relative; }
.anim .timeline::before{
  content: ""; position: absolute; left: -3px; top: 0; bottom: 0; width: 3px;
  background: var(--red);
  transform-origin: top; transform: scaleY(0);
  transition: transform 1.6s var(--ease);
}
.anim .timeline.in::before{ transform: scaleY(1); }
.anim .timeline > div{ position: relative; }
.anim .timeline > div::before{
  content: ""; position: absolute;
  left: calc(-1.8rem - 7.5px); top: .3rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 4px var(--white);
  transform: scale(0);
  transition: transform .6s cubic-bezier(.34, 1.56, .64, 1) calc(var(--d, 0ms) + .25s);
}
.anim .timeline > div.in::before{ transform: scale(1); }

.spec-list [data-count]{ font-variant-numeric: tabular-nums; }

/* ---------------- Hover polish (cards, buttons, photos) ---------------- */
.feature-card, .icon-card, .value-card, .pillar-card, .director-card{
  transition: transform .35s var(--ease);
}
.anim .feature-card.done:hover,
.anim .icon-card.done:hover,
.anim .value-card.done:hover,
.anim .pillar-card.done:hover,
.anim .director-card.done:hover{ transform: translateY(-8px); }
.feature-card:hover, .icon-card:hover, .value-card:hover, .pillar-card:hover{
  box-shadow: 0 22px 40px -20px rgba(28, 43, 30, .4);
}
.feature-card .photo{ transition: transform 1s var(--ease); }
.feature-card:hover .photo{ transform: scale(1.07); }
.icon-card:hover .icon-chip{ transform: translateY(-3px) rotate(-6deg) !important; }

.director-avatar img{ transition: transform 1s var(--ease); }
.director-card:hover .director-avatar img{ transform: scale(1.07); }

.btn{ transition: background .2s ease, color .2s ease, transform .3s var(--ease), box-shadow .3s ease; }
.btn:hover{ transform: translateY(-3px); box-shadow: 0 12px 22px -12px rgba(0, 0, 0, .45); }
.btn:active{ transform: translateY(0); }

@media (max-width: 780px){
  .anim [data-reveal="left"]{  transform: translate3d(-30px, 0, 0); }
  .anim [data-reveal="right"]{ transform: translate3d(30px, 0, 0); }
  .anim [data-reveal="up"]{    transform: translate3d(0, 32px, 0); }
}