/* ============================================================
   motion.css — testimonial expand, pricing
   carousel, and sitewide motion. Loaded after redesign.css.
   Every effect is wrapped so reduced-motion users get a calm,
   fully functional site.
   ============================================================ */

/* ---------- 2. Testimonials: pull quote + expand ---------- */

.t-pull {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.15rem, 1.9vw, 1.42rem); line-height: 1.45;
  color: var(--navy); letter-spacing: -.01em;
  text-wrap: pretty; margin-bottom: 4px;
}

/* 0fr -> 1fr grid trick animates to auto height smoothly */
.t-full {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.4,0,.2,1),
              opacity .35s ease, margin-top .45s cubic-bezier(.4,0,.2,1);
  opacity: 0; margin-top: 0;
}
.t-full > p {
  overflow: hidden; min-height: 0;
  font-size: .96rem; line-height: 1.7; color: var(--ink-light);
}
.t-full.open { grid-template-rows: 1fr; opacity: 1; margin-top: 12px; }

/* [hidden] is removed by JS on load; keeps content readable if JS fails */
.t-full[hidden] { display: grid; }

.t-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; padding: 10px 0 0; cursor: pointer;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .82rem;
  color: var(--orange); letter-spacing: .01em;
  transition: color .2s, gap .2s;
}
.t-toggle:hover { color: var(--navy); gap: 10px; }
.t-chev { transition: transform .35s cubic-bezier(.4,0,.2,1); flex: none; }
.t-toggle[aria-expanded="true"] .t-chev { transform: rotate(180deg); }
.t-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

/* Cards stay top-aligned so a card expanding doesn't shove its
   neighbours' text around. */
.testimonial-grid, .t-grid { align-items: start; }


/* ---------- 3. Pricing carousel on mobile ---------- */

/* Hint + dots are mobile-only furniture — declared before the query
   so the mobile rules below can turn them back on. */
.pkg-hint, .pkg-dots { display: none; }

@media (max-width: 760px) {
  .pkgs {
    display: flex; grid-template-columns: none;
    gap: 16px; max-width: none; margin: 0 -20px;
    padding: 20px 20px 8px;
    overflow-x: auto; overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pkgs::-webkit-scrollbar { display: none; }
  .pkg {
    flex: 0 0 82%; max-width: 330px;
    scroll-snap-align: center;
    padding: 34px 24px 28px;
  }
  /* hover-lift is meaningless on touch and fights scroll-snap */
  .pkg:hover { transform: none; }

  .pkg-hint {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 4px auto 0; padding: 0;
    font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .76rem;
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink-light);
    transition: opacity .4s ease, transform .4s ease;
  }
  .pkg-hint.hide { opacity: 0; transform: translateY(-4px); pointer-events: none; }
  .pkg-hint svg { flex: none; }
  @media (prefers-reduced-motion: no-preference) {
    .pkg-hint svg { animation: nudge 1.5s ease-in-out infinite; }
  }
  @keyframes nudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(6px); }
  }

  /* Progress dots */
  .pkg-dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
  .pkg-dots button {
    width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(24,41,70,.22); cursor: pointer;
    transition: background .3s, width .3s, border-radius .3s;
  }
  .pkg-dots button.active { background: var(--orange); width: 20px; border-radius: 999px; }
}


/* ---------- 4. Sitewide motion ---------- */

/* Scroll progress bar */
.scroll-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--orange), var(--green));
  z-index: 999; pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {

  /* Nav condenses once you leave the hero */
  .site-header, header.site-header {
    transition: background .35s ease, box-shadow .35s ease, padding .35s ease;
  }
  .nav-condensed .site-header, .site-header.nav-condensed {
    background: rgba(252,245,222,.92);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    box-shadow: 0 1px 0 rgba(24,41,70,.08), 0 6px 22px rgba(20,31,56,.07);
  }

  /* Grid items cascade instead of all arriving at once. Delay is applied
     only while un-settled, so it never lags a hover afterwards. */
  .cs-cards > .reveal:not(.settled),
  .grid     > .reveal:not(.settled),
  .services > .reveal:not(.settled),
  .cards    > .reveal:not(.settled),
  .steps    > .reveal:not(.settled),
  .pkgs     > .reveal:not(.settled) { transition-delay: 0s; }

  .cs-cards > .reveal:nth-child(2):not(.settled),
  .grid     > .reveal:nth-child(2):not(.settled),
  .services > .reveal:nth-child(2):not(.settled),
  .cards    > .reveal:nth-child(2):not(.settled),
  .steps    > .reveal:nth-child(2):not(.settled),
  .pkgs     > .reveal:nth-child(2):not(.settled) { transition-delay: .09s; }

  .cs-cards > .reveal:nth-child(3):not(.settled),
  .grid     > .reveal:nth-child(3):not(.settled),
  .services > .reveal:nth-child(3):not(.settled),
  .cards    > .reveal:nth-child(3):not(.settled),
  .steps    > .reveal:nth-child(3):not(.settled),
  .pkgs     > .reveal:nth-child(3):not(.settled) { transition-delay: .18s; }

  .cs-cards > .reveal:nth-child(4):not(.settled),
  .grid     > .reveal:nth-child(4):not(.settled),
  .services > .reveal:nth-child(4):not(.settled),
  .steps    > .reveal:nth-child(4):not(.settled) { transition-delay: .27s; }

  .grid     > .reveal:nth-child(5):not(.settled),
  .services > .reveal:nth-child(5):not(.settled) { transition-delay: .30s; }

  /* Buttons: lift + light sweep */
  .btn { position: relative; overflow: hidden; transition: transform .25s cubic-bezier(.34,1.4,.64,1), box-shadow .25s; }
  .btn:hover { transform: translateY(-2px); }
  .btn::after {
    content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent);
    transform: skewX(-20deg); transition: left .55s ease;
  }
  .btn:hover::after { left: 130%; }

  /* Work images breathe on hover */
  .grid a img, .cs-card img { transition: transform .6s cubic-bezier(.22,1,.36,1); }
  .grid a:hover img, .cs-card:hover img { transform: scale(1.045); }

  /* Eyebrow gets a drawing rule. .section-head .eyebrow is display:block and
     the head is centred, so the rule must be pinned to the centre — anchoring
     it at left:0 stranded it against the far edge of the section. */
  .section-head .eyebrow { position: relative; }
  .section-head .eyebrow::after {
    content: ''; position: absolute; left: 50%; transform: translateX(-50%);
    bottom: -7px; height: 2px; width: 0; border-radius: 2px;
    background: var(--orange); transition: width .7s cubic-bezier(.22,1,.36,1) .2s;
  }
  .reveal.in .section-head .eyebrow::after,
  .section-head.reveal.in .eyebrow::after { width: 34px; }

  /* Nav links underline from the left. Every item in the bar is a text link
     now — the button and the icon that once had to be excluded are gone — so
     this applies to the whole list. */
  .nav-links a { position: relative; }
  .nav-links a::after {
    content: ''; position: absolute; left: 0; bottom: -3px; height: 2px; width: 0;
    background: var(--orange); transition: width .28s cubic-bezier(.22,1,.36,1);
  }
  .nav-links a:hover::after { width: 100%; }

}

@media (prefers-reduced-motion: no-preference) {
  /* Proof points arrive one after another rather than as a block, so the eye
     reads them as a list being ticked off. Hidden only here — without this
     query, or without JS, they are simply visible from the start. */
  .client-points li { opacity: 0; transform: translateY(8px); }
  .reveal.in .client-points li {
    animation: pointIn .5s cubic-bezier(.22,1,.36,1) forwards;
  }
  .reveal.in .client-points li:nth-child(1) { animation-delay: .18s; }
  .reveal.in .client-points li:nth-child(2) { animation-delay: .30s; }
  .reveal.in .client-points li:nth-child(3) { animation-delay: .42s; }
  .reveal.in .client-points li:nth-child(4) { animation-delay: .54s; }
  @keyframes pointIn { to { opacity: 1; transform: none; } }

  /* The strategy icon is an eye, so it blinks. The blink sits at the very start
     of the cycle and the tile only animates once revealed, so the first one
     lands as the icon arrives; the rest of the 6s cycle is the pause between
     blinks — roughly a human interval. Closing is quicker than opening, which
     is what keeps it from looking like a squash. */
  .reveal.in .icon-eye svg {
    transform-origin: 50% 50%;
    animation: eyeBlink 6s ease-in-out .45s infinite;
  }
  @keyframes eyeBlink {
    0%   { transform: scaleY(1); }
    2.5% { transform: scaleY(.08); }
    6%   { transform: scaleY(1); }
    100% { transform: scaleY(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-bar { display: none; }
  .t-full { transition: none; }
}

/* Touch: the expand button is a text link — give the thumb a real target. */
@media (hover:none){
  .t-toggle{padding:14px 0 12px}

  /* A touch device has no hover to leave: tapping or brushing a work tile
     latched :hover on, and the title/category panel then sat over the artwork
     until something else was tapped. The captions are decoration here — the
     work itself is the point — so they are dropped rather than re-timed. The
     paired zoom goes with them, for the same reason. */
  .grid a::after{content:none}
  .grid a:hover img{transform:none}
  /* The category tags are a second, separate hover layer over the same tiles —
     hiding the caption alone still left these flashing under a thumb. Tapping
     the photo opens the lightbox, which names the category anyway. */
  .work-tags{display:none}

  /* The nav underline is a hover affordance with nothing to hover on a phone —
     a tap just latched it on under the finger. The stacked menu uses dividers
     to separate rows instead. */
  .nav-links a::after{content:none}
}