/* Igorot Massage Clinic — motion + effects layer (scroll reveal, magnetic, cinematic intro, reviews)
   Adapted to the site's blue/red brand. Inherits --red/--blue/--shadow/--heading from page :root.
   Hidden states are gated on html.js so no-JS users always see content. */

:root { --rr-ease: cubic-bezier(.22,1,.36,1); --rr-spring: cubic-bezier(.34,1.56,.64,1); }

/* ---- SCROLL REVEAL ---- */
.js [data-rr]   { opacity:0; transform:translateY(28px); transition:opacity .8s var(--rr-ease), transform .8s var(--rr-ease); }
.js [data-rr-l] { opacity:0; transform:translateX(-60px); transition:opacity .85s var(--rr-ease), transform .85s var(--rr-ease); }
.js [data-rr-r] { opacity:0; transform:translateX(60px); transition:opacity .85s var(--rr-ease), transform .85s var(--rr-ease); }
.js [data-rr].is-in, .js [data-rr-l].is-in, .js [data-rr-r].is-in { opacity:1; transform:none; }

/* staggered grids */
.services-grid > *:nth-child(1), .blog-grid > *:nth-child(1), .rev-grid > *:nth-child(1) { transition-delay:.05s; }
.services-grid > *:nth-child(2), .blog-grid > *:nth-child(2), .rev-grid > *:nth-child(2) { transition-delay:.16s; }
.services-grid > *:nth-child(3), .blog-grid > *:nth-child(3), .rev-grid > *:nth-child(3) { transition-delay:.27s; }
.services-grid > *:nth-child(4), .blog-grid > *:nth-child(4) { transition-delay:.38s; }
.blog-grid > *:nth-child(5) { transition-delay:.49s; }

/* ---- MAGNETIC ---- */
[data-magnetic] { will-change: transform; }

/* ---- CINEMATIC INTRO (home only) ---- */
.js body.home::before {
  content:''; position:fixed; inset:0; z-index:9999; background:#0D1E2E; pointer-events:none;
  animation: intro-curtain .7s var(--rr-ease) forwards;
}
@keyframes intro-curtain { 0%{opacity:1} 100%{opacity:0; visibility:hidden} }
.js body.home nav { animation: intro-nav .7s var(--rr-spring) .3s backwards; }
@keyframes intro-nav { from{opacity:0; transform:translateY(-110%)} to{opacity:1; transform:none} }
.js body.home .hero-inner > * { opacity:0; transform:translateY(26px); filter:blur(5px); animation: intro-line .8s var(--rr-ease) forwards; }
.js body.home .hero-inner > *:nth-child(1){ animation-delay:.5s }
.js body.home .hero-inner > *:nth-child(2){ animation-delay:.64s }
.js body.home .hero-inner > *:nth-child(3){ animation-delay:.78s }
.js body.home .hero-inner > *:nth-child(4){ animation-delay:.9s }
.js body.home .hero-inner > *:nth-child(5){ animation-delay:1s }
@keyframes intro-line { to{opacity:1; transform:none; filter:blur(0)} }

/* ---- GOOGLE REVIEWS ---- */
.reviews-section { background: var(--bg-2); }
.rev-score { display:flex; align-items:center; gap:14px; margin-bottom:6px; }
.rev-score .num { font-family: var(--heading); font-size:46px; color: var(--red); line-height:1; }
.rev-stars { color:#F5A623; font-size:20px; letter-spacing:2px; }
.rev-score .cnt { font-family: var(--body); font-size:14px; color: var(--text-muted); }
.rev-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:44px 0 36px; }
.rev-card { background:#fff; box-shadow: var(--shadow); border-top:3px solid var(--blue); padding:28px; }
.rev-card .rc-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.rev-av { width:44px; height:44px; border-radius:50%; color:#fff; font-family: var(--heading); font-size:20px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rev-name { font-family: var(--body); font-weight:700; font-size:15px; color: var(--text); }
.rc-stars { color:#F5A623; font-size:13px; letter-spacing:1px; }
.rev-goog { margin-left:auto; font-family: var(--heading); font-size:17px; letter-spacing:.5px; }
.rev-goog b:nth-child(1){color:#4285F4} .rev-goog b:nth-child(2){color:#EA4335} .rev-goog b:nth-child(3){color:#FBBC05}
.rev-goog b:nth-child(4){color:#4285F4} .rev-goog b:nth-child(5){color:#34A853} .rev-goog b:nth-child(6){color:#EA4335}
.rev-card p { font-family: var(--body); font-size:15px; color: var(--text-2); line-height:1.7; }
.rev-actions { display:flex; gap:14px; flex-wrap:wrap; }
@media (max-width:768px){ .rev-grid { grid-template-columns:1fr; } }

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  .js [data-rr], .js [data-rr-l], .js [data-rr-r] { opacity:1 !important; transform:none !important; transition:none !important; }
  .js body.home::before { display:none !important; }
  .js body.home nav, .js body.home .hero-inner > * { opacity:1 !important; transform:none !important; filter:none !important; animation:none !important; }
  [data-magnetic] { transform:none !important; }
}