/* ============================================================
   MOTION · Milano Engenharia
   IntersectionObserver-driven fade-ups, hero choreography,
   number counters, page-leave transition. Tone: architectural,
   confident, never bouncy. Hardware-accelerated only.
   ============================================================ */

:root {
  --motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --motion-fast: 280ms;
  --motion-base: 720ms;
  --motion-hero: 820ms;
}

html { scroll-behavior: smooth; }

/* ============================================================
   1 · PAGE LEAVE TRANSITION
   ============================================================ */
body {
  transition: opacity 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
html.motion-leaving body { opacity: 0; }

/* ============================================================
   2 · SCROLL-REVEALED ELEMENTS
   .reveal is auto-applied in motion.js. Starts hidden + nudged,
   transitions to natural state when IntersectionObserver fires.
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--motion-base) var(--motion-ease),
    transform var(--motion-base) var(--motion-ease);
  will-change: opacity, transform;
}
.reveal.in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

/* ============================================================
   3 · HOME HERO CHOREOGRAPHY
   ============================================================ */
@keyframes home-hero-rise {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.hero .hero-badge,
.hero .hero-title,
.hero .hero-subtitle,
.hero .hero-ctas,
.hero .hero-tags {
  opacity: 0;
  animation: home-hero-rise var(--motion-hero) var(--motion-ease) both;
}
.hero .hero-badge    { animation-delay: 180ms; }
.hero .hero-title    { animation-delay: 320ms; animation-duration: 920ms; }
.hero .hero-subtitle { animation-delay: 480ms; }
.hero .hero-ctas     { animation-delay: 620ms; }
.hero .hero-tags     { animation-delay: 760ms; }

/* Hero scroll-hint — fade in last, after the rest has settled */
.hero .hero-scroll-hint {
  opacity: 0;
  animation: home-hero-rise 600ms var(--motion-ease) 1100ms both;
}

/* ============================================================
   4 · INNER-PAGE HERO CHOREOGRAPHY
   sobre / servicos / portfolio / projeto / trabalhe / contato
   ============================================================ */
@keyframes page-hero-rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.page-hero .page-hero-eyebrow,
.page-hero .page-hero-title,
.page-hero .page-hero-subtitle,
.page-hero .page-hero-meta,
.page-hero .breadcrumb,
.page-hero .project-hero-breadcrumb,
.page-hero .project-hero-meta {
  opacity: 0;
  animation: page-hero-rise 720ms var(--motion-ease) both;
}
.page-hero .breadcrumb,
.page-hero .project-hero-breadcrumb { animation-delay: 140ms; }
.page-hero .page-hero-eyebrow       { animation-delay: 200ms; }
.page-hero .page-hero-title         { animation-delay: 340ms; animation-duration: 820ms; }
.page-hero .page-hero-subtitle      { animation-delay: 500ms; }
.page-hero .page-hero-meta,
.page-hero .project-hero-meta       { animation-delay: 620ms; }

/* Background photo: subtle Ken Burns on inner heroes */
@keyframes hero-kenburns {
  from { transform: scale(1.04); }
  to   { transform: scale(1.0); }
}
.page-hero .page-hero-photo {
  animation: hero-kenburns 14s ease-out forwards;
  transform-origin: center;
}

/* ============================================================
   5 · WHATSAPP FLOAT ENTRANCE
   No animation on .site-header — any animation/transform there
   would risk breaking the backdrop-filter blur on the floating
   pill (.header-inner) below it.
   ============================================================ */

@keyframes wa-pop {
  from { opacity: 0; transform: translate3d(0, 24px, 0) scale(0.85); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
.wa-float {
  animation: wa-pop 520ms var(--motion-ease) 1300ms both;
}

/* ============================================================
   6 · NUMBER COUNTERS
   Counter value is rewritten by JS; we just make sure the unit
   span doesn't jump while the digit animates.
   ============================================================ */
[data-counter] {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   7 · MICRO INTERACTIONS — card lift on hover
   Targeted, low-impact. Only transform/opacity.
   ============================================================ */
.project-card,
.svc-card,
.structure-card,
.role-card,
.job-card,
.related-card,
.spec-item,
.reason-item {
  transition:
    transform var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    background var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}

/* ============================================================
   8 · REDUCED MOTION GUARD
   Respect user preference. Disable everything decorative.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .hero .hero-badge,
  .hero .hero-title,
  .hero .hero-subtitle,
  .hero .hero-ctas,
  .hero .hero-tags,
  .hero .hero-scroll-hint,
  .page-hero .page-hero-eyebrow,
  .page-hero .page-hero-title,
  .page-hero .page-hero-subtitle,
  .page-hero .page-hero-meta,
  .page-hero .breadcrumb,
  .page-hero .project-hero-breadcrumb,
  .page-hero .project-hero-meta,
  .site-header,
  .wa-float {
    opacity: 1 !important;
  }
}

/* JS-detected reduced motion mirror */
html.motion-off .reveal { opacity: 1; transform: none; }