/* ===== Scroll animations (all pages) ===== */
:root { --ease: cubic-bezier(.22, 1, .36, 1); }

/* Scroll progress bar */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100; background: var(--olive); transform-origin: 0 50%; transform: scaleX(0); }

/* --- Reveal base (only when JS animation is on) --- */
.anim [data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0ms); }
.anim [data-reveal].is-in { opacity: 1; transform: none; }

/* Headings: words rise one by one */
.anim [data-reveal="split"] { opacity: 1; transform: none; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.w > span { display: inline-block; }
.anim .w > span { transform: translateY(110%) rotate(4deg); transition: transform 1.1s var(--ease); transition-delay: calc(var(--d, 0ms) + var(--i) * 80ms); }
.anim .is-in .w > span { transform: none; }

/* Images: curtain reveal + slow zoom out (container keeps the rounded corners) */
.anim img[data-reveal="clip"] { opacity: 1; transform: scale(1.25); clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--ease), transform 2s var(--ease); transition-delay: var(--d, 0ms); }
.anim img[data-reveal="clip"].is-in { transform: scale(1); clip-path: inset(0 0 0 0); }
[data-parallax] { will-change: transform; }

/* Icons draw themselves */
.anim [data-draw] :is(path, rect, circle) { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease); transition-delay: calc(var(--d, 0ms) + 200ms); }
.anim .is-in [data-draw] :is(path, rect, circle) { stroke-dashoffset: 0; }

/* Badge slides in from the side */
.anim [data-reveal="badge"] { transform: translateX(-40px) scale(.9); }

/* Quote: line draws down, text fades in */
.story blockquote { position: relative; border-left: 0; }
.story blockquote::before { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 100%; background: var(--olive); transform-origin: top; }
.anim .story blockquote::before { transform: scaleY(0); transition: transform 1.2s var(--ease) calc(var(--d, 0ms) + 200ms); }
.anim .story blockquote.is-in::before { transform: scaleY(1); }
.anim [data-reveal="quote"] { transform: translateX(-20px); }

/* Cards: rise in with 3D tilt, then follow the mouse */
.approach__grid, .offerings__grid { perspective: 1200px; }
.anim [data-reveal="tilt"] { transform: translateY(80px) rotateX(28deg); transform-origin: 50% 100%; }
.anim [data-reveal="tilt"].is-in { transform: none; }
[data-tilt] { position: relative; transform-style: preserve-3d; }
[data-tilt].is-tilting { transition: transform .15s ease-out, box-shadow .3s; }
[data-tilt]:hover { box-shadow: 0 25px 50px -20px rgba(74, 82, 35, .35); }
[data-tilt]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.55), transparent 55%); opacity: 0; transition: opacity .3s; }
[data-tilt]:hover::after { opacity: 1; }

/* Slide in from the sides */
.anim [data-reveal="left"] { transform: translateX(-60px); }
.anim [data-reveal="right"] { transform: translateX(60px); }

/* Flowing words band */
.flow-band { padding-block: 2.5rem; overflow: hidden; background: var(--cream); }
.flow-band__row { display: flex; align-items: center; gap: 2rem; width: max-content; font-family: var(--serif); font-size: clamp(3rem, 8vw, 6.5rem); line-height: 1.15; color: var(--olive); white-space: nowrap; will-change: transform; }
.flow-band__row + .flow-band__row { margin-top: .5rem; }
.flow-band__row .o { color: transparent; -webkit-text-stroke: 1.2px var(--olive); }
.flow-band__row em { font-style: normal; font-size: .35em; color: #c9a227; }

/* Steps: line draws as you scroll, circles light up */
.steps__list { position: relative; }
.steps__list li:not(:last-child)::after { display: none; }
.steps__list .steps__progress { position: absolute; top: 24px; left: calc(12.5% - .75rem); right: calc(12.5% - .75rem); height: 1px; background: var(--line); list-style: none; }
.steps__progress i { position: absolute; inset: 0; background: var(--olive); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }
.steps__list li span { position: relative; z-index: 1; background: var(--cream); transition: background .5s, color .5s, transform .5s var(--ease); }
.anim .steps__list li.is-on span { background: var(--olive); color: #fff; transform: scale(1.12); }

/* CTA gets a soft breathing glow */
.cta .btn--solid { position: relative; }
.anim .cta .btn--solid.is-in { animation: breathe 4s ease-in-out 1.5s infinite; }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(74, 82, 35, .35); } 50% { box-shadow: 0 0 0 14px rgba(74, 82, 35, 0); } }

@media (max-width: 768px) {
  .steps__list .steps__progress { display: none; }
  .flow-band { padding-block: 1.75rem; }
}

/* Small fixes */
.fact b { font-weight: inherit; }
.anim a.contact__card.is-in:hover { transform: translateY(-3px); }
