/* =========================================================
   Midnight Society — Fan Group Landing Page
   ========================================================= */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  min-height: 100%;
  background: #0d0518;
}

body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* Blurred backdrop fills the sides on desktop/tablet */
.backdrop {
  position: fixed;
  inset: 0;
  background: url("../assets/bg.jpg") center / cover no-repeat;
  filter: blur(28px) brightness(0.45);
  transform: scale(1.15);
  z-index: 0;
}

/* Poster keeps the artwork's 750 x 1334 ratio and scales to the screen */
.poster {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 750 / 1334;
  background: url("../assets/bg.jpg") center top / 100% auto no-repeat;
  box-shadow: 0 0 60px rgba(150, 60, 255, 0.35);
}

/* Buttons sit in the open space below the 加入我们的粉丝群 headline */
.buttons {
  position: absolute;
  left: 50%;
  bottom: 3%;
  transform: translateX(-50%);
  width: 76%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6%;
}

/* Tall desktop screens: fit the whole poster in view */
@media (min-width: 600px) {
  body { align-items: center; }
  .poster { width: auto; height: 100vh; height: 100dvh; max-width: none; }
}

/* ---------- BUTTON EFFECTS ----------
   Layers (each has its own job so animations never fight):
   a.btn        → entrance slide-in
   .btn-body    → idle float + hover lift / tap press
   img          → breathing neon glow in brand colour
   .shine       → light sweep, masked to the button's own shape
   .ripple      → tap ripple, masked the same way
-------------------------------------- */
.btn {
  display: block;
  width: 100%;
  line-height: 0;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  animation: enter 0.7s cubic-bezier(.2, .9, .3, 1.3) forwards;
  animation-delay: var(--delay);
}
.btn--fb { --glow: 40, 90, 255;  --delay: 0.35s; }
.btn--ig { --glow: 225, 60, 170; --delay: 0.55s; }

@keyframes enter {
  from { opacity: 0; transform: translateY(40px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.btn-body {
  position: relative;
  display: block;
  animation: float 3.2s ease-in-out infinite;
  animation-delay: calc(var(--delay) + 0.7s);
  transition: transform 0.2s ease;
}
.btn--ig .btn-body { animation-delay: calc(var(--delay) + 2.3s); }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

.btn img {
  width: 100%;
  height: auto;
  display: block;
  animation: glow 2.4s ease-in-out infinite;
  transition: filter 0.2s ease;
}
@keyframes glow {
  0%, 100% { filter: drop-shadow(0 0 4px  rgba(var(--glow), 0.35)); }
  50%      { filter: drop-shadow(0 0 16px rgba(var(--glow), 0.85)); }
}

/* Shine + ripple layers are clipped to each button's own shape */
.shine, .ripple-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: 100% 100%;    mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
}
.btn--fb .shine, .btn--fb .ripple-layer {
  -webkit-mask-image: url("../assets/btn-facebook.png");
          mask-image: url("../assets/btn-facebook.png");
}
.btn--ig .shine, .btn--ig .ripple-layer {
  -webkit-mask-image: url("../assets/btn-instagram.png");
          mask-image: url("../assets/btn-instagram.png");
}

/* Light sweep */
.shine::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0) 70%,
    transparent 100%);
  transform: skewX(-20deg);
  animation: sweep 3.6s ease-in-out infinite;
  animation-delay: calc(var(--delay) + 1s);
}
.btn--ig .shine::before { animation-delay: calc(var(--delay) + 2.6s); }

@keyframes sweep {
  0%        { left: -60%; }
  35%, 100% { left: 130%; }
}

/* Tap ripple */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transform: translate(-50%, -50%) scale(0);
  animation: ripple 0.6s ease-out forwards;
}
@keyframes ripple {
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* Hover / press */
@media (hover: hover) {
  .btn:hover .btn-body { transform: translateY(-4px) scale(1.04); animation-play-state: paused; }
  .btn:hover img {
    animation: none;
    filter: brightness(1.15) drop-shadow(0 0 22px rgba(var(--glow), 1));
  }
  .btn:hover .shine::before { animation-duration: 1.2s; }
}
.btn:active .btn-body { transform: scale(0.95); transition-duration: 0.08s; }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 40px; }

/* Respect users who turn off motion */
@media (prefers-reduced-motion: reduce) {
  .btn { animation: none; opacity: 1; }
  .btn-body, .btn img, .shine::before { animation: none; }
}