/* House of Zejd — Experiences page (layout from HOZ2 PDF p.3; page hero + duo from about.css) */

.hz-exp-intro { max-width: 820px; margin: 0 auto; text-align: center; }
.hz-exp-intro-title { margin: 0; font: 400 34px/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.hz-exp-intro .hz-sprig { margin: var(--space-6) auto; }
.hz-exp-intro p { margin: 0; font-size: 19px; line-height: 32px; color: var(--ink-muted); }

/* zig-zag: text alternates around a centre column of illustrations (PDF) */
.hz-zz-sec { background: var(--paper-alt); padding: var(--space-24) 0; overflow: hidden; }
.hz-zz { position: relative; list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; }
.hz-zz-spine { position: absolute; left: 50%; top: 40px; bottom: 40px; width: 1px; margin-left: -.5px; background: rgba(107,114,66,.18); }
.hz-zz-spine span { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--olive-ink); transform-origin: top; transform: scaleY(var(--zz-progress, 0)); }
.hz-zz-item { position: relative; display: grid; grid-template-columns: 1fr 200px 1fr; align-items: center; }
.hz-zz-item + .hz-zz-item { margin-top: var(--space-6); } /* rows never overlap: each picture sits level with its own text */
.hz-zz-item.left .hz-zz-text { grid-column: 1; grid-row: 1; text-align: right; padding-right: 110px; }
.hz-zz-item.right .hz-zz-text { grid-column: 3; grid-row: 1; padding-left: 110px; }
.hz-zz-icon { grid-column: 2; grid-row: 1; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 190px; }
.hz-zz-icon::before { content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%; background: var(--paper-alt); }
.hz-zz-icon img { position: relative; max-height: 130px; max-width: 120px; width: auto; transition: transform .6s cubic-bezier(.3,1.4,.5,1); }
.hz-zz-item:hover .hz-zz-icon img { transform: translateY(-6px) rotate(-3deg); }

/* hairline connector from the text to the illustration (PDF) */
.hz-zz-text { position: relative; }
.hz-zz-text::after { content: ""; position: absolute; top: 50%; width: 80px; height: 1px; background: var(--olive-ink); opacity: .7; transform: scaleX(0); transition: transform .8s .25s cubic-bezier(.2,.7,.2,1); }
.hz-zz-item.left .hz-zz-text::after { right: 0; transform-origin: right; }
.hz-zz-item.right .hz-zz-text::after { left: 0; transform-origin: left; }
.hz-zz-item.is-in .hz-zz-text::after { transform: scaleX(1); }

/* client: titles a little smaller, body a little bigger */
.hz-zz-text h3 { margin: 0 0 var(--space-3); font: 400 17px/24px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.hz-zz-text p { margin: 0; font-size: 18px; line-height: 30px; color: var(--ink-muted); }
.hz-zz-text .hz-link { margin-top: var(--space-4); }

/* entrance: text slides in from its side, illustration pops */
.js .hz-zz-item .hz-zz-text { opacity: 0; transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.js .hz-zz-item.left .hz-zz-text { transform: translateX(-30px); }
.js .hz-zz-item.right .hz-zz-text { transform: translateX(30px); }
.js .hz-zz-item .hz-zz-icon { opacity: 0; transform: scale(.85); transition: opacity .7s ease .1s, transform .7s cubic-bezier(.3,1.4,.5,1) .1s; }
.js .hz-zz-item.is-in .hz-zz-text, .js .hz-zz-item.is-in .hz-zz-icon { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .hz-exp-intro-title { font-size: 26px; }
  .hz-exp-intro p { font-size: 17px; line-height: 28px; }
  .hz-zz-sec { padding: var(--space-16) 0; }
  .hz-zz-spine { left: 48px; }
  .hz-zz-item, .hz-zz-item + .hz-zz-item { grid-template-columns: 96px 1fr; margin-top: var(--space-8); }
  .hz-zz-item .hz-zz-icon { grid-column: 1; height: 110px; }
  .hz-zz-icon::before { width: 96px; height: 96px; }
  .hz-zz-icon img { max-height: 84px; max-width: 76px; }
  .hz-zz-item.left .hz-zz-text, .hz-zz-item.right .hz-zz-text { grid-column: 2; text-align: left; padding: 0 0 0 var(--space-6); }
  .hz-zz-text::after { display: none; }
  .js .hz-zz-item.left .hz-zz-text { transform: translateX(30px); }
}
@media (prefers-reduced-motion: reduce) {
  .js .hz-zz-item .hz-zz-text, .js .hz-zz-item .hz-zz-icon { opacity: 1; transform: none; transition: none; }
  .hz-zz-text::after { transform: scaleX(1); transition: none; }
  .hz-zz-spine span { transform: none; }
}

/* more room for the text columns on laptops */
@media (min-width: 861px) and (max-width: 1200px) {
  .hz-zz-item { grid-template-columns: 1fr 170px 1fr; }
  .hz-zz-item.left .hz-zz-text { padding-right: 76px; }
  .hz-zz-item.right .hz-zz-text { padding-left: 76px; }
  .hz-zz-text::after { width: 56px; }
  .hz-zz-text p { font-size: 17px; line-height: 28px; }
}