/* =========================================================================
   Cow-Shed: motion and hover effects.

   Replaces Webflow's interactions engine (js/cow-shed-ai.js + jQuery, 370 KB).
   Everything here is plain CSS; js/cow-shed.js only adds a few classes
   (menu open, nav hidden on scroll, "is-in" when a block scrolls into view)
   and turns the little nav star as you scroll.

   Two classes on <html>, set by the small script in includes/head.php:
     cs-js      JavaScript is running. The menu needs it.
     cs-motion  JavaScript is running AND the visitor has not asked for
                reduced motion. Every entrance animation hangs off this, so
                without it (no JS, an old browser, or reduced motion) the page
                simply shows everything in place. Nothing can be stranded
                invisible: if the script fails, head.php removes cs-motion
                after 3 seconds.

   Hooks in the markup are classes the site already had, plus data-anim:
     intro-home / intro-about / intro-grow / intro-projects /
     intro-project / intro-blog   the hero of each page type (plays on load)
     reveal       fade up when scrolled into view
     slide-up     longer, softer fade up (About page values)
     grow         fade in from 75% size (project testimonial shape)
     mission      home page mission block
     project-entry  each project on /projects
     text-1..3    the three About intro paragraphs, in order
   ========================================================================= */

:root {
  --cs-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
  --cs-in-out-quad:  cubic-bezier(.455, .03, .515, .955);
  --cs-in-out-quart: cubic-bezier(.77, 0, .175, 1);
  --cs-in-out-circ:  cubic-bezier(.785, .135, .15, .86);
  --cs-out-cubic:    cubic-bezier(.215, .61, .355, 1);
  --cs-out-quart:    cubic-bezier(.165, .84, .44, 1);
  --cs-out-quad:     cubic-bezier(.25, .46, .45, .94);
}

/* ---- Building blocks. Each animates FROM a hidden state TO whatever the
   stylesheet says, so the resting look is always the stylesheet's.
   "backwards" holds the start state during the delay, then lets go. ---- */
@keyframes cs-fade   { from { opacity: 0; } }
@keyframes cs-move   { from { translate: 0 var(--cs-y, 80px); } }
@keyframes cs-grow-x { from { scale: .2 1; } }
@keyframes cs-pop    { from { scale: 0; } }
@keyframes cs-grow   { from { scale: .75; } }
@keyframes cs-zoom   { from { scale: 1.4; } }
@keyframes cs-tilt   { from { transform: none; } }
@keyframes cs-line   { from { scale: 0 1; } }
@keyframes cs-wipe   { from { scale: 1 1; } to { scale: 0 1; } }
@keyframes cs-turn   { to { rotate: 360deg; } }


/* =========================================================================
   1. Hover effects (mouse and trackpad only; on phones a tap just follows
      the link, as it should)
   ========================================================================= */

/* Resting states that Webflow used to set with script at page load. */
.light-overlay { width: 100%; height: 0%; }
.oval-button .overlay-button-hover:not(.rectangle) { scale: 0; }

/* Round arrow buttons */
.oval-button .overlay-button-hover:not(.rectangle) { transition: scale 400ms var(--cs-in-out-quart); }
.oval-button .arrow-down.default,
.oval-button .arrow-down.hover-interaction { transition: opacity 400ms var(--cs-in-out-cubic); }

/* Rectangle text buttons */
.text-button .overlay-button-hover.rectangle { transition: height 500ms var(--cs-out-quart); }
.text-button .button-text { transition: color 400ms var(--cs-in-out-quad) 100ms; }

/* Project tiles (home, project pages) and home article tiles */
.project-item .light-overlay { transition: height 400ms var(--cs-in-out-quad); }
.blog-post-item-large .light-overlay,
.blog-post-item-small .light-overlay { transition: height 400ms var(--cs-in-out-cubic); }
.project-item-container,
.blog-post-item-large,
.blog-post-item-small { transition: scale 400ms ease-in-out; }
.project-item .icon-arrow-diag-hover,
.blog-post-item-large .icon-arrow-diag-hover,
.blog-post-item-small .icon-arrow-diag-hover { transition: opacity 200ms ease 200ms; }

/* "Get in touch" block */
.contact-item-wrapper .light-overlay.dark { transition: height 500ms var(--cs-in-out-cubic); }
.contact-item-wrapper .icon-arrow-diag._24px { transition: opacity 300ms var(--cs-out-cubic); }
.contact-item-wrapper .icon-arrow-diag-hover._24px { transition: opacity 300ms var(--cs-out-cubic); }
.contact-item-wrapper ._1px-line.hover-interaction { transition: width 500ms var(--cs-in-out-quad); }

/* Full-screen menu items */
.nav-item .light-overlay.menu { transition: height 600ms var(--cs-in-out-quart); }

/* Menu button arrow, back to top */
.closed-nav-wrapper .menu-button .icon-menu-open { transition: translate 200ms ease-in; }
.back-to-top-link { transition: opacity 400ms ease; }

@media (hover: hover) {
  .oval-button:hover .overlay-button-hover:not(.rectangle) { scale: 1; }
  .oval-button:hover .arrow-down.default { opacity: 0; }
  .oval-button:hover .arrow-down.hover-interaction { opacity: 1; }

  .text-button:hover .overlay-button-hover.rectangle {
    height: 100%;
    transition: height 500ms cubic-bezier(.8, 0, .205, 1);
  }
  .text-button:hover .button-text {
    color: var(--peach);
    transition: color 400ms var(--cs-in-out-cubic);
  }

  .project-item:hover .light-overlay,
  .blog-post-item-large:hover .light-overlay,
  .blog-post-item-small:hover .light-overlay {
    height: 100%;
    transition: height 400ms var(--cs-in-out-cubic);
  }
  .project-item:hover .project-item-container,
  .blog-post-item-large:hover,
  .blog-post-item-small:hover { scale: 1.02; }
  .project-item:hover .icon-arrow-diag-hover,
  .blog-post-item-large:hover .icon-arrow-diag-hover,
  .blog-post-item-small:hover .icon-arrow-diag-hover { opacity: 1; }

  .contact-item-wrapper:hover .light-overlay.dark { height: 100%; }
  .contact-item-wrapper:hover .icon-arrow-diag._24px { opacity: 0; }
  .contact-item-wrapper:hover .icon-arrow-diag-hover._24px { opacity: 1; transition-delay: 200ms; }
  .contact-item-wrapper:hover ._1px-line.hover-interaction { width: 100%; }

  .nav-item:hover .light-overlay.menu { height: 100%; }
  .nav-item:hover .nav-item-style { color: var(--black); }

  .closed-nav-wrapper .menu-button:hover .icon-menu-open { translate: 6px 0; }
  .back-to-top-link:hover { opacity: .6; }
}


/* =========================================================================
   2. The menu (needs the script, so only under cs-js)
   Closed is the default; html.nav-open opens it. Each element's open timing
   sits on the open rule and its close timing on the closed rule.
   ========================================================================= */

html.cs-js .opened-nav-wrapper {
  display: flex;
  visibility: hidden;
  scale: 1 0;
  transition: scale 600ms var(--cs-in-out-quart) 400ms, visibility 0s 1000ms;
}
html.cs-js.nav-open .opened-nav-wrapper {
  visibility: visible;
  scale: 1 1;
  transition: scale 600ms var(--cs-in-out-quart), visibility 0s;
}

/* The lines slide in from the left, one after another */
html.cs-js .nav-items-container .divider-line {
  translate: -100% 0;
  transition: translate 500ms ease-in-out var(--cs-close, 0ms);
}
html.cs-js.nav-open .nav-items-container .divider-line {
  translate: 0 0;
  transition: translate 600ms var(--cs-in-out-quart) var(--cs-open, 200ms);
}
.nav-items-container > :nth-child(1)  { --cs-open: 200ms; --cs-close: 0ms; }
.nav-items-container > :nth-child(2)  { --cs-open: 600ms; --cs-close: 0ms; }
.nav-items-container > :nth-child(3)  { --cs-open: 325ms; --cs-close: 25ms; }
.nav-items-container > :nth-child(4)  { --cs-open: 625ms; --cs-close: 25ms; }
.nav-items-container > :nth-child(5)  { --cs-open: 450ms; --cs-close: 50ms; }
.nav-items-container > :nth-child(6)  { --cs-open: 650ms; --cs-close: 50ms; }
.nav-items-container > :nth-child(7)  { --cs-open: 500ms; --cs-close: 100ms; }
.nav-items-container > :nth-child(8)  { --cs-open: 700ms; --cs-close: 100ms; }
.nav-items-container > :nth-child(9)  { --cs-open: 550ms; --cs-close: 150ms; }
.nav-items-container > :nth-child(10) { --cs-open: 750ms; --cs-close: 150ms; }
.nav-items-container > :nth-child(11) { --cs-open: 600ms; --cs-close: 200ms; }

/* The words fade in after their line */
html.cs-js .nav-item .nav-item-style {
  opacity: 0;
  transition: opacity 500ms ease-in-out var(--cs-close, 0ms), color 300ms var(--cs-in-out-cubic);
}
html.cs-js.nav-open .nav-item .nav-item-style {
  opacity: 1;
  transition: opacity 600ms ease var(--cs-open, 600ms), color 300ms var(--cs-in-out-cubic);
}

/* Logo, close button and the small links last */
html.cs-js .opened-nav-wrapper .top-content-container,
html.cs-js .opened-nav-wrapper .links-container {
  opacity: 0;
  transition: opacity 400ms ease 300ms;
}
html.cs-js.nav-open .opened-nav-wrapper .top-content-container,
html.cs-js.nav-open .opened-nav-wrapper .links-container {
  opacity: 1;
  transition: opacity 600ms ease 800ms;
}
.close-button-container { cursor: pointer; }


/* =========================================================================
   3. Scroll behaviour of the top bar (script adds the classes)
   ========================================================================= */

/* Slides away when you scroll down, back when you scroll up */
.closed-nav-wrapper { transition: translate 300ms ease, background-color 300ms ease; }
html.nav-hidden:not(.nav-open) .closed-nav-wrapper { translate: 0 -100%; }

/* The "back" button under the bar on project and article pages follows it */
.fixed-div { transition: translate 300ms ease; }
html.nav-hidden:not(.nav-open) .fixed-div { translate: 0 -60px; }

/* Project pages: the bar is see-through over the big photo, then solid */
html.nav-clear .nav-section,
html.nav-clear .closed-nav-wrapper { background-color: transparent; }
html.nav-clear .nav-section { transition: background-color 300ms ease; }
html.nav-clear.nav-solid .nav-section,
html.nav-clear.nav-solid .closed-nav-wrapper { background-color: var(--peach); }

/* The star in the middle of the bar turns as you scroll (the script sets
   its angle). The About page shape turns on its own. */
.shape-middle-container .image { will-change: rotate; }
@media (prefers-reduced-motion: no-preference) {
  .img-about-hero { animation: cs-turn 3s linear infinite; }
}


/* =========================================================================
   4. Page intros (play once on load)
   ========================================================================= */

html.cs-motion .nav-section { animation: cs-fade 600ms ease backwards; }

/* Home */
html.cs-motion [data-anim="intro-home"] .hero-section-title {
  animation: cs-grow-x 1000ms var(--cs-in-out-circ) backwards,
             cs-fade 800ms ease 200ms backwards;
}
html.cs-motion [data-anim="intro-home"] .hero-subtitle {
  animation: cs-fade 600ms ease 600ms backwards;
}
html.cs-motion [data-anim="intro-home"] + .hero-img-section .overlay-white {
  display: block;
  animation: cs-wipe 1000ms var(--cs-in-out-cubic) both;
}
html.cs-motion [data-anim="intro-home"] + .hero-img-section .img-hero-absolute {
  animation: cs-fade 600ms ease-in backwards,
             cs-zoom 2600ms var(--cs-out-quart) 200ms backwards;
}
html.cs-motion [data-anim="intro-home"] + .hero-img-section .oval-button {
  animation: cs-pop 600ms ease-in-out 1000ms backwards;
}
html.cs-motion [data-anim="intro-home"] + .hero-img-section .arrow-down.default {
  --cs-y: -40px;
  animation: cs-fade 400ms ease-in-out 1400ms backwards,
             cs-move 400ms ease-in-out 1400ms backwards;
}

/* About */
html.cs-motion [data-anim="intro-about"] .wrapped-img {
  animation: cs-grow-x 800ms var(--cs-in-out-circ) backwards,
             cs-fade 600ms ease-in-out backwards;
}
html.cs-motion [data-anim="intro-about"] .text-img-container {
  animation: cs-grow-x 800ms var(--cs-in-out-circ) 50ms backwards,
             cs-fade 600ms ease-in-out 50ms backwards;
}
html.cs-motion [data-anim="intro-about"] .img-about-hero {
  animation: cs-pop 400ms ease-in-out 600ms backwards, cs-turn 3s linear infinite;
}
html.cs-motion [data-anim^="text-"] {
  --cs-y: 36px;
  animation: cs-fade 400ms ease-in var(--cs-d) backwards,
             cs-move 400ms var(--cs-out-quad) var(--cs-d) backwards;
}
[data-anim="text-1"] { --cs-d: 600ms; }
[data-anim="text-2"] { --cs-d: 700ms; }
[data-anim="text-3"] { --cs-d: 800ms; }

/* AI catch-up and the five service pages: the whole hero opens out */
html.cs-motion [data-anim="intro-grow"] {
  --cs-y: 36px;
  animation: cs-grow-x 800ms var(--cs-in-out-circ) backwards,
             cs-fade 600ms ease-in-out 400ms backwards,
             cs-move 400ms var(--cs-out-quad) 600ms backwards;
}
html.cs-motion [data-anim="intro-grow"] .img-about-hero {
  animation: cs-pop 400ms ease-in-out 600ms backwards, cs-turn 3s linear infinite;
}

/* The down arrow under About, AI catch-up, service and project-list heroes */
html.cs-motion [data-anim^="intro-"] .arrow-wrapper {
  animation: cs-fade 400ms ease-in 1000ms backwards;
}

/* Projects list */
html.cs-motion [data-anim="intro-projects"] .heading-1-xl,
html.cs-motion [data-anim="intro-projects"] .img-container {
  animation: cs-grow-x 800ms var(--cs-in-out-circ) backwards,
             cs-fade 600ms ease-in-out 200ms backwards;
}
html.cs-motion [data-anim="intro-projects"] .arrow-wrapper { animation-delay: 800ms; }

/* A project page */
html.cs-motion [data-anim="intro-project"] {
  animation: cs-fade 400ms ease-in-out backwards;
}
html.cs-motion [data-anim="intro-project"] .light.no-margin {
  animation: cs-grow-x 800ms var(--cs-in-out-circ) 200ms backwards,
             cs-fade 600ms ease-in 400ms backwards;
}
html.cs-motion [data-anim="intro-project"] .paragraph-l.light._80-opacity {
  animation: cs-fade 400ms ease-in 600ms backwards;
}
html.cs-motion .fixed-div { animation: cs-fade 600ms ease 200ms backwards; }

/* Articles and the category pages */
html.cs-motion [data-anim="intro-blog"] .heading-1 {
  animation: cs-grow-x 800ms var(--cs-in-out-circ) 100ms backwards,
             cs-fade 600ms ease-in-out 100ms backwards;
}
html.cs-motion [data-anim="intro-blog"] .posts-categories-wrapper {
  animation: cs-fade 400ms ease-in 400ms backwards;
}
html.cs-motion [data-anim="intro-blog"] ~ .blog-posts-section {
  --cs-y: 48px;
  animation: cs-fade 400ms ease-in 600ms backwards,
             cs-move 400ms ease-in-out 600ms backwards;
}


/* =========================================================================
   5. Scroll-in effects. Hidden until the script marks them "is-in".
   ========================================================================= */

/* Fade up */
html.cs-motion [data-anim="reveal"]:not(.is-in),
html.cs-motion .blog-post-item:not(.is-in) { opacity: 0; }
html.cs-motion [data-anim="reveal"].is-in,
html.cs-motion .blog-post-item.is-in {
  animation: cs-fade 500ms ease backwards, cs-move 400ms ease-in-out backwards;
}

/* About page values */
html.cs-motion [data-anim="slide-up"]:not(.is-in) { opacity: 0; }
html.cs-motion [data-anim="slide-up"].is-in {
  --cs-y: 100px;
  animation: cs-fade 1000ms var(--cs-out-quart) backwards,
             cs-move 1000ms var(--cs-out-quart) backwards;
}

/* Testimonial shape */
html.cs-motion [data-anim="grow"]:not(.is-in) { opacity: 0; }
html.cs-motion [data-anim="grow"].is-in {
  animation: cs-fade 1000ms var(--cs-out-quart) backwards,
             cs-grow 1000ms var(--cs-out-quart) backwards;
}

/* Two-part section titles ("Read our latest / AI Articles") */
html.cs-motion .split-title-wrapper:not(.is-in) > * { opacity: 0; }
html.cs-motion .split-title-wrapper.is-in > .split-title-1,
html.cs-motion .split-title-wrapper.is-in > .split-title-2 {
  animation: cs-grow-x 800ms var(--cs-in-out-quart) backwards,
             cs-fade 600ms ease 200ms backwards;
}

/* "Get in touch" block */
html.cs-motion .contact-item-wrapper:not(.is-in) .contact-info-content { opacity: 0; }
html.cs-motion .contact-item-wrapper:not(.is-in) ._1px-line.opacity-24 { scale: 0 1; }
html.cs-motion .contact-item-wrapper.is-in .contact-info-content { animation: cs-fade 600ms ease backwards; }
html.cs-motion .contact-item-wrapper.is-in ._1px-line.opacity-24 { animation: cs-line 800ms var(--cs-in-out-circ) backwards; }

/* Home mission block, then its two little pictures pop in */
html.cs-motion [data-anim="mission"]:not(.is-in) { opacity: 0; }
html.cs-motion [data-anim="mission"]:not(.is-in) :is(.wrapped-image-1, .wrapped-image-2) { scale: 0; }
html.cs-motion [data-anim="mission"].is-in {
  animation: cs-fade 400ms ease-in backwards, cs-move 400ms ease-in-out backwards;
}
html.cs-motion [data-anim="mission"].is-in .wrapped-image-1 { animation: cs-pop 400ms ease 400ms backwards; }
html.cs-motion [data-anim="mission"].is-in .wrapped-image-2 { animation: cs-pop 400ms ease 600ms backwards; }

/* Each project on /projects */
html.cs-motion [data-anim="project-entry"]:not(.is-in) :is(h2, h6, p, .arrow-down._24px:not(.hover-interaction)) { opacity: 0; }
html.cs-motion [data-anim="project-entry"]:not(.is-in) .oval-button { scale: 0; }
html.cs-motion [data-anim="project-entry"]:not(.is-in) .image-item-project.absolute { transform: none; }
html.cs-motion [data-anim="project-entry"].is-in h2 {
  animation: cs-grow-x 600ms var(--cs-in-out-circ) backwards,
             cs-fade 400ms ease-in-out 100ms backwards;
}
html.cs-motion [data-anim="project-entry"].is-in :is(h6, p) {
  animation: cs-fade 400ms ease-in 200ms backwards;
}
html.cs-motion [data-anim="project-entry"].is-in .image-item-project.absolute {
  animation: cs-tilt 400ms ease-in-out 200ms backwards;
}
html.cs-motion [data-anim="project-entry"].is-in .oval-button {
  animation: cs-pop 400ms ease-in-out 400ms backwards;
}
html.cs-motion [data-anim="project-entry"].is-in .arrow-down._24px:not(.hover-interaction) {
  --cs-y: -40px;
  animation: cs-move 600ms ease-in-out 400ms backwards,
             cs-fade 400ms ease-in-out 600ms backwards;
}


/* =========================================================================
   6. Home hero photo: a real <img> now, not a CSS background
   ========================================================================= */
.img-hero-absolute.cs-hero-photo { background-image: none; }
.cs-hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
}
@media screen and (min-width: 1920px) {
  .cs-hero-photo img { object-position: 50% 55%; }
}

/* Webflow's project-list entrance ended these at full strength, overriding
   the stylesheet's 80%; kept so /projects looks exactly as before. */
.project-collection-item p.opacity-80.margin-bottom { opacity: 1; }