/* =============================================================
   CCHCL — Motion layer (loaded after refine.css)
   Gentle life on top of the quiet design: scroll reveals, coordinated
   card hovers, hero entrance and social icons. Everything here is
   switched off for visitors who prefer reduced motion.
   ============================================================= */

/* ── Scroll reveal (classes added by motion.js, only below the fold) ── */
.reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 0.6s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    transform 0.6s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ── Hero entrance ── */
@keyframes cchcl-rise {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes cchcl-drift {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}
.hero__slide.active .hero__subtitle,
.hero__slide.active .hero__buttons,
.page-hero__subtitle,
.page-hero .btn { animation: cchcl-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero__slide.active .hero__subtitle, .page-hero__subtitle { animation-delay: 0.12s; }
.hero__slide.active .hero__buttons, .page-hero .btn { animation-delay: 0.24s; }
.hero__slide.active .hero__bg img { animation: cchcl-drift 14s ease-out both; }

/* ── Cards: lift + layered shadow + image zoom, in that order ── */
.card, .project-card, .team-card, .pathway-card, .value-card, .mini-sub-card,
.link-card, a.pathway-card, .model-step, .flagship-card, .album-card {
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease;
}
.card:hover, .project-card:hover, .team-card:hover, .pathway-card:hover, .value-card:hover,
.mini-sub-card:hover, .link-card:hover, a.pathway-card:hover, .model-step:hover, .flagship-card:hover, .album-card:hover,
.card:focus-within, .project-card:focus-within, .pathway-card:focus-within {
  transform: translate3d(0, -4px, 0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03), 0 12px 32px rgba(15, 36, 64, 0.09);
  border-color: rgba(107, 45, 123, 0.3);
}
.card__img, .project-card__media img, .album-card img, .team-card img, .flagship-card img {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.card:hover .card__img, .project-card:hover .project-card__media img, .album-card:hover img,
.team-card:hover img, .flagship-card:hover img { transform: scale(1.045); }
.pathway-card > .ph, .pathway-card i, .value-card__icon { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease; }
.pathway-card:hover > .ph, .pathway-card:hover i, .value-card:hover .value-card__icon { transform: translate3d(0, -2px, 0) scale(1.08); color: var(--color-purple); }

/* ── Buttons: arrow nudges forward, press feels physical ── */
.btn { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease; }
.btn:active { transform: scale(0.98); }
.btn .ph-arrow-right, .btn .ph-arrow-up-right, .subsidiary-panel__link .ph, .link-card .ph-arrow-right {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn:hover .ph-arrow-right, .subsidiary-panel__link:hover .ph, .link-card:hover .ph-arrow-right { transform: translate3d(4px, 0, 0); }
.btn:hover .ph-arrow-up-right { transform: translate3d(2px, -2px, 0); }

/* ── Text links in prose: underline grows in ── */
.prose a:not(.btn) {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat,
              linear-gradient(rgba(107, 45, 123, 0.25), rgba(107, 45, 123, 0.25)) 0 100% / 100% 1px no-repeat;
  transition: background-size 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.prose a:not(.btn):hover { background-size: 100% 1px, 100% 1px; }

/* ── Social and share icons ── */
.footer__social-title {
  margin: 20px 0 10px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}
.social-icons { display: flex; flex-wrap: wrap; gap: 10px; }
.social-icons a, .social-icons button {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.85);
  font-size: 19px;
  cursor: pointer;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.social-icons a:hover, .social-icons a:focus-visible,
.social-icons button:hover, .social-icons button:focus-visible {
  transform: translate3d(0, -3px, 0);
  background: #fff;
  border-color: #fff;
  color: var(--color-deep-navy, #0F2440);
}
.social-icons a:hover .ph, .social-icons button:hover .ph { animation: cchcl-wiggle 0.5s ease; }
.social-icons a:focus-visible, .social-icons button:focus-visible { outline: 3px solid var(--color-gold, #C5A028); outline-offset: 2px; }
.social-icons .is-copied { background: var(--color-success, #2E7D32); border-color: var(--color-success, #2E7D32); color: #fff; }
@keyframes cchcl-wiggle {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-12deg); }
  60% { transform: rotate(8deg); }
}
.footer__social { margin-top: 0; }

/* Share row on articles and projects (light background) */
.share-row a, .share-row button {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.share-row button {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 15px; cursor: pointer;
  padding: 8px 14px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.12); background: #fff; color: var(--color-text);
}
.share-row a:hover, .share-row button:hover { transform: translate3d(0, -2px, 0); border-color: var(--color-purple); color: var(--color-purple); }
.share-row .is-copied { border-color: var(--color-success, #2E7D32); color: var(--color-success, #2E7D32); }

/* ── Back to top: soft bob on hover ── */
.back-to-top { transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.back-to-top:hover .ph { animation: cchcl-bob 0.8s ease infinite; }
@keyframes cchcl-bob { 0%, 100% { transform: none; } 50% { transform: translate3d(0, -3px, 0); } }

/* ── Visitors who prefer less motion get the quiet site ── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible { opacity: 1; transform: none; transition: none; }
  .hero__slide.active .hero__subtitle, .hero__slide.active .hero__buttons, .page-hero__subtitle,
  .page-hero .btn, .hero__slide.active .hero__bg img { animation: none; }
  .card:hover, .project-card:hover, .team-card:hover, .pathway-card:hover, .value-card:hover,
  .mini-sub-card:hover, .link-card:hover, a.pathway-card:hover, .model-step:hover, .flagship-card:hover, .album-card:hover,
  .card:focus-within, .project-card:focus-within, .pathway-card:focus-within,
  .social-icons a:hover, .social-icons button:hover, .share-row a:hover, .share-row button:hover { transform: none; }
  .card:hover .card__img, .project-card:hover .project-card__media img, .album-card:hover img,
  .team-card:hover img, .flagship-card:hover img { transform: none; }
  .social-icons a:hover .ph, .social-icons button:hover .ph, .back-to-top:hover .ph { animation: none; }
}