/* =====================================================================
   GoldenTrail — animations.css
   Reveal-on-scroll, keyframes, hero motion, hover flourishes.
   ===================================================================== */

/* reveal on scroll (toggled by animations.js) */
[data-reveal]{ opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal="left"]{ transform: translateX(-32px); }
[data-reveal="right"]{ transform: translateX(32px); }
[data-reveal="scale"]{ transform: scale(.94); }
[data-reveal].in{ transform:none; }
[data-delay="1"]{ transition-delay:.08s; }
[data-delay="2"]{ transition-delay:.16s; }
[data-delay="3"]{ transition-delay:.24s; }
[data-delay="4"]{ transition-delay:.32s; }
[data-delay="5"]{ transition-delay:.40s; }

/* keyframes */
@keyframes fade-up { from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }
@keyframes float-y { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }
@keyframes float-x { 0%,100%{ transform:translateX(0);} 50%{ transform:translateX(12px);} }
@keyframes drift { 0%{ transform:translate(0,0) rotate(0);} 50%{ transform:translate(10px,-12px) rotate(4deg);} 100%{ transform:translate(0,0) rotate(0);} }
@keyframes spin-slow { to{ transform: rotate(360deg);} }
@keyframes pulse-ring { 0%{ box-shadow:0 0 0 0 rgba(126,155,107,.5);} 70%{ box-shadow:0 0 0 16px rgba(126,155,107,0);} 100%{ box-shadow:0 0 0 0 rgba(126,155,107,0);} }
@keyframes paw-trot { 0%{opacity:0; transform: translateY(6px) scale(.8);} 30%{opacity:1;} 100%{opacity:0; transform: translateY(-4px) scale(1);} }

.float-y { animation: float-y 7s ease-in-out infinite; }
.float-x { animation: float-x 9s ease-in-out infinite; }
.drift { animation: drift 12s ease-in-out infinite; }
.spin-slow { animation: spin-slow 40s linear infinite; }
.pulse-ring { animation: pulse-ring 2.6s ease-out infinite; }

/* hero blob backdrops */
.blob { position:absolute; border-radius:50%; filter: blur(50px); opacity:.45; z-index:0; pointer-events:none; }
.blob--sage { background: var(--sage-soft); }
.blob--clay { background: var(--clay-soft); }
.blob--sand { background: var(--sand-deep); }

/* hover lift utility */
.hover-lift { transition: transform var(--t), box-shadow var(--t); }
.hover-lift:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }

/* underline grow link */
.u-grow { background-image: linear-gradient(var(--clay),var(--clay)); background-size:0% 2px; background-repeat:no-repeat; background-position:0 100%; transition: background-size var(--t); padding-bottom:2px; }
.u-grow:hover { background-size:100% 2px; }

/* image zoom-in lazy fade */
img.lazy { opacity:0; transition: opacity .6s ease; }
img.lazy.loaded { opacity:1; }

/* count-up subtle */
[data-count]{ font-variant-numeric: tabular-nums; }

/* scroll indicator (hero) */
.scroll-cue { display:inline-flex; flex-direction:column; align-items:center; gap:.5rem; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color: var(--muted); }
.scroll-cue__line { width:2px; height:42px; background: linear-gradient(var(--sage), transparent); position:relative; overflow:hidden; border-radius:2px; }
.scroll-cue__line::after { content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background: var(--clay); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%{ top:-50%;} 100%{ top:120%;} }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1!important; transform:none!important; }
  .float-y,.float-x,.drift,.spin-slow,.pulse-ring,.scroll-cue__line::after{ animation:none!important; }
}