/* ============================================================
   Rostng Dev — portfolio | duck yellow theme 🦆
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

:root{
  --yellow:#FFD41F;
  --yellow-deep:#F0C000;
  --orange:#E8722D;
  --brick:#8E2F1C;
  --green:#2FA05A;
  --ink:#171310;
  --paper:#FFFBEF;
  --code-bg:#1B1611;
  --code-bar:#26201A;
  --bord:3px solid var(--ink);
  --shadow:8px 8px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
}

body{
  font-family:'Cairo','Segoe UI',Tahoma,sans-serif;
  background-color:var(--yellow);
  background-image:radial-gradient(rgba(23,19,16,.05) 1.6px, transparent 1.6px);
  background-size:26px 26px;
  color:var(--ink);
  overflow-x:hidden;
  min-height:100vh;
}

::selection{background:var(--ink);color:var(--yellow)}
img{max-width:100%;display:block}
a{color:inherit}

/* ---------- الماوس الدايري ---------- */
.has-cursor,.has-cursor *{cursor:none!important}
.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;pointer-events:none;border-radius:50%;
  opacity:0;transition:opacity .25s;z-index:10000;
}
.cursor-dot{
  width:12px;height:12px;margin:-6px 0 0 -6px;background:var(--ink);
  transition:opacity .25s,width .15s,height .15s,margin .15s;
}
.cursor-dot::after{ /* لمعة عين البطة */
  content:"";position:absolute;top:2px;left:2.5px;width:4px;height:4px;
  border-radius:50%;background:#fff;
}
.cursor-dot.down{width:18px;height:18px;margin:-9px 0 0 -9px}
.cursor-ring{
  width:38px;height:38px;margin:-19px 0 0 -19px;z-index:9999;
  border:2.5px solid rgba(23,19,16,.6);
  transition:opacity .25s,width .18s,height .18s,margin .18s,border-color .18s,background .18s;
}
.cursor-ring.hot{
  width:58px;height:58px;margin:-29px 0 0 -29px;
  border-color:var(--orange);background:rgba(232,114,45,.14);
}
@media (hover:none){.cursor-dot,.cursor-ring{display:none}}

/* ---------- HERO ---------- */
.hero{
  min-height:100vh;min-height:100svh;position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:64px 24px 96px;
}
.hero-inner{
  display:grid;grid-template-columns:1.15fr .85fr;gap:48px;
  align-items:center;max-width:1100px;width:100%;position:relative;z-index:2;
}
.badge{
  display:inline-block;background:#fff;border:var(--bord);border-radius:999px;
  padding:6px 20px;font-weight:800;box-shadow:var(--shadow-sm);font-size:1rem;
}
.badge.dark{background:var(--ink);color:var(--yellow)}
.hero-text .badge{margin-bottom:22px}

.title{
  font-family:'Bungee Shade','Cairo',cursive;font-weight:400;
  font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.02;letter-spacing:.01em;
}
.title-bar{
  width:170px;height:14px;background:var(--orange);
  border:var(--bord);border-radius:999px;margin:26px 0 18px;box-shadow:var(--shadow-sm);
}
.tagline{font-size:clamp(1.05rem,2.2vw,1.35rem);font-weight:700;max-width:46ch}
.scroll-btn{
  display:inline-flex;align-items:center;gap:10px;margin-top:30px;
  background:var(--ink);color:var(--yellow);text-decoration:none;font-weight:800;
  border:var(--bord);border-radius:999px;padding:12px 28px;box-shadow:var(--shadow-sm);
  transition:transform .15s,box-shadow .15s;
}
.scroll-btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(23,19,16,.9)}
.scroll-btn span{font-size:1.2em;transform:translateY(2px)}

.hero-pic{position:relative;display:flex;justify-content:center}
.pic-frame{
  width:min(360px,78vw);aspect-ratio:1;background:#fff;
  border:var(--bord);border-radius:34px;padding:12px;box-shadow:var(--shadow);
  transform:rotate(-4deg);transition:transform .25s;
}
.pic-frame:hover{transform:rotate(0deg) scale(1.02)}
.pic-frame img{
  width:100%;height:100%;object-fit:cover;border-radius:24px;
  border:2px solid rgba(23,19,16,.15);
}

.deco{position:absolute;z-index:1;pointer-events:none}
.deco.circle{
  width:200px;height:200px;border:3px solid rgba(23,19,16,.18);border-radius:50%;
  top:8%;inset-inline-start:4%;animation:float 7s ease-in-out infinite;
}
.deco.dotgrid{
  bottom:14%;inset-inline-end:5%;width:140px;height:100px;opacity:.5;
  background-image:radial-gradient(var(--orange) 3px,transparent 3.5px);
  background-size:22px 22px;animation:float 9s ease-in-out infinite reverse;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

.marquee{
  position:absolute;bottom:26px;inset-inline:-40px;z-index:3;
  background:var(--ink);color:var(--yellow);transform:rotate(-1.2deg);
  overflow:hidden;padding:12px 0;border-top:var(--bord);border-bottom:var(--bord);
}
.marquee .track{
  display:inline-flex;white-space:nowrap;width:max-content;
  animation:slide 22s linear infinite;
  font-weight:800;letter-spacing:.14em;font-size:.95rem;
}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- SECTIONS ---------- */
.section{max-width:1150px;margin:0 auto;padding:88px 24px 20px}
.sec-head{margin-bottom:40px}
.sec-head .badge{margin-bottom:18px}
.sec-head h2{font-size:clamp(2.1rem,5.5vw,3.4rem);font-weight:900;line-height:1.2}
.sec-head h2 em{font-style:normal;color:var(--brick)}
.sec-head p{margin-top:16px;font-weight:600;font-size:1.08rem;max-width:62ch;opacity:.9}
.sec-head p b{color:var(--brick)}

/* ---------- CODE CARDS ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}

.code-card{
  background:var(--code-bg);border:var(--bord);border-radius:18px;
  box-shadow:var(--shadow);overflow:hidden;direction:ltr;
}
.code-bar{
  display:flex;align-items:center;gap:8px;background:var(--code-bar);
  border-bottom:var(--bord);padding:10px 14px;
}
.dot{width:12px;height:12px;border-radius:50%;border:2px solid rgba(0,0,0,.35);flex:none}
.dot.r{background:#ff5f56}.dot.y{background:#ffbd2e}.dot.g{background:#27c93f}
.code-name{
  font-family:'JetBrains Mono',Consolas,monospace;font-size:.8rem;color:#cbbfae;
  margin-inline-start:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tag{
  margin-inline-start:auto;font-size:.75rem;font-weight:800;border-radius:999px;
  padding:3px 12px;border:2px solid transparent;white-space:nowrap;
}
.tag.red{background:#3a1d17;color:#ff9b8a;border-color:#ff9b8a}
.tag.green{background:#17301f;color:#7be3a3;border-color:#7be3a3}

.code-card pre{
  margin:0;padding:18px;max-height:480px;overflow:auto;
  direction:ltr;text-align:left;tab-size:4;
  font-family:'JetBrains Mono','Cascadia Mono',Consolas,monospace;
  font-size:13px;line-height:1.65;color:#ece5d8;
}
.code-card pre::-webkit-scrollbar{width:10px;height:10px}
.code-card pre::-webkit-scrollbar-thumb{background:#4a4036;border-radius:8px}
.code-card pre::-webkit-scrollbar-track{background:transparent}

.obf-code{color:#ff8f7a;opacity:.92;word-break:break-all;white-space:pre-wrap}

/* ألوان أكواد Lua */
.tk-k{color:#FFD41F;font-weight:600}
.tk-s{color:#FFA45C}
.tk-c{color:#8a8071;font-style:italic}
.tk-n{color:#7FD8C4}
.tk-g{color:#8FB8FF}

.chips{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.chip{
  background:#fff;border:var(--bord);border-radius:999px;padding:8px 18px;
  font-weight:800;box-shadow:var(--shadow-sm);font-size:.95rem;
}
.chip b{color:var(--brick)}

/* ---------- SCREENSHOTS ---------- */
.shots{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.shot{
  background:#fff;border:var(--bord);border-radius:18px;box-shadow:var(--shadow);
  overflow:hidden;margin:0;transition:transform .2s;
}
.shot:hover{transform:translateY(-6px)}
.cap{padding:10px;text-align:center;font-weight:900;font-size:1.05rem;color:#fff;direction:rtl}
.cap.before{background:var(--brick)}
.cap.after{background:var(--green)}
.shot img{border-top:var(--bord);width:100%;background:#0d0d0d}

/* ---------- فاصل ---------- */
.divider{display:flex;align-items:center;gap:18px;max-width:900px;margin:80px auto 10px;padding:0 24px}
.divider::before,.divider::after{content:"";flex:1;border-top:4px solid var(--ink);border-radius:4px}
.divider span{
  width:64px;height:64px;background:#fff;border:var(--bord);border-radius:50%;
  display:grid;place-items:center;font-size:1.7rem;box-shadow:var(--shadow-sm);
  transform:rotate(-6deg);flex:none;
}

/* ---------- OTHER ---------- */
.soon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.soon-card{
  border:3px dashed rgba(23,19,16,.55);border-radius:18px;min-height:170px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  font-weight:800;transition:.2s;text-align:center;padding:20px;
}
.soon-card .plus{font-size:2rem;color:var(--brick)}
.soon-card:hover{background:#fff;border-style:solid;box-shadow:var(--shadow-sm);transform:translateY(-4px)}

/* ---------- FOOTER ---------- */
footer{
  margin-top:90px;background:var(--ink);color:var(--yellow);
  text-align:center;padding:34px 20px;font-weight:700;border-top:var(--bord);
}
footer .big{font-family:'Bungee Shade','Cairo',cursive;font-size:1.5rem;margin-bottom:6px}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;text-align:center;gap:44px}
  .hero-text{display:flex;flex-direction:column;align-items:center}
  .grid-2,.shots{grid-template-columns:1fr}
  .soon-grid{grid-template-columns:1fr}
  .title{font-size:clamp(2.2rem,10vw,3.6rem)}
  .tagline{max-width:100%}
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .marquee .track,.deco.circle,.deco.dotgrid{animation:none}
  .pic-frame,.shot,.scroll-btn,.soon-card{transition:none}
}