/*
  Mobile-only footer — the "old" dark links footer + floating-bee CTA
  that the user wants on phones in place of the close panel.

  Visible only at < 1024px. Desktop keeps the in-scroll Close panel.
  Utility classes (.btn, .btn-primary, .btn-lg, .text-display,
  .text-body-l, .container, .section-header, .reveal) come from base.css
  which is already loaded on the home page.
*/

/* Default: hidden on desktop. */
.mobile-footer {
  display: none;
}

@media (max-width: 1023px) {

  .mobile-footer {
    display: block;
  }

  /* GSAP ScrollTrigger isn't loaded on the home page — make .reveal
     elements visible by default so the footer text isn't blank. */
  .mobile-footer .reveal {
    visibility: visible;
  }

  /* ── Footer CTA (centered + floating bee logos) ─────────── */
  .footer-cta {
    position: relative;
    overflow: hidden;
    padding: calc(var(--space-5xl) + 80px + 24px) 0 calc(var(--space-5xl) + 40px);
    text-align: center;
    /* Same warm cream as the rest of the home page so the bees float
       on the same surface the panels do. */
    background: var(--hpan-bg, #F7F6F2);
  }

  .footer-cta .section-header {
    margin-bottom: var(--space-xl);
  }

  /* Brand mark above the closing headline — mirrors the desktop close
     panel's hpan__close-mark so mobile gets the same visual anchor. */
  .footer-cta-mark {
    display: block;
    width: clamp(64px, 18vw, 88px);
    height: auto;
    margin: 0 auto var(--space-md);
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.08));
    user-select: none;
    pointer-events: none;
  }

  /* Tight wrapper so bees can float around the sides */
  .footer-cta-text-wrap {
    display: inline-block;
  }

  /* Floating 3D logo cards container */
  .floating-logos {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    perspective: 900px;
  }

  /* Each logo is a 3D extruded bee shape */
  .floating-logo {
    position: absolute;
    will-change: transform;
    pointer-events: none;
    transform-style: preserve-3d;
  }

  .floating-logo__face {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    transform: translateZ(0);
  }

  .floating-logo__depth {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    filter: brightness(0);
  }

  /* Vertical stack: button + note */
  .footer-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .cta-note {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: var(--space-lg);
  }

  .cta-note svg { flex-shrink: 0; }

  /* Override the base.css .btn-primary pill so the footer CTA matches
     the home page Join Waitlist buttons (12px radius, 16px text,
     dark fill) instead of the legacy rounded-full pill shape. */
  .mobile-footer .btn-primary {
    border-radius: 12px;
    font-size: 16px;
    padding: 14px 28px;
    background-color: #0a0a0a;
    color: #ffffff;
    transition: background-color 140ms ease, transform 140ms ease;
  }

  .mobile-footer .btn-primary:hover {
    background-color: #000;
    transform: translateY(-1px);
  }

  /* ── Dark multi-column footer ────────────────────────────── */
  .footer {
    background-color: #111111;
    color: rgba(255, 255, 255, 0.7);
    position: relative;
    overflow: hidden;
    border-radius: 24px 24px 0 0;
    margin-top: -24px;
  }

  .footer-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
    max-width: 1024px;
    margin: 0 auto;
    padding: var(--space-4xl) var(--space-lg) var(--space-xl);
  }

  /* Single-column layout — brand on top, legal at the bottom. */
  .footer-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2xl);
  }

  .footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  .footer-logo {
    display: flex;
    align-items: flex-end;
    gap: 4px;
  }
  .footer-logo img { width: 24px; height: 24px; flex-shrink: 0; }

  .footer-brand-text {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.01em;
    line-height: 1;
  }

  .footer-tagline {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.4);
    max-width: 320px;
    margin: 0;
  }

  .footer-socials { display: flex; gap: var(--space-sm); }
  .footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: background-color 150ms ease-out, color 150ms ease-out;
  }
  .footer-social-link:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
  }

  .footer-bottom {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .footer-legal { display: flex; gap: var(--space-lg); }
  .footer-legal a {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.35);
    text-decoration: none;
    transition: color 150ms ease-out;
  }
  .footer-legal a:hover { color: rgba(255, 255, 255, 0.7); }

  .footer-copyright {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.25);
  }
}