/* ===========================================================
   TOSTO ADVISORY — Site-wide scroll & entrance animations
   Scoped by body class: .page-home / .page-lucca / .page-services / .page-contact
   =========================================================== */

/* ===== Keyframes ===== */
@keyframes ta-fade-up        { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ta-rise           { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ta-rise-strong    { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ta-line-draw      { from { opacity: 0; transform: scaleX(0); }       to { opacity: 1; transform: scaleX(1); } }
@keyframes ta-eyebrow-reveal { from { opacity: 0; letter-spacing: 0; }          to { opacity: 1; letter-spacing: .26em; } }
@keyframes ta-fade-in        { from { opacity: 0; }                              to { opacity: 1; } }
@keyframes ta-watermark-spin { from { transform: rotate(0); }                    to { transform: rotate(360deg); } }

/* ===========================================================
   UNIVERSAL — CTA section (any page with one)
   =========================================================== */
html.js .cta .cta-watermark {
  will-change: transform, opacity;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.75);
  transition: opacity 1.6s var(--ta-ease), transform 1.6s var(--ta-ease);
}
html.js .cta.cta-in .cta-watermark {
  opacity: .05;
  transform: translate(-50%, -50%) scale(1);
}
html.js .cta-watermark-img {
  display: block;
  width: 100%;
  height: auto;
  animation: ta-watermark-spin 90s linear infinite;
}

html.js .cta-inner.anim {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ta-ease), transform 1s var(--ta-ease);
  will-change: opacity, transform;
}
html.js .cta-inner.anim.anim-in { opacity: 1; transform: none; }
html.js .cta-inner.anim .cta-title,
html.js .cta-inner.anim .cta-text,
html.js .cta-inner.anim .cta-actions {
  opacity: 0; transform: translateY(16px);
  transition: opacity .85s var(--ta-ease), transform .85s var(--ta-ease);
}
html.js .cta-inner.anim.anim-in .cta-title   { opacity: 1; transform: none; transition-delay: .15s; }
html.js .cta-inner.anim.anim-in .cta-text    { opacity: 1; transform: none; transition-delay: .32s; }
html.js .cta-inner.anim.anim-in .cta-actions { opacity: 1; transform: none; transition-delay: .50s; }

/* CTA accent inside .cta-title gets a small extra delay */
html.js .cta-inner.anim .cta-title .accent {
  display: inline-block;
  opacity: 0; transform: translateY(14px);
  transition: opacity .8s var(--ta-ease), transform .8s var(--ta-ease);
}
html.js .cta-inner.anim.anim-in .cta-title .accent { opacity: 1; transform: none; transition-delay: .42s; }

/* ===========================================================
   SHARED: page-hero entrance (services + contact)
   Triggered by body.loaded
   =========================================================== */
html.js .page-services .page-hero .eyebrow,
html.js .page-services .page-hero .page-title,
html.js .page-services .page-hero .lede,
html.js .page-services .page-hero-rule,
html.js .page-contact  .page-hero .eyebrow,
html.js .page-contact  .page-hero .page-title,
html.js .page-contact  .page-hero .lede,
html.js .page-contact  .page-hero-rule { opacity: 0; }

html.js .page-services .page-hero .eyebrow,
html.js .page-contact  .page-hero .eyebrow { letter-spacing: 0; }

html.js .page-services .page-hero .page-title .accent,
html.js .page-contact  .page-hero .page-title .accent {
  display: inline-block; opacity: 0; transform: translateY(18px);
  will-change: opacity, transform;
}
html.js .page-services .page-hero-rule,
html.js .page-contact  .page-hero-rule {
  transform: scaleX(0); transform-origin: left center;
}

html.js .page-services.loaded .page-hero .eyebrow,
html.js .page-contact.loaded  .page-hero .eyebrow         { animation: ta-eyebrow-reveal 1.1s var(--ta-ease) .15s forwards; }
html.js .page-services.loaded .page-hero .page-title,
html.js .page-contact.loaded  .page-hero .page-title      { animation: ta-rise-strong 1.05s var(--ta-ease) .3s forwards; }
html.js .page-services.loaded .page-hero .page-title .accent,
html.js .page-contact.loaded  .page-hero .page-title .accent { animation: ta-rise 1s var(--ta-ease) .7s forwards; }
html.js .page-services.loaded .page-hero .lede,
html.js .page-contact.loaded  .page-hero .lede            { animation: ta-fade-up 1s var(--ta-ease) .75s forwards; }
html.js .page-services.loaded .page-hero-rule,
html.js .page-contact.loaded  .page-hero-rule             { animation: ta-line-draw 1.2s var(--ta-ease) 1s forwards; }

html.js .page-services .page-hero .wrap,
html.js .page-contact  .page-hero .wrap { will-change: transform, opacity; }

/* ===========================================================
   PAGE: HOME — body.page-home
   =========================================================== */

/* HERO entrance (load) */
html.js .page-home .hero .eyebrow,
html.js .page-home .hero-title,
html.js .page-home .hero-lede,
html.js .page-home .hero-actions { opacity: 0; }
html.js .page-home .hero .eyebrow { letter-spacing: 0; }
html.js .page-home .hero-title .accent {
  display: inline-block; opacity: 0; transform: translateY(18px);
  will-change: opacity, transform;
}
html.js .page-home.loaded .hero .eyebrow    { animation: ta-eyebrow-reveal 1.1s var(--ta-ease) .15s forwards; }
html.js .page-home.loaded .hero-title       { animation: ta-rise-strong 1.05s var(--ta-ease) .3s forwards; }
html.js .page-home.loaded .hero-title .accent { animation: ta-rise 1s var(--ta-ease) .7s forwards; }
html.js .page-home.loaded .hero-lede        { animation: ta-fade-up 1s var(--ta-ease) .75s forwards; }
html.js .page-home.loaded .hero-actions     { animation: ta-fade-up 1s var(--ta-ease) .95s forwards; }

html.js .page-home .hero-vignette { opacity: 0; animation: ta-fade-in 1.8s var(--ta-ease) .1s forwards; }
html.js .page-home .hero .hero-copy { will-change: transform, opacity; }

/* PROBLEM band — list items stagger from left, x-icons pop */
html.js .page-home .problem-list.anim li {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity .65s var(--ta-ease), transform .65s var(--ta-ease);
}
html.js .page-home .problem-list.anim.anim-in li:nth-child(1) { opacity: 1; transform: none; transition-delay: .05s; }
html.js .page-home .problem-list.anim.anim-in li:nth-child(2) { opacity: 1; transform: none; transition-delay: .18s; }
html.js .page-home .problem-list.anim.anim-in li:nth-child(3) { opacity: 1; transform: none; transition-delay: .31s; }
html.js .page-home .problem-list.anim.anim-in li:nth-child(4) { opacity: 1; transform: none; transition-delay: .44s; }
html.js .page-home .problem-list.anim li .x {
  opacity: 0; transform: scale(.4) rotate(-90deg);
  transition: opacity .5s var(--ta-ease), transform .6s var(--ta-ease);
}
html.js .page-home .problem-list.anim.anim-in li:nth-child(1) .x { opacity: 1; transform: none; transition-delay: .25s; }
html.js .page-home .problem-list.anim.anim-in li:nth-child(2) .x { opacity: 1; transform: none; transition-delay: .38s; }
html.js .page-home .problem-list.anim.anim-in li:nth-child(3) .x { opacity: 1; transform: none; transition-delay: .51s; }
html.js .page-home .problem-list.anim.anim-in li:nth-child(4) .x { opacity: 1; transform: none; transition-delay: .64s; }

/* WHAT I DO — 3 svc-cards (paper section) */
html.js .page-home .svc-grid .svc-card.anim {
  opacity: 0; transform: translateY(42px) scale(.985);
  transition: opacity .95s var(--ta-ease), transform .95s var(--ta-ease),
              border-color var(--ta-dur), box-shadow var(--ta-dur);
  will-change: opacity, transform;
}
html.js .page-home .svc-grid .svc-card.anim.anim-in { opacity: 1; transform: none; }
html.js .page-home .svc-grid .svc-card.anim-in:nth-child(1) { transition-delay: 0s; }
html.js .page-home .svc-grid .svc-card.anim-in:nth-child(2) { transition-delay: .14s; }
html.js .page-home .svc-grid .svc-card.anim-in:nth-child(3) { transition-delay: .28s; }

/* svc-card content cascade */
html.js .page-home .svc-grid .svc-card.anim > * {
  opacity: 0; transform: translateY(10px);
  transition: opacity .65s var(--ta-ease), transform .65s var(--ta-ease);
}
html.js .page-home .svc-grid .svc-card.anim-in > *:nth-child(1) { opacity: 1; transform: none; transition-delay: .22s; }
html.js .page-home .svc-grid .svc-card.anim-in > *:nth-child(2) { opacity: 1; transform: none; transition-delay: .30s; }
html.js .page-home .svc-grid .svc-card.anim-in > *:nth-child(3) { opacity: 1; transform: none; transition-delay: .38s; }
html.js .page-home .svc-grid .svc-card.anim-in > *:nth-child(4) { opacity: 1; transform: none; transition-delay: .46s; }
html.js .page-home .svc-grid .svc-card.anim-in > *:nth-child(5) { opacity: 1; transform: none; transition-delay: .54s; }
html.js .page-home .svc-grid .svc-card:nth-child(2).anim-in > *:nth-child(1) { transition-delay: .36s; }
html.js .page-home .svc-grid .svc-card:nth-child(2).anim-in > *:nth-child(2) { transition-delay: .44s; }
html.js .page-home .svc-grid .svc-card:nth-child(2).anim-in > *:nth-child(3) { transition-delay: .52s; }
html.js .page-home .svc-grid .svc-card:nth-child(2).anim-in > *:nth-child(4) { transition-delay: .60s; }
html.js .page-home .svc-grid .svc-card:nth-child(2).anim-in > *:nth-child(5) { transition-delay: .68s; }
html.js .page-home .svc-grid .svc-card:nth-child(3).anim-in > *:nth-child(1) { transition-delay: .50s; }
html.js .page-home .svc-grid .svc-card:nth-child(3).anim-in > *:nth-child(2) { transition-delay: .58s; }
html.js .page-home .svc-grid .svc-card:nth-child(3).anim-in > *:nth-child(3) { transition-delay: .66s; }
html.js .page-home .svc-grid .svc-card:nth-child(3).anim-in > *:nth-child(4) { transition-delay: .74s; }
html.js .page-home .svc-grid .svc-card:nth-child(3).anim-in > *:nth-child(5) { transition-delay: .82s; }

/* svc-card icon — scale + rotate */
html.js .page-home .svc-grid .svc-card.anim .svc-ico {
  transform: scale(.55) rotate(-15deg); opacity: 0;
  transition: transform .85s var(--ta-ease), opacity .55s var(--ta-ease), color var(--ta-dur);
}
html.js .page-home .svc-grid .svc-card.anim-in .svc-ico { transform: scale(1) rotate(0); opacity: 1; transition-delay: .42s; }
html.js .page-home .svc-grid .svc-card:nth-child(2).anim-in .svc-ico { transition-delay: .56s; }
html.js .page-home .svc-grid .svc-card:nth-child(3).anim-in .svc-ico { transition-delay: .70s; }

/* svc-card number slides in from left */
html.js .page-home .svc-grid .svc-card.anim .svc-n {
  display: inline-block; opacity: 0; transform: translateX(-12px);
  transition: opacity .6s var(--ta-ease), transform .6s var(--ta-ease);
}
html.js .page-home .svc-grid .svc-card.anim-in .svc-n { opacity: 1; transform: none; transition-delay: .28s; }
html.js .page-home .svc-grid .svc-card:nth-child(2).anim-in .svc-n { transition-delay: .42s; }
html.js .page-home .svc-grid .svc-card:nth-child(3).anim-in .svc-n { transition-delay: .56s; }

/* PROOF — quote-mark scales in, copy rises */
html.js .page-home .proof-inner.anim {
  opacity: 0; transform: translateY(24px);
  transition: opacity 1s var(--ta-ease), transform 1s var(--ta-ease);
}
html.js .page-home .proof-inner.anim.anim-in { opacity: 1; transform: none; }
html.js .page-home .proof-inner.anim .proof-mark {
  display: inline-block;
  opacity: 0; transform: scale(.4) translateY(20px);
  transition: opacity .7s var(--ta-ease), transform 1s var(--ta-ease);
  transform-origin: bottom left;
}
html.js .page-home .proof-inner.anim.anim-in .proof-mark { opacity: 1; transform: scale(1) translateY(0); transition-delay: .15s; }
html.js .page-home .proof-inner.anim .proof-quote,
html.js .page-home .proof-inner.anim .proof-src {
  opacity: 0; transform: translateY(12px);
  transition: opacity .8s var(--ta-ease), transform .8s var(--ta-ease);
}
html.js .page-home .proof-inner.anim.anim-in .proof-quote { opacity: 1; transform: none; transition-delay: .4s; }
html.js .page-home .proof-inner.anim.anim-in .proof-src   { opacity: 1; transform: none; transition-delay: .6s; }

/* STEPS — roman-numeral pops, top border draws across */
html.js .page-home .steps .step.anim {
  opacity: 0; transform: translateY(28px);
  transition: opacity .9s var(--ta-ease), transform .9s var(--ta-ease);
  border-top-color: transparent !important;
  position: relative;
}
html.js .page-home .steps .step.anim::before {
  content: ''; position: absolute; top: -1px; left: 0;
  height: 1px; width: 100%;
  background: var(--ta-line-ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform .85s var(--ta-ease);
}
html.js .page-home .paper .steps .step.anim::before,
html.js .page-home .steps .step.anim::before { /* both bg variants */ }
html.js .page-home .steps .step.anim.anim-in { opacity: 1; transform: none; }
html.js .page-home .steps .step.anim.anim-in::before { transform: scaleX(1); }
html.js .page-home .steps .step.anim-in:nth-child(1) { transition-delay: 0s; }
html.js .page-home .steps .step.anim-in:nth-child(2) { transition-delay: .12s; }
html.js .page-home .steps .step.anim-in:nth-child(3) { transition-delay: .24s; }
html.js .page-home .steps .step.anim-in:nth-child(4) { transition-delay: .36s; }
html.js .page-home .steps .step.anim-in:nth-child(1)::before { transition-delay: .05s; }
html.js .page-home .steps .step.anim-in:nth-child(2)::before { transition-delay: .17s; }
html.js .page-home .steps .step.anim-in:nth-child(3)::before { transition-delay: .29s; }
html.js .page-home .steps .step.anim-in:nth-child(4)::before { transition-delay: .41s; }

html.js .page-home .steps .step.anim .step-k {
  display: inline-block;
  opacity: 0; transform: scale(.55) translateY(-6px);
  transition: opacity .65s var(--ta-ease), transform .8s var(--ta-ease);
}
html.js .page-home .steps .step.anim-in .step-k { opacity: 1; transform: none; }
html.js .page-home .steps .step.anim-in:nth-child(1) .step-k { transition-delay: .18s; }
html.js .page-home .steps .step.anim-in:nth-child(2) .step-k { transition-delay: .30s; }
html.js .page-home .steps .step.anim-in:nth-child(3) .step-k { transition-delay: .42s; }
html.js .page-home .steps .step.anim-in:nth-child(4) .step-k { transition-delay: .54s; }

/* ===========================================================
   PAGE: LUCCA — body.page-lucca
   =========================================================== */

/* BIO HERO — portrait slides from left, text from right */
html.js .page-lucca .bio-portrait.anim {
  opacity: 0; transform: translateX(-32px) scale(.97);
  transition: opacity 1s var(--ta-ease), transform 1.15s var(--ta-ease);
  will-change: opacity, transform;
}
html.js .page-lucca .bio-portrait.anim.anim-in { opacity: 1; transform: none; }
html.js .page-lucca .bio-portrait.anim .frame-tick {
  opacity: 0; transform: scale(.55);
  transition: opacity .7s var(--ta-ease), transform .8s var(--ta-ease);
}
html.js .page-lucca .bio-portrait.anim.anim-in .frame-tick    { opacity: 1; transform: scale(1); transition-delay: .8s; }
html.js .page-lucca .bio-portrait.anim.anim-in .frame-tick.br { transition-delay: 1s; }

/* Bio text column */
html.js .page-lucca .bio-grid > .anim:not(.bio-portrait) {
  opacity: 0; transform: translateX(30px);
  transition: opacity 1s var(--ta-ease) .15s, transform 1.15s var(--ta-ease) .15s;
}
html.js .page-lucca .bio-grid > .anim:not(.bio-portrait).anim-in { opacity: 1; transform: none; }

/* Inside bio text: cascade eyebrow → name → role → intro */
html.js .page-lucca .bio-grid > .anim:not(.bio-portrait) > * {
  opacity: 0; transform: translateY(12px);
  transition: opacity .7s var(--ta-ease), transform .7s var(--ta-ease);
}
html.js .page-lucca .bio-grid > .anim:not(.bio-portrait).anim-in > *:nth-child(1) { opacity: 1; transform: none; transition-delay: .35s; }
html.js .page-lucca .bio-grid > .anim:not(.bio-portrait).anim-in > *:nth-child(2) { opacity: 1; transform: none; transition-delay: .45s; }
html.js .page-lucca .bio-grid > .anim:not(.bio-portrait).anim-in > *:nth-child(3) { opacity: 1; transform: none; transition-delay: .55s; }
html.js .page-lucca .bio-grid > .anim:not(.bio-portrait).anim-in > *:nth-child(4) { opacity: 1; transform: none; transition-delay: .65s; }

html.js .page-lucca .bio-intro p {
  opacity: 0; transform: translateY(8px);
  transition: opacity .65s var(--ta-ease), transform .65s var(--ta-ease);
}
html.js .page-lucca .bio-grid > .anim:not(.bio-portrait).anim-in .bio-intro p:nth-child(1) { opacity: 1; transform: none; transition-delay: .75s; }
html.js .page-lucca .bio-grid > .anim:not(.bio-portrait).anim-in .bio-intro p:nth-child(2) { opacity: 1; transform: none; transition-delay: .90s; }
html.js .page-lucca .bio-grid > .anim:not(.bio-portrait).anim-in .bio-intro p:nth-child(3) { opacity: 1; transform: none; transition-delay: 1.05s; }

/* TIMELINE — diamond pops, connector draws down, content cascades */
html.js .page-lucca .tl2.anim {
  opacity: 0; transform: translateY(20px);
  transition: opacity .75s var(--ta-ease), transform .75s var(--ta-ease);
}
html.js .page-lucca .tl2.anim.anim-in { opacity: 1; transform: none; }

html.js .page-lucca .tl2.anim .tl2-node {
  transform: rotate(45deg) scale(0);
  transition: transform .6s var(--ta-ease) .2s, box-shadow var(--ta-dur);
}
html.js .page-lucca .tl2.anim.anim-in .tl2-node { transform: rotate(45deg) scale(1); }

html.js .page-lucca .tl2.anim .tl2-conn {
  transform-origin: top; transform: scaleY(0);
  transition: transform .8s var(--ta-ease) .3s;
}
html.js .page-lucca .tl2.anim.anim-in .tl2-conn { transform: scaleY(1); }

html.js .page-lucca .tl2.anim .tl2-year,
html.js .page-lucca .tl2.anim .tl2-body > * {
  opacity: 0; transform: translateY(8px);
  transition: opacity .6s var(--ta-ease), transform .6s var(--ta-ease);
}
html.js .page-lucca .tl2.anim.anim-in .tl2-year                  { opacity: 1; transform: none; transition-delay: .15s; }
html.js .page-lucca .tl2.anim.anim-in .tl2-body > *:nth-child(1) { opacity: 1; transform: none; transition-delay: .28s; }
html.js .page-lucca .tl2.anim.anim-in .tl2-body > *:nth-child(2) { opacity: 1; transform: none; transition-delay: .38s; }
html.js .page-lucca .tl2.anim.anim-in .tl2-body > *:nth-child(3) { opacity: 1; transform: none; transition-delay: .48s; }

/* DIFFERENCES — 4 items, paired stagger, icon pops, border draws */
html.js .page-lucca .diff-grid .diff.anim {
  opacity: 0; transform: translateY(28px);
  transition: opacity .9s var(--ta-ease), transform .9s var(--ta-ease);
  border-top-color: transparent !important;
  position: relative;
}
html.js .page-lucca .diff-grid .diff.anim::before {
  content: ''; position: absolute; top: -1px; left: 0;
  height: 1px; width: 100%;
  background: var(--ta-line-ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform .85s var(--ta-ease);
}
html.js .page-lucca .diff-grid .diff.anim.anim-in { opacity: 1; transform: none; }
html.js .page-lucca .diff-grid .diff.anim.anim-in::before { transform: scaleX(1); transition-delay: .1s; }
html.js .page-lucca .diff-grid .diff.anim-in:nth-child(odd)  { transition-delay: 0s; }
html.js .page-lucca .diff-grid .diff.anim-in:nth-child(even) { transition-delay: .14s; }

html.js .page-lucca .diff-grid .diff.anim .diff-ico {
  opacity: 0; transform: scale(.6) rotate(-12deg);
  transition: opacity .6s var(--ta-ease), transform .8s var(--ta-ease);
}
html.js .page-lucca .diff-grid .diff.anim.anim-in .diff-ico       { opacity: 1; transform: none; transition-delay: .3s; }
html.js .page-lucca .diff-grid .diff:nth-child(even).anim-in .diff-ico { transition-delay: .44s; }

html.js .page-lucca .diff-grid .diff.anim > div > * {
  opacity: 0; transform: translateY(8px);
  transition: opacity .6s var(--ta-ease), transform .6s var(--ta-ease);
}
html.js .page-lucca .diff-grid .diff.anim.anim-in > div > *:nth-child(1) { opacity: 1; transform: none; transition-delay: .35s; }
html.js .page-lucca .diff-grid .diff.anim.anim-in > div > *:nth-child(2) { opacity: 1; transform: none; transition-delay: .45s; }
html.js .page-lucca .diff-grid .diff:nth-child(even).anim-in > div > *:nth-child(1) { transition-delay: .49s; }
html.js .page-lucca .diff-grid .diff:nth-child(even).anim-in > div > *:nth-child(2) { transition-delay: .59s; }

/* VALUES — 3 cards, roman numerals pop */
html.js .page-lucca .values .value.anim {
  opacity: 0; transform: translateY(28px) scale(.98);
  transition: opacity .9s var(--ta-ease), transform .9s var(--ta-ease);
}
html.js .page-lucca .values .value.anim.anim-in { opacity: 1; transform: none; }
html.js .page-lucca .values .value.anim-in:nth-child(1) { transition-delay: 0s; }
html.js .page-lucca .values .value.anim-in:nth-child(2) { transition-delay: .14s; }
html.js .page-lucca .values .value.anim-in:nth-child(3) { transition-delay: .28s; }

html.js .page-lucca .values .value.anim .k {
  display: inline-block;
  opacity: 0; transform: scale(.5) translateY(-4px);
  transition: opacity .6s var(--ta-ease), transform .8s var(--ta-ease);
}
html.js .page-lucca .values .value.anim.anim-in .k       { opacity: 1; transform: none; transition-delay: .22s; }
html.js .page-lucca .values .value:nth-child(2).anim-in .k { transition-delay: .36s; }
html.js .page-lucca .values .value:nth-child(3).anim-in .k { transition-delay: .50s; }

html.js .page-lucca .values .value.anim h4,
html.js .page-lucca .values .value.anim p {
  opacity: 0; transform: translateY(10px);
  transition: opacity .65s var(--ta-ease), transform .65s var(--ta-ease);
}
html.js .page-lucca .values .value.anim.anim-in h4 { opacity: 1; transform: none; transition-delay: .32s; }
html.js .page-lucca .values .value.anim.anim-in p  { opacity: 1; transform: none; transition-delay: .40s; }
html.js .page-lucca .values .value:nth-child(2).anim-in h4 { transition-delay: .46s; }
html.js .page-lucca .values .value:nth-child(2).anim-in p  { transition-delay: .54s; }
html.js .page-lucca .values .value:nth-child(3).anim-in h4 { transition-delay: .60s; }
html.js .page-lucca .values .value:nth-child(3).anim-in p  { transition-delay: .68s; }

/* ===========================================================
   PAGE: SERVICES — body.page-services
   =========================================================== */

/* Service cards: rich scroll entrance */
html.js .page-services .svc-list .svc-full.anim {
  opacity: 0; transform: translateY(48px) scale(.985);
  transition: opacity 1s var(--ta-ease), transform 1s var(--ta-ease),
              border-color var(--ta-dur), box-shadow var(--ta-dur);
  will-change: opacity, transform;
}
html.js .page-services .svc-list .svc-full.anim.anim-in { opacity: 1; transform: translateY(0) scale(1); }
html.js .page-services .svc-list .svc-full.anim-in:nth-child(odd)  { transition-delay: 0s; }
html.js .page-services .svc-list .svc-full.anim-in:nth-child(even) { transition-delay: .14s; }

html.js .page-services .svc-list .svc-full.anim > * {
  opacity: 0; transform: translateY(10px);
  transition: opacity .7s var(--ta-ease), transform .7s var(--ta-ease);
}
html.js .page-services .svc-list .svc-full.anim-in > *:nth-child(1) { opacity: 1; transform: none; transition-delay: .22s; }
html.js .page-services .svc-list .svc-full.anim-in > *:nth-child(2) { opacity: 1; transform: none; transition-delay: .30s; }
html.js .page-services .svc-list .svc-full.anim-in > *:nth-child(3) { opacity: 1; transform: none; transition-delay: .38s; }
html.js .page-services .svc-list .svc-full.anim-in > *:nth-child(4) { opacity: 1; transform: none; transition-delay: .46s; }
html.js .page-services .svc-list .svc-full.anim-in > *:nth-child(5) { opacity: 1; transform: none; transition-delay: .54s; }
html.js .page-services .svc-list .svc-full:nth-child(even).anim-in > *:nth-child(1) { transition-delay: .36s; }
html.js .page-services .svc-list .svc-full:nth-child(even).anim-in > *:nth-child(2) { transition-delay: .44s; }
html.js .page-services .svc-list .svc-full:nth-child(even).anim-in > *:nth-child(3) { transition-delay: .52s; }
html.js .page-services .svc-list .svc-full:nth-child(even).anim-in > *:nth-child(4) { transition-delay: .60s; }
html.js .page-services .svc-list .svc-full:nth-child(even).anim-in > *:nth-child(5) { transition-delay: .68s; }

html.js .page-services .svc-list .svc-full.anim .svc-ico {
  transform: scale(.55) rotate(-18deg); opacity: 0;
  transition: transform .9s var(--ta-ease), opacity .6s var(--ta-ease);
}
html.js .page-services .svc-list .svc-full.anim-in .svc-ico { transform: scale(1) rotate(0); opacity: 1; transition-delay: .42s; }
html.js .page-services .svc-list .svc-full:nth-child(even).anim-in .svc-ico { transition-delay: .56s; }

html.js .page-services .svc-list .svc-full.anim .svc-full-n {
  display: inline-block; opacity: 0; transform: translateX(-12px);
  transition: opacity .65s var(--ta-ease), transform .65s var(--ta-ease);
}
html.js .page-services .svc-list .svc-full.anim-in .svc-full-n { opacity: 1; transform: none; transition-delay: .28s; }
html.js .page-services .svc-list .svc-full:nth-child(even).anim-in .svc-full-n { transition-delay: .42s; }

/* NOT-A-FIT */
html.js .page-services .notfit.anim {
  opacity: 0; transform: translateY(32px);
  transition: opacity 1s var(--ta-ease), transform 1s var(--ta-ease);
  will-change: opacity, transform;
}
html.js .page-services .notfit.anim.anim-in { opacity: 1; transform: none; }
html.js .page-services .notfit.anim .notfit-ico {
  transform: rotate(-110deg) scale(.65); opacity: 0;
  transition: transform .95s var(--ta-ease) .25s, opacity .6s var(--ta-ease) .25s;
}
html.js .page-services .notfit.anim.anim-in .notfit-ico { transform: rotate(0) scale(1); opacity: 1; }

/* ===========================================================
   PAGE: CONTACT — body.page-contact
   =========================================================== */

/* Book-card slides in from left */
html.js .page-contact .book-card.anim {
  opacity: 0; transform: translateX(-32px);
  transition: opacity 1s var(--ta-ease), transform 1.1s var(--ta-ease);
  will-change: opacity, transform;
}
html.js .page-contact .book-card.anim.anim-in { opacity: 1; transform: none; }

html.js .page-contact .book-card.anim > * {
  opacity: 0; transform: translateY(10px);
  transition: opacity .65s var(--ta-ease), transform .65s var(--ta-ease);
}
html.js .page-contact .book-card.anim.anim-in > *:nth-child(1) { opacity: 1; transform: none; transition-delay: .25s; }
html.js .page-contact .book-card.anim.anim-in > *:nth-child(2) { opacity: 1; transform: none; transition-delay: .33s; }
html.js .page-contact .book-card.anim.anim-in > *:nth-child(3) { opacity: 1; transform: none; transition-delay: .41s; }
html.js .page-contact .book-card.anim.anim-in > *:nth-child(4) { opacity: 1; transform: none; transition-delay: .49s; }
html.js .page-contact .book-card.anim.anim-in > *:nth-child(5) { opacity: 1; transform: none; transition-delay: .57s; }

html.js .page-contact .book-card.anim .book-embed .cal {
  transform: scale(.5) rotate(-15deg); opacity: 0;
  transition: opacity .6s var(--ta-ease), transform .85s var(--ta-ease);
}
html.js .page-contact .book-card.anim.anim-in .book-embed .cal { opacity: 1; transform: scale(1) rotate(0); transition-delay: .6s; }

/* Form card slides in from right */
html.js .page-contact .form-card.anim {
  opacity: 0; transform: translateX(32px);
  transition: opacity 1s var(--ta-ease) .15s, transform 1.1s var(--ta-ease) .15s;
  will-change: opacity, transform;
}
html.js .page-contact .form-card.anim.anim-in { opacity: 1; transform: none; }

html.js .page-contact .form-card.anim #form-fields > * {
  opacity: 0; transform: translateY(10px);
  transition: opacity .65s var(--ta-ease), transform .65s var(--ta-ease);
}
html.js .page-contact .form-card.anim.anim-in #form-fields > *:nth-child(1) { opacity: 1; transform: none; transition-delay: .4s; }
html.js .page-contact .form-card.anim.anim-in #form-fields > *:nth-child(2) { opacity: 1; transform: none; transition-delay: .48s; }
html.js .page-contact .form-card.anim.anim-in #form-fields > *:nth-child(3) { opacity: 1; transform: none; transition-delay: .56s; }

/* Form fields cascade */
html.js .page-contact .form-card.anim form .field,
html.js .page-contact .form-card.anim form button,
html.js .page-contact .form-card.anim form .form-fine {
  opacity: 0; transform: translateY(8px);
  transition: opacity .55s var(--ta-ease), transform .55s var(--ta-ease);
}
html.js .page-contact .form-card.anim.anim-in form .field:nth-child(1) { opacity: 1; transform: none; transition-delay: .64s; }
html.js .page-contact .form-card.anim.anim-in form .field:nth-child(2) { opacity: 1; transform: none; transition-delay: .72s; }
html.js .page-contact .form-card.anim.anim-in form .field:nth-child(3) { opacity: 1; transform: none; transition-delay: .80s; }
html.js .page-contact .form-card.anim.anim-in form button              { opacity: 1; transform: none; transition-delay: .88s; }
html.js .page-contact .form-card.anim.anim-in form .form-fine          { opacity: 1; transform: none; transition-delay: .96s; }

/* Detail rows — stagger top-to-bottom, divider lines draw */
html.js .page-contact .detail-rows.anim .detail-row {
  opacity: 0; transform: translateY(12px);
  transition: opacity .7s var(--ta-ease), transform .7s var(--ta-ease);
  border-top-color: transparent !important;
  position: relative;
}
html.js .page-contact .detail-rows.anim .detail-row:first-child { border-top-color: transparent !important; }
html.js .page-contact .detail-rows.anim .detail-row:not(:first-child)::before {
  content: ''; position: absolute; top: 0; left: 0;
  height: 1px; width: 100%;
  background: var(--ta-line-ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--ta-ease);
}
html.js .page-contact .detail-rows.anim.anim-in .detail-row:nth-child(1) { opacity: 1; transform: none; transition-delay: .05s; }
html.js .page-contact .detail-rows.anim.anim-in .detail-row:nth-child(2) { opacity: 1; transform: none; transition-delay: .18s; }
html.js .page-contact .detail-rows.anim.anim-in .detail-row:nth-child(3) { opacity: 1; transform: none; transition-delay: .31s; }
html.js .page-contact .detail-rows.anim.anim-in .detail-row:nth-child(4) { opacity: 1; transform: none; transition-delay: .44s; }
html.js .page-contact .detail-rows.anim.anim-in .detail-row:nth-child(2)::before { transform: scaleX(1); transition-delay: .28s; }
html.js .page-contact .detail-rows.anim.anim-in .detail-row:nth-child(3)::before { transform: scaleX(1); transition-delay: .41s; }
html.js .page-contact .detail-rows.anim.anim-in .detail-row:nth-child(4)::before { transform: scaleX(1); transition-delay: .54s; }

/* "What to expect" left block */
html.js .page-contact .expect-block.anim {
  opacity: 0; transform: translateY(20px);
  transition: opacity .9s var(--ta-ease), transform .9s var(--ta-ease);
}
html.js .page-contact .expect-block.anim.anim-in { opacity: 1; transform: none; }
html.js .page-contact .expect-block.anim > * {
  opacity: 0; transform: translateY(10px);
  transition: opacity .65s var(--ta-ease), transform .65s var(--ta-ease);
}
html.js .page-contact .expect-block.anim.anim-in > *:nth-child(1) { opacity: 1; transform: none; transition-delay: .15s; }
html.js .page-contact .expect-block.anim.anim-in > *:nth-child(2) { opacity: 1; transform: none; transition-delay: .27s; }
html.js .page-contact .expect-block.anim.anim-in > *:nth-child(3) { opacity: 1; transform: none; transition-delay: .39s; }

/* ===========================================================
   Reduced motion: collapse everything
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  html.js .page-home .hero .eyebrow,
  html.js .page-home .hero-title,
  html.js .page-home .hero-title .accent,
  html.js .page-home .hero-lede,
  html.js .page-home .hero-actions,
  html.js .page-home .hero-vignette,
  html.js .page-home .problem-list.anim li,
  html.js .page-home .problem-list.anim li .x,
  html.js .page-home .svc-grid .svc-card.anim,
  html.js .page-home .svc-grid .svc-card.anim > *,
  html.js .page-home .svc-grid .svc-card.anim .svc-ico,
  html.js .page-home .svc-grid .svc-card.anim .svc-n,
  html.js .page-home .proof-inner.anim,
  html.js .page-home .proof-inner.anim .proof-mark,
  html.js .page-home .proof-inner.anim .proof-quote,
  html.js .page-home .proof-inner.anim .proof-src,
  html.js .page-home .steps .step.anim,
  html.js .page-home .steps .step.anim .step-k,
  html.js .page-lucca .bio-portrait.anim,
  html.js .page-lucca .bio-portrait.anim .frame-tick,
  html.js .page-lucca .bio-grid > .anim,
  html.js .page-lucca .bio-grid > .anim > *,
  html.js .page-lucca .bio-intro p,
  html.js .page-lucca .tl2.anim,
  html.js .page-lucca .tl2.anim .tl2-node,
  html.js .page-lucca .tl2.anim .tl2-conn,
  html.js .page-lucca .tl2.anim .tl2-year,
  html.js .page-lucca .tl2.anim .tl2-body > *,
  html.js .page-lucca .diff-grid .diff.anim,
  html.js .page-lucca .diff-grid .diff.anim .diff-ico,
  html.js .page-lucca .diff-grid .diff.anim > div > *,
  html.js .page-lucca .values .value.anim,
  html.js .page-lucca .values .value.anim .k,
  html.js .page-lucca .values .value.anim h4,
  html.js .page-lucca .values .value.anim p,
  html.js .page-services .page-hero .eyebrow,
  html.js .page-services .page-hero .page-title,
  html.js .page-services .page-hero .page-title .accent,
  html.js .page-services .page-hero .lede,
  html.js .page-services .page-hero-rule,
  html.js .page-services .svc-list .svc-full.anim,
  html.js .page-services .svc-list .svc-full.anim > *,
  html.js .page-services .svc-list .svc-full.anim .svc-ico,
  html.js .page-services .svc-list .svc-full.anim .svc-full-n,
  html.js .page-services .notfit.anim,
  html.js .page-services .notfit.anim .notfit-ico,
  html.js .page-contact .page-hero .eyebrow,
  html.js .page-contact .page-hero .page-title,
  html.js .page-contact .page-hero .page-title .accent,
  html.js .page-contact .page-hero .lede,
  html.js .page-contact .page-hero-rule,
  html.js .page-contact .book-card.anim,
  html.js .page-contact .book-card.anim > *,
  html.js .page-contact .book-card.anim .book-embed .cal,
  html.js .page-contact .form-card.anim,
  html.js .page-contact .form-card.anim #form-fields > *,
  html.js .page-contact .form-card.anim form .field,
  html.js .page-contact .form-card.anim form button,
  html.js .page-contact .form-card.anim form .form-fine,
  html.js .page-contact .detail-rows.anim .detail-row,
  html.js .page-contact .expect-block.anim,
  html.js .page-contact .expect-block.anim > *,
  html.js .cta-inner.anim,
  html.js .cta-inner.anim .cta-title,
  html.js .cta-inner.anim .cta-text,
  html.js .cta-inner.anim .cta-actions,
  html.js .cta-inner.anim .cta-title .accent,
  html.js .cta .cta-watermark {
    opacity: 1 !important;
    transform: none !important;
    letter-spacing: .26em;
    animation: none !important;
    transition: none !important;
  }
  html.js .cta .cta-watermark { opacity: .05 !important; transform: translate(-50%, -50%) !important; }
  html.js .page-services .page-hero-rule,
  html.js .page-contact  .page-hero-rule { transform: scaleX(1) !important; }
  html.js .page-home .steps .step.anim::before,
  html.js .page-lucca .diff-grid .diff.anim::before,
  html.js .page-contact .detail-rows.anim .detail-row::before { transform: scaleX(1) !important; transition: none !important; }
  html.js .cta-watermark-img { animation: none !important; }
}