/* 2bizy site animation layer — additive. Builds on the existing .reveal mechanism. */

/* Scroll reveal: was opacity-only. Add a gentle rise for a studio feel. */
.reveal {
  transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(.22,1,.36,1),
              transform 0.6s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.reveal.visible { transform: none; }

/* Staggered children inside a revealed section (cards settle one after another). */
.reveal .service-card {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s cubic-bezier(.22,1,.36,1),
              transform 0.55s cubic-bezier(.22,1,.36,1);
}
.reveal.visible .service-card { opacity: 1; transform: none; }
.reveal.visible .service-card:nth-child(1) { transition-delay: 0.06s; }
.reveal.visible .service-card:nth-child(2) { transition-delay: 0.16s; }
.reveal.visible .service-card:nth-child(3) { transition-delay: 0.26s; }

/* Hover micro-interactions — signals craft. */
.service-card {
  transition: transform 0.25s cubic-bezier(.22,1,.36,1),
              box-shadow 0.25s cubic-bezier(.22,1,.36,1),
              opacity 0.55s cubic-bezier(.22,1,.36,1);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(10,10,10,0.10);
}
.industry-tag { transition: transform 0.18s ease; }
.industry-tag:hover { transform: translateY(-2px) rotate(-1deg); }

/* Respect reduced motion — reset every transform we introduced. */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal .service-card { transform: none !important; transition: none !important; opacity: 1 !important; }
  .service-card:hover, .industry-tag:hover { transform: none !important; }
}

/* ── Hero must fit within short (laptop / MacBook Air) viewports: keep CTA above the fold ──
   Root cause was NOT the headline: .hero-grid is align-items:center and the right collage
   (~782px) forced a tall row, vertically centering the left column and pushing the CTA down.
   Fix (short + wide viewports only — tall desktops are untouched): top-align the grid,
   scale the wordmark by viewport height, and trim the vertical padding. */
@media (min-width: 1100px) and (max-height: 1000px) {
  .hero-grid    { align-items: start !important; }
  .hero-wordmark { font-size: min(11vw, 14vh) !important; }
  .hero-outer   { padding-top: 40px !important; padding-bottom: 28px !important; }
  .hero-eyebrow { margin-bottom: 8px !important; }
  .hero-sub     { margin: 16px 0 24px !important; }
}