:root {
  --bg: #0d0c0c;
  --bg-soft: #151312;
  --text: #ece4da;
  --muted: #8d8279;
  --crimson: #9a2b2f;
  --burnt: #c4683a;
  --gold: #c9a45c;
  --line: rgba(255, 255, 255, 0.07);
  --font-head: "Orbitron", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

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

html, body {
  height: 100%;
  overflow: hidden;
}

/* نور بالا سمت راست: عدد اول (0.34) شدت مرکز، دو عدد 115% و 105% اندازه‌ی عرض و طوله */
body {
  background:
    radial-gradient(ellipse 100% 92% at 90% 4%,
      rgba(154, 43, 47, 0.27) 0%,
      rgba(154, 43, 47, 0.10) 50%,
      transparent 83%),
    radial-gradient(ellipse at 10% 100%, rgba(196, 104, 58, 0.06), transparent 50%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.7vh, 15px);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

ul { list-style: none; }
a { color: inherit; text-decoration: none; }

/* ---------- Stars ---------- */
#stars {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ---------- Page frame ---------- */
.page {
  position: relative;
  z-index: 1;
  height: 100dvh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: clamp(14px, 4.5vh, 48px) clamp(18px, 6vw, 110px);
  gap: clamp(8px, 2vh, 24px);
}

/* ---------- Brand (logo + moon in the background) ---------- */
.brand {
  position: relative;
  --moon: clamp(150px, 6.5vh, 64px);
  margin-bottom: clamp(6px, 1.6vh, 16px);
}

/* ماه پشت لوگو، بالاتر و چپ‌تر. شفافیت با opacity تنظیم می‌شه */
.moon {
  position: absolute;
  width: var(--moon);
  height: auto;
  top: calc(var(--moon) * -0.5);
  left: calc(var(--moon) * -0.4);
  transform: rotate(30deg);
  opacity: 0.78;
  filter: drop-shadow(0 0 6px rgba(235, 120, 50, 0.4));
  pointer-events: none;
}

.logo {
  position: relative;
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--crimson);
  text-shadow: 0 0 14px rgba(154, 43, 47, 0.35);
  font-size: clamp(12px, 2vh, 17px);
}

.footer {
  color: var(--muted);
  font-size: clamp(9px, 1.4vh, 12px);
  letter-spacing: 0.06em;
  text-align: left;
}

/* ---------- Layout ---------- */
.layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  column-gap: clamp(40px, 8vw, 150px);
  align-items: center;
}

.content {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 3.4vh, 38px);
  min-height: 0;
}

/* ---------- Intro ---------- */
h1 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(22px, 5.6vh, 52px);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

h1 .name {
  display: block;
  background: linear-gradient(90deg, var(--burnt), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.subtitle {
  margin-top: clamp(6px, 1.4vh, 14px);
  color: var(--muted);
  font-size: clamp(12px, 2vh, 18px);
}

.cursor {
  color: var(--burnt);
  animation: blink 1.2s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

/* ---------- Labels ---------- */
.label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(10px, 1.55vh, 13px);
  letter-spacing: 0.2em;
  color: var(--gold);
  opacity: 0.85;
  margin-bottom: clamp(6px, 1.5vh, 14px);
}

/* ---------- Skills ---------- */
.skills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.8vh, 18px) clamp(24px, 3.5vw, 56px);
}

.skills .row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: clamp(10px, 1.6vh, 13.5px);
  margin-bottom: 5px;
}

.skills .row span:last-child { color: var(--muted); }

.track {
  height: 3px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}

.fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--crimson), var(--burnt));
  box-shadow: 0 0 8px rgba(196, 104, 58, 0.35);
  transition: width 1.3s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.ready .fill { width: var(--v); }

/* ---------- Projects + Links (stacked) ---------- */
.bottom {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2.4vh, 24px);
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px clamp(14px, 2vw, 26px);
}

.link {
  position: relative;
  color: var(--text);
  font-size: clamp(11px, 1.8vh, 15px);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--burnt);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.link:hover,
.link:focus-visible {
  color: var(--burnt);
  text-shadow: 0 0 10px rgba(196, 104, 58, 0.35);
  outline: none;
}

.link:hover::after,
.link:focus-visible::after { transform: scaleX(1); }

/* ---------- Photo ---------- */
.photo-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 2.6vh, 26px);
  min-height: 0;
}

.photo-stage {
  position: relative;
  width: fit-content;
  animation: float 7s ease-in-out infinite;
}

.photo {
  position: relative;
  width: min(24vw, 38vh);
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(154, 43, 47, 0.75);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-soft);
  box-shadow: 0 0 28px rgba(154, 43, 47, 0.18);
  transition: border-color 0.9s ease, box-shadow 0.9s ease;
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: blur(0) brightness(1) saturate(1);
  transform: scale(1);
  transition: filter 1.1s cubic-bezier(0.22, 0.8, 0.3, 1),
              transform 1.4s cubic-bezier(0.22, 0.8, 0.3, 1);
}

/* یه نوار نور گرم که موقع hover از چپ به راست روی عکس رد می‌شه */
.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 35%,
    rgba(255, 190, 120, 0.22) 50%,
    transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
}

.photo-stage:hover .photo {
  border-color: rgba(196, 104, 58, 0.9);
  box-shadow: 0 0 40px rgba(196, 104, 58, 0.28);
}

/* عدد 5px همون شدت بلوره، هر وقت خواستی عوضش کن */
.photo-stage:hover .photo img {
  filter: blur(10px) brightness(0.85) saturate(1.15);
  transform: scale(1.08);
}

.photo-stage:hover .photo::after {
  transform: translateX(120%);
  transition: transform 1.2s ease 0.1s;
}

.photo .placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.15em;
}

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

/* ---------- Pixel cat ---------- */
/* ناحیه‌ی بالای فریم؛ هرچی پایین‌تر از لبه‌ی فریم باشه بریده می‌شه،
   پس گربه واقعا از "پشت" فریم بالا میاد */
.cat-clip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 1px);
  height: 45%;
  overflow: hidden;
  pointer-events: none;
}

.cat {
  position: absolute;
  left: 62%;
  bottom: 0;
  width: 20%;
  transform: translateY(105%);
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
  pointer-events: none;
  /* موقع رفتن پایین */
  transition: transform 0.45s cubic-bezier(0.55, 0, 0.8, 0.4);
}

.cat svg {
  display: block;
  width: 100%;
  height: auto;
  shape-rendering: crispEdges;
  overflow: visible;
}

/* حالت عادی: نشسته. حالت alert: ایستاده + علامت سوال */
.cat .pose-stand,
.cat .mark { display: none; }

.cat.alert .pose-sit { display: none; }
.cat.alert .pose-stand,
.cat.alert .mark { display: inline; }

/* هر دو حالت از پایین (پاها) مقیاس می‌گیرن تا پاها ثابت بمونن */
.cat .pose-sit,
.cat .pose-stand,
.cat .mark {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

/* دم گربه‌ی نشسته آروم تکون می‌خوره */
.cat .tail {
  transform-box: fill-box;
  transform-origin: 0% 100%;
  animation: tail-wag 2.6s ease-in-out infinite;
}

@keyframes tail-wag {
  0%, 100% { transform: rotate(-5deg); }
  50%      { transform: rotate(7deg); }
}

/* دم سیخ‌شده یه ذره می‌لرزه */
.cat .tail-up {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: tail-quiver 0.16s ease-in-out infinite alternate;
}

@keyframes tail-quiver {
  from { transform: rotate(-3deg); }
  to   { transform: rotate(3deg); }
}

/* ۱) آماده‌شدن برای ایستادن: گربه‌ی نشسته کمی خم می‌شه */
.cat.crouch .pose-sit {
  animation: crouch 0.16s ease-out both;
}

@keyframes crouch {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0.8); }
}

/* ۲) ایستادن: از حالت خم‌شده می‌پره بالا و کمی کش میاد، بعد جا میفته */
.cat.alert .pose-stand {
  animation: stand-up 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}

@keyframes stand-up {
  0%   { transform: scaleY(0.7); }
  55%  { transform: scaleY(1.1); }
  100% { transform: scaleY(1); }
}

/* علامت سوال با یه پاپ ظاهر می‌شه */
.cat.alert .mark {
  animation: mark-pop 0.5s cubic-bezier(0.3, 1.7, 0.5, 1) both;
}

@keyframes mark-pop {
  0%   { transform: translateY(3px) scale(0); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ۳) نشستن: گربه‌ی ایستاده فرو می‌ره و علامت سوال محو می‌شه */
.cat.alert.down .pose-stand {
  animation: sit-down 0.4s ease-in both;
}

@keyframes sit-down {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0.62); }
}

.cat.alert.down .mark {
  animation: mark-out 0.25s ease-in both;
}

@keyframes mark-out {
  from { transform: translateY(0) scale(1); opacity: 1; }
  to   { transform: translateY(2px) scale(0); opacity: 0; }
}

/* ۴) جا افتادن: گربه‌ی نشسته با یه فنر کوچیک به حالت اصلی برمی‌گرده */
.cat.settle .pose-sit {
  animation: sit-settle 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}

@keyframes sit-settle {
  0%   { transform: scaleY(0.8); }
  50%  { transform: scaleY(1.06); }
  100% { transform: scaleY(1); }
}

.photo-stage:hover .cat {
  transform: translateY(0);
  pointer-events: auto;
  /* موقع بالا اومدن (با یه جهش کوچیک) */
  transition: transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: cat-glow 3.2s ease-in-out 0.8s infinite;
}

@keyframes cat-glow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.4)); }
  50%      { filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.7)); }
}

/* ---------- Cursor buddy ---------- */
.buddy {
  position: fixed;
  left: 0;
  top: 0;
  width: 18px;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 100%;
  transition: opacity 0.35s ease, filter 0.3s ease;
  filter: drop-shadow(0 0 5px rgba(240, 200, 120, 0.55));
  will-change: transform;
}

.buddy.show { opacity: 1; }

.buddy svg {
  display: block;
  width: 100%;
  height: auto;
  shape-rendering: crispEdges;
  overflow: visible;
}

.buddy .body { transition: fill 0.3s ease; }

.buddy .eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: eye-blink 4.5s infinite;
}

@keyframes eye-blink {
  0%, 93%, 100% { transform: scaleY(1); }
  96%           { transform: scaleY(0.1); }
}

.buddy .mouth {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* وقتی ماوس روی لینک‌هاست: رنگ گرم‌تر و نارنجی، دهن بازتر، پرش کوچیک */
.buddy.excited {
  filter: drop-shadow(0 0 7px rgba(255, 130, 70, 0.85));
}

.buddy.excited .body { fill: #ffb27a; }
.buddy.excited .mouth { transform: scaleX(2); opacity: 1; }

.buddy.excited svg {
  animation: buddy-hop 0.45s ease-in-out infinite;
}

@keyframes buddy-hop {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* ---------- More button ---------- */
.more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.7em 1.5em;
  font-family: var(--font-mono);
  font-size: clamp(10px, 1.6vh, 13px);
  letter-spacing: 0.14em;
  color: var(--text);
  border: 1px solid rgba(154, 43, 47, 0.75);
  border-radius: 4px;
  background: rgba(154, 43, 47, 0.06);
  transition: color 0.3s ease, border-color 0.3s ease,
              box-shadow 0.3s ease, background 0.3s ease;
}

.more-btn .arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.more-btn:hover,
.more-btn:focus-visible {
  color: var(--burnt);
  border-color: var(--burnt);
  background: rgba(196, 104, 58, 0.08);
  box-shadow: 0 0 16px rgba(196, 104, 58, 0.2);
  outline: none;
}

.more-btn:hover .arrow,
.more-btn:focus-visible .arrow { transform: translateX(4px); }

/* ---------- Desktop: photo centered on the true vertical middle ---------- */
@media (min-width: 861px) {
  .page { grid-template-rows: minmax(0, 1fr); }

  /* layout و footer توی یه سلول می‌شینن، پس layout کل ارتفاع رو می‌گیره
     و عکس دقیقا وسط صفحه قرار می‌گیره */
  .layout,
  .footer { grid-area: 1 / 1; }

  .footer { align-self: end; }

  .content { padding-bottom: clamp(16px, 3.4vh, 32px); }
}

/* ---------- Tablet / Mobile ---------- */
@media (max-width: 860px) {
  .page {
    padding: clamp(12px, 2.5vh, 24px) 20px;
    gap: clamp(6px, 1.2vh, 12px);
  }

  .layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: clamp(8px, 2vh, 20px);
    align-items: start;
  }

  .photo-wrap {
    grid-row: 1;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 18px;
  }

  .content {
    grid-row: 2;
    gap: clamp(10px, 2.4vh, 24px);
    justify-content: space-between;
    height: 100%;
  }

  .photo {
    width: auto;
    height: clamp(80px, 17dvh, 170px);
  }

  .cat { width: 22%; left: 58%; }

  .brand {
    --moon: 48px;
    margin-bottom: 4px;
  }

  .moon { top: calc(var(--moon) * -0.3); }

  h1 { font-size: clamp(20px, 3.8vh, 32px); }
  .subtitle { font-size: clamp(11px, 1.8vh, 15px); }

  .skills {
    grid-template-columns: 1fr;
    gap: clamp(5px, 1.1vh, 10px);
  }

  .skills .row {
    font-size: clamp(10px, 1.6vh, 13px);
    margin-bottom: 3px;
  }

  .bottom { gap: clamp(8px, 1.6vh, 16px); }

  .footer { text-align: center; }
}

/* Very short screens (small phones, landscape) */
@media (max-height: 600px) and (max-width: 860px) {
  .photo { height: 11dvh; }
  .label { margin-bottom: 4px; }
}

@media (max-height: 520px) and (max-width: 860px) {
  .photo-wrap { display: none; }
  .layout { grid-template-rows: minmax(0, 1fr); }
  .content { grid-row: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .photo-stage, .cursor, .buddy .eye, .buddy.excited svg,
  .cat .tail, .cat .tail-up,
  .cat.crouch .pose-sit, .cat.settle .pose-sit,
  .cat.alert .pose-stand, .cat.alert .mark,
  .cat.alert.down .pose-stand, .cat.alert.down .mark { animation: none; }
  .fill, .photo img { transition: none; }
  .cat,
  .photo-stage:hover .cat { transition: none; animation: none; }
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.link-icon {
  width: 15px;
  height: 15px;
  fill: currentColor;
  flex-shrink: 0;
  opacity: 0.8;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.link:hover .link-icon,
.link:focus-visible .link-icon {
  opacity: 1;
  transform: translateY(-1px);
}

#snow-footer {
  position: relative;
  cursor: default;
}

#snow-footer::after {
  content: "She used to love snow..";
  position: absolute;
  left: 3%;
  bottom: calc(100% + 5px);
  transform: translate(-50%, 4px);

  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  white-space: nowrap;

  color: var(--burnt);

  opacity: 0;
  pointer-events: none;

  transition: opacity 5.3s ease, transform 1.3s ease;
}

#snow-footer:hover::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.more-question {
  margin: -5px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--burnt);

  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;

  transition: opacity 0.3s ease, transform 0.3s ease;
}

.more-question.show {
  opacity: 1;
  transform: translateY(0);
}


/* --------------- secret 505 */
.secret-505 {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  font-family: var(--font-mono);
  font-size: clamp(32px, 7vw, 100px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-align: center;

  color: rgba(196, 88, 58, 0.48);

  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.secret-505.show {
  visibility: visible;
  opacity: 1;
}

.secret-505.fade-out {
  opacity: 0;
  transition: opacity 1.4s ease;
}

.secret-505 .secret-line {
  min-height: 1.15em;
}

.secret-505 .secret-middle {
  min-height: 1.15em;
  margin: 0.45em 0;
}

.secret-505 .secret-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(7px);
  animation: secretWordIn 0.35s ease forwards;
}

.secret-505 .normal-word {
  margin-right: 0.28em;
}

.secret-505 .word-part {
  display: inline-block;
}

@keyframes secretWordIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes secretWordIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* moon */

.moon {
  pointer-events: auto;
  cursor: pointer;
}

.moon-secret {
  position: fixed;
  left: 8%;
  top: 19%;
  transform: translate(-50%, -50%) translateY(6px);

  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--burnt);

  opacity: 0;
  pointer-events: none;

  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 1000;
}

.moon-secret.show {
  opacity: 0.8;
  transform: translate(-50%, -50%) translateY(0);
}


/* ------------- photo secret */

.photo-secret {
  position: fixed;
  left: 75%;
  top: 18%;
  transform: translate(-50%, -50%) translateY(6px);

  font-family: var(--font-mono);
  font-size: clamp(16px, 2vw, 24px);
  letter-spacing: 0.08em;
  color: var(--burnt);

  opacity: 0;
  pointer-events: none;
  z-index: 1000;

  transition: opacity 0.35s ease, transform 0.35s ease;
}

.photo-secret.show {
  opacity: 0.85;
  transform: translate(-50%, -50%) translateY(0);
}