/* ============================================================
   Pearson Bros Homes - polish layer
   Site-wide motion craft + micro-interactions, loaded last so it
   refines the existing brand system without replacing it.
   Principles: emil-design-eng (press feedback, custom easing,
   transitions over keyframes), impeccable (tinted shadows, intentional
   motion), design-taste (motion motivated, reduced-motion mandatory).
   Built entirely on the existing tokens (--accent, --ink-*, --line, --bg*).
   ============================================================ */

:root {
  /* Custom easing - the CSS built-ins are too weak to feel intentional */
  --pbh-ease: cubic-bezier(0.22, 1, 0.36, 1);       /* strong ease-out */
  --pbh-ease-soft: cubic-bezier(0.33, 1, 0.68, 1);  /* gentler ease-out */
  --pbh-ease-move: cubic-bezier(0.65, 0, 0.35, 1);  /* ease-in-out for on-screen movement */
  /* Warm-tinted elevation (shadows tinted toward the brand, never pure black) */
  --pbh-shadow-sm: 0 2px 8px -3px rgba(48, 36, 18, 0.16);
  --pbh-shadow-md: 0 18px 40px -22px rgba(48, 36, 18, 0.26);
  --pbh-shadow-lg: 0 30px 70px -30px rgba(48, 36, 18, 0.30);
}

/* ---- Typography refinement (cheap, high-impact craft) ---- */
.pbh-headline, .pbh-section-title, .pbh-page-title, .pbh-cta-final-title,
.pbh-prop-title, .pbh-hero-title, h1, h2 { text-wrap: balance; }
.pbh-lede, .pbh-section-lede, .pbh-page-lede, .pbh-pillar-body, .pbh-step p,
.pbh-pane-cell p, .pbh-project-body, .pbh-market-copy p, .pbh-prop-desc, p { text-wrap: pretty; }

/* ============================================================
   Press feedback - every pressable confirms it heard the user
   (emil: scale(0.97) on :active, fast ease-out, never animate `all`)
   ============================================================ */
.pbh-btn-primary, .pbh-btn-light, .pbh-btn-ghost-light, .pbh-nav-cta,
.pbh-form-submit, .pbh-filter, .pbh-mobile-drawer-cta a, .pbh-cta-row a {
  transition: transform 0.16s var(--pbh-ease),
              background-color 0.24s var(--pbh-ease),
              color 0.24s var(--pbh-ease),
              box-shadow 0.24s var(--pbh-ease),
              border-color 0.24s var(--pbh-ease);
}
.pbh-btn-primary:active, .pbh-btn-light:active, .pbh-btn-ghost-light:active,
.pbh-nav-cta:active, .pbh-form-submit:active, .pbh-filter:active,
.pbh-mobile-drawer-cta a:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .pbh-btn-primary:hover, .pbh-btn-light:hover, .pbh-nav-cta:hover,
  .pbh-form-submit:hover { transform: translateY(-1.5px); box-shadow: var(--pbh-shadow-md); }
}

/* ============================================================
   Links - animated underline grows from the left; arrows nudge.
   (emil: scale-from-origin; impeccable: motion communicates affordance)
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  .pbh-nav-links a { position: relative; }
  .pbh-nav-links a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1.5px;
    background: currentColor; transform: scaleX(0); transform-origin: left center;
    transition: transform 0.3s var(--pbh-ease);
  }
  .pbh-nav-links a:hover::after, .pbh-nav-links a.is-current::after { transform: scaleX(1); }
}
/* Arrow-bearing links nudge the chevron on hover */
.pbh-link-secondary, .pbh-card-link, .pbh-related-card .pbh-related-go {
  transition: color 0.2s var(--pbh-ease);
}
@media (hover: hover) and (pointer: fine) {
  .pbh-link-secondary:hover, .pbh-project:hover .pbh-card-link { color: var(--accent); }
}

/* ============================================================
   Cards & tiles - real depth on hover (lift + warm-tinted shadow).
   (impeccable: tint shadow to bg hue; emil: interruptible transition)
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  .pbh-card, .pbh-related-card {
    transition: transform 0.4s var(--pbh-ease), box-shadow 0.4s var(--pbh-ease),
                border-color 0.3s var(--pbh-ease);
  }
  .pbh-card:hover { transform: translateY(-5px); box-shadow: var(--pbh-shadow-md); }
  .pbh-related-card:hover { transform: translateY(-3px); box-shadow: var(--pbh-shadow-sm); }
  /* the project cards already zoom their image; add a gentle lift + shadow */
  .pbh-project { transition: transform 0.4s var(--pbh-ease); }
  .pbh-project:hover { transform: translateY(-4px); }
  .pbh-project:hover .pbh-project-visual { box-shadow: var(--pbh-shadow-md); }
  /* windowpane facets: a touch of lift on top of the bg warm */
  .pbh-pane-cell { transition: background 0.3s var(--pbh-ease); }
}

/* Image containers ease their zoom with the brand curve */
.pbh-card-visual img, .pbh-project-visual img, .pbh-hero-media img,
.pbh-prop-hero img { transition: transform 0.6s var(--pbh-ease) !important; }

/* ============================================================
   Scroll progress - a hairline of brand accent tracks reading depth.
   Pure CSS scroll-driven animation: off-main-thread, no JS, and a
   graceful no-op where unsupported (stays at scaleX(0), invisible).
   Motivated: orientation on long marketing pages.
   ============================================================ */
.pbh-scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 2px;
  background: var(--accent, #0099FF); transform: scaleX(0); transform-origin: 0 50%;
  z-index: 250; pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .pbh-scroll-progress { animation: pbh-scrollx linear both; animation-timeline: scroll(root); }
  @keyframes pbh-scrollx { to { transform: scaleX(1); } }
}

/* ============================================================
   Scroll-reveal - fade + rise content into view as it's scrolled to.
   Originated on the homepage; lives here so every page gets it for
   free via [data-reveal] / [data-reveal-group] markup + reveal.js.
   Safe by default: content stays fully visible unless JS confirms
   it can animate it (see the .pbh-animate gate below), so a page
   with no JS, or with these attributes but no reveal.js, never
   ships invisible content.
   ============================================================ */
[data-reveal], [data-reveal-group] > * { opacity: 1; transform: none; }
.pbh-animate [data-reveal], .pbh-animate [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--pbh-ease), transform 0.7s var(--pbh-ease);
}
/* NOTE: the .is-in selector must out-rank the hide rule above
   (.pbh-animate [data-reveal] = 0-2-0), so it is written with the same
   qualification - a bare .is-in (0-1-0) silently loses the cascade. */
.pbh-animate [data-reveal].is-in,
[data-reveal].is-in,
.pbh-animate [data-reveal-group].is-in > * { opacity: 1; transform: none; }

/* ============================================================
   Reduced motion - collapse every movement above; keep fades.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .pbh-btn-primary, .pbh-btn-light, .pbh-nav-cta, .pbh-form-submit, .pbh-filter,
  .pbh-card, .pbh-related-card, .pbh-project, .pbh-voice, .pbh-faq-item {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .pbh-btn-primary:hover, .pbh-btn-light:hover, .pbh-nav-cta:hover, .pbh-form-submit:hover,
  .pbh-card:hover, .pbh-related-card:hover, .pbh-project:hover { transform: none; }
  .pbh-btn-primary:active, .pbh-nav-cta:active, .pbh-form-submit:active, .pbh-filter:active { transform: none; }
  .pbh-scroll-progress { display: none; }
  [data-reveal], [data-reveal-group] > * { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   STORYTELLING LAYER (sitewide) - the homepage's signature moves,
   generalised so every page that uses [data-reveal] gets them free.
   Everything lives under the .pbh-animate gate; the reduced-motion
   block at the end resets it all.
   ============================================================ */

/* Headings sharpen from a soft blur as their block reveals */
.pbh-animate [data-reveal] h1,
.pbh-animate [data-reveal] h2,
.pbh-animate [data-reveal-group] h2 {
  filter: blur(7px);
  transition: filter 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}
.pbh-animate [data-reveal].is-in h1,
.pbh-animate [data-reveal].is-in h2,
.pbh-animate [data-reveal-group].is-in h2 { filter: blur(0); }

/* Children of a reveal group cascade in with a stagger */
.pbh-animate [data-reveal-group].is-in > *:nth-child(2) { transition-delay: 0.08s; }
.pbh-animate [data-reveal-group].is-in > *:nth-child(3) { transition-delay: 0.16s; }
.pbh-animate [data-reveal-group].is-in > *:nth-child(4) { transition-delay: 0.24s; }
.pbh-animate [data-reveal-group].is-in > *:nth-child(5) { transition-delay: 0.32s; }
.pbh-animate [data-reveal-group].is-in > *:nth-child(6) { transition-delay: 0.40s; }

/* Inner-page CTA buttons join the magnetic treatment (JS in pbh-motion.js) */
@media (hover: hover) and (pointer: fine) {
  .pbh-cta-btn {
    --mx: 0px; --my: 0px;
    transform: translate(var(--mx), var(--my));
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.24s ease, color 0.24s ease,
                box-shadow 0.24s ease, border-color 0.24s ease;
  }
  .pbh-cta-btn:active { transform: translate(var(--mx), var(--my)) scale(0.97); }
}

/* FAQ affordance: rotate a marker if present; glide handled in pbh-motion.js */
details.pbh-faq-item > summary { transition: color 0.2s ease; }

@media (prefers-reduced-motion: reduce) {
  .pbh-animate [data-reveal] h1, .pbh-animate [data-reveal] h2,
  .pbh-animate [data-reveal-group] h2 { filter: none !important; transition: none !important; }
  .pbh-cta-btn { transform: none !important; }
}

/* FAQ questions are real h3s for document structure/SEO; visually they
   inherit the summary text style exactly. */
.pbh-faq-q, h3.pbh-faq-q { display: inline; margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }