/* ==========================================================================
   Chiron Psychological — motion and hover touches (10/23, Brandon: "stuff moving in
   whenever you're scrolling or loading, and hover effects over the graphics").
   Loaded on every page after the page styles. Everything here is switched off for
   people who ask their device for reduced motion.
   ========================================================================== */
:root { --gold-dark: #9A6F00; }

/* --- On load: the banner photo settles in, the header drops in ------------------------- */
.hero__bg img, .page-hero__bg img { animation: hero-settle 2.2s cubic-bezier(.22,.61,.36,1) both; }
@keyframes hero-settle { from { transform: scale(1.08); } to { transform: none; } }
.brand, .nav__list, .header-cta, .nav-toggle { animation: drop-in .9s cubic-bezier(.22,.61,.36,1) .1s both; }
.nav__list { animation-delay: .2s; } .header-cta, .nav-toggle { animation-delay: .3s; }
/* (never on an element that contains the phone menu: a transform there would trap the fixed panel) */
@keyframes drop-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@media (max-width: 1024px) { .nav__list { animation: none; } }

/* --- Photos "rise and settle" as they come in (js/site.js tags them data-reveal="img") ----------
   10/23: trialled on the service pages (Brandon: the top-down wipe read like a photo loading), then
   made site-wide (Home, About, bios). The photo fades in while rising a little, easing back from a
   slight zoom. The old wipe and options B/C are in _tmp/photo-entrance-options.html. */
.js [data-reveal="img"] { clip-path: none; opacity: 0; transform: translateY(36px);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease); transition-delay: calc(var(--d, 0) * 110ms); }
.js [data-reveal="img"] img { transform: scale(1.1); transition: transform 1.8s var(--ease), scale .8s var(--ease); }
.js [data-reveal="img"].is-in { opacity: 1; transform: none; }
.js [data-reveal="img"].is-in img { transform: none; }

/* --- Hover: photos lean in a little ---------------------------------------------------- */
.figure img, .about__img img, .why__media img, .why__small img, .approach__img img, .bio__photo img { transition: transform 1.5s var(--ease), scale .8s var(--ease); }
.figure:hover img, .about__img:hover img, .why__media:hover img, .why__small:hover img, .approach__img:hover img, .bio__photo:hover img { scale: 1.045; }
.bio__photo, .why__small { overflow: hidden; }
.why__small { border-radius: var(--radius); }

/* --- Hover: the gold number tiles darken and lift (Home "How it works", service steps) --- */
.step__num, .step-row__num { transition: background-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); }
.step:hover .step__num { background: var(--gold); transform: translateY(-4px); box-shadow: 0 12px 24px rgba(32,25,5,.18); }
.step-row:hover .step-row__num { background: var(--gold-dark); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(32,25,5,.16); }

/* --- Hover: icon tiles darken and lift; line icons tip slightly -------------------------- */
.features__icon, .feature-box__icon { transition: background-color .35s var(--ease), transform .35s var(--ease); }
.features li:hover .features__icon, .feature-box:hover .feature-box__icon { background: var(--gold-dark); transform: translateY(-3px) rotate(-4deg); }
.appt__icon, .approach-item > .icon, .stat-card__num .icon { transition: transform .4s var(--ease), color .4s var(--ease); }
.appt__item:hover .appt__icon { transform: scale(1.08) rotate(-4deg); color: var(--gold-dark); }
.approach-item:hover > .icon { transform: scale(1.15); color: var(--gold-dark); }
.stat-card:hover .stat-card__num .icon { transform: scale(1.1) rotate(-4deg); }
.checks li .icon, .checklist .icon { transition: transform .3s var(--ease); }
.checks li:hover .icon, .checklist li:hover .icon { transform: scale(1.18); }

/* --- Hover: cards and buttons ------------------------------------------------------------ */
.review-card, .stat-card, .side-card, .ask-card, .panel { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.review-card:hover, .stat-card:hover, .ask-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(32,25,5,.12); }
.btn { transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(32,25,5,.16); }
.btn:active { transform: none; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .hero__bg img, .page-hero__bg img, .brand, .nav__list, .header-cta, .nav-toggle { animation: none; }
  .js [data-reveal="img"] { clip-path: none; opacity: 1; transform: none; transition: none; }
  .js [data-reveal="img"] img { transform: none; transition: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}