/* Section styles: footer.
   Unlayered, so it overrides css/base.css. Every selector is scoped under [data-section="footer"].
   A bar (brand + "Uporedi programe ↑") over a stage holding a giant outlined "MB." that rises out of the floor;
   a spotlight fills the letters under it (pointer on desktop, scroll position and taps on touch). */

[data-section="footer"] { position: relative; overflow: hidden; background: var(--void); }

/* ---------------------------------------------------------------- bar */
[data-section="footer"] .footer__bar {
  position: relative; z-index: 2; min-height: 96px; padding-block: clamp(18px, 2.4vw, 28px);
}
[data-section="footer"] .footer__link {
  display: inline-flex; align-items: center; gap: 14px; min-height: 48px;
  font-weight: 600; font-size: 15px; line-height: 1.2; letter-spacing: .05em; text-transform: uppercase; color: var(--bone);
  transition: color .3s;
}
[data-section="footer"] .footer__arrow {
  display: inline-grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px;
  border: 1px solid var(--line-2); border-radius: var(--radius); color: var(--blood-hot); font-size: 18px; line-height: 1;
  transition: background-color .35s var(--ease-out), border-color .35s var(--ease-out), color .3s, transform .45s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  [data-section="footer"] .footer__link:hover { color: var(--white); }
  [data-section="footer"] .footer__link:hover .footer__arrow { background: var(--blood); border-color: var(--blood); color: var(--white); transform: translateY(-4px); }
}
[data-section="footer"] .footer__link:active .footer__arrow { background: var(--blood); border-color: var(--blood); color: var(--white); transform: translateY(-2px); }
@media (max-width: 479px) {
  /* two rows on small phones: brand, then the link across the full width */
  [data-section="footer"] .footer__link { width: 100%; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 12px; }
}

/* ---------------------------------------------------------------- stage + giant monogram */
[data-section="footer"] .footer__stage {
  position: relative; display: flex; justify-content: center; overflow: hidden;
  padding: clamp(28px, 5vw, 72px) var(--safe-r) 0 var(--safe-l); border-top: 1px solid var(--line);
  -webkit-user-select: none; user-select: none; touch-action: pan-y;
}
/* the light pool on the floor follows the spotlight */
[data-section="footer"] .footer__stage::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70%; pointer-events: none;
  background: radial-gradient(50% 60% at var(--lx, 40%) 100%, rgba(217, 28, 28, .22), rgba(217, 28, 28, 0) 70%);
}
[data-section="footer"] .footer__mega {
  position: relative; font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  /* Anton: caps reach .859em, ascent 1.176em, descent .329em; line-height .86 puts the baseline on the floor */
  font-size: clamp(140px, 30vw + 60px, 520px); line-height: .86; letter-spacing: -.005em;
  will-change: transform;
}
[data-section="footer"] .footer__word { display: block; white-space: nowrap; }
[data-section="footer"] .footer__word > i { font-style: normal; }
[data-section="footer"] .footer__word--line { color: transparent; -webkit-text-stroke: 1.5px rgba(237, 232, 223, .22); }
[data-section="footer"] .footer__word--line > i { color: var(--blood); -webkit-text-stroke: 0; animation: ft-rec 2.6s ease-in-out infinite; }
[data-section="footer"] .footer__word--lit {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; color: var(--bone);
  -webkit-mask-image: radial-gradient(circle .42em at var(--sx, 30%) var(--sy, 55%), #000 0%, rgba(0, 0, 0, .6) 38%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(circle .42em at var(--sx, 30%) var(--sy, 55%), #000 0%, rgba(0, 0, 0, .6) 38%, rgba(0, 0, 0, 0) 100%);
}
[data-section="footer"] .footer__word--lit > i { color: var(--blood-hot); }
@keyframes ft-rec { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* safe area under the monogram on phones with a home indicator */
[data-section="footer"] .footer__stage { padding-bottom: env(safe-area-inset-bottom); }

/* reduced motion: a fixed light, no rise */
[data-motion="reduced"] [data-section="footer"] .footer__mega { transform: none !important; }