/* ==========================================================
   MIMO member card — floating link to membros.html
   Hero state: large, tilted, floating inside the banner.
   Docked state (.is-docked): small, bottom-right, follows the page.
   The wrapper is always position:fixed and anchored bottom-right;
   the hero position is reached with a translate + scale, so the
   change between states is a single smooth transform.
   ========================================================== */
.card-float{
  --card-w:340px;
  --gap:22px;
  --ax:calc(-1 * (max(32px, (100vw - 1180px) / 2 + 32px) - var(--gap)));
  --ay:calc(-1 * (36vh - var(--gap)));
  --as:0.8;
  --ds:0.42;

  position:fixed; right:var(--gap); bottom:var(--gap); z-index:45;
  width:var(--card-w); display:block; color:inherit; text-decoration:none;
  transform-origin:100% 100%;
  transform:translate(var(--ax), var(--ay)) scale(var(--as));
  transition:transform .9s cubic-bezier(.2,.8,.2,1), bottom .4s ease;
  -webkit-tap-highlight-color:transparent;
}
.card-float.is-docked{ transform:translate(0,0) scale(var(--ds)); }
.card-float.is-docked:hover{ transform:translate(0,-6px) scale(calc(var(--ds) + 0.03)); }
.card-float:focus-visible{ outline:none; }
.card-float:focus-visible .member-card{ outline:2px solid #CBA968; outline-offset:6px; }
.card-float.no-anim, .card-float.no-anim .mc-tilt, .card-float.no-anim .mc-caption{ transition:none !important; }

/* Hidden (e.g. while the waitlist form it points to is on screen) */
.card-float.is-hidden{ opacity:0; pointer-events:none; visibility:hidden; transition:transform .9s cubic-bezier(.2,.8,.2,1), opacity .3s ease, visibility 0s .3s; }
.card-float{ transition:transform .9s cubic-bezier(.2,.8,.2,1), bottom .4s ease, opacity .3s ease; }

/* Keep clear of the cookie banner while it is on screen */
body:has(#cookie-banner:not([hidden])) .card-float.is-docked{ bottom:calc(var(--gap) + 84px); }

/* Tagline + card tilt and float together as one group */
.card-float .mc-tilt{
  --tilt:-5deg;
  width:100%;
  transform:rotate(var(--tilt));
  animation:mimoCardFloat 7s ease-in-out infinite;
  transition:transform .9s cubic-bezier(.2,.8,.2,1);
}
.card-float.is-docked .mc-tilt{ animation:none; transform:rotate(0deg); }

/* Simple tagline above the card. It sits inside the scaled wrapper, so its size is
   divided by the current scale to stay readable both in the banner and when docked. */
.card-float .mc-caption{
  --cap-scale:var(--as);
  display:flex; justify-content:flex-start; margin:0 0 calc(8px / var(--cap-scale)) calc(6px / var(--cap-scale));
  font-family:'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  font-size:calc(0.74rem / var(--cap-scale)); font-weight:400; letter-spacing:0.14em; line-height:1.2;
  text-transform:uppercase; white-space:nowrap; text-align:left;
  color:#E3C88F; text-shadow:0 1px 6px rgba(0,0,0,0.45);
  transition:font-size .9s cubic-bezier(.2,.8,.2,1), margin .9s cubic-bezier(.2,.8,.2,1), color .6s ease;
}
/* Docked: right-aligned over the card, a touch smaller, darker gold for light sections */
.card-float.is-docked .mc-caption{
  --cap-scale:calc(var(--ds) * 1.3);
  justify-content:flex-end; /* if wider than the card it grows leftwards, never off-screen */
  text-align:right; margin-left:0; margin-right:calc(4px / var(--cap-scale));
  letter-spacing:0.1em; color:#AD8B52; text-shadow:0 1px 4px rgba(245,241,236,0.6);
}

.card-float .member-card{
  position:relative; width:100%; aspect-ratio:1.586;
  padding:22px 24px; border-radius:14px; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; justify-content:space-between;
  /* Burgundy, the members' colour (same palette as the members page) */
  background:linear-gradient(135deg, #7a3a44 0%, #61262f 30%, #4a1823 55%, #5a1f2b 78%, #7d4a40 100%);
  border:1px solid rgba(203,169,104,0.38);
  /* Layered shadows (contact, mid, ambient) + lit top edge / dark bottom edge for card thickness */
  box-shadow:
    0 1px 1px rgba(0,0,0,0.28),
    0 4px 8px rgba(0,0,0,0.22),
    0 14px 28px rgba(0,0,0,0.26),
    0 34px 70px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.38),
    inset 1px 0 0 rgba(255,255,255,0.06);
  color:#F5F1EC; font-family:'Montserrat', 'Helvetica Neue', Arial, sans-serif; font-weight:300; line-height:1.4;
  transition:box-shadow .6s ease;
}
/* Homepage variant: satin grey (tones from the banner video) */
.card-float.card-satin .member-card{
  background:linear-gradient(135deg, #5e5d5b 0%, #454443 30%, #353535 55%, #474645 78%, #6a5c51 100%);
}
/* In the banner: softer, more diffuse shadow so the card sits in the video instead of on top of it */
.card-float:not(.is-docked) .member-card{
  box-shadow:
    0 1px 1px rgba(0,0,0,0.2),
    0 10px 24px rgba(0,0,0,0.16),
    0 30px 60px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.38),
    inset 1px 0 0 rgba(255,255,255,0.06);
}
/* Brushed-metal grain */
.card-float .member-card::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.028) 0 1px, rgba(255,255,255,0) 1px 3px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}
/* Specular light from the top-left + warm bounce bottom-right */
.card-float .member-card::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 28%, rgba(255,255,255,0) 45%),
    radial-gradient(ellipse 70% 55% at 90% 110%, rgba(203,169,104,0.16), rgba(203,169,104,0) 70%);
}
@keyframes mimoCardFloat{
  0%,100%{ transform:rotate(var(--tilt)) translateY(0); }
  50%{ transform:rotate(calc(var(--tilt) + 1deg)) translateY(-8px); }
}
.card-float .mc-shine{
  position:absolute; inset:-60%; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,244,220,0) 42%, rgba(255,244,220,0.18) 50%, rgba(255,244,220,0) 58%);
  transform:translateX(-55%);
  animation:mimoCardShine 6s ease-in-out 1.4s infinite;
}
@keyframes mimoCardShine{ 0%{ transform:translateX(-55%); } 45%,100%{ transform:translateX(55%); } }
.card-float .mc-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; position:relative; }
/* Bold version of the mark (thin original lines vanish at this size), slightly embossed */
.card-float .mc-mark{ width:54px; height:54px; filter:drop-shadow(0 1px 0 rgba(0,0,0,0.55)) drop-shadow(0 -1px 0 rgba(255,240,210,0.18)); }
.card-float .mc-brand{ position:relative; text-align:right; margin:0; }
.card-float .mc-brand strong,
.card-float .mc-tier{
  background:linear-gradient(180deg, #F6E3B4 0%, #E0BF7F 45%, #B8935A 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,0.5));
}
.card-float .mc-brand strong{ display:block; font-size:1.55rem; font-weight:300; letter-spacing:0.5em; margin-right:-0.5em; line-height:1.1; }
.card-float .mc-brand span{ display:block; margin-top:4px; margin-right:-0.32em; font-size:0.6rem; font-weight:400; letter-spacing:0.32em; text-transform:uppercase; opacity:0.75; text-shadow:0 1px 0 rgba(0,0,0,0.45); }
.card-float .mc-bottom{ display:flex; justify-content:space-between; align-items:flex-end; position:relative; }
.card-float .mc-label{ display:block; font-size:0.58rem; font-weight:400; letter-spacing:0.22em; text-transform:uppercase; opacity:0.7; text-shadow:0 1px 0 rgba(0,0,0,0.45); }
.card-float .mc-tier{ display:block; font-size:1.25rem; font-weight:400; transition:opacity .35s ease, transform .35s ease; }
.card-float .mc-tier.swap{ opacity:0; transform:translateY(6px); }
.card-float .mc-num{ font-size:0.66rem; letter-spacing:0.18em; opacity:0.75; text-shadow:0 1px 0 rgba(0,0,0,0.45); }

/* Tablet & mobile: hero card centred in the upper part of the banner */
@media (max-width:900px){
  .card-float{
    --card-w:300px;
    --gap:16px;
    /* Always docked on mobile/tablet (see mimo-card.js) */
    --ds:0.38;
  }
  body:has(#cookie-banner:not([hidden])) .card-float.is-docked{ bottom:calc(var(--gap) + 140px); }
}

@media (prefers-reduced-motion: reduce){
  .card-float, .card-float .mc-tilt, .card-float .mc-caption{ transition:none; }
  .card-float .mc-tilt{ animation:none; }
  .card-float .mc-shine{ display:none; }
}