/* =============================================================================
   FOOTER MODULE — STRUCTURED / MODULAR / REVEAL READY
   - Fully sovereign (no dependency on style.css except tokens)
   - Includes luxury spacing
   - Includes subtle reveal animation (bidirectional ready)
============================================================================= */

/* -----------------------------------------------------------------------------
   01) BASE FOOTER LAYOUT
----------------------------------------------------------------------------- */

.site-footer{
  width:100%;
  font-size:0.9rem;
  margin:2rem 0 0 0;
  padding:1.4rem 0 1.2rem 0;
  background-color:transparent;
  color:var(--text-secondary-color);
  text-align:initial;
  position:relative;
  z-index:2;
}

.footer-flex{
  width: min(var(--site-rail-width), calc(100% - (var(--site-gutter) * 2)));
  margin:0 auto;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.2rem;
  flex-wrap:wrap;
}

.footer-separator{
  opacity:0.35;
}

.footer-left{
  text-align:left;
}

.footer-right{
  text-align:right;
}

/* -----------------------------------------------------------------------------
   02) REVEAL ANIMATION (LUXURY / SUBTLE)
   - Matches closing section philosophy
----------------------------------------------------------------------------- */

.site-footer{
  opacity:0;
  transform:translateY(22px);
  transition:
    opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change:opacity, transform;
}

/* Activated when visible */
.site-footer.footer-visible{
  opacity:1;
  transform:translateY(0);
}

/* -----------------------------------------------------------------------------
   03) RESPONSIVE TUNING
----------------------------------------------------------------------------- */

@media (max-width:768px){
  .site-footer{
    padding:1.2rem 0 1rem 0;
  }

  .footer-flex{
    gap:0.8rem;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }

  .footer-left,
  .footer-right{
    text-align:center;
  }
}