/* ====== K_Y.css — Profile Pages ====== */

/* Container & Layout */
.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  position: relative;
  z-index: 1;
}

.main-centered {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* Profile Header */
.profile-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.profile-img-clean {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.4s ease,
    border-color 0.3s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  will-change: transform;
}

.profile-img-clean:hover {
  transform: scale(1.08) translateY(-4px);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.profile-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  text-align: center;
}

/* Social Section */
.social-section {
  width: 100%;
}

.social-grid-clean {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  width: 100%;
}

.social-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
  will-change: transform;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.social-link img {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(0.75);
  transition: filter 0.2s ease;
  pointer-events: none;
}

.social-link:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.social-link:hover img {
  filter: brightness(0) invert(1);
}

.social-link:active {
  transform: scale(0.95) !important;
}

/* Platform-specific accent colors on hover */
.social-link[data-platform="telegram"]:hover  { border-color: rgba(36, 161, 222, 0.5);  box-shadow: 0 8px 24px rgba(36, 161, 222, 0.15); }
.social-link[data-platform="email"]:hover     { border-color: rgba(109, 74, 255, 0.5);  box-shadow: 0 8px 24px rgba(109, 74, 255, 0.15); }
.social-link[data-platform="x"]:hover         { border-color: rgba(255, 255, 255, 0.4); box-shadow: 0 8px 24px rgba(255, 255, 255, 0.1); }
.social-link[data-platform="youtube"]:hover   { border-color: rgba(255, 0, 0, 0.5);     box-shadow: 0 8px 24px rgba(255, 0, 0, 0.15); }
.social-link[data-platform="tiktok"]:hover    { border-color: rgba(0, 242, 234, 0.5);   box-shadow: 0 8px 24px rgba(0, 242, 234, 0.15); }
.social-link[data-platform="instagram"]:hover { border-color: rgba(225, 48, 108, 0.5);  box-shadow: 0 8px 24px rgba(225, 48, 108, 0.15); }
.social-link[data-platform="discord"]:hover   { border-color: rgba(88, 101, 242, 0.5);  box-shadow: 0 8px 24px rgba(88, 101, 242, 0.15); }
.social-link[data-platform="github"]:hover    { border-color: rgba(255, 255, 255, 0.4); box-shadow: 0 8px 24px rgba(255, 255, 255, 0.1); }
.social-link[data-platform="binance"]:hover   { border-color: rgba(243, 186, 47, 0.5);  box-shadow: 0 8px 24px rgba(243, 186, 47, 0.15); }
.social-link[data-platform="instagram"]:hover { border-color: rgba(225, 48, 108, 0.5);  box-shadow: 0 8px 24px rgba(225, 48, 108, 0.15); }
.social-link[data-platform="threads"]:hover   { border-color: rgba(255, 255, 255, 0.4); box-shadow: 0 8px 24px rgba(255, 255, 255, 0.1); }
.social-link[data-platform="whatsapp"]:hover  { border-color: rgba(37, 211, 102, 0.5);  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.15); }
.social-link[data-platform="facebook"]:hover  { border-color: rgba(24, 119, 242, 0.5);  box-shadow: 0 8px 24px rgba(24, 119, 242, 0.15); }
.social-link[data-platform="signal"]:hover    { border-color: rgba(61, 175, 90, 0.5);   box-shadow: 0 8px 24px rgba(61, 175, 90, 0.15); }

/* Payment Section */
.payment-section {
  width: 100%;
}

.payment-frame {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.payment-frame iframe {
  width: 100%;
  height: 300px;
  border: none;
  display: block;
}

/* Background Mesh */
.bg-mesh {
  position: fixed;
  inset: -50px;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 10% 10%, rgba(99, 102, 241, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 90% 90%, rgba(139, 92, 246, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(236, 72, 153, 0.05) 0%, transparent 70%);
  pointer-events: none;
  transition: transform 0.6s ease;
  will-change: transform;
}

/* Entrance Animations */
[data-entrance] {
  opacity: 0;
  animation: entranceFadeUp 0.6s cubic-bezier(0.34, 1.36, 0.64, 1) forwards;
}

[data-entrance="top"]          { animation-name: entranceTop;       animation-delay: 0.05s; }
[data-entrance="top-left"]     { animation-name: entranceTopLeft;   animation-delay: 0.10s; }
[data-entrance="top-right"]    { animation-name: entranceTopRight;  animation-delay: 0.15s; }
[data-entrance="left"]         { animation-name: entranceLeft;      animation-delay: 0.20s; }
[data-entrance="center"]       { animation-name: entranceFadeUp;    animation-delay: 0.25s; }
[data-entrance="right"]        { animation-name: entranceRight;     animation-delay: 0.20s; }
[data-entrance="bottom-left"]  { animation-name: entranceBottomLeft; animation-delay: 0.30s; }
[data-entrance="bottom"]       { animation-name: entranceFadeUp;    animation-delay: 0.35s; }
[data-entrance="bottom-right"] { animation-name: entranceBottomRight; animation-delay: 0.30s; }

@keyframes entranceFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes entranceTop {
  from { opacity: 0; transform: translateY(-30px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes entranceTopLeft {
  from { opacity: 0; transform: translate(-20px, -20px) scale(0.9); }
  to   { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes entranceTopRight {
  from { opacity: 0; transform: translate(20px, -20px) scale(0.9); }
  to   { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes entranceLeft {
  from { opacity: 0; transform: translateX(-25px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes entranceRight {
  from { opacity: 0; transform: translateX(25px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes entranceBottomLeft {
  from { opacity: 0; transform: translate(-20px, 20px) scale(0.9); }
  to   { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes entranceBottomRight {
  from { opacity: 0; transform: translate(20px, 20px) scale(0.9); }
  to   { opacity: 1; transform: translate(0, 0) scale(1); }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  [data-entrance] {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .social-grid-clean {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
  .profile-img-clean {
    width: 85px;
    height: 85px;
  }
  .profile-name {
    font-size: 1.2rem;
  }
  .container {
    padding: 1.5rem 1rem;
  }
}

@media (max-width: 360px) {
  .social-grid-clean {
    grid-template-columns: repeat(3, 1fr);
  }
}