/* The Boak Group — restrained motion system, 2026-08-27 */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

:where(.button, .text-link, .nav-contact) {
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

:where(.button, .nav-contact):hover {
  transform: translateY(-2px);
}

:where(.button, .nav-contact):active {
  transform: translateY(0) scale(.985);
}

:where(.button, .text-link, .nav-contact):focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
}

.text-link:hover {
  transform: translateX(3px);
}

/* Homepage hero: calm, staggered first impression */
.home .hero-copy.reveal {
  animation: none;
}

.home .hero-copy > * {
  opacity: 0;
  animation: boak-hero-rise 700ms cubic-bezier(.22, 1, .36, 1) forwards;
}

.home .photo-panel.reveal {
  opacity: 0;
  animation: boak-hero-rise 700ms cubic-bezier(.22, 1, .36, 1) 220ms forwards;
}

.home .hero-copy > :nth-child(1) { animation-delay: 80ms; }
.home .hero-copy > :nth-child(2) { animation-delay: 160ms; }
.home .hero-copy > :nth-child(3) { animation-delay: 240ms; }
.home .hero-copy > :nth-child(4) { animation-delay: 320ms; }
.home .hero-copy > :nth-child(5) { animation-delay: 400ms; }

@keyframes boak-hero-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Progressive scroll reveals. Unsupported browsers retain the normal layout. */
@supports (animation-timeline: view()) {
  main > :where(.proof-strip, .section, .cta-band) > .shell,
  main > .contact-section > .shell,
  main :where(.card, .project-card, .ear-card, .insight-card, .case-study, .education-note, .feature-image, .framework-infographic) {
    animation: boak-scroll-reveal linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 30%;
  }

  main :where(.card, .project-card, .ear-card, .insight-card):nth-child(2) {
    animation-range: entry 9% cover 32%;
  }

  main :where(.card, .project-card, .ear-card, .insight-card):nth-child(3) {
    animation-range: entry 13% cover 34%;
  }
}

@keyframes boak-scroll-reveal {
  from {
    opacity: .01;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Cards lift gently without changing their layout. */
:where(.card, .project-card, .ear-card, .insight-card, .case-study, .education-note) {
  transition:
    transform 220ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 220ms ease,
    border-color 220ms ease;
}

@media (hover: hover) and (pointer: fine) {
  :where(.card, .project-card, .ear-card, .insight-card, .case-study, .education-note):hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(18, 50, 38, .11);
  }

  :where(.photo-panel, .feature-image, .framework-infographic, .case-study figure) {
    overflow: hidden;
  }

  :where(.photo-panel, .feature-image, .framework-infographic, .case-study figure) img {
    transition: transform 700ms cubic-bezier(.22, 1, .36, 1);
  }

  :where(.photo-panel, .feature-image, .framework-infographic, .case-study figure):hover img {
    transform: scale(1.025);
  }
}

/* Keep touch layouts composed and reduce motion on smaller screens. */
@media (max-width: 782px) {
  .home .hero-copy > *,
  .home .photo-panel.reveal {
    animation-duration: 560ms;
  }

  @supports (animation-timeline: view()) {
    main > :where(.proof-strip, .section, .cta-band) > .shell,
    main > .contact-section > .shell,
    main :where(.card, .project-card, .ear-card, .insight-card, .case-study, .education-note, .feature-image, .framework-infographic) {
      animation-range: entry 2% cover 24%;
    }
  }
}

/* Accessibility: remove non-essential movement when requested. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .home .hero-copy > *,
  .home .photo-panel.reveal {
    opacity: 1;
    transform: none;
  }
}

/*
 * The Boak Group — motion upgrade layer
 * Append after the existing "restrained motion system" in WordPress Additional CSS.
 */

/* 1. Navigation: a quiet gold line tracks hover and keyboard focus. */
.desktop-nav a:not(.nav-contact) {
  position: relative;
}

.desktop-nav a:not(.nav-contact)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.45rem;
  left: 0;
  height: 2px;
  background: #d6a726;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 320ms cubic-bezier(.22, 1, .36, 1);
}

.desktop-nav a:not(.nav-contact):is(:hover, :focus-visible)::after,
.desktop-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.brand img {
  transition: transform 400ms cubic-bezier(.22, 1, .36, 1);
}

.brand:hover img {
  transform: translateY(-2px) scale(1.015);
}

/* 2. Hero: draw the gold rule and reveal the portrait through a soft mask. */
.home .gold-rule {
  transform-origin: left center;
  animation: boak-rule-draw 720ms cubic-bezier(.22, 1, .36, 1) 250ms both;
}

.home .photo-panel.reveal {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  animation: boak-photo-reveal 1050ms cubic-bezier(.22, 1, .36, 1) 180ms forwards;
}

@keyframes boak-rule-draw {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes boak-photo-reveal {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(20px) scale(.985);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0) scale(1);
  }
}

/* 3. Buttons: a short light sweep adds feedback without distracting. */
:where(.button, .nav-contact) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

:where(.button, .nav-contact)::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -60%;
  bottom: -60%;
  left: -45%;
  width: 28%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .24), transparent);
  transform: translateX(-220%) rotate(12deg);
  transition: transform 560ms cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

:where(.button, .nav-contact):hover::after {
  transform: translateX(720%) rotate(12deg);
}

/* 4. Card details respond as one coordinated object. */
:where(.card, .project-card, .insight-card, .case-study) :where(.mini-rule, .card-number, a) {
  transition:
    width 360ms cubic-bezier(.22, 1, .36, 1),
    color 220ms ease,
    transform 360ms cubic-bezier(.22, 1, .36, 1);
}

.card:hover .mini-rule {
  width: 72px;
}

.card:hover .card-number {
  color: #d6a726;
  transform: translateY(-3px);
}

:where(.project-card, .insight-card, .case-study):hover a {
  transform: translateX(4px);
}

/* 5. Modern browsers get richer scroll-linked staging. */
@supports (animation-timeline: view()) {
  main :where(.card, .project-card, .insight-card, .case-study, .education-note) {
    animation: boak-card-enter linear both;
    animation-timeline: view();
    animation-range: entry 4% cover 30%;
  }

  main :where(.card, .project-card, .insight-card):nth-child(2) {
    animation-range: entry 9% cover 33%;
  }

  main :where(.card, .project-card, .insight-card):nth-child(3) {
    animation-range: entry 14% cover 36%;
  }

  .ear-card.ear-light {
    animation: boak-ear-from-left linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 34%;
  }

  .ear-card.ear-gold {
    animation: boak-ear-from-right linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 38%;
  }

  .cta-band::before {
    animation: boak-cta-light linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
}

@keyframes boak-card-enter {
  from {
    opacity: .01;
    transform: translateY(34px) scale(.975);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes boak-ear-from-left {
  from {
    opacity: .01;
    transform: translateX(-38px) rotate(-1deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) rotate(0);
  }
}

@keyframes boak-ear-from-right {
  from {
    opacity: .01;
    transform: translateX(38px) rotate(1deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) rotate(0);
  }
}

/* 6. CTA: a restrained gold glow passes behind the invitation while scrolling. */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.cta-band::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -80% -25%;
  background: radial-gradient(circle, rgba(214, 167, 38, .24), transparent 52%);
  transform: translateX(-28%);
  pointer-events: none;
}

@keyframes boak-cta-light {
  from { transform: translateX(-28%); }
  to { transform: translateX(28%); }
}

/* 7. Mobile menu links enter in a quick, readable cascade. */
.mobile-nav[open] nav a {
  animation: boak-menu-item 360ms cubic-bezier(.22, 1, .36, 1) both;
}

.mobile-nav[open] nav a:nth-child(2) { animation-delay: 45ms; }
.mobile-nav[open] nav a:nth-child(3) { animation-delay: 90ms; }
.mobile-nav[open] nav a:nth-child(4) { animation-delay: 135ms; }
.mobile-nav[open] nav a:nth-child(5) { animation-delay: 180ms; }
.mobile-nav[open] nav a:nth-child(6) { animation-delay: 225ms; }

@keyframes boak-menu-item {
  from {
    opacity: 0;
    transform: translateX(14px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Touch layouts keep shorter distances and no blur. */
@media (max-width: 782px) {
  @keyframes boak-card-enter {
    from {
      opacity: .01;
      transform: translateY(22px) scale(.985);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .home .photo-panel.reveal {
    animation-duration: 780ms;
  }
}

/* Accessibility: every decorative effect yields to the visitor's preference. */
@media (prefers-reduced-motion: reduce) {
  .home .gold-rule,
  .home .photo-panel.reveal,
  main :where(.card, .project-card, .insight-card, .case-study, .education-note, .ear-card),
  .mobile-nav[open] nav a,
  .cta-band::before {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}