/* style.css — Full site stylesheet
   - Retro fonts (VT323 for EN, Cairo for AR)
   - Home background GIF, big banner under title
   - Solid dark box for readable text
   - Links as stacked buttons (normal size)
   - Stickers styles (script places them)
   - Responsive rules for phones
*/

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=VT323&family=Cairo:wght@300;400;700&display=swap');

:root{
  /* colors */
  --bg-1: #07060a;
  --panel: #0f0e13;
  --muted: #9aa7b8;
  --accent-1: #ef2d63;
  --accent-2: #5ee0d6;
  --card: rgba(255,255,255,0.02);
  --txt: #dfeffb;

  /* typography */
  --font-ar: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-retro: "VT323", monospace;

  --max-width: 1100px;
  --page-padding: 18px;
}

/* Reset-ish */
*{ box-sizing: border-box; margin: 0; padding: 0; }
html,body{ height:100%; background:var(--bg-1); color:var(--txt); font-family:var(--font-ar); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; height:auto; }

/* Home page background GIF (applies when body has class "home-bg") */
body.home-bg{
  background-image: url("/VN20251116_152823(1).gif");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Site header / nav */
.site-header{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 18px;
  position: sticky;
  top:0;
  z-index:160;
  background: linear-gradient(180deg, rgba(0,0,0,0.66), rgba(0,0,0,0.36));
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

.logo .banner-small{ height:44px; object-fit:contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.6)); }

/* Nav */
.main-nav{ display:flex; gap:10px; align-items:center; direction:rtl; }
.main-nav .nav-link{
  padding:8px 12px;
  border-radius:8px;
  font-weight:700;
  font-family:var(--font-retro);
  background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.03);
  color:var(--txt);
}
.main-nav .nav-link.active{ box-shadow: 0 6px 22px rgba(78,24,59,0.22); border-color:var(--accent-1); transform: translateY(-1px); }

/* audio button */
.audio-btn{
  padding:8px 10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.04);
  background: linear-gradient(90deg, rgba(0,0,0,0.25), rgba(0,0,0,0.12));
  color:var(--muted);
  font-family:var(--font-retro);
  cursor:pointer;
}

/* page container */
.page-wrap{
  width:100%;
  max-width:var(--max-width);
  margin:22px auto;
  padding: var(--page-padding);
  position:relative;
  z-index:20;
}

/* CRT overlay */
.crt-overlay{
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:150;
  background-image: linear-gradient(transparent 70%, rgba(0,0,0,0.15));
}
.crt-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size:100% 2px;
  mix-blend-mode:overlay;
  opacity:0.12;
}
.crt-overlay::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.0), rgba(0,0,0,0.35));
  opacity:0.9;
  mix-blend-mode:multiply;
  animation: flicker 0.12s infinite;
}
@keyframes flicker { 0%{opacity:.88} 50%{opacity:.92} 100%{opacity:.88} }

/* HERO */
.hero{
  display:flex;
  gap:18px;
  align-items:flex-start;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));
  padding:18px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.03);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  position:relative;
  z-index:25;
}

.pfp{
  width:180px;
  height:180px;
  border-radius:14px;
  overflow:hidden;
  border:3px solid rgba(255,255,255,0.03);
  background:var(--card);
  flex:0 0 180px;
}
.pfp img{ width:100%; height:100%; object-fit:cover; transform:scale(1.01); }

/* title */
.glitch-title{
  font-size:34px;
  margin-bottom:10px;
  font-weight:900;
  font-family:var(--font-retro);
  letter-spacing:1px;
  color:var(--txt);
  position:relative;
  display:inline-block;
  z-index:30;
}
.glitch-title::after{ content:attr(data-text); position:absolute; left:4px; top:2px; color:var(--accent-2); mix-blend-mode:screen; clip-path: polygon(0 0, 100% 0, 100% 60%, 0 60%); opacity:0.8; animation: glitch1 2.8s infinite linear; }
.glitch-title::before{ content:attr(data-text); position:absolute; left:-4px; top:-2px; color:var(--accent-1); mix-blend-mode:screen; clip-path: polygon(0 40%, 100% 40%, 100% 100%, 0 100%); opacity:0.9; animation: glitch2 3.2s infinite linear; }
@keyframes glitch1 { 0%{transform:translate(0,0)} 20%{transform:translate(-2px,1px)} 40%{transform:translate(2px,-1px)} 60%{transform:translate(-1px,0)} 100%{transform:translate(0,0)} }
@keyframes glitch2 { 0%{transform:translate(0,0)} 30%{transform:translate(2px,-1px)} 70%{transform:translate(-2px,1px)} 100%{transform:translate(0,0)} }

/* big banner under title */
.hero-banner{ margin-top:12px; }
.main-banner-img{
  width:100%;
  max-width:980px;
  border-radius:10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  border:1px solid rgba(255,255,255,0.04);
}

/* personal text (solid black bg for readability) */
.personal-text-bg{
  background: rgba(0,0,0,0.92);
  padding:14px;
  border-radius:8px;
  margin-top:14px;
  color: #f5f7fb;
  line-height:1.45;
  font-size:15px;
  font-family:var(--font-ar);
}

/* PANELS */
.panel{
  margin-top:18px;
  padding:14px;
  border-radius:10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.03);
  z-index:20;
  position:relative;
}

/* EMPTY GALLERY */
.empty-gallery{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  height:60vh;
  text-align:center;
}
.center-big{ font-size:30px; letter-spacing:1px; font-weight:900; font-family:var(--font-retro); color:var(--accent-2); }
.center-small{ color:var(--muted); margin-top:8px; }

/* ABOUT */
.about-panel .big-arabic-title{ font-size:34px; font-family:var(--font-ar); font-weight:800; margin-bottom:12px; }

/* LINKS (stacked normal-size buttons) */
.links-vertical{ display:flex; flex-direction:column; gap:14px; margin-top:12px; }
.link-card{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 18px;
  border-radius:12px;
  font-family:var(--font-retro);
  font-size:18px;
  font-weight:900;
  color:white;
  text-align:center;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
  box-shadow: 0 8px 26px rgba(0,0,0,0.45);
  border: 1px solid rgba(0,0,0,0.18);
  min-height:56px;
}

/* color per service */
.link-card.youtube{ background:#FF0000; }
.link-card.xsite{ background: linear-gradient(45deg,#0f1722,#1b9bf0); }
.link-card.instagram{ background: radial-gradient(circle at 30% 20%, #fdf497 0, #fdf497 10%, #fd5949 30%, #d6249f 60%, #285AEB 90%); color:white; }
.link-card.artstation{ background:#111827; color:#9ad3ff; }
.link-card.email{ background:#2b2b2b; color:#dfe6ff; }
.link-card.coffee{ background:#ffb86b; color:#2b1600; }
.link-card.neocities{ background: #0ebeff; color:#001827; }
.link-card.discord{ background: linear-gradient(135deg,#5865F2,#4752c4); }
.link-card.reddit{ background: linear-gradient(45deg,#ff4500,#ff8a50); }

/* footer */
.site-footer{ margin-top:28px; padding:18px; text-align:center; font-size:13px; color:var(--muted); border-top:1px solid rgba(255,255,255,0.02); z-index:20; position:relative; }

/* STICKERS base style
   NOTE: script will append <img class="sticker"> to body.
*/
.sticker{
  position:absolute;
  pointer-events:none;
  z-index:6;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.6));
  transition: transform .28s ease, opacity .2s ease;
  will-change: transform, opacity;
  border-radius:8px;
  object-fit:contain;
}

/* slightly smaller on small screens */
@media (max-width:520px){
  .sticker{ filter: drop-shadow(0 6px 12px rgba(0,0,0,0.55)); }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce){
  .sticker{ transition:none !important; animation:none !important; }
  .glitch-title::after, .glitch-title::before{ animation:none; transform:none; }
}

/* Responsive layout tweaks */
@media (max-width:900px){
  .hero{ flex-direction:column; align-items:center; text-align:center; }
  .pfp{ width:150px; height:150px; border-radius:12px; }
  .glitch-title{ font-size:28px; }
  .main-banner-img{ width:96%; }
  .link-card{ font-size:16px; min-height:52px; padding:12px; }
  .personal-text-bg{ font-size:14px; padding:12px; }
}

@media (max-width:520px){
  .nav-link{ padding:6px 8px; font-size:13px; }
  .sticker{ opacity:0.95; }
  .center-big{ font-size:22px; }
  .page-wrap{ padding:12px; }
}

/* utility */
.hidden{ display:none !important; }
.center{ text-align:center; }

/* small accessibility helpers */
a:focus{ outline: 3px solid rgba(94,224,214,0.18); outline-offset:3px; border-radius:6px; }