/* Keeps the original visual system while supporting the current content. */
.brand-copy b[dir="rtl"] {
  font-family: var(--font-fa);
  letter-spacing: 0;
  white-space: nowrap;
}

.hero-title {
  font-size: clamp(3.1rem, 4.8vw, 5.2rem);
  line-height: 1.04;
}

/* Stable 3D cards: normal document flow prevents overlap at every width. */
.profile-board {
  min-height: auto;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  gap: 18px;
  padding: 14px 6px;
}

.profile-card {
  --profile-base-rx: 0deg;
  --profile-base-ry: 0deg;
  --profile-z: 0px;
  --profile-tilt-rx: 0deg;
  --profile-tilt-ry: 0deg;
  --profile-lift: 0px;
  position: relative;
  inset: auto !important;
  width: 100%;
  min-height: 160px;
  transform:
    perspective(1200px)
    rotateX(calc(var(--profile-base-rx) + var(--profile-tilt-rx)))
    rotateY(calc(var(--profile-base-ry) + var(--profile-tilt-ry)))
    translateZ(var(--profile-z))
    translateY(var(--profile-lift));
}

.profile-card:nth-child(1) {
  --profile-base-rx: 1.5deg;
  --profile-base-ry: -4deg;
  --profile-z: 12px;
}

.profile-card:nth-child(2) {
  --profile-base-rx: -1deg;
  --profile-base-ry: 3deg;
  --profile-z: 18px;
}

.profile-card:nth-child(3) {
  --profile-base-rx: 1deg;
  --profile-base-ry: -2.5deg;
  --profile-z: 10px;
}

/* Minimal circular hero */
.minimal-orb {
  --hero-rx: -7deg;
  --hero-ry: -12deg;
  --hero-light-x: 35%;
  --hero-light-y: 22%;
  position: absolute;
  z-index: 3;
  width: min(31vw, 400px);
  aspect-ratio: 1;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  background:
    radial-gradient(circle at var(--hero-light-x) var(--hero-light-y), rgba(255,255,255,.35), transparent 12%),
    radial-gradient(circle at 38% 28%, rgba(115,233,255,.12), transparent 28%),
    linear-gradient(145deg, rgba(31,42,65,.88), rgba(5,9,20,.96) 68%);
  box-shadow:
    inset 18px 12px 38px rgba(255,255,255,.06),
    inset -30px -28px 55px rgba(0,0,0,.62),
    0 35px 80px rgba(0,0,0,.38),
    0 0 55px color-mix(in srgb, var(--cyan) 9%, transparent);
  backdrop-filter: blur(18px) saturate(120%);
  transform: translate(-50%, -50%) rotateX(var(--hero-rx)) rotateY(var(--hero-ry));
  transform-style: preserve-3d;
  transition: transform .22s ease-out;
  will-change: transform;
}

.minimal-orb::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.minimal-orb::after {
  content: "";
  position: absolute;
  width: 38%;
  height: 8%;
  left: 18%;
  top: 11%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.2), transparent);
  filter: blur(5px);
  transform: rotate(-22deg) translateZ(8px);
}

.orb-halo {
  position: absolute;
  inset: -28px;
  border: 1px solid color-mix(in srgb, var(--cyan) 18%, transparent);
  border-radius: 50%;
  transform: translateZ(-40px);
  opacity: .65;
}

.orb-halo::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  top: 49%;
  right: -3px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 16px var(--cyan);
}

.orb-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateZ(34px);
  transform-style: preserve-3d;
}

.orb-kicker,
.orb-copy > small,
.orb-status {
  position: relative;
  z-index: 2;
  direction: ltr;
  font-family: var(--font-en);
}

.orb-kicker {
  color: rgba(255,255,255,.62);
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .25em;
}

.orb-copy > strong {
  position: relative;
  z-index: 2;
  margin: 12px 0 14px;
  font: 800 clamp(6.5rem, 9vw, 8rem)/.8 var(--font-en);
  letter-spacing: -.1em;
  color: rgba(255,255,255,.96);
  text-shadow: 12px 18px 34px rgba(0,0,0,.52);
  transform: translateZ(24px);
}

.orb-copy > small {
  color: rgba(255,255,255,.56);
  font-size: .45rem;
  font-weight: 500;
  letter-spacing: .16em;
}

.orb-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  color: rgba(255,255,255,.45);
  font-size: .4rem;
  letter-spacing: .12em;
}

.orb-status i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 12px var(--mint);
}

.minimal-orbit {
  position: absolute;
  width: min(44vw, 560px);
  aspect-ratio: 1;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 50%;
  transform: translate(-50%,-50%) rotateX(72deg) rotateZ(-9deg);
}

/* Original cards with pointer-driven depth. */
.project-list {
  perspective: 1400px;
}

.project-card {
  --card-rx: 0deg;
  --card-ry: 0deg;
  --pointer-x: 50%;
  --pointer-y: 50%;
  transform: perspective(1400px) rotateX(var(--card-rx)) rotateY(var(--card-ry));
  will-change: transform;
  transition: transform .16s ease-out, border-color .4s, box-shadow .4s;
}

.project-card:hover {
  transform: perspective(1400px) rotateX(var(--card-rx)) rotateY(var(--card-ry)) translateY(-5px);
}

.project-game::before {
  background: radial-gradient(circle at 78% 38%, rgba(75,166,255,.42), transparent 44%), linear-gradient(120deg, #020a18, #06254b 64%, #0a3d7a);
}

.art-game {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.word-game-stage {
  position: relative;
  width: 82%;
  height: 78%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: radial-gradient(circle at 50% 0, rgba(75,166,255,.48), transparent 48%), rgba(2,10,24,.64);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 18px 24px 45px rgba(0,0,0,.3);
  transform: rotateX(7deg) rotateY(-8deg) rotateZ(1deg);
  transform-style: preserve-3d;
  transition: transform .45s var(--ease-out), box-shadow .45s;
}

.word-sign {
  min-width: 62%;
  padding: 8px 18px 10px;
  text-align: center;
  border: 4px solid white;
  border-radius: 8px 24px 24px 8px;
  background: linear-gradient(165deg, #1a72ce, #084e9b);
  box-shadow: 0 12px 24px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.35);
  transform: translateZ(28px) rotateZ(-1deg);
}

.word-sign small { display: block; font-size: .48rem; color: rgba(255,255,255,.66); }
.word-sign strong { display: block; font-size: 1.38rem; line-height: 1.25; }
.word-tiles { display: flex; gap: 8px; direction: rtl; transform: translateZ(42px); }

.word-tiles i {
  min-width: 45px;
  padding: 9px 11px;
  border-radius: 10px;
  color: #08305a;
  background: linear-gradient(#fff, #c9ddf3);
  box-shadow: 0 4px 0 #779ec6, 0 10px 18px rgba(0,0,0,.38), inset 0 1px 0 white;
  font-style: normal;
  font-size: .68rem;
  text-align: center;
  transition: transform .35s var(--ease-out);
}

.word-tiles i:nth-child(1) { transform: rotate(5deg) translateY(3px); }
.word-tiles i:nth-child(2) { transform: rotate(-4deg) translateY(-4px); }
.word-tiles i:nth-child(3) { transform: rotate(3deg) translateY(2px); }
.word-score { color: rgba(255,255,255,.55); font: 500 .45rem var(--font-en); letter-spacing: .12em; }
.project-game:hover .word-game-stage { transform: rotateX(2deg) rotateY(-2deg) rotateZ(0) translateZ(25px) scale(1.03); }
.project-game:hover .word-tiles i { transform: translateY(0) rotate(0); }

@media (max-width: 780px) {
  .hero-title {
    font-size: clamp(2.45rem, 9.5vw, 3.15rem);
  }

  .minimal-orb { width: min(68vw, 300px); }
  .minimal-orbit { width: min(86vw, 380px); }
  .orb-copy > strong { font-size: clamp(5.5rem, 24vw, 7rem); }
  .orb-copy > small { font-size: .39rem; letter-spacing: .11em; }

  .project-card,
  .project-card:hover {
    transform: none;
  }

  .profile-board {
    min-height: auto;
    padding: 0;
  }

  .profile-card {
    min-height: 190px;
  }

  .word-game-stage,
  .project-game:hover .word-game-stage {
    width: 90%;
    transform: rotateZ(1deg) scale(.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  .minimal-orb { transition: none; }
}