/* =============================================
   utilities.css — Animations, Arabic RTL, responsive
   ============================================= */

/* === animations.css === */

@property --aa{syntax:'<angle>';initial-value:0deg;inherits:false}

@keyframes ar{to{--aa:360deg}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}

/* scroll reveal */
.sec{opacity:0;transform:translateY(28px);transition:opacity .6s,transform .6s;will-change:opacity,transform}
.sec.rev{opacity:1;transform:translateY(0)}

/* value props animation states */
.val-c{transform:scale(.95);opacity:0;transition:transform .4s,opacity .4s}
.val-c.anim{transform:scale(1);opacity:1}

/* testimonials animation states */
.test-c{opacity:0;transform:translateY(20px)}
.test-c.anim{opacity:1;transform:translateY(0)}

/* heatmap squares */
.hm-sq{opacity:0;transition:opacity .3s}
.hm-sq.vis{opacity:1}

/* skill dots */
.sk-dot{transition:opacity .4s}

/* language fill bars */
.lang-fill{transform-origin:left;transform:scaleX(0);transition:transform 1.2s ease}

/* 1. Cursor trail effect (desktop only) */
.cursor-trail { position: fixed; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); filter: blur(10px); opacity: 0.4; pointer-events: none; z-index: 9998; transition: transform 0.15s ease-out; will-change: transform; }
@media (hover: hover) { .cursor-trail { display: block; } }
@media (hover: none) { .cursor-trail { display: none; } }

/* 2. Typing effect styles */
.typing-cursor { display: inline-block; width: 2px; height: 1em; background: var(--accent); margin-left: 2px; vertical-align: text-bottom; animation: typeBlink 0.7s step-end infinite; }
@keyframes typeBlink { 0%,100%{opacity:1}50%{opacity:0} }
.typing-cursor.done { animation: typeBlink 0.7s step-end 3; animation-fill-mode: forwards; opacity: 0; }

/* 3. Magnetic button styles (desktop only) */
@media (hover: hover) {
  .btn-magnetic { transition: transform 0.2s ease-out; }
}

/* 4. Card tilt effect */
.tilt-card { transform-style: preserve-3d; perspective: 800px; }
.tilt-card .tilt-shine { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent 60%); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.tilt-card:hover .tilt-shine { opacity: 1; }
@media (hover: none) { .tilt-card { transform: none !important; } .tilt-shine { display: none; } }

/* 5. Section dividers */
.sec-divider { height: 2px; margin: 0 auto; max-width: 200px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.3; }
.sec-divider-dots { text-align: center; margin: 24px 0; opacity: 0.25; letter-spacing: 12px; color: var(--accent); font-size: 8px; }
.sec-divider-wave { height: 20px; margin: 24px 0; background: none; }
.sec-divider-wave svg { display: block; margin: 0 auto; opacity: 0.15; }

/* 6. Enhanced scroll progress */
.scroll-progress { background: linear-gradient(90deg, #38bdf8, #818cf8, #c084fc); }

/* 7. Animated background orbs + floating particles */
@keyframes orbFloat1 { 0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-40px)} }
@keyframes orbFloat2 { 0%,100%{transform:translate(0,0)}50%{transform:translate(-25px,35px)} }
@keyframes orbFloat3 { 0%,100%{transform:translate(0,0)}50%{transform:translate(20px,30px)} }
.orb-1 { animation: orbFloat1 45s ease-in-out infinite; }
.orb-2 { animation: orbFloat2 55s ease-in-out infinite; }
.orb-3 { animation: orbFloat3 35s ease-in-out infinite; }

.bg-particle { position: fixed; border-radius: 50%; background: var(--accent); pointer-events: none; z-index: 0; will-change: transform; }
@keyframes particleDrift { 0%{transform:translate(0,0)}25%{transform:translate(30px,-20px)}50%{transform:translate(-15px,-40px)}75%{transform:translate(-30px,10px)}100%{transform:translate(0,0)} }

/* 8. Skill category reveal */
.sk-cat { opacity: 0; transform: translateX(-30px); transition: opacity 0.5s ease, transform 0.5s ease; }
.sk-cat:nth-child(even) { transform: translateX(30px); }
.sk-cat.revealed { opacity: 1; transform: translateX(0); }

/* 9. Counter bounce + particle burst */
@keyframes counterBounce { 0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)} }
.counter-done { animation: counterBounce 0.4s ease; }
.counter-particle { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: 0; pointer-events: none; }
@keyframes particleBurst { 0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--px),var(--py)) scale(0)} }

/* 10. Glass morphism enhancement */
.navbar { backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); }

.sum-w::after { content:''; position:absolute; inset:0; border-radius:16px; background: linear-gradient(135deg, rgba(56,189,248,0.03), rgba(129,140,248,0.03), rgba(192,132,252,0.03)); pointer-events: none; z-index: 0; }
.sum-w { position: relative; overflow: hidden; }

/* 11. Better light mode */
html[data-theme="light"] body { background: #f8fafc; }
html[data-theme="light"] body::after { content:''; position:fixed; inset:0; background: radial-gradient(ellipse at 20% 50%, rgba(37,99,235,0.03), transparent 70%), radial-gradient(ellipse at 80% 20%, rgba(124,58,237,0.03), transparent 70%); pointer-events:none; z-index:0; }
html[data-theme="light"] .stats { background: linear-gradient(135deg, rgba(37,99,235,0.06), rgba(124,58,237,0.06)); }
html[data-theme="light"] .test-c { background: #fffbf5; border-color: #f3e8d8; }
html[data-theme="light"] .svc-c, html[data-theme="light"] .sk-cat, html[data-theme="light"] .tool-c, html[data-theme="light"] .tl-it, html[data-theme="light"] .edu-c, html[data-theme="light"] .val-c, html[data-theme="light"] .plat-c { box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04); }
html[data-theme="light"] .tc { background: rgba(37,99,235,0.06); color: #1e40af; border-color: rgba(37,99,235,0.12); }

/* 12. Typography improvements */
.sec-t::after { content:''; display:inline-block; width: 24px; height: 2px; background: var(--grad); margin-left: 8px; vertical-align: middle; border-radius: 1px; }
.test-txt { font-weight: 300; line-height: 1.8; }

/* 13. Avatar enhancement */
@keyframes avatarBreathe { 0%,100%{transform:scale(1)}50%{transform:scale(1.02)} }
.avatar { animation: avatarBreathe 4s ease-in-out infinite; }
.avatar:hover { transform: translateY(-5px) scale(1.02); }

/* 14. Loading screen styles */
.loading-screen { position: fixed; inset: 0; z-index: 10000; background: var(--bg); display: flex; align-items: center; justify-content: center; transition: opacity 0.4s ease; }
.loading-screen.fade-out { opacity: 0; pointer-events: none; }
.loading-avatar { width: 80px; height: 80px; border-radius: 20px; background: var(--grad); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; color: #fff; animation: loadPulse 1.2s ease-in-out infinite; }
@keyframes loadPulse { 0%,100%{transform:scale(1);opacity:0.8}50%{transform:scale(1.05);opacity:1} }

/* 15. Accessibility */
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.skip-link { position: fixed; top: 0; left: 16px; z-index: 10001; padding: 12px 24px; background: var(--grad); color: #fff; border-radius: 0 0 8px 8px; font-size: 14px; font-weight: 600; text-decoration: none; transform: translateY(-100%); transition: transform 0.3s; }
.skip-link:focus { transform: translateY(0); }

/* 16. prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .orb { animation: none; }
  .bg-particle { display: none; }
  .cursor-trail { display: none; }
  .avatar { animation: none; }
  .sum-w::after { animation: none; }
  .scroll-progress { transition: none; }
}

/* 17. Blog post title hover gradient */
.svc-c .svc-tt { transition: opacity 0.3s; }
.svc-c:hover .svc-tt { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* === arabic.css === */
html[dir="rtl"] body{font-family:var(--fn-ar);line-height:2;letter-spacing:.01em}
html[dir="rtl"] .nav-a{font-family:var(--fn-ar)}
html[dir="rtl"] .top-ctrl{right:auto;left:20px}
html[dir="rtl"] .pr-btn{left:auto;right:20px}
html[dir="rtl"] .s-top{right:auto;left:28px}
html[dir="rtl"] .nm{font-family:var(--fn-ar);font-size:38px;font-weight:700}
html[dir="rtl"] .ttl{letter-spacing:0;text-transform:none;font-size:17px}
html[dir="rtl"] .sec-t{font-family:var(--fn-ar);font-size:26px;font-weight:700}
html[dir="rtl"] .sk-h{text-transform:none;letter-spacing:.01em}
html[dir="rtl"] .tl{padding-left:0;padding-right:20px}
html[dir="rtl"] .tl::before{left:auto;right:0}
html[dir="rtl"] .tl-it::before{left:auto;right:-24px}
html[dir="rtl"] .tl-d li{padding-left:0;padding-right:16px}
html[dir="rtl"] .tl-d li::before{left:auto;right:0;content:'\25C2'}
html[dir="rtl"] .badge{margin-left:0;margin-right:8px}
html[dir="rtl"] .test-c{border-left:none;border-right:3px solid var(--accent)}
html[dir="rtl"] .cta-t{font-family:var(--fn-ar);font-weight:700;font-size:30px}
html[dir="rtl"] .proj-blue,.proj-purple,.proj-green,.proj-amber{border-left:none}
html[dir="rtl"] .proj-blue{border-right:3px solid #3b82f6}
html[dir="rtl"] .proj-purple{border-right:3px solid #8b5cf6}
html[dir="rtl"] .proj-green{border-right:3px solid #34d399}
html[dir="rtl"] .proj-amber{border-right:3px solid #f59e0b}

/* === responsive.css === */
@media(max-width:1199px){
  .val-g{grid-template-columns:repeat(2,1fr)}
  .tool-g{grid-template-columns:repeat(3,1fr)}
  .test-g{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(3,1fr)}
  .sk-g{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:767px){
  .nm{font-size:28px}
  html[dir="rtl"] .nm{font-size:30px}
  .hdr{padding:30px 0}
  .avatar{width:80px;height:80px;font-size:30px;border-radius:18px}
  .avatar::before,.avatar::after{border-radius:21px;inset:-3px}
  .ttl{font-size:14px}
  .sec-t{font-size:18px}
  html[dir="rtl"] .sec-t{font-size:22px}
  .c-row{gap:10px}
  .svc-g,.sk-g,.plat-g,.oss-hl{grid-template-columns:1fr}
  .val-g{grid-template-columns:1fr}
  .tool-g{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .st-n{font-size:28px}
  .test-g{grid-template-columns:1fr}
  .top-ctrl{top:54px;right:12px}
  .pr-btn{top:54px;left:12px}
  html[dir="rtl"] .top-ctrl{left:12px;right:auto}
  html[dir="rtl"] .pr-btn{left:auto;right:12px}
  .s-top{bottom:16px;right:16px}
  html[dir="rtl"] .s-top{right:auto;left:16px}
  .cta{padding:32px 20px}
  .cta-t{font-size:22px}
  html[dir="rtl"] .cta-t{font-size:24px}
}

@media(max-width:479px){
  .wrap{padding:24px 16px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .st-n{font-size:24px}
  .tool-g{grid-template-columns:repeat(2,1fr)}
  .l-btn{padding:6px 12px;font-size:11px}
  .t-btn{width:34px;height:34px}
  .pr-btn span{display:none}
  .sec{margin-top:32px}
  .ftr-soc svg{width:18px;height:18px}
}