/* Appletree — premium motion layer.
 * Subtle, slow, restrained. Hover/scroll only. Respects prefers-reduced-motion.
 * Paired with assets/js/animations.js which adds .is-revealed on scroll.
 */

/* ============ accessibility — kill motion if the user prefers ============ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============ smooth scroll site-wide ============ */
html{ scroll-behavior: smooth; }

/* ============ SCROLL REVEAL ============
 * JS adds .reveal to section targets on page load, then .is-revealed when each
 * intersects the viewport. CSS handles the rest.
 */
.reveal{
  opacity:0;
  transform: translateY(28px);
  transition:
    opacity .75s cubic-bezier(.2,.7,.2,1),
    transform .75s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.is-revealed{
  opacity:1;
  transform:none;
}
.reveal-delay-1{ transition-delay:.08s; }
.reveal-delay-2{ transition-delay:.18s; }
.reveal-delay-3{ transition-delay:.28s; }
.reveal-delay-4{ transition-delay:.38s; }

/* ============ HERO entrance — stagger on load ============ */
.apple-hero > *{
  animation: appleHeroIn .8s cubic-bezier(.2,.7,.2,1) both;
}
.apple-hero .anniv-chip{ animation-delay:.05s; }
.apple-hero h1{ animation-delay:.18s; }
.apple-hero .hero-lead{ animation-delay:.34s; }
.apple-hero .wp-block-buttons{ animation-delay:.50s; }
@keyframes appleHeroIn{
  from{ opacity:0; transform: translateY(18px); }
  to{ opacity:1; transform:none; }
}

/* ============ Anniversary chip — slow light sweep every ~6s ============ */
.apple-hero .anniv-chip{
  position:relative;
  overflow:hidden;
}
.apple-hero .anniv-chip::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:60%;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  transform: translateX(-200%);
  animation: appleChipShimmer 6.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes appleChipShimmer{
  0%, 30%   { transform: translateX(-200%); }
  60%, 100% { transform: translateX(250%); }
}

/* ============ TREATMENT CARDS — premium hover ============
 * Gradient background scales subtly inside the card; whole card lifts + glows.
 * Requires a clean stacking context so the gradient transforms cleanly.
 */
.apple-tcard{
  isolation: isolate;
  transition:
    transform .45s cubic-bezier(.2,.7,.2,1),
    box-shadow .45s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.apple-tcard::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background: inherit;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.apple-tcard::after{
  z-index:1;  /* keep dark gradient overlay above background */
}
.apple-tcard .body{
  position:relative;
  z-index:2;  /* text always on top */
}
.apple-tcard:hover{
  transform: translateY(-8px);
  box-shadow: 0 22px 50px -10px rgba(43,58,48,.28);
}
.apple-tcard:hover::before{
  transform: scale(1.06);
}

/* ============ VALUE TILES — gentle lift on hover ============ */
.apple-value{
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.apple-value:hover{
  transform: translateY(-3px);
}

/* ============ PLACEHOLDER IMAGES — slow breathing ============
 * Tiny saturation/brightness shift over 7s so empty image zones don't feel dead.
 */
.apple-ph{
  animation: applePhBreath 7s ease-in-out infinite;
}
@keyframes applePhBreath{
  0%, 100% { filter: saturate(1) brightness(1); }
  50%      { filter: saturate(1.08) brightness(1.02); }
}

/* ============ BUTTONS — lift + soft sage glow on hover ============ */
.apple-hero .wp-block-button .wp-block-button__link,
.apple-welcome .wp-block-button .wp-block-button__link,
.apple-treatments .wp-block-button .wp-block-button__link,
.apple-footer-cta{
  transition:
    background .2s ease,
    color .2s ease,
    transform .2s cubic-bezier(.2,.7,.2,1),
    box-shadow .3s ease;
}
.apple-hero .wp-block-button .wp-block-button__link:hover,
.apple-welcome .wp-block-button .wp-block-button__link:hover,
.apple-treatments .wp-block-button .wp-block-button__link:hover,
.apple-footer-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -6px rgba(85,126,99,.32);
}

/* ============ TEXT LINKS — underline grows from left ============ */
.apple-welcome p a:not(.wp-block-button__link),
.apple-treatments p a:not(.wp-block-button__link){
  background-image: linear-gradient(var(--apple-sage), var(--apple-sage));
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  text-decoration:none;
  color: var(--apple-sage-deep);
  font-weight:500;
  transition: background-size .35s cubic-bezier(.2,.7,.2,1), color .2s;
}
.apple-welcome p a:not(.wp-block-button__link):hover,
.apple-treatments p a:not(.wp-block-button__link):hover{
  background-size: 100% 1.5px;
}

/* ============ FOOTER columns — gentle stagger on reveal ============ */
.apple-footer-col{
  opacity:0;
  transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.apple-footer.is-revealed .apple-footer-col{
  opacity:1;
  transform:none;
}
.apple-footer.is-revealed .apple-footer-col:nth-child(2){ transition-delay:.08s; }
.apple-footer.is-revealed .apple-footer-col:nth-child(3){ transition-delay:.16s; }
.apple-footer.is-revealed .apple-footer-col:nth-child(4){ transition-delay:.24s; }