/* EHKAM shared design layer — ambient, motion, skeletons */
::selection{background:rgba(56,189,248,.35);color:#fff}
html{scrollbar-color:#22314D #0B1220}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:#0B1220}
*::-webkit-scrollbar-thumb{background:#22314D;border-radius:99px;border:2px solid #0B1220}
*::-webkit-scrollbar-thumb:hover{background:#38BDF8}

/* ambient aurora + cyber grid */
body{position:relative}
.ambient{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.ambient::before{content:"";position:absolute;width:900px;height:900px;inset-inline-start:-260px;top:-320px;border-radius:50%;
 background:radial-gradient(closest-side,rgba(56,189,248,.14),transparent 70%);filter:blur(10px);animation:drift1 26s ease-in-out infinite alternate}
.ambient::after{content:"";position:absolute;width:760px;height:760px;inset-inline-end:-240px;bottom:-300px;border-radius:50%;
 background:radial-gradient(closest-side,rgba(14,125,184,.12),transparent 70%);filter:blur(10px);animation:drift2 32s ease-in-out infinite alternate}
.gridtex{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
 background-image:linear-gradient(rgba(147,163,188,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(147,163,188,.045) 1px,transparent 1px);
 background-size:44px 44px;
 -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 30%,transparent 75%);
 mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 30%,transparent 75%)}
@keyframes drift1{to{transform:translate(70px,50px) scale(1.08)}}
@keyframes drift2{to{transform:translate(-60px,-45px) scale(1.06)}}

/* reveal on scroll */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
[data-reveal].in{opacity:1;transform:none}

/* skeleton shimmer */
.skel{position:relative;overflow:hidden;background:#101A2E;border:1px solid rgba(147,163,188,.12);border-radius:14px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
 background:linear-gradient(90deg,transparent,rgba(147,163,188,.10),transparent);animation:shimmer 1.4s infinite}
[dir=rtl] .skel::after{transform:translateX(100%);animation-name:shimmer-rtl}
@keyframes shimmer{to{transform:translateX(100%)}}
@keyframes shimmer-rtl{to{transform:translateX(-100%)}}

/* gradient display text */
.grad-text{background:linear-gradient(120deg,#7DD8FF,#38BDF8 45%,#0E7DB8);-webkit-background-clip:text;background-clip:text;color:transparent}

/* pressable */
.pressable{transition:transform .12s ease}
.pressable:active{transform:scale(.96)}

@media (prefers-reduced-motion:reduce){
 .ambient::before,.ambient::after{animation:none}
 [data-reveal]{opacity:1;transform:none;transition:none}
 .skel::after{animation:none}
 *{scroll-behavior:auto!important}
}