/* Brew Collective | shared industry motion system
   Progressive enhancement: default content remains fully visible.
   Only activate masked transitions after the observer is registered. */
.industry-page .reveal,
.industry-page .reveal.in {
  opacity: 1;
  transform: none;
  transition: none;
}
.industry-page {
  --motion-ease: cubic-bezier(.22,.72,.22,1);
  --motion-fast: 180ms;
  --motion-entry: 640ms;
}
.industry-page .motion-title-line { display: block; overflow: hidden; padding-bottom: .065em; margin-bottom: -.065em; }
.industry-page .motion-title-text { display: block; }
/* Keep optional-field labels legible against the saturated contact background. */
.industry-page .industry-contact-form .field label span { opacity: 1; }

/* The previous light-green labels and translucent proof note miss small-text WCAG contrast. */
.industry-page .industry-outcome .num { color: #065f1d; }
.industry-page .industry-proof-note { opacity: 1; }

/* Functional keyboard states. Do not make non-interactive rows look clickable. */
.industry-page .industry-cta:focus-visible,
.industry-page .industry-menu summary:focus-visible,
.industry-page .industry-menu-panel a:focus-visible,
.industry-page .industry-article:focus-visible,
.industry-page .industry-contact-form .send:focus-visible,
.industry-page .industry-footer a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
}
.industry-page .industry-article:focus-visible span,
.industry-page .industry-article:hover span { transform: translate(5px,-5px); }
.industry-page .industry-article span { transition: transform var(--motion-fast) ease; }
.industry-page .industry-cta,
.industry-page .industry-contact-form .send { transition-duration: var(--motion-fast); }

@media (prefers-reduced-motion: no-preference) {
  /* Hero type: a genuine typographic entrance rather than another opacity fade. */
  html.industry-motion-ready .industry-page .industry-hero .motion-title-text {
    animation: industryLineEnter 660ms var(--motion-ease) both;
  }
  html.industry-motion-ready .industry-page .industry-hero .motion-title-line:nth-child(2) .motion-title-text {
    animation-delay: 100ms;
  }
  html.industry-motion-ready .industry-page .industry-hero .industry-kicker {
    animation: industryHeroSupport 460ms var(--motion-ease) 70ms both;
  }
  html.industry-motion-ready .industry-page .industry-hero .industry-hero-copy {
    animation: industryHeroSupport 520ms var(--motion-ease) 300ms both;
  }
  html.industry-motion-ready .industry-page .industry-hero .industry-cta {
    animation: industryHeroSupport 520ms var(--motion-ease) 380ms both;
  }

  /* Lead photography: a single editorial wipe with an independent caption. */
  html.industry-motion-ready .industry-page .brewery-visual-lead[data-motion="lead"] img {
    clip-path: inset(0 100% 0 0);
    transform: scale(1.025);
    transition: clip-path 740ms var(--motion-ease), transform 840ms var(--motion-ease);
  }
  html.industry-motion-ready .industry-page .brewery-visual-lead[data-motion="lead"].is-motion-visible img {
    clip-path: inset(0 0 0 0);
    transform: scale(1);
  }
  html.industry-motion-ready .industry-page .brewery-visual-lead[data-motion="lead"] figcaption {
    opacity: 0;
    transform: translateY(9px);
    transition: opacity 350ms ease 380ms, transform 460ms var(--motion-ease) 380ms;
  }
  html.industry-motion-ready .industry-page .brewery-visual-lead[data-motion="lead"].is-motion-visible figcaption {
    opacity: 1;
    transform: none;
  }

  /* Business problems: keep the copy still, let one structural rule move. */
  html.industry-motion-ready .industry-page .industry-problems[data-motion="problems"] .problem-list {
    position: relative;
    border-top-color: transparent;
  }
  html.industry-motion-ready .industry-page .industry-problems[data-motion="problems"] .problem-list::before {
    content: "";
    position: absolute;
    top: -2px; left: 0; right: 0;
    height: 2px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 570ms var(--motion-ease);
    pointer-events: none;
  }
  html.industry-motion-ready .industry-page .industry-problems[data-motion="problems"].is-motion-visible .problem-list::before {
    transform: scaleX(1);
  }

  /* Outcome photography gets the attention; the body copy is readable at all times. */
  html.industry-motion-ready .industry-page .industry-outcome[data-motion="outcome"] .outcome-photo img {
    clip-path: inset(0 100% 0 0);
    transform: scale(1.025);
    transition: clip-path 700ms var(--motion-ease), transform 780ms var(--motion-ease);
  }
  html.industry-motion-ready .industry-page .industry-outcome[data-motion="outcome"]:nth-child(2) .outcome-photo img {
    clip-path: inset(0 0 0 100%);
  }
  html.industry-motion-ready .industry-page .industry-outcome[data-motion="outcome"].is-motion-visible .outcome-photo img {
    clip-path: inset(0 0 0 0);
    transform: scale(1);
  }
  html.industry-motion-ready .industry-page .industry-outcome[data-motion="outcome"] .num {
    transform: translateY(6px);
    transition: transform 430ms var(--motion-ease) 180ms;
  }
  html.industry-motion-ready .industry-page .industry-outcome[data-motion="outcome"].is-motion-visible .num {
    transform: none;
  }
  html.industry-motion-ready .industry-page .industry-outcome[data-motion="outcome"] .industry-outcome-copy {
    position: relative;
    border-top-color: transparent;
  }
  html.industry-motion-ready .industry-page .industry-outcome[data-motion="outcome"] .industry-outcome-copy::before {
    content: "";
    height: 1px;
    position: absolute;
    top: -1px; left: 0; right: 0;
    transform: scaleX(0);
    transform-origin: left;
    background: rgba(8,127,38,.45);
    transition: transform 540ms var(--motion-ease) 130ms;
  }
  html.industry-motion-ready .industry-page .industry-outcome[data-motion="outcome"].is-motion-visible .industry-outcome-copy::before {
    transform: scaleX(1);
  }

  /* The CPG outcome images unfold from the middle, like an editorial contact sheet.
     No floating packaging or perpetual movement. */
  html.industry-motion-ready .cpg-page .industry-outcome[data-motion="outcome"]:nth-child(3) .outcome-photo img {
    clip-path: inset(0 49% 0 49%);
    transform: scale(1.01);
    transition-duration: 820ms, 820ms;
  }
  html.industry-motion-ready .cpg-page .industry-outcome[data-motion="outcome"]:nth-child(3).is-motion-visible .outcome-photo img {
    clip-path: inset(0 0 0 0);
    transform: scale(1);
  }

  /* Experiences finishes its series on the high-energy event image. */
  html.industry-motion-ready .experience-page .industry-outcome[data-motion="outcome"]:nth-child(3) .outcome-photo img {
    clip-path: inset(100% 0 0 0);
    transform: scale(1.035);
    transition-duration: 620ms, 760ms;
  }
  html.industry-motion-ready .experience-page .industry-outcome[data-motion="outcome"]:nth-child(3).is-motion-visible .outcome-photo img {
    clip-path: inset(0 0 0 0);
    transform: scale(1);
  }

  /* Proof: the numbers never count up; the baseline rules provide a measured entrance. */
  html.industry-motion-ready .industry-page .industry-proof[data-motion="proof"] .industry-metric span {
    position: relative;
    border-top-color: transparent;
  }
  html.industry-motion-ready .industry-page .industry-proof[data-motion="proof"] .industry-metric span::before {
    content: "";
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 1px;
    background: currentColor;
    opacity: .65;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 530ms var(--motion-ease);
  }
  html.industry-motion-ready .industry-page .industry-proof[data-motion="proof"].is-motion-visible .industry-metric span::before {
    transform: scaleX(1);
  }
  html.industry-motion-ready .industry-page .industry-proof .industry-metric:nth-child(2) span::before { transition-delay: 70ms; }
  html.industry-motion-ready .industry-page .industry-proof .industry-metric:nth-child(3) span::before { transition-delay: 140ms; }
  html.industry-motion-ready .industry-page .industry-proof .industry-metric:nth-child(4) span::before { transition-delay: 210ms; }

  /* Pilot dividers progress only when their own row is visible. */
  html.industry-motion-ready .industry-page .pilot[data-motion="pilot"] {
    position: relative;
    border-bottom-color: transparent;
  }
  html.industry-motion-ready .industry-page .pilot[data-motion="pilot"]::after {
    content: "";
    position: absolute; bottom: -1px; left: 0; right: 0;
    height: 1px;
    background: var(--soft);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 460ms var(--motion-ease);
    pointer-events: none;
  }
  html.industry-motion-ready .industry-page .pilot[data-motion="pilot"]:last-child::after {
    background: var(--green);
    height: 2px;
  }
  html.industry-motion-ready .industry-page .pilot[data-motion="pilot"].is-motion-visible::after {
    transform: scaleX(1);
  }

  /* Small functional navigation response, no scroll jacking or hover-only content. */
  .industry-page .industry-menu[open] .industry-menu-panel {
    animation: industryMenuEnter 185ms ease-out both;
  }
  @keyframes industryLineEnter {
    from { opacity: .96; transform: translate3d(0,108%,0); }
    to { opacity: 1; transform: translate3d(0,0,0); }
  }
  @keyframes industryHeroSupport {
    from { opacity: 0; transform: translate3d(0,13px,0); }
    to { opacity: 1; transform: translate3d(0,0,0); }
  }
  @keyframes industryMenuEnter {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* Phone browsers: preserve masked photography but remove zoom and long staging. */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  html.industry-motion-ready .industry-page .brewery-visual-lead[data-motion="lead"] img,
  html.industry-motion-ready .industry-page .industry-outcome[data-motion="outcome"] .outcome-photo img,
  html.industry-motion-ready .cpg-page .industry-outcome[data-motion="outcome"]:nth-child(3) .outcome-photo img,
  html.industry-motion-ready .experience-page .industry-outcome[data-motion="outcome"]:nth-child(3) .outcome-photo img {
    transform: none;
    transition-property: clip-path;
    transition-duration: 530ms;
  }
  html.industry-motion-ready .industry-page .industry-hero .motion-title-text {
    animation-duration: 510ms;
  }
  html.industry-motion-ready .industry-page .industry-hero .industry-hero-copy,
  html.industry-motion-ready .industry-page .industry-hero .industry-cta {
    animation-duration: 380ms;
  }
}
@media (prefers-reduced-motion: reduce) {
  .industry-page .motion-title-text,
  .industry-page .industry-menu-panel,
  .industry-page .industry-article span,
  .industry-page .industry-cta,
  .industry-page .industry-contact-form .send {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* Photo loading correction: the original clip-path animation was concealing images
   and exposing a solid placeholder while images loaded. Preserve editorial movement
   in headlines, labels, rules and captions, but show every outcome photo immediately. */
.industry-page .industry-outcome[data-motion="outcome"] .outcome-photo img,
html.industry-motion-ready .industry-page .industry-outcome[data-motion="outcome"] .outcome-photo img,
html.industry-motion-ready .cpg-page .industry-outcome[data-motion="outcome"]:nth-child(3) .outcome-photo img,
html.industry-motion-ready .experience-page .industry-outcome[data-motion="outcome"]:nth-child(3) .outcome-photo img {
  clip-path: none !important;
  transform: none !important;
  transition: none !important;
}
/* A warm paper fallback rather than a harsh grey tile, only before an image decodes. */
.industry-page .outcome-photo {
  background-color: var(--oat);
}