/* ============================================================
   C&R — Polish overlay (test build, /index-test.html)
   Loads AFTER home.css. Adds premium motion + interactions.
   Brand-faithful — no new tokens; pulls everything from core.css.
   ============================================================ */

/* ---------- Global scroll-reveal pattern --------------------- */
/* Opt-in via [data-reveal]. Hidden state is gated to :not(.is-revealed)
   so that once an element is revealed, no transform is locked in by this
   stylesheet — leaving native :hover transforms (e.g. .why-col:hover
   { transform: translateY(-6px); } from home.css) free to apply. */
html.reveal-ready [data-reveal] {
  transition:
    opacity   600ms cubic-bezier(.2, .8, .25, 1),
    transform 600ms cubic-bezier(.2, .8, .25, 1);
  will-change: opacity, transform;
}
html.reveal-ready [data-reveal]:not(.is-revealed):not([data-reveal-style="zoom"]) {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}
@media (prefers-reduced-motion: reduce) {
  html.reveal-ready [data-reveal] {
    transition: none;
  }
  html.reveal-ready [data-reveal]:not(.is-revealed):not([data-reveal-style="zoom"]) {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Showreel: subtle slow zoom-in -------------------- */
/* Opacity stays 1 throughout; a barely-perceptible scale drift over 10s. */
html.reveal-ready [data-reveal][data-reveal-style="zoom"] {
  transform: scale(1);
  transition: transform 10000ms cubic-bezier(.2, .8, .25, 1);
}
html.reveal-ready [data-reveal][data-reveal-style="zoom"].is-revealed {
  transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
  html.reveal-ready [data-reveal][data-reveal-style="zoom"] {
    transform: none;
    transition: none;
  }
}

/* ---------- Bento hover depth ----------------------------- */
/* Glow underline anchored to bottom of .bento-meta (which is already
   position: absolute in home.css — that gives ::after its containing block).
   Image gets a subtle brightness/saturate boost on hover. */
.bento-meta::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(to right,
    transparent,
    rgba(var(--green-rgb), .85),
    transparent);
  opacity: 0;
  transition: opacity 400ms cubic-bezier(.2, .8, .25, 1);
  pointer-events: none;
}
.bento-card:hover .bento-meta::after,
.bento-card:focus-visible .bento-meta::after {
  opacity: 1;
}
.bento-card img {
  transition: transform 800ms cubic-bezier(.2, .8, .25, 1),
              filter   500ms ease-out;
}
.bento-card:hover img,
.bento-card:focus-visible img {
  filter: brightness(1.04) saturate(1.06);
}

/* ---------- FAQ CSS-only animated expand ----------------- */
details.faq-item .faq-a {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  margin: 0;
  padding: 0;
  transition: grid-template-rows 350ms cubic-bezier(.2, .8, .25, 1);
}
details.faq-item .faq-a .faq-a-inner {
  min-height: 0;
  overflow: hidden;
}
details.faq-item[open] .faq-a {
  grid-template-rows: 1fr;
}
@media (prefers-reduced-motion: reduce) {
  details.faq-item .faq-a { transition: none; }
}

/* ---------- Form success check --------------------------- */
.form-status.is-success {
  color: var(--green);
  font-weight: var(--w-semibold);
}
.form-status.is-success::before {
  content: '✓ ';
  display: inline-block;
  margin-right: 4px;
  font-weight: bold;
  animation: checkPop 420ms cubic-bezier(.2, 1.4, .35, 1) backwards;
}
@keyframes checkPop {
  from { transform: scale(0.55); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .form-status.is-success::before { animation: none; }
}

/* ---------- Recent Work mobile carousel dots ------------- */
.recent-grid-dots {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
  list-style: none;
  padding: 0;
}
@media (max-width: 900px) {
  .recent-grid-dots { display: flex; }
}
.recent-grid-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hairline);
  border: none;
  padding: 0;
  cursor: pointer;
  transition:
    background 200ms ease,
    width      300ms cubic-bezier(.2, .8, .25, 1);
}
.recent-grid-dot.is-current {
  background: var(--green);
  width: 22px;
  border-radius: 4px;
}

/* ---------- Accreditation 3D tilt ------------------------ */
/* JS sets transform inline on mousemove. CSS handles smooth return on
   mouseleave. Higher specificity than the reveal rule so its 350ms
   transform transition wins (rather than reveal's 600ms). */
html.reveal-ready .accred-grid li[data-reveal].is-revealed {
  transition:
    opacity   600ms cubic-bezier(.2, .8, .25, 1),
    transform 350ms cubic-bezier(.2, .8, .25, 1);
  transform-style: preserve-3d;
}
@media (pointer: coarse) {
  html.reveal-ready .accred-grid li[data-reveal] { transform: none !important; }
}