/* Floating Socials FAB (Home only)
   - Bottom-right frosted main button (matches header blur/shadow)
   - On open: main icon spins, swaps to "X"; seven white circles fan into the top-left quadrant with staggered animation.
*/

:root {
  --fab-size: 56px;
  --fab-gap: 12px; /* visual spacing between circles */
  --fab-stagger: 50ms;
  --fab-scale: 1;  /* hover grow factor for items */
}

/* FAB container anchors everything to bottom-right */
.socials-fab {
  position: fixed;
  right: 48px;
  bottom: max(48px, env(safe-area-inset-bottom) + 32px);
  z-index: 1300;
  width: var(--fab-size);
  height: var(--fab-size);
  isolation: isolate; /* keep its own stacking context to stabilize shadow */
  overflow: visible; /* ensure children can render/shadow outside anchor box */
}

/* Main toggle button: frosted white pill with same visual as header */
.socials-fab__toggle {
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: #ffffff;                       /* opaque white (no frost) */
  /* removed backdrop blur per request */
  /* removed backdrop blur per request */
  display: grid;
  place-items: center;
  padding: 0;
  outline: none;
  transition: transform .3s ease, background-color .3s ease;

  /* stabilize shadow on scroll */
  will-change: transform, opacity;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  /* keep above expanding items so shadow doesn't get covered */
  position: relative;
  z-index: 2;
}

/* Icon swap/rotate inside the main toggle */
.socials-fab__toggle .icon {
  position: relative;
  width: 60%;
  height: 60%;
}
/* Hover/focus: grow main button 10% and tint grey */
.socials-fab__toggle:hover,
.socials-fab__toggle:focus-visible {
  transform: translateZ(0) scale(1.1);
  background-color: #f5f5f5f5;
}

/* Default: show SMicons.svg (black) */
.socials-fab__toggle .icon::before,
.socials-fab__toggle .icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #111; /* black icon */
  transition: opacity .35s ease, transform .35s ease;
  will-change: opacity, transform;
}
.socials-fab__toggle .icon::before {
  -webkit-mask: url("../../img/ui/SMicons.svg") no-repeat center / contain;
  mask: url("../../img/ui/SMicons.svg") no-repeat center / contain;
  opacity: 1;
  transform: rotate(0deg);
}

/* X icon (shown when open) */
.socials-fab__toggle .icon::after {
  -webkit-mask: url("../../img/header/x.svg") no-repeat center / contain;
  mask: url("../../img/header/x.svg") no-repeat center / contain;
  opacity: 0;
  transform: rotate(-180deg) scale(0.56);
}

/* Open state: spin and swap to X */
.socials-fab.is-open .socials-fab__toggle .icon::before {
  opacity: 0;
  transform: rotate(180deg) scale(0.8);
}
.socials-fab.is-open .socials-fab__toggle .icon::after {
  opacity: 1;
  transform: rotate(0deg) scale(0.56);
}

/* Static shadow layer under the main toggle */
.socials-fab__shadow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateZ(0);
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1; /* under the main button (z=2) */
  box-shadow: 0 8px 24px rgba(0,0,0,.208);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Items container overlays bottom-right of the toggle */
.socials-fab__items {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* anchor exactly at main button center */
  width: 0;
  height: 0;
  pointer-events: none; /* disabled until open */
  z-index: 1; /* under the main button */
}

/* Each fan-out circle (placeholder icons for now) */
.socials-fab__item {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 50%;
  background: #ffffff;                  /* opaque white */
  box-shadow: 0 8px 24px rgba(0,0,0,.208); /* extended length for visibility */
  display: grid;
  place-items: center;
  transform: translate(-50%,-50%) scale(calc(.7 * var(--fab-scale)));
  opacity: 0;
  transition:
    transform .3s ease,
    opacity .3s ease,
    background-color .3s ease;
}
/* Hover/focus: grow item 10% and tint grey */
.socials-fab__item:hover,
.socials-fab__item:focus-visible {
  --fab-scale: 1.1;
  background-color: #f5f5f5f5;
  /* Ensure grow + tint animate together with same timing and no delay */
  transition: transform .3s ease 0s, background-color .3s ease 0s, opacity .3s ease 0s !important;
}

/* Placeholder glyph (use SMicons until real ones provided) */
.socials-fab__item .socials-fab__glyph {
  width: 52%;
  height: 52%;
  background-color: #111; /* black for visibility */
  -webkit-mask: url("../../img/ui/SMicons.svg") no-repeat center / contain;
  mask: url("../../img/ui/SMicons.svg") no-repeat center / contain;
  transition: background-color .3s ease;
}
/* Hover/focus: tint icon to brand green (items only, not main button) */
.socials-fab__item:hover .socials-fab__glyph,
.socials-fab__item:focus-visible .socials-fab__glyph { background-color: var(--brand-green); }
/* Per-icon masks (row from leftmost to rightmost) */
.socials-fab__item:nth-child(1) .socials-fab__glyph {
  -webkit-mask: url("../../img/ui/Footer-X.svg") no-repeat center / contain;
  mask: url("../../img/ui/Footer-X.svg") no-repeat center / contain;
  transform: scale(0.85);
  transform-origin: center;
}
.socials-fab__item:nth-child(2) .socials-fab__glyph {
  -webkit-mask: url("../../img/ui/telegram-new-green.svg") no-repeat center / contain;
  mask: url("../../img/ui/telegram-new-green.svg") no-repeat center / contain;
}
.socials-fab__item:nth-child(3) .socials-fab__glyph {
  -webkit-mask: url("../../img/ui/github-new-green.svg") no-repeat center / contain;
  mask: url("../../img/ui/github-new-green.svg") no-repeat center / contain;
}
.socials-fab__item:nth-child(4) .socials-fab__glyph {
  -webkit-mask: url("../../img/ui/Footer-Discord.svg") no-repeat center / contain;
  mask: url("../../img/ui/Footer-Discord.svg") no-repeat center / contain;
}
.socials-fab__item:nth-child(5) .socials-fab__glyph {
  -webkit-mask: url("../../img/ui/Footer-Medium.svg") no-repeat center / contain;
  mask: url("../../img/ui/Footer-Medium.svg") no-repeat center / contain;
}
.socials-fab__item:nth-child(6) .socials-fab__glyph {
  -webkit-mask: url("../../img/ui/Footer-Reddit.svg") no-repeat center / contain;
  mask: url("../../img/ui/Footer-Reddit.svg") no-repeat center / contain;
}
.socials-fab__item:nth-child(7) .socials-fab__glyph {
  -webkit-mask: url("../../img/ui/Footer-Youtube.svg") no-repeat center / contain;
  mask: url("../../img/ui/Footer-Youtube.svg") no-repeat center / contain;
}

/* Fan-out positions along a 90° arc (top-left quadrant), radius ~ var(--fab-gap) */
.socials-fab.is-open .socials-fab__items { pointer-events: auto; }

.socials-fab.is-open .socials-fab__item:nth-child(1) {
  transform: translate(-50%, -50%) translateX(calc(-1 * (var(--fab-size) + var(--fab-gap)) * 1)) scale(var(--fab-scale));     /* row left */
  opacity: 1; transition-delay: calc(var(--fab-stagger) * 1);
}
.socials-fab.is-open .socials-fab__item:nth-child(2) {
  transform: translate(-50%, -50%) translateX(calc(-1 * (var(--fab-size) + var(--fab-gap)) * 2)) scale(var(--fab-scale));     /* row left */
  opacity: 1; transition-delay: calc(var(--fab-stagger) * 2);
}
.socials-fab.is-open .socials-fab__item:nth-child(3) {
  transform: translate(-50%, -50%) translateX(calc(-1 * (var(--fab-size) + var(--fab-gap)) * 3)) scale(var(--fab-scale));     /* row left */
  opacity: 1; transition-delay: calc(var(--fab-stagger) * 3);
}
.socials-fab.is-open .socials-fab__item:nth-child(4) {
  transform: translate(-50%, -50%) translateX(calc(-1 * (var(--fab-size) + var(--fab-gap)) * 4)) scale(var(--fab-scale));     /* row left */
  opacity: 1; transition-delay: calc(var(--fab-stagger) * 4);
}
.socials-fab.is-open .socials-fab__item:nth-child(5) {
  transform: translate(-50%, -50%) translateX(calc(-1 * (var(--fab-size) + var(--fab-gap)) * 5)) scale(var(--fab-scale));     /* row left */
  opacity: 1; transition-delay: calc(var(--fab-stagger) * 5);
}
.socials-fab.is-open .socials-fab__item:nth-child(6) {
  transform: translate(-50%, -50%) translateX(calc(-1 * (var(--fab-size) + var(--fab-gap)) * 6)) scale(var(--fab-scale));     /* row left */
  opacity: 1; transition-delay: calc(var(--fab-stagger) * 6);
}
.socials-fab.is-open .socials-fab__item:nth-child(7) {
  transform: translate(-50%, -50%) translateX(calc(-1 * (var(--fab-size) + var(--fab-gap)) * 7)) scale(var(--fab-scale));     /* row left */
  opacity: 1; transition-delay: calc(var(--fab-stagger) * 7);
}

/* Reduce size on smaller screens */
@media (max-width: 980px) {
  :root { --fab-size: 52px; --fab-gap: 12px; }

  /* Place next to mobile nav pill and center as a group (offset set by JS) */
  .socials-fab {
    left: 50%;
    right: auto;
    bottom: max(16px, env(safe-area-inset-bottom) + 12px);
    transform: translateX(calc(-50% + var(--fab-offset-x, 0px)));
  }

  /* Match pill visuals: frosted bg + shadow */
  .socials-fab__toggle {
    background: rgba(255,255,255,0.8);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-soft);
  }
  .socials-fab__shadow { box-shadow: var(--shadow-soft); }

  /* Centered bottom row wrapper containing pill and socials */
  .mobile-bottom-row {
    position: fixed;
    left: 50%;
    bottom: max(16px, env(safe-area-inset-bottom) + 12px);
    transform: translateX(-50%);
    z-index: 1200;
    display: flex;            /* enforce row */
    align-items: center;
    gap: 16px;                 /* fixed 16px gap */
    white-space: nowrap;       /* prevent wrapping */
    pointer-events: none;      /* container should not intercept */
  }
  .mobile-bottom-row > * {
    pointer-events: auto; /* re-enable on children */
    flex: 0 0 auto;       /* keep intrinsic width side-by-side */
  }

  /* Inside the row, neutralize individual fixed positioning */
  .mobile-bottom-row .mobile-nav-pill {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
  }
  .mobile-bottom-row .socials-fab {
    position: relative; /* anchor fan-out to button center */
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
  }

  /* Vertical fan-out (upwards) overrides (desktop stays horizontal) */
  .socials-fab.is-open .socials-fab__item:nth-child(1) {
    transform: translate(-50%, -50%) translateY(calc(-1 * (var(--fab-size) + var(--fab-gap)) * 1)) scale(var(--fab-scale));
  }
  .socials-fab.is-open .socials-fab__item:nth-child(2) {
    transform: translate(-50%, -50%) translateY(calc(-1 * (var(--fab-size) + var(--fab-gap)) * 2)) scale(var(--fab-scale));
  }
  .socials-fab.is-open .socials-fab__item:nth-child(3) {
    transform: translate(-50%, -50%) translateY(calc(-1 * (var(--fab-size) + var(--fab-gap)) * 3)) scale(var(--fab-scale));
  }
  .socials-fab.is-open .socials-fab__item:nth-child(4) {
    transform: translate(-50%, -50%) translateY(calc(-1 * (var(--fab-size) + var(--fab-gap)) * 4)) scale(var(--fab-scale));
  }
  .socials-fab.is-open .socials-fab__item:nth-child(5) {
    transform: translate(-50%, -50%) translateY(calc(-1 * (var(--fab-size) + var(--fab-gap)) * 5)) scale(var(--fab-scale));
  }
  .socials-fab.is-open .socials-fab__item:nth-child(6) {
    transform: translate(-50%, -50%) translateY(calc(-1 * (var(--fab-size) + var(--fab-gap)) * 6)) scale(var(--fab-scale));
  }
  .socials-fab.is-open .socials-fab__item:nth-child(7) {
    transform: translate(-50%, -50%) translateY(calc(-1 * (var(--fab-size) + var(--fab-gap)) * 7)) scale(var(--fab-scale));
  }
}

/* Accessibility niceties */
.socials-fab__toggle:focus { outline: none; }
.socials-fab__toggle:focus-visible {
  outline: 2px solid var(--brand-green);
  outline-offset: 2px;
}

/* Optional page blur when open (subtle) */
.socials-fab__blur { display: none !important; }
/* background frosting removed */