/* ====== Root & Resets ====== */
:root {
  /* CHANGED: سایز نهایی کارت در انیمیشن‌ها را واکنش‌گرا کردیم */
  --card-w: clamp(280px, 92vw, 440px);
  --card-h: clamp(360px, 120vw, 440px);

  --bg-color: #bcdee7;
  --overlay: #313440;
  --text: #000;
}

html { height: 100%; }
* { box-sizing: border-box; }

/* ====== Body / Background ====== */
body {
  /* CHANGED: از fixed به حالت عادی با min-height تبدیل شد تا اسکرول و مقیاس موبایل خراب نشود */
  overflow: auto;            /* CHANGED */
  background: var(--bg-color) url("../img/bg.jpg") no-repeat center center fixed;
  background-size: cover;
  padding: 0;
  margin: 0;
  width: 100%;
  min-height: 100dvh;        /* CHANGED: بهتر از height:100% برای موبایل */
  font: normal 16px/1.618 "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif; /* CHANGED: پایه 16px خواناتر */
  -webkit-font-smoothing: antialiased;
}

body:before {
  content: "";
  height: 0;
  padding: 0;
  border: 130em solid var(--overlay);
  position: fixed;           /* CHANGED: absolute → fixed تا با اسکرول جابه‌جا نشود */
  left: 50%;
  top: 100%;
  z-index: 0;                /* CHANGED: لایه پایین‌تر از کارت */
  display: block;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -webkit-animation: puff 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 0.2s 2.3s linear forwards;
  animation: puff 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 0.2s 2.3s linear forwards;
}

/* ====== Typography ====== */
h1, h2 { font-weight: 500; margin: 0 0 5px 0; }
h1 { font-size: clamp(20px, 6vw, 24px); }    /* CHANGED */
h2 { font-size: clamp(14px, 4.5vw, 16px); }  /* CHANGED */
p { margin: 0; }

/* ====== Profile Card (animated container) ====== */
.profile-card {
  background: #FFB300;
  width: 56px;
  height: 56px;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1; /* زیر-هدری که بعداً میاد بالا */
  overflow: hidden;
  opacity: 0;
  margin-top: 70px;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
  -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
  -webkit-animation:
    init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards,
    moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards,
    moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
    materia 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;
  animation:
    init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards,
    moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards,
    moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
    materia 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;
}

/* ====== Card Sections ====== */
.profile-card header {
  width: min(179px, 100%);   /* CHANGED: جلوگیری از لب‌زدن در موبایل */
  height: auto;              /* CHANGED */
  padding: 40px 20px 30px 20px;
  display: inline-block;
  float: left;
  border-right: 2px dashed #EEEEEE;
  background: #FFFFFF;
  color: #000000;
  margin-top: 50px;
  opacity: 0;
  text-align: center;
  -webkit-animation: moveIn 1s 3.1s ease forwards;
  animation: moveIn 1s 3.1s ease forwards;
}

.profile-card header h1 { color: #FF5722; }

.profile-card header a {
  display: inline-block;
  text-align: center;
  position: relative;
  margin: 25px 30px;
}

.profile-card header a:after {
  position: absolute;
  content: "";
  bottom: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border: 4px solid #FFFFFF;
  transform: scale(0);
  -webkit-transform: scale(0);
  background: linear-gradient(#2196F3 0%, #2196F3 50%, #FFC107 50%, #FFC107 100%);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-animation: scaleIn 0.3s 3.5s ease forwards;
  animation: scaleIn 0.3s 3.5s ease forwards;
}

.profile-card header a > img {
  width: clamp(96px, 45vw, 120px); /* CHANGED */
  max-width: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  transition: box-shadow 0.3s ease;
  -webkit-transition: -webkit-box-shadow 0.3s ease;
  box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.06);
  -webkit-box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.06);
}

.profile-card header a:hover > img {
  box-shadow: 0px 0px 0px 12px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 0px 12px rgba(0, 0, 0, 0.1);
}

.profile-card .profile-bio {
  width: min(175px, 100%);   /* CHANGED */
  height: auto;              /* CHANGED */
  display: inline-block;
  float: right;
  padding: 20px;             /* CHANGED: کمی کمتر برای موبایل */
  background: #FFFFFF;
  color: #333333;
  margin-top: 50px;
  text-align: center;
  opacity: 0;
  -webkit-animation: moveIn 1s 3.1s ease forwards;
  animation: moveIn 1s 3.1s ease forwards;
}

.profile-social-links {
  width: 100%;               /* CHANGED */
  display: inline-block;
  float: right;
  margin: 0;
  padding: 15px 20px;
  background: #FFFFFF;
  margin-top: 50px;
  text-align: center;
  opacity: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-animation: moveIn 1s 3.1s ease forwards;
  animation: moveIn 1s 3.1s ease forwards;
}

.profile-social-links li {
  list-style: none;
  margin: 0;                 /* CHANGED */
  padding: 0;
  float: left;
  width: 25%;
  text-align: center;
}

.profile-social-links li a {
  display: inline-flex;      /* CHANGED: برای مرکز کردن آیکون */
  align-items: center;
  justify-content: center;
  color: red;
  width: clamp(40px, 12vw, 48px); /* CHANGED: لمسی مناسب */
  height: clamp(40px, 12vw, 48px);
  padding: 6px;
  position: relative;
  overflow: hidden !important;
  border-radius: 50%;
  -webkit-border-radius: 50%;
}

.profile-social-links li a i {
  position: relative;
  z-index: 1;
  font-size: clamp(18px, 5vw, 22px); /* CHANGED */
}

.profile-social-links li a img,
.profile-social-links li a svg {
  width: 24px;
}

/* ====== Keyframes (با ابعاد فلویید) ====== */
@-webkit-keyframes init {
  0% { width: 0; height: 0; }
  100% { width: 56px; height: 56px; margin-top: 0; opacity: 1; }
}
@keyframes init {
  0% { width: 0; height: 0; }
  100% { width: 56px; height: 56px; margin-top: 0; opacity: 1; }
}

@-webkit-keyframes puff {
  0% { top: 100%; height: 0; padding: 0; }
  100% { top: 50%; height: 100%; padding: 0 100%; }
}
@keyframes puff {
  0% { top: 100%; height: 0; padding: 0; }
  100% { top: 50%; height: 100%; padding: 0 100%; }
}

@-webkit-keyframes borderRadius {
  0% { -webkit-border-radius: 50%; }
  100% { -webkit-border-radius: 0; }
}
@keyframes borderRadius {
  0% { border-radius: 50%; }
  100% { border-radius: 0; }
}

@-webkit-keyframes moveDown {
  0% { top: 50%; }
  50% { top: 40%; }
  100% { top: 100%; }
}
@keyframes moveDown {
  0% { top: 50%; }
  50% { top: 40%; }
  100% { top: 100%; }
}

@-webkit-keyframes moveUp {
  0% { background: #FFB300; top: 100%; }
  50% { top: 40%; }
  100% { top: 50%; background: #E0E0E0; }
}
@keyframes moveUp {
  0% { background: #FFB300; top: 100%; }
  50% { top: 40%; }
  100% { top: 50%; background: #E0E0E0; }
}

/* CHANGED: اندازه نهایی کارت را قابل‌تطبیق کردیم */
@-webkit-keyframes materia {
  0%   { background: #E0E0E0; }
  50%  { -webkit-border-radius: 4px; }
  100% {
    width: var(--card-w);
    height: var(--card-h);
    background: #FFFFFF;
    -webkit-border-radius: 4px;
  }
}
@keyframes materia {
  0%   { background: #E0E0E0; }
  50%  { border-radius: 4px; }
  100% {
    width: var(--card-w);
    height: var(--card-h);
    background: #FFFFFF;
    border-radius: 4px;
  }
}

@-webkit-keyframes moveIn {
  0% { margin-top: 50px; opacity: 0; }
  100% { opacity: 1; margin-top: -20px; }
}
@keyframes moveIn {
  0% { margin-top: 50px; opacity: 0; }
  100% { opacity: 1; margin-top: -20px; }
}

@-webkit-keyframes scaleIn {
  0% { -webkit-transform: scale(0); }
  100% { -webkit-transform: scale(1); }
}
@keyframes scaleIn {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

@-webkit-keyframes ripple {
  0% { transform: scale3d(0, 0, 0); }
  50%,100% { -webkit-transform: scale3d(1, 1, 1); }
  100% { opacity: 0; }
}
@keyframes ripple {
  0% { transform: scale3d(0, 0, 0); }
  50%,100% { transform: scale3d(1, 1, 1); }
  100% { opacity: 0; }
}

/* ====== Aspect & Height Tweaks ====== */
@media screen and (min-aspect-ratio: 4/3) {
  body { background-size: cover; }
  body:before { width: 0; }
  @-webkit-keyframes puff {
    0% { top: 100%; width: 0; padding-bottom: 0; }
    100% { top: 50%; width: 100%; padding-bottom: 100%; }
  }
  @keyframes puff {
    0% { top: 100%; width: 0; padding-bottom: 0; }
    100% { top: 50%; width: 100%; padding-bottom: 100%; }
  }
}

/* وقتی ارتفاع دستگاه کم است، فرم عمودی‌تر می‌شود */
@media screen and (min-height: 480px) {
  .profile-card header {
    width: auto;
    height: auto;
    padding: 30px 20px;
    display: block;
    float: none;
    border-right: none;
  }
  .profile-card .profile-bio {
    width: auto;
    height: auto;
    padding: 15px 20px 30px 20px;
    display: block;
    float: none;
  }
  .profile-social-links {
    width: 100%;
    display: block;
    float: none;
  }

  /* CHANGED: در ارتفاع‌های بیشتر، کارت عمودی‌تر می‌شود */
  :root {
    --card-w: clamp(280px, 92vw, 360px);
    --card-h: clamp(400px, 130vw, 520px);
  }
}

/* کاهش موشن برای کاربرانی که ترجیح می‌دهند */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}