/* SOMZ Consultants: shape + motion layer (loaded after sections.css).
   Rounded boxes, smooth page-to-page transitions, an animated mobile menu, scroll reveal
   and gentle hover motion. Everything respects prefers-reduced-motion. */

/* ════════ Rounded boxes ════════ */
.home-projects, .teaser, .tile, .print-menu, .wf-panel, .cs-record { border-radius: var(--radius-md); }
.home-projects { overflow: hidden; }
.home-projects .hp__bar { border-radius: 0; }
.ribbon__item, .form-errors, .search__input, .page-hero__mark, .edit-chip { border-radius: var(--radius-sm); }
.cs-stats, .teaser__stats { overflow: hidden; border-radius: var(--radius-md); }
.teaser__stats .stat:first-child { box-shadow: inset 0 3px 0 var(--brand-purple); }
.study-row { border-radius: var(--radius-sm); }
@media (max-width: 767.98px) {
  .pro-table tbody tr { border-radius: var(--radius-md); }
}
.cpage figure img { border-radius: var(--radius-md); }

/* Card accents follow the rounded corners as a soft inner line instead of a thick border */
.mandate-feature, .leader-feature { border-left-width: 1px; box-shadow: inset 4px 0 0 var(--brand-purple); }
.teaser { border-left-width: 1px; box-shadow: inset 4px 0 0 var(--brand-purple); }

/* ════════ Page-to-page transitions ════════ */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 280ms; animation-timing-function: var(--ease-out); }
.site-header { view-transition-name: site-header; }

/* Browsers without cross-page view transitions get a soft fade-in instead */
@supports not (view-transition-name: none) {
  main { animation: page-in 420ms var(--ease-out) both; }
}
@keyframes page-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ════════ Smooth scrolling + header ════════ */
html { scroll-behavior: smooth; }
.site-header { transition: border-color var(--dur) var(--ease), box-shadow var(--dur-slow) var(--ease-out); }
.site-header.is-scrolled { box-shadow: 0 8px 24px -20px rgba(20, 30, 40, .45); }

/* ════════ Mobile menu: slides and fades instead of popping ════════ */
@media (max-width: 1023.98px) {
  .site-nav {
    display: block;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: 0 20px 40px -24px rgba(20, 30, 40, .45);
    transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out), visibility 0s linear 260ms;
  }
  .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .site-nav.is-open .site-nav__list > li { animation: menu-item-in 360ms var(--ease-out) both; }
  .site-nav.is-open .site-nav__list > li:nth-child(2) { animation-delay: 30ms; }
  .site-nav.is-open .site-nav__list > li:nth-child(3) { animation-delay: 60ms; }
  .site-nav.is-open .site-nav__list > li:nth-child(4) { animation-delay: 90ms; }
  .site-nav.is-open .site-nav__list > li:nth-child(5) { animation-delay: 120ms; }
  .site-nav.is-open .site-nav__list > li:nth-child(n + 6) { animation-delay: 150ms; }
}
@keyframes menu-item-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: none; }
}

/* ════════ Scroll reveal (main.js adds .reveal to boxes below the fold) ════════ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ════════ Gentle hover motion ════════ */
.tile, .ribbon__item, .adm-page { transition: box-shadow var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), border-color var(--dur) var(--ease); }
.hp__item { transition: background-color var(--dur) var(--ease); }
.hp__item:hover { background: var(--paper-warm); }
.study-row { transition: background-color var(--dur) var(--ease); }
a, .tab, .pill { transition-property: color, background-color, border-color, box-shadow; transition-duration: var(--dur); transition-timing-function: var(--ease); }

/* ════════ Custom pages (page.html, made in the admin panel) ════════ */
.cpage { max-width: 820px; }
.cpage-block + .cpage-block { margin-top: var(--space-6); }
.cpage-h2 { font-size: var(--fs-h3); padding-top: var(--space-3); }
.cpage-block:has(+ .cpage-block > .cpage-h2) { margin-bottom: var(--space-3); }
.cpage-text p { max-width: 68ch; }
.cpage-text p + p { margin-top: var(--space-4); }
.cpage-figure img { display: block; width: 100%; height: auto; background: var(--gray-wash); }
.cpage-figure--medium { max-width: 520px; }
.cpage-figure figcaption { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--ink-3); }
.cpage-list { display: grid; gap: var(--space-2); padding-left: 0; list-style: none; }
.cpage-list li { position: relative; padding-left: 26px; max-width: 68ch; }
.cpage-list li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-green); }
.cpage-quote { padding: var(--space-5) var(--space-6); border-radius: var(--radius-md); background: var(--paper-cool); box-shadow: inset 4px 0 0 var(--accent); }
.cpage-quote p { font: 400 1.25rem/1.55 var(--font-serif); color: var(--ink); }
.cpage-quote footer { margin-top: var(--space-3); font-size: var(--fs-small); font-weight: 600; color: var(--ink-3); }
.cpage-cards { display: grid; gap: var(--space-4); padding: 0; list-style: none; }
@media (min-width: 640px) { .cpage-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cpage:has(.cpage-cards) { max-width: none; } .cpage-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cpage-card__title { font-size: 1.125rem; margin-bottom: var(--space-2); }
.cpage-cards .card { border-top: 3px solid var(--brand-green); }
.cpage-cards li:nth-child(4n + 2).card { border-top-color: var(--brand-purple); }
.cpage-cards li:nth-child(4n + 3).card { border-top-color: var(--brand-teal); }
.cpage-cards li:nth-child(4n + 4).card { border-top-color: var(--brand-gray); }
.cpage-draft { margin-bottom: var(--space-6); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--purple-wash); color: var(--purple-ink); font-size: var(--fs-small); font-weight: 600; }
.cpage-empty { color: var(--ink-3); }
.page-hero--gray { background: var(--gray-wash); }

/* ════════ Reduced motion: no movement anywhere ════════ */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  main { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .site-nav, .site-nav.is-open .site-nav__list > li { transition: none; animation: none; transform: none; }
  .card--interactive:hover, .tile:hover, .ribbon__item:hover { transform: none; }
}

@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
}