/* =============================================================
 * Camilla Besley — Reveal & motion
 * Subtle scroll-triggered animations for editorial pages.
 * Pairs with assets/site-reveal.js (auto-tags elements + observes).
 * ============================================================= */

@media (prefers-reduced-motion: no-preference) {

  /* Baseline: hidden until in view */
  .cb-reveal {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition:
      opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 820ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }
  .cb-reveal--in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  /* Display headlines: a touch more travel & duration */
  .cb-reveal--display {
    transform: translate3d(0, 36px, 0);
    transition-duration: 900ms, 1100ms;
  }
  .cb-reveal--in.cb-reveal--display {
    transform: translate3d(0, 0, 0);
  }

  /* Variants — chosen automatically by JS for specific contexts */
  .cb-reveal--left  { transform: translate3d(-28px, 0, 0); }
  .cb-reveal--right { transform: translate3d(28px, 0, 0); }
  .cb-reveal--in.cb-reveal--left,
  .cb-reveal--in.cb-reveal--right { transform: translate3d(0, 0, 0); }
  .cb-reveal--zoom  { transform: scale(0.96); transform-origin: center; }
  .cb-reveal--in.cb-reveal--zoom { transform: scale(1); }

  /* Above-the-fold hero stagger uses these classes directly so it
     plays the moment the page lands — no IntersectionObserver wait. */
  .cb-hero .cb-reveal,
  .cb-page-hero .cb-reveal {
    /* identical baseline; JS adds the cascade & flips them in */
  }

  /* Subtle hover lifts — UI affordance, not a parlour trick */
  .cb-card,
  .cb-services__card,
  .cb-diff__card,
  .cb-statline__cell,
  .cb-cred-grid > article {
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1),
                border-color 200ms ease;
  }
  .cb-services__card:hover,
  .cb-diff__card:hover {
    transform: translateY(-3px);
  }

  /* Note items already have a hover bg shift — sharpen it */
  .cb-note-item { transition: background-color 200ms ease, padding 220ms cubic-bezier(0.22, 1, 0.36, 1), transform 220ms cubic-bezier(0.22, 1, 0.36, 1); }
  .cb-note-item:hover .cb-note-item__arrow {
    transform: translateX(6px);
    color: var(--color-ink);
  }
  .cb-note-item__arrow { transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms ease; display: inline-block; }

  /* Buttons — gentle press */
  .cb-btn { transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease; }
  .cb-btn:active { transform: translateY(1px); }

  /* Primary CTA — soft pulse on the amber to draw the eye, once page loads */
  .cb-btn--primary {
    position: relative;
    overflow: hidden;
  }
  .cb-btn--primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.32) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 600ms ease;
    pointer-events: none;
  }
  .cb-btn--primary:hover::after {
    transform: translateX(120%);
  }

  /* Nav link underline grows on hover */
  .cb-topnav__link::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .cb-topnav__link:hover::before,
  .cb-topnav__link:focus-visible::before {
    transform: scaleX(1);
  }
  .cb-topnav__link.is-active::before { transform: scaleX(1); }
  /* hide the original ::after underline rule for active — we use ::before now */
  .cb-topnav__link.is-active::after { display: none; }

  /* The amber sunset stripe — gentle horizontal shimmer */
  .cb-sunset-stripe {
    background: linear-gradient(
      90deg,
      var(--color-sunshine-700) 0%,
      var(--color-primary) 35%,
      var(--color-sunshine-300) 50%,
      var(--color-primary) 65%,
      var(--color-sunshine-700) 100%
    );
    background-size: 200% 100%;
    animation: cb-sunset-shimmer 12s linear infinite;
  }
  @keyframes cb-sunset-shimmer {
    from { background-position: 0% 0; }
    to   { background-position: 200% 0; }
  }

  /* Section eyebrows — short slide from a small offset */
  .cb-section-eyebrow.cb-reveal { transform: translate3d(0, 10px, 0); }

  /* FAQ summary plus icon — rotate on open */
  details > summary > span:last-child {
    display: inline-block;
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  details[open] > summary > span:last-child {
    transform: rotate(45deg);
  }
  details > summary { transition: color 200ms ease; }
  details > summary:hover { color: var(--color-primary-deep); }

  /* Portrait — gentle reveal scale */
  .cb-about__portrait.cb-reveal {
    transform: translate3d(0, 18px, 0) scale(0.985);
    transition-duration: 900ms, 1000ms;
  }
  .cb-about__portrait.cb-reveal--in {
    transform: translate3d(0, 0, 0) scale(1);
  }

  /* Statline figures — count-up illusion via cropped reveal */
  .cb-statline__figure { display: inline-block; }
}

/* Reduced motion: show everything immediately, no transitions */
@media (prefers-reduced-motion: reduce) {
  .cb-reveal { opacity: 1 !important; transform: none !important; }
  .cb-sunset-stripe { animation: none !important; }
}