/* ===============================
   Fonts
=============================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400..700&family=Noto+Sans+Arabic:wght@100..900&family=Poppins:wght@600&family=Roboto:ital,wght@0,100..900;1,100..900&family=Patrick+Hand&family=Comic+Neue:wght@400;700&display=swap');

:root {
  --color: #facc15;
}

/* ===============================
   Base Styles
=============================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
   font-family: "Poppins", sans-serif;
  }

html { scroll-behavior: smooth; }
body {
  transition: background-color 0.8s, color 0.8s;
  overflow-x: hidden;
  padding-top: 75px;
}
.custom-text{
  font-size: 28px; /* یا 30px, 32px بەپێی خواستت */
  line-height: 1.6;
}
/* ===============================
   Splash Screen (Responsive Cooking Animation)
=============================== */
#splash-screen {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #020617, #020617);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  font-family: Consolas, monospace;
}

.editor {
  width: 520px;
  background: #0f172a;
  border-radius: 14px;
  box-shadow: 0 30px 60px rgba(0,0,0,.8);
  overflow: hidden;
  animation: scaleIn .8s ease;
}

@keyframes scaleIn {
  from { transform: scale(.8); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.top-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: #020617;
}

.circle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.red { background: #ef4444; }
.yellow { background: #facc15; }
.green { background: #22c55e; }

.title {
  margin-left: auto;
  color: #94a3b8;
  font-size: 33px;
}

.code-area {
  padding: 22px;
  color: #e5e7eb;
  min-height: 160px;
  font-size: 22px;
}

.cursor {
  color: #22c55e;
  animation: blink 1s infinite;
}

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

.loading {
  height: 5px;
  background: #020617;
}

.progress {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #22c55e, #38bdf8);
  animation: load 4s forwards;
}

@keyframes load {
  to { width: 100%; }
}

/* Cooking area */
#cooking {
  position: relative;
  width: min(60vh, 80vw);
  height: min(60vh, 80vw);
  overflow: hidden;
}

/* Bubbles */
.bubble {
  position: absolute;
  border-radius: 100%;
  box-shadow: 0 0 .25vh #4d4d4d;
  opacity: 0;
}
.bubble:nth-child(1){ margin-top:2.5vh; left:58%; width:3vh; height:3vh; background:#4d4d4d; animation:bubble 2s cubic-bezier(.53,.16,.39,.96) infinite; }
.bubble:nth-child(2){ margin-top:3vh; left:52%; width:2.5vh; height:2.5vh; background:#444; animation:bubble 2s ease-in-out .35s infinite; }
.bubble:nth-child(3){ margin-top:1.8vh; left:50%; width:2vh; height:2vh; background:#333; animation:bubble 1.5s cubic-bezier(.53,.16,.39,.96) .55s infinite; }
.bubble:nth-child(4){ margin-top:2.7vh; left:56%; width:1.8vh; height:1.8vh; background:#2d2d2d; animation:bubble 1.8s cubic-bezier(.53,.16,.39,.96) .9s infinite; }
.bubble:nth-child(5){ margin-top:2.7vh; left:63%; width:1.5vh; height:1.5vh; background:#1f1f1f; animation:bubble 1.6s ease-in-out 1s infinite; }

#area { position:absolute; bottom:0; right:0; width:50%; height:50%; transform-origin:15% 60%; animation:flip 2.1s ease-in-out infinite; }
#sides{ position:absolute; width:100%; height:100%; transform-origin:15% 60%; animation:switchSide 2.1s ease-in-out infinite; }
#handle{ position:absolute; bottom:18%; right:80%; width:35%; height:20%; background:transparent; border-top:1vh solid #333; border-left:1vh solid transparent; border-radius:100%; transform:rotate(20deg) rotateX(0deg) scale(1.3,.9); }
#pan   { position:absolute; bottom:20%; right:30%; width:50%; height:8%; background:#333; border-radius:0 0 1.4em 1.4em; transform-origin:-15% 0; }
#pancake{ position:absolute; top:24%; width:100%; height:100%; transform:rotateX(85deg); animation:jump 2.1s ease-in-out infinite; }
#pastry { position:absolute; bottom:26%; right:37%; width:40%; height:45%; background:#333; box-shadow:0 0 3px 0 #333; border-radius:100%; transform-origin:-20% 0; animation:fly 2.1s ease-in-out infinite; }

/* ===============================
   Rest of page (responsive tweaks)
=============================== */
#particles-js {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}

header nav { justify-content: center; flex-wrap: wrap; }
header nav a {
  color: var(--color);
  font-weight: 700;
  padding: 8px 0;
  display: inline-block;
  position: relative;
}
header nav a::after {
  content: "";
  width: 0;
  height: 3px;
  position: absolute;
  bottom: 0; left: 0;
  transition: 0.7s cubic-bezier(0.7,0.55,0.27,1.5);
  background-color: var(--color);
}
header nav a:hover::after { width: 100%; }

#mobile-menu {
  position: fixed !important;
  top: 64px; left: 0; right: 0;
  background-color: #1f2937;
  z-index: 99998;
  display: none;
}
#mobile-menu a {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  color: var(--color);
  font-weight: 700;
}

#menu-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.5);
  z-index: 99997;
  display: none;
}

section { padding: clamp(2rem,5vw,4rem) 1rem; text-align: center; }
section h2 {
  font-size: clamp(1.8rem,4vw,2.5rem);
  font-weight: 800;
  color: var(--color);
  margin-bottom: 2rem;
}
section p {
  color: #ffffff;
  margin-bottom: 1rem;
  font-size: clamp(1rem,2.5vw,1.1rem);
}

.skill-card {
  perspective: 1000px;
  width: clamp(120px,25vw,160px);
  height: clamp(140px,30vw,180px);
  position: relative;
  margin: auto;
  cursor: pointer;
}
.skill-front, .skill-back {
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background: #111827;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  backface-visibility: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.skill-front { z-index: 2; }
.skill-back { transform: rotateY(180deg); }
.skill-card:hover .skill-front { transform: rotateY(180deg); }
.skill-card:hover .skill-back  { transform: rotateY(360deg); }

footer {
  background-color: #1f2937;
  color: #9ca3af;
  padding: 1rem;
  text-align: center;
}

.project-img { width: 100%; height: auto; object-fit: cover; border-radius: 0.5rem; transition: transform .3s ease; }
.project-img:hover { transform: scale(1.02); }

/* ===============================
   Animations
=============================== */
@keyframes pulse { 0%{opacity:.25;} 50%{opacity:1;} 100%{opacity:.25;} }
@keyframes jump { 0%{top:24%;transform:rotateX(85deg);} 25%{top:10%;transform:rotateX(0deg);} 50%{top:30%;transform:rotateX(85deg);} 75%{transform:rotateX(0deg);} 100%{transform:rotateX(85deg);} }
@keyframes flip { 0%{transform:rotate(0deg);} 5%{transform:rotate(-27deg);} 30%,50%{transform:rotate(0);} 55%{transform:rotate(27deg);} 83.3%,100%{transform:rotate(0);} }
@keyframes switchSide { 0%{transform:rotateY(0);} 50%{transform:rotateY(180deg);} 100%{transform:rotateY(0);} }
@keyframes fly { 0%{bottom:26%;transform:rotate(0);} 10%{bottom:40%;} 50%{bottom:26%;transform:rotate(-190deg);} 80%{bottom:40%;} 100%{bottom:26%;transform:rotate(0);} }
@keyframes bubble { 0%{transform:scale(.15); top:80%; opacity:0;} 50%{transform:scale(1.1); opacity:1;} 100%{transform:scale(.33); top:60%; opacity:0;} }

@media (max-width: 640px) {
  #cooking { width: 65vw; height: 65vw; }
  #splash-screen h1 { font-size: 2rem; }
}

#courses .grid {
  direction: rtl; /* Items start from the right and flow left */
}

html, body {
  height: 100%;
}

#typing { word-break: break-word; }

main {
  min-height: 86.3vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

footer {
  margin-top: auto;
  padding: 1rem;
  background-color: #1f2937;
  text-align: center;
}

section {
  scroll-margin-top: 60px; /* Same height as the header approximately */
}

/* ===============================
   Fancy Tooltips for Contact Icons
=============================== */
.icon-link {
  position: relative;
}

/* Tooltip bubble */
.icon-link::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 0.85rem;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Small arrow under the tooltip */
.icon-link::before {
  content: "";
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: rgba(0,0,0,0.85) transparent transparent transparent;
  opacity: 0;
  transition: all 0.3s ease;
}

/* Tooltip hover effect */
.icon-link:hover::after,
.icon-link:hover::before {
  opacity: 1;
  bottom: 140%;
}

/* Make course titles clearer */
#courses h3 {
  color: var(--color); /* Main course title */
  font-weight: 800;
}

#courses ul li span {
  color: #ffffff; /* Bold text inside details */
  font-weight: 700;
}

/* Make text inside the courses section fully white */
#courses p {
  color: #ffffff !important;
  font-weight: 500;
  line-height: 1.7;
  font-size: 1.05rem;
  letter-spacing: 0.3px;
}

.amir{
  color: var(--color);
}

.modal img {
  transition: transform 0.3s ease;
}

.modal img:hover {
  transform: scale(1.02);
}

.icon-link::after {
  background: #facc15;
  color: #000;
  font-weight: 600;
}

.icon-link::before {
  border-color: #facc15 transparent transparent transparent;
}