/* Motion layer for Greenleaf. The base page stays fully visible until JS enables it. */

html,
body {
  overflow-x:clip;
}

/* Reveal states: the no-JS/default state deliberately remains readable. */
.reveal-ready {
  --reveal-delay:0ms;
}

body.motion-on .reveal-ready {
  will-change:opacity,transform;
  transition:
    opacity 750ms var(--ease) var(--reveal-delay,0ms),
    transform 750ms var(--ease) var(--reveal-delay,0ms);
}

body.motion-on .reveal-ready:not(.is-revealed) {
  opacity:0;
  transform:translateY(24px);
}

body.motion-on .reveal-ready.is-revealed {
  opacity:1;
  transform:translateY(0);
}

/* A keyboard user never has to wait for an off-screen reveal. */
body.motion-on .reveal-ready:not(.is-revealed):focus-within {
  opacity:1;
  transform:translateY(0);
  transition-delay:0ms;
  transition-duration:0ms;
}

/* The hero remains an uncropped image; only its frame tilts very slightly. */
body.motion-on .hero-image.reveal-ready:not(.is-revealed) {
  transform:perspective(1200px) rotateX(var(--rotate-x,0deg)) rotateY(var(--rotate-y,0deg)) translateY(24px);
}

body.motion-on .hero-image.is-revealed {
  opacity:1;
  transform:perspective(1200px) rotateX(var(--rotate-x,0deg)) rotateY(var(--rotate-y,0deg));
  transform-style:preserve-3d;
  transform-origin:center center;
  backface-visibility:hidden;
}

body.motion-on .hero-image.reveal-ready:not(.is-revealed):focus-within {
  opacity:1;
  transform:perspective(1200px) rotateX(var(--rotate-x,0deg)) rotateY(var(--rotate-y,0deg));
  transition-delay:0ms;
  transition-duration:0ms;
}

/* Ambient light is kept below the hero's content in its own stacking context. */
.hero {
  position:relative;
  isolation:isolate;
}

body.motion-on .hero::before,
body.motion-on .hero::after {
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  border-radius:50%;
  filter:blur(2px);
}

body.motion-on .hero::before {
  width:min(62vw,760px);
  height:min(62vw,760px);
  top:-190px;
  left:-18vw;
  background:radial-gradient(circle,rgba(199,211,183,.34) 0%,rgba(199,211,183,.15) 33%,rgba(247,247,240,0) 72%);
  animation:ambient-drift-a 18s ease-in-out infinite alternate;
}

body.motion-on .hero::after {
  width:min(46vw,600px);
  height:min(46vw,600px);
  right:-12vw;
  bottom:28px;
  background:radial-gradient(circle,rgba(51,125,46,.12) 0%,rgba(199,211,183,.12) 39%,rgba(247,247,240,0) 73%);
  animation:ambient-drift-b 23s ease-in-out infinite alternate;
}

.hero > * {
  position:relative;
  z-index:1;
}

body.motion-on .hero-image {
  border:1px solid rgba(32,61,44,.16);
  box-shadow:0 20px 54px rgba(32,61,44,.14),0 3px 10px rgba(32,61,44,.07);
}

@keyframes ambient-drift-a {
  from { transform:translate3d(-1.5%,0,0) scale(.98); }
  to { transform:translate3d(3%,2%,0) scale(1.04); }
}

@keyframes ambient-drift-b {
  from { transform:translate3d(1%,2%,0) scale(.97); }
  to { transform:translate3d(-3%,-2%,0) scale(1.04); }
}

/* A low-key spotlight follows the pointer only when JS updates its custom properties. */
body.motion-on .benefit {
  --spot-x:50%;
  --spot-y:42%;
  background:radial-gradient(260px circle at var(--spot-x) var(--spot-y),rgba(199,211,183,.34),rgba(199,211,183,0) 68%);
}

.benefit-photo {
  transform-origin:center center;
  will-change:transform;
}

@media (hover:hover) and (pointer:fine) {
  body.motion-on .benefit-photo {
    transition:transform 360ms var(--ease);
  }

  body.motion-on .benefit:hover .benefit-photo,
  body.motion-on .benefit:focus-within .benefit-photo {
    transform:translateY(-8px) scale(1.025);
  }
}

/* Sheen and click waves are decorative layers: they never receive pointer events. */
body.motion-on .button {
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

body.motion-on .button::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:-55% -40%;
  pointer-events:none;
  opacity:.65;
  background:linear-gradient(112deg,transparent 43%,rgba(255,255,255,.38) 50%,transparent 57%);
  transform:translateX(-74%) skewX(-14deg);
  transition:transform 620ms var(--ease);
}

body.motion-on .button:hover::before,
body.motion-on .button:focus-visible::before {
  transform:translateX(74%) skewX(-14deg);
}

.button .click-wave {
  display:none;
  position:absolute;
  z-index:0;
  left:var(--wave-x,50%);
  top:var(--wave-y,50%);
  width:18px;
  height:18px;
  margin:-9px;
  border:1px solid currentColor;
  border-radius:50%;
  pointer-events:none;
  font-size:0;
  line-height:0;
}

body.motion-on .button .click-wave {
  display:block;
  opacity:0;
  animation:button-wave 680ms ease-out both;
}

.button > span:not(.click-wave) {
  position:relative;
  z-index:1;
}

@keyframes button-wave {
  0% { opacity:.42; transform:scale(.25); }
  100% { opacity:0; transform:scale(8); }
}

/* The logo is stationary; it only gets a restrained, non-layout-changing glow. */
body.motion-on .brand img {
  transition:filter 260ms var(--ease);
}

body.motion-on .brand:hover img,
body.motion-on .brand:focus-visible img {
  filter:drop-shadow(0 4px 7px rgba(51,125,46,.22));
}

.scroll-progress {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:3px;
  z-index:30;
  pointer-events:none;
  opacity:0;
  transform:scaleX(var(--scroll-progress,0));
  transform-origin:left center;
  background:linear-gradient(90deg,var(--brand),#6b9c50,var(--olive));
  box-shadow:0 1px 7px rgba(51,125,46,.28);
  transition:opacity 180ms ease;
}

body.motion-on .scroll-progress {
  opacity:1;
}

/* The contact background owns and clips its decorative field, never its text. */
.contact-section {
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.contact-inner {
  position:relative;
  z-index:1;
}

.contact-sparkles {
  display:none;
  position:absolute;
  z-index:0;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

body.motion-on .contact-sparkles {
  display:block;
}

.contact-sparkles .sparkle {
  position:absolute;
  left:var(--x,50%);
  bottom:-24px;
  width:var(--size,4px);
  height:var(--size,4px);
  border-radius:50%;
  background:var(--olive);
  box-shadow:0 0 10px rgba(199,211,183,.38);
  opacity:0;
  pointer-events:none;
}

body.motion-on .contact-sparkles .sparkle {
  animation:sparkle-rise var(--duration,12s) ease-in var(--delay,0s) infinite;
}

@keyframes sparkle-rise {
  0% { opacity:0; transform:translate3d(0,10px,0) scale(.7); }
  12% { opacity:.16; }
  58% { opacity:.23; }
  88% { opacity:.08; }
  100% { opacity:0; transform:translate3d(16px,-420px,0) scale(1.15); }
}

body.effects-paused .hero::before,
body.effects-paused .hero::after,
body.effects-paused .contact-sparkles .sparkle {
  animation-play-state:paused;
}

/* Inserted by JS in the footer; it remains clear and usable even with motion off. */
.motion-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:9px 16px;
  border:1px solid var(--brand);
  border-radius:99px;
  background:transparent;
  color:var(--brand);
  font-size:16px;
  font-weight:700;
  line-height:1.35;
  cursor:pointer;
  transition:background .2s,color .2s,transform .2s;
}

.motion-toggle:hover {
  background:var(--brand);
  color:var(--paper);
  transform:translateY(-1px);
}

.motion-toggle:active {
  transform:translateY(0);
}

@media (max-width:480px) {
  .motion-toggle {
    width:100%;
    margin-top:18px;
  }
}

@media (prefers-reduced-motion:reduce) {
  html,
  body {
    overflow-x:clip;
  }

  body.motion-on .reveal-ready,
  body.motion-on .reveal-ready:not(.is-revealed),
  body.motion-on .reveal-ready.is-revealed,
  body.motion-on .hero-image.reveal-ready:not(.is-revealed),
  body.motion-on .hero-image.is-revealed {
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }

  body.motion-on .hero::before,
  body.motion-on .hero::after,
  body.motion-on .button::before,
  .contact-sparkles,
  .scroll-progress {
    display:none !important;
  }

  body.motion-on .benefit {
    background:none !important;
  }

  body.motion-on .benefit-photo,
  .motion-toggle {
    transition:none !important;
  }
}