/* ============================================================================
   eStorePoint — homepage-only stylesheet
   Loaded via $head_css = ['home'] (see includes/header.php). Ships after
   style.css and animations.css so overrides here always win on a tie.
   Contents: hero carousel · assurance marquee · mission carousel ·
             product/blog rails · CTA band · reading progress
   ============================================================================ */

/* ---- Reading progress ----------------------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 101;               /* navbar is 100 — sit on its top edge, not over modals */
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--green-600), var(--blue-600) 62%, var(--lime));
}

/* ---- Shared: autoplay meter ---------------------------------------------- */
@keyframes meterRun { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hc-meter span,
.mc-meter span {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.hc-meter span.run,
.mc-meter span.run { animation: meterRun linear forwards; }  /* duration set inline by JS */

/* ---- Shared: dots -------------------------------------------------------- */
.car-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
  transition: width .3s ease, background .3s ease;
}
.car-dot:hover { background: rgba(255, 255, 255, .8); }

/* ---- Shared: ghost button (on photographs) -------------------------------- */
.btn-ghost {
  border: 1.5px solid rgba(255, 255, 255, .55);
  color: #fff;
  background: rgba(255, 255, 255, .10);
}
.btn-ghost:hover {
  background: #fff;
  border-color: #fff;
  color: var(--green-800);
  transform: translateY(-2px);
}

/* ============================================================================
   HERO CAROUSEL
   Slides stack in one grid cell so the section is always as tall as the
   tallest slide — no fixed height, no jump when the copy wraps.
   ============================================================================ */
.hero-carousel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  /* brand gradient shows through before the first image paints */
  background:
    radial-gradient(1000px 520px at 86% -12%, rgba(36, 84, 255, .40), transparent 55%),
    radial-gradient(760px 420px at 6% 114%, rgba(229, 252, 84, .22), transparent 55%),
    linear-gradient(135deg, var(--green-800), var(--green-600));
}
/* decorative leaf wallpaper from the old hero — echoes behind the photos */
.hero-carousel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/hero-leaf.svg") no-repeat right -60px bottom -40px / 520px;
  opacity: .16;
  pointer-events: none;
  z-index: 0;
}

.hc-track {
  display: grid;
  min-height: min(62vh, 560px);
}
.hc-slide {
  grid-area: 1 / 1;                     /* every slide occupies the same cell */
  position: relative;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;                   /* drops hidden slides out of the tab order */
  transition: opacity .9s ease, visibility 0s linear .9s;
}
.hc-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  transition: opacity .9s ease, visibility 0s;
}

.hc-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
}
.hc-slide.is-active .hc-img { animation: kenburns 9s ease-out forwards; }
@keyframes kenburns {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.4%, -1.2%, 0); }
}

.hc-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(5, 40, 19, .92) 0%, rgba(5, 40, 19, .74) 38%,
                    rgba(5, 40, 19, .26) 68%, rgba(5, 40, 19, .48) 100%);
}

/* Vertical padding is viewport-relative so the hero never outgrows the fold.

   6.5vh rather than 8vh, with the track capped at 560px rather than 640px, to
   keep the hero and the 48px eco-strip reading as one tighter block. The floor
   is 32px — under that the copy crowds the edge-anchored arrows and the dots.

   The two constraints cross over: copy (~379px) + 2 x padding overtakes the
   track's min-height anywhere under ~770px tall, so on an ordinary laptop the
   COPY sets the height and the vh value is inert. That is why the padding
   carries most of the change on the screens people actually use, and why the
   numbers above are tuned together rather than independently. */
.hc-inner { position: relative; z-index: 3; padding: clamp(32px, 6.5vh, 96px) 0; }
/* Left inset keeps the copy clear of the edge-anchored arrows at every width:
   arrows start at 14px and are 52px wide, so text must begin past ~80px. */
.hc-copy  { position: relative; z-index: 1; max-width: 660px; padding-left: 56px; }

.hc-copy h1,
.hc-copy .hc-h2 {
  margin: 0 0 1rem;
  color: #fff;
  /* min(5.2vw, 7vh) rather than 5.2vw alone. A headline sized purely off width
     stays enormous on a short window — measured at 62.4px (3 lines, 198px, almost
     half the copy block) on a 1200x670 screen, which is what made the hero read
     as tall. The vh term lets it step down where the height budget is tight and
     is inert on tall screens, where 4.1rem caps it anyway. */
  font-size: clamp(2.15rem, min(5.2vw, 7vh), 4.1rem);
  line-height: 1.06;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.hc-copy p.lead {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, .93);
}
/* animations.css draws a 50%-opacity lime band behind the word — fine for dark
   text on light, but here the words are lime, so lime-on-lime would vanish.
   Keep the grow-in animation and drop the band to a rule below the glyphs. */
.hc-copy .hl { color: var(--lime); }
.hc-copy .hl::after {
  bottom: -.1em;
  height: .11em;
  background: var(--lime);
  opacity: .92;
  border-radius: .06em;
}

/* copy staggers in as each slide takes its turn */
.hc-slide .hc-copy > * { opacity: 0; transform: translateY(24px); }
.hc-slide.is-active .hc-copy > * {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
}
.hc-slide.is-active .hc-copy > *:nth-child(1) { transition-delay: .16s; }
.hc-slide.is-active .hc-copy > *:nth-child(2) { transition-delay: .26s; }
.hc-slide.is-active .hc-copy > *:nth-child(3) { transition-delay: .36s; }
.hc-slide.is-active .hc-copy > *:nth-child(4) { transition-delay: .46s; }

/* the old .hero-cta one-shot entrance would fight the stagger above */
.hc-copy .hero-cta { animation: none; }

/* ---- hero content --------------------------------------------------------- */

/* ---- arrows, dots, meter -------------------------------------------------- */
.hc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .36);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background .25s, color .25s, transform .25s, box-shadow .25s;
}
.hc-arrow:hover {
  background: #fff;
  color: var(--green-800);
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .25);
}
.hc-arrow:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.hc-prev { left: 14px; }
.hc-next { right: 14px; }

.hc-dots {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  gap: .5rem;
}
.hc-dots .car-dot.is-active { width: 30px; background: var(--lime); }

.hc-meter {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  z-index: 6;
  background: rgba(255, 255, 255, .18);
}
.hc-meter span { background: var(--lime); }

.hero-carousel.is-static .hc-arrow,
.hero-carousel.is-static .hc-dots,
.hero-carousel.is-static .hc-meter { display: none; }

/* ============================================================================
   ASSURANCE MARQUEE
   The track holds two identical halves, so -50% lands seamlessly.
   ============================================================================ */
.eco-strip {
  position: relative;
  overflow: hidden;
  background: var(--green-900);
  padding: .8rem 0;
}
.eco-strip::before,
.eco-strip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 84px;
  z-index: 2;
  pointer-events: none;
}
.eco-strip::before { left: 0;  background: linear-gradient(90deg, var(--green-900), transparent); }
.eco-strip::after  { right: 0; background: linear-gradient(270deg, var(--green-900), transparent); }

.eco-strip-track {
  display: flex;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.eco-strip:hover .eco-strip-track { animation-play-state: paused; }
.eco-strip-half {
  display: flex;
  align-items: center;
  gap: 2.6rem;
  padding-right: 2.6rem;
}
.eco-chip {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  white-space: nowrap;
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .88);
}
.eco-chip svg { color: var(--lime); flex: none; }
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* ============================================================================
   "OUR MISSION" CAROUSEL
   ============================================================================ */
.mission-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 100% 0, rgba(36, 84, 255, .07), transparent 60%),
    radial-gradient(760px 420px at 0 100%, rgba(229, 252, 84, .22), transparent 60%),
    var(--cream);
}

.mission-carousel {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
}
.mc-track {
  display: grid;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.mc-slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s ease, visibility 0s linear .7s;
}
.mc-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .7s ease, visibility 0s;
}

.mc-media { position: relative; min-height: 430px; background: var(--green-50); }
.mc-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mc-media::after {           /* keeps the slide number readable on any photo */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 40, 19, 0) 45%, rgba(5, 40, 19, .58));
}
.mc-badge {
  position: absolute;
  left: 26px;
  bottom: 14px;
  z-index: 2;
  font-size: clamp(3.4rem, 7vw, 5.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 8px 30px rgba(0, 0, 0, .5);
}

.mc-body {
  padding: clamp(1.8rem, 4vw, 3.2rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .9rem;
}
.mc-kicker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--green-600);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mc-body h3 {
  margin: 0;
  color: var(--green-900);
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  line-height: 1.16;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.mc-body p { margin: 0; color: var(--muted); line-height: 1.78; font-size: .99rem; }
.mc-body .btn { margin-top: .5rem; }

.mc-meter {
  height: 4px;
  margin-top: 16px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.mc-meter span { background: linear-gradient(90deg, var(--green-600), var(--lime)); }

.mc-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin-top: 1.1rem;
}
.mc-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--green-800);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.mc-arrow:hover {
  background: var(--green-600);
  border-color: var(--green-600);
  color: #fff;
  transform: scale(1.08);
}
.mc-arrow:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; }
.mc-dots { display: flex; align-items: center; gap: .45rem; }
.mc-dots .car-dot { background: var(--line); }
.mc-dots .car-dot:hover { background: var(--green-400); }
.mc-dots .car-dot.is-active { width: 28px; background: var(--green-600); }

.mission-carousel.is-static .mc-nav,
.mission-carousel.is-static .mc-meter { display: none; }

/* ============================================================================
   PRODUCT / BLOG RAILS
   ============================================================================ */
.rail { position: relative; }
.rail-track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* headroom so the hover lift and its shadow are never clipped */
  padding: 18px 0 30px;
  margin: -18px 0 -30px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.rail-track::-webkit-scrollbar { display: none; }
.rail-track > * {
  flex: 0 0 calc((100% - 3.75rem) / 4);   /* 4 up, matching the old grid */
  min-width: 0;
  scroll-snap-align: start;
}

.rail-arrow {
  position: absolute;
  top: calc(50% - 14px);                  /* nudge above the dot row */
  transform: translateY(-50%);
  z-index: 6;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--green-800);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(10, 55, 24, .16);
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.rail-arrow:hover {
  background: var(--green-600);
  border-color: var(--green-600);
  color: #fff;
  transform: translateY(-50%) scale(1.08);
}
.rail-arrow:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 3px; }
.rail-prev { left: -16px; }
.rail-next { right: -16px; }

.rail-dots {
  display: flex;
  justify-content: center;
  gap: .45rem;
  margin-top: .4rem;
}
.rail-dots .car-dot { background: var(--line); }
.rail-dots .car-dot:hover { background: var(--green-400); }
.rail-dots .car-dot.is-active { width: 26px; background: var(--green-600); }

.rail.is-static .rail-arrow,
.rail.is-static .rail-dots { display: none; }

/* ============================================================================
   CTA BAND — drifting orbs behind a slow shine sweep
   ============================================================================ */
.cta-band h2,
.cta-band p,
.cta-band .btn { position: relative; z-index: 1; }

.cta-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(52px);
  opacity: .38;
  pointer-events: none;
  z-index: 0;
}
.cta-orb.o1 {
  width: 280px; height: 280px;
  background: var(--lime);
  top: -120px; left: -70px;
  animation: orbDrift 13s ease-in-out infinite;
}
.cta-orb.o2 {
  width: 320px; height: 320px;
  background: #7ea0ff;
  bottom: -150px; right: -80px;
  animation: orbDrift 15s ease-in-out infinite reverse;
}
@keyframes orbDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(26px, -20px, 0) scale(1.14); }
}
.cta-band::after {
  content: "";
  position: absolute;
  top: -60%;
  left: 0;
  width: 26%;
  height: 220%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .26), transparent);
  transform: skewX(-18deg) translateX(-160%);
  animation: bandShine 6s ease-in-out infinite;
}
@keyframes bandShine {
  0%        { transform: skewX(-18deg) translateX(-160%); }
  55%, 100% { transform: skewX(-18deg) translateX(520%); }
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1100px) {
  .rail-track > * { flex-basis: calc((100% - 2.5rem) / 3); }
}

@media (max-width: 960px) {
  /* Full-width copy wraps to fewer lines, so the block is shorter here — these
     values are scaled down from the base padding rather than inherited. */
  .hc-inner   { padding: 62px 0 76px; }
  .hc-copy    { max-width: 100%; }
  .hc-arrow   { width: 44px; height: 44px; }
  .hc-prev    { left: 12px; }
  .hc-next    { right: 12px; }
  .hc-copy    { padding-left: 52px; }

  .mc-slide   { grid-template-columns: 1fr; }
  .mc-media   { min-height: 0; aspect-ratio: 16 / 9; }

  .rail-track > * { flex-basis: calc((100% - 1.25rem) / 2); }
  .rail-prev { left: -8px; }
  .rail-next { right: -8px; }
}

@media (max-width: 700px) {
  /* touch users swipe, so the rail chrome would just be decoration */
  .rail-arrow { display: none; }

  .eco-strip::before,
  .eco-strip::after { width: 44px; }

  /* the old centered-hero rule doesn't suit a left-aligned overlay */
  .hc-copy .hero-cta { justify-content: flex-start; }
  .hc-scrim {
    background: linear-gradient(180deg,
      rgba(5, 40, 19, .88) 0%, rgba(5, 40, 19, .76) 52%, rgba(5, 40, 19, .62) 100%);
  }
}

@media (max-width: 560px) {
  .hc-inner { padding: 44px 0 68px; }
  .hc-dots  { bottom: 22px; }
  .hc-copy  { padding-left: 48px; }
  .hc-arrow { width: 40px; height: 40px; }
  .hc-copy .hero-cta { flex-direction: column; align-items: stretch; }
  .hc-copy .hero-cta .btn { text-align: center; }

  .rail-track > * { flex-basis: 84%; }
  .mc-body { padding: 1.6rem 1.3rem; }
}

/* ---- Reduced motion -------------------------------------------------------
   animations.css already neutralises every animation globally; these rules
   remove the layout behaviour that would otherwise still move.             */
@media (prefers-reduced-motion: reduce) {
  .rail-track { scroll-behavior: auto; }
  .hc-slide,
  .mc-slide   { transition-duration: .001ms; transition-delay: 0s; }
  .hc-slide.is-active .hc-img { animation: none; transform: none; }
}

/* ---- Short windows --------------------------------------------------------
   The copy block alone is ~379px, so under ~640px tall the padding clamp stops
   shrinking fast enough and the eco-strip slides back under the fold. Tighten
   the padding and ease the track's floor there so the strip still clears
   without clipping the hero on any normal laptop.                         */
@media (max-height: 640px) {
  /* Bottom padding is not just breathing room here. .hc-dots is absolutely
     positioned at bottom:10px and is ~9px tall, so it occupies the last 19px
     of the hero — and below 560px wide the CTA buttons stack, pushing the
     copy down into exactly that band. At 22px the indicator was drawing on
     top of the bottom button. 26px clears it with ~7px to spare. */
  .hc-inner { padding: 22px 0 26px; }
  .hc-dots  { bottom: 10px; }
  /* Below ~500px tall the binding constraint stops being the padding and
     becomes .hc-track's min-height, which alone outgrows the window. Ease the
     floor so the strip clears there too. */
  .hc-track { min-height: min(56vh, 520px); }
  .hc-copy h1,
  .hc-copy .hc-h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); margin-bottom: .7rem; }
  .hc-copy p.lead { font-size: 1rem; line-height: 1.55; }
  .hc-copy { padding-left: 48px; }
}