/* =========================================================
   STC LIVING — motion library
   Scroll reveals, floats, marquee, loaders, micro-interactions
   ========================================================= */

@keyframes floatY{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}

@keyframes marquee{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(30px);}
  to{opacity:1;transform:translateY(0);}
}

@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:1;}
}

@keyframes scaleIn{
  from{opacity:0;transform:scale(.94);}
  to{opacity:1;transform:scale(1);}
}

@keyframes drawLine{
  from{width:0;}
  to{width:46px;}
}

@keyframes pulseRing{
  0%{box-shadow:0 0 0 0 rgba(185,138,78,.45);}
  70%{box-shadow:0 0 0 14px rgba(185,138,78,0);}
  100%{box-shadow:0 0 0 0 rgba(185,138,78,0);}
}

@keyframes shimmer{
  0%{background-position:-200% 0;}
  100%{background-position:200% 0;}
}

@keyframes spin{
  to{transform:rotate(360deg);}
}

/* reveal on scroll — toggled by animations.js via IntersectionObserver */
.reveal{
  opacity:0;transform:translateY(30px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-delay-1.in{transition-delay:.1s;}
.reveal-delay-2.in{transition-delay:.2s;}
.reveal-delay-3.in{transition-delay:.3s;}
.reveal-delay-4.in{transition-delay:.4s;}

.reveal-scale{opacity:0;transform:scale(.92);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal-scale.in{opacity:1;transform:scale(1);}

.reveal-left{opacity:0;transform:translateX(-36px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal-left.in{opacity:1;transform:translateX(0);}

.reveal-right{opacity:0;transform:translateX(36px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal-right.in{opacity:1;transform:translateX(0);}

/* whatsapp pulse */
.wa-float{animation:pulseRing 2.6s infinite;}

/* nav underline shimmer already handled via width transition in components.css */

/* page load fade */
body{animation:fadeIn .5s ease both;}

/* image hover zoom helper (used with overflow:hidden parents) */
.zoom-hover{transition:transform .6s var(--ease);}
.zoom-hover:hover{transform:scale(1.06);}

/* button ripple-esque shine */
.btn{position:relative;overflow:hidden;}
.btn::before{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .6s var(--ease);
}
.btn:hover::before{left:120%;}

/* mobile menu animation */
.navlinks.open{
  animation:fadeUp .35s var(--ease) both;
}

/* loading skeleton (used while map / iframe loads) */
.skeleton{
  background:linear-gradient(90deg,var(--card) 25%,#f4ecd9 37%,var(--card) 63%);
  background-size:400% 100%;animation:shimmer 1.6s ease infinite;
}

/* cursor-follow gold glow for hero visual */
.hero-visual{position:relative;}
.hero-visual::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(185,138,78,.18),transparent 40%);
  opacity:0;transition:opacity .4s;
}
.hero-visual:hover::after{opacity:1;}

/* stitch underline draw-in when section head enters view */
.section-head .stitch{width:46px;overflow:hidden;}
.section-head.reveal.in .stitch::before{animation:drawLine .8s var(--ease) both;}