.five-share.share-social-fan-active {
  position: relative;
  display: block;
  min-height: 168svh;
  overflow: visible;
  padding: 0;
  scroll-margin-top: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(107, 134, 232, 0.08), transparent 44%),
    #f8f5ef;
}

.share-social-fan-active .share-social-fan__sticky {
  position: sticky;
  top: 0;
  display: grid;
  height: 100svh;
  min-height: min(600px, 100svh);
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(10px, 1.8svh, 20px);
  overflow: clip;
  padding: clamp(82px, 9svh, 108px) clamp(28px, 5vw, 76px) clamp(22px, 3.6svh, 42px);
}

.share-social-fan-active .share-social-fan__intro {
  position: relative;
  z-index: 12;
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
}

.share-social-fan-active .share-social-fan__intro > p {
  margin: 0;
  color: #526892;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: clamp(0.64rem, 0.72vw, 0.76rem);
  font-weight: 700;
  letter-spacing: 0.18em;
}

.share-social-fan-active .share-social-fan__intro > h2 {
  width: min(100%, 23ch);
  margin: 0 auto;
  color: #14213f;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(2.75rem, 4.4vw, 4.55rem);
  font-weight: 400;
  letter-spacing: -0.046em;
  line-height: 0.94;
  text-wrap: balance;
}

.share-social-fan-active .share-social-fan__intro em {
  color: #4b64a4;
  font-weight: inherit;
}

.share-social-fan-active .share-social-fan__visual {
  height: 100%;
  min-height: 0;
  margin: 0;
}

.share-social-fan-active .share-social-fan__stage {
  --share-social-fan-progress: 0;
  position: relative;
  isolation: isolate;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: clip;
}

.share-social-fan-active .share-social-fan__stage::before {
  position: absolute;
  top: 44%;
  left: 50%;
  width: min(76vw, 960px);
  height: min(24vw, 250px);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(69, 94, 147, 0.13), rgba(107, 134, 232, 0.035) 46%, transparent 72%);
  content: "";
  filter: blur(18px);
  opacity: calc(0.35 + var(--share-social-fan-progress) * 0.65);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.share-social-fan-active .share-social-fan__phone-list {
  position: absolute;
  inset: 0;
}

.share-social-fan-active .share-social-fan__phone {
  --share-social-label-counter-rotation: 0deg;
  --share-social-label-opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: auto;
  height: min(clamp(350px, 32vw, 456px), calc(100% - 50px));
  aspect-ratio: 0.489;
  opacity: 0.3;
  filter: saturate(0.68) blur(1.25px);
  transform: translate3d(calc(-50% - 12px), calc(-50% + 14px), 0) rotate(-4deg) scale(0.8);
  transform-origin: center;
  place-items: center;
  pointer-events: none;
  will-change: transform, opacity, filter;
}

.share-social-fan-active .share-social-fan__phone-media {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.share-social-fan-active .share-social-fan__phone-media > img,
.share-social-fan-active .share-social-fan__phone-media > video {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 23px;
  object-fit: contain;
  filter: drop-shadow(0 20px 26px rgba(18, 34, 66, 0.18));
}

.share-social-fan-active .share-social-fan__phone-media > video {
  background: #fff;
}

.share-social-fan-active .share-social-fan__phone-label {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  color: #455e93;
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.035em;
  line-height: 1;
  opacity: var(--share-social-label-opacity);
  text-align: center;
  transform: translateX(-50%) rotate(var(--share-social-label-counter-rotation));
  transform-origin: center;
  white-space: nowrap;
}

.share-social-fan-active .share-social-fan__mobile-labels {
  display: none;
}

.share-social-fan-active .share-social-fan__phone--tiktok .share-social-fan__phone-media {
  overflow: hidden;
  border: 5px solid #070a0e;
  border-radius: 29px;
  background: #070a0e;
  box-shadow: 0 22px 28px rgba(18, 34, 66, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.11);
}

.share-social-fan-active .share-social-fan__phone--tiktok .share-social-fan__phone-media > video {
  border-radius: 23px;
  object-fit: cover;
  filter: none;
}

.share-social-fan-active .share-social-fan__tiktok-ui {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: 23px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.62), transparent 19%), linear-gradient(0deg, rgba(0, 0, 0, 0.72), transparent 29%);
  color: #fff;
  font-family: Arial, sans-serif;
  pointer-events: none;
}

.share-social-fan-active .share-social-fan__tiktok-topline {
  position: absolute;
  top: 13px;
  left: 50%;
  display: flex;
  gap: 8px;
  font-size: 0.5rem;
  font-weight: 600;
  opacity: 0.82;
  transform: translateX(-50%);
  white-space: nowrap;
}

.share-social-fan-active .share-social-fan__tiktok-topline strong {
  font-size: 0.55rem;
}

.share-social-fan-active .share-social-fan__tiktok-actions {
  position: absolute;
  right: 8px;
  bottom: 60px;
  display: grid;
  gap: 12px;
}

.share-social-fan-active .share-social-fan__tiktok-actions i {
  display: grid;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: rgba(6, 8, 12, 0.32);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
  place-items: center;
}

.share-social-fan-active .share-social-fan__tiktok-caption {
  position: absolute;
  right: 36px;
  bottom: 15px;
  left: 10px;
  display: grid;
  gap: 3px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

.share-social-fan-active .share-social-fan__tiktok-caption strong {
  font-size: 0.56rem;
  line-height: 1.25;
}

.share-social-fan-active .share-social-fan__tiktok-caption small {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.42rem;
  line-height: 1.3;
}

.share-social-fan-active .share-social-fan__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .share-social-fan-active .share-social-fan__phone {
    height: min(clamp(300px, 43vw, 375px), calc(100% - 44px));
  }
}

@media (max-width: 639px) {
  .five-share.share-social-fan-active {
    min-height: 152svh;
  }

  .share-social-fan-active .share-social-fan__sticky {
    gap: clamp(8px, 1.5svh, 14px);
    padding: clamp(70px, 8svh, 82px) 12px clamp(16px, 2.4svh, 24px);
  }

  .share-social-fan-active .share-social-fan__intro {
    gap: 7px;
  }

  .share-social-fan-active .share-social-fan__intro > h2 {
    max-width: 12ch;
    font-size: clamp(2.25rem, 10.6vw, 3rem);
    line-height: 0.97;
  }

  .share-social-fan-active .share-social-fan__phone {
    height: min(76vw, 288px, calc(100% - 42px));
  }

  .share-social-fan-active .share-social-fan__phone-label {
    display: none;
  }

  .share-social-fan-active .share-social-fan__mobile-labels {
    position: absolute;
    z-index: 20;
    right: 10%;
    bottom: 3px;
    left: 10%;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    color: #455e93;
    font-size: 0.45rem;
    font-weight: 760;
    line-height: 1;
    opacity: clamp(0, calc((var(--share-social-fan-progress) - 0.86) * 7.1429), 1);
    text-align: center;
    white-space: nowrap;
  }

  .share-social-fan-active .share-social-fan__phone-media > img,
  .share-social-fan-active .share-social-fan__phone-media > video {
    border-radius: 18px;
  }

  .share-social-fan-active .share-social-fan__phone--tiktok .share-social-fan__phone-media {
    border-width: 4px;
    border-radius: 23px;
  }

  .share-social-fan-active .share-social-fan__phone--tiktok .share-social-fan__phone-media > video,
  .share-social-fan-active .share-social-fan__tiktok-ui {
    border-radius: 18px;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .five-share.share-social-fan-active {
    min-height: 165svh;
  }

  .share-social-fan-active .share-social-fan__sticky {
    grid-template-columns: minmax(210px, 0.42fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 62px 18px 10px;
  }

  .share-social-fan-active .share-social-fan__intro {
    justify-items: start;
    text-align: left;
  }

  .share-social-fan-active .share-social-fan__intro > h2 {
    max-width: 11ch;
    margin: 0;
    font-size: clamp(1.8rem, 4vw, 2.4rem);
  }

  .share-social-fan-active .share-social-fan__phone {
    height: min(62svh, 268px, calc(100% - 12px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .five-share.share-social-fan-active {
    min-height: 0;
    padding-block: clamp(76px, 10vw, 112px);
  }

  .share-social-fan-active .share-social-fan__sticky {
    position: relative;
    height: auto;
    min-height: 0;
    padding-block: 0;
  }

  .share-social-fan-active .share-social-fan__visual {
    height: clamp(390px, 48vw, 550px);
  }
}