/* ===========================================================================
   Undo Fundo Foundation — falling silver "member card" background.
   Shared across every membership / join / request form.
   Injected by js/uf-cards.js into a host container (.uf-cards-host).
   =========================================================================== */

/* Responsive nav wordmark — shrink so it never overlaps the menu toggle on phones */
@media (max-width: 600px) {
  .uf-logo { font-size: 14px !important; letter-spacing: .08em !important; }
  .uf-logo--footer { font-size: 18px !important; }
}

/* The host (form section or modal card) positions the cards behind its content */
.uf-cards-host { position: relative; overflow: hidden; }
.uf-cards-host > .uf-cards-bg { position: absolute; inset: 0; z-index: 0; }
/* Keep the actual form content above the cards */
.uf-cards-host > .u-form-container,
.uf-cards-host > .u-container,
.uf-cards-host > .join-content { position: relative; z-index: 1; }
.legacy-modal__card.uf-cards-host > .legacy-modal__close { z-index: 2; }

.uf-cards-bg {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, #0e0e11 0%, #17141a 100%);
}
.uf-cards-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,12,.35) 0%, rgba(10,10,12,.6) 100%);
  pointer-events: none;
}

.uf-card {
  position: absolute;
  top: 0;
  left: var(--x, 50%);
  width: 250px;
  height: 158px;
  border-radius: 13px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px 20px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, rgba(0,0,0,.035) 2px 4px),
    linear-gradient(145deg, #80868d 0%, #c2c7cd 32%, #e9ecee 50%, #b3b9c0 70%, #787e85 100%);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow:
    0 26px 55px rgba(0,0,0,.55),
    0 0 26px rgba(196,202,210,.18),
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 1px 0 rgba(255,255,255,.55);
  opacity: .97;
  will-change: transform;
  animation: uf-fall var(--d, 18s) linear var(--delay, 0s) infinite;
}
/* EMV-style chip */
.uf-card::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 20px;
  width: 36px;
  height: 27px;
  border-radius: 5px;
  background: linear-gradient(135deg, #e4e7ea 0%, #aab0b7 45%, #cdd2d7 70%, #8f959c 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.6);
}
/* sweeping shine */
.uf-card::after {
  content: "";
  position: absolute;
  top: -25%;
  left: 0;
  width: 100%;
  height: 150%;
  background: linear-gradient(115deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 62%);
  transform: translateX(-130%);
  animation: uf-shine 9s ease-in-out var(--delay, 0s) infinite;
}
.uf-card span {
  position: relative;
  z-index: 1;
  font-family: "Feature Display", Georgia, serif;
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: 17px;
  line-height: 1.35;
  color: #2b2f34;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}

@keyframes uf-fall {
  0%   { transform: translateY(-300px) rotate(var(--r0, -10deg)); }
  100% { transform: translateY(calc(100vh + 320px)) rotate(var(--r1, 12deg)); }
}
@keyframes uf-shine {
  0%   { transform: translateX(-130%); }
  55%  { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}

/* Reduced-motion: don't hard-freeze the cards. A dead stop reads as "broken /
   stuck" — and this branch is triggered by everyday states, not just the
   accessibility toggle: iOS/macOS Low Power Mode and Windows "animation effects
   off" both report prefers-reduced-motion. So instead of stopping, we settle the
   cards at their resting positions and give them a slow, small-amplitude sway:
   plainly alive, but gentle enough to honor the reduced-motion intent.
   !important is required because uf-cards.js sets animation-duration/-delay as
   INLINE styles (for reliability), which would otherwise beat this rule. */
@media (prefers-reduced-motion: reduce) {
  .uf-card {
    top: var(--rest-top, 18%);
    opacity: .9;
    animation-name: uf-drift !important;
    animation-duration: 6s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    animation-direction: alternate !important;
    /* keep the per-card inline animation-delay so the cards stay desynced */
  }
  .uf-card::after { animation: none !important; } /* skip the fast shine sweep */
}

/* Small, slow vertical sway used only under reduced motion. Rotation stays fixed
   at each card's resting angle (--r0) so the only movement is a ~18px drift. */
@keyframes uf-drift {
  0%   { transform: translateY(-9px) rotate(var(--r0, -10deg)); }
  100% { transform: translateY(9px)  rotate(var(--r0, -10deg)); }
}

/* =====================================================================
   Partner-logo hero strip — keep it on-screen on every device/page
   ---------------------------------------------------------------------
   The scrolling partner-logo strip is absolutely positioned against the
   hero's `.hero-container` (bottom: clamp(80px…127px)). The container's
   height comes from the remote FoundersCard stylesheet in viewport (vh)
   units, which on laptops/phones overshoots the *visible* area by the
   height of the browser chrome — so the bottom band, where the strip
   sits, falls below the fold and has to be scrolled to. Different hero
   content per page made it land just inside the fold on some pages and
   just below it on others.

   Sizing the container to the SMALL viewport height (svh) excludes that
   dynamic browser UI, so the strip is always within view and pinned to
   the same spot on every page that has it (home, legacy, dinner,
   seniors-club). `vh` is kept as a fallback for browsers without svh.
   Loaded on every strip page via uf-cards.css; the selector only matches
   `section.hero`, so strip-less pages (inquire, join) are unaffected. */
section.hero .hero-container {
  min-height: 100vh !important;
  min-height: 100svh !important;
}

/* The partner-logo strip is purely decorative (its logos aren't links) but it
   sits later in the DOM than the hero content, so at some viewport sizes it can
   overlap the CTA button and swallow taps (its invisible padding counts too).
   Let pointer events pass straight through to the button/hero beneath it, and
   keep the hero content — including the button — stacked above the strip. */
section.hero .hero-logo-strip { pointer-events: none !important; }
section.hero .hero-content { position: relative; z-index: 3 !important; }
section.hero .hero-content a,
section.hero .hero-content .btn-icon-link { pointer-events: auto; }

/* --- Short laptop viewports: keep the hero + partner-logo strip on ONE screen ---
   The remote hero-container uses very large vertical padding (built for tall
   screens). On short laptop viewports (lots of browser chrome), that padding
   plus the hero copy overflow the visible area, pushing the absolutely-
   positioned logo strip below the fold — worse on legacy/dinner/seniors whose
   copy is a little taller than the home page. On short + wide screens we trim
   the padding & type and pin the strip near the bottom so every page shows the
   partner logos without scrolling. Phones (portrait/narrow) are unaffected. */
@media (min-width: 900px) and (max-height: 780px) {
  /* The heavy lifting is done by trimming the oversized padding + compacting the
     logo strip — NOT by shrinking the headline. Keep the headline large so it
     never looks tiny; only cap it gently so it still fits alongside the logos. */
  section.hero .hero-container {
    padding-block-start: 62px !important;
    padding-block-end: 104px !important;
  }
  section.hero .hero-content h1 {
    font-size: clamp(56px, 6.8vw, 96px) !important;
    line-height: 1.02 !important;
  }
  section.hero.legacy-hero .hero-content h1 {
    font-size: clamp(38px, 4.6vw, 60px) !important;
    line-height: 1.06 !important;
  }
  section.hero .hero-content p { margin-bottom: 0 !important; }
  section.hero .hero-content { row-gap: clamp(14px, 2vh, 26px) !important; }
  section.hero .hero-logo-strip { bottom: 24px !important; padding: 16px 0 !important; }
  section.hero .hero-logo-strip .hero-marquee-logo img { height: 30px !important; }
}