/* Crypto News 11 — طبقة الجمال (aura.css): خلفية حيّة، حدود متوهجة، عناوين متدرجة، لمسات تفاعل.
   لحذفها: أزل سطر هذا الملف وسطر aura.js من الصفحات. */

/* 1) شفق حيّ يتحرك ببطء خلف كل الصفحات */
body::before{content:"";position:fixed;inset:-25% -25% auto -25%;height:95vh;z-index:-1;pointer-events:none;
  background:
    radial-gradient(40% 50% at 18% 30%,rgba(34,211,238,.17),transparent 70%),
    radial-gradient(36% 46% at 82% 18%,rgba(139,92,246,.20),transparent 70%),
    radial-gradient(40% 40% at 55% 78%,rgba(52,211,153,.08),transparent 70%);
  animation:auraDrift 22s ease-in-out infinite alternate;will-change:transform}
@keyframes auraDrift{to{transform:translate3d(7%,9%,0) scale(1.18) rotate(7deg)}}

/* 2) حدّ متوهج يدور حول بطاقة البيتكوين، وحول البطاقات عند اللمس */
@property --aura-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes auraSpin{to{--aura-a:360deg}}
.hx-live,.sec-card,.coin{position:relative}
.hx-live::after,.sec-card::after,.coin::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;pointer-events:none;
  background:conic-gradient(from var(--aura-a),transparent 0 58%,rgba(34,211,238,.95) 76%,rgba(139,92,246,.95) 90%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:auraSpin 5s linear infinite}
.sec-card::after,.coin::after{opacity:0;transition:opacity .3s}
.sec-card:hover::after,.sec-card:active::after,.coin:hover::after,.coin:active::after{opacity:1}

/* 3) عناوين الأقسام بتدرج لوني، وخط سفلي ينمو عند الظهور */
h2.section{background:linear-gradient(90deg,#fff 0%,#a5f3fc 45%,#c4b5fd 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
h2.section::after{transform-origin:right center}
html[dir="ltr"] h2.section::after{transform-origin:left center}
h2.section.aura-pre::after{transform:scaleX(0)}
h2.section.aura-in::after{transform:scaleX(1);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}

/* 4) شريط الأسعار: تلاشٍ ناعم عند الأطراف */
.ticker{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}

/* 5) ظهور الصفحة بنعومة */
@keyframes auraPage{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
main{animation:auraPage .7s cubic-bezier(.2,.8,.2,1) both}

/* 6) موجة لمس على الأزرار */
.btn,.btn-primary,.nl-form button,.coin-tabs button{position:relative;overflow:hidden}
.aura-rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:auraRip .65s ease-out forwards;pointer-events:none}
@keyframes auraRip{to{transform:scale(1);opacity:0}}

/* 7) تبويب العملة النشط يتوهج بهدوء */
@keyframes auraPulse{50%{box-shadow:0 0 22px rgba(34,211,238,.5)}}
.coin-tabs button.active{animation:auraPulse 2.8s ease-in-out infinite}

/* 8) خطوط الأخبار وروابط البطاقات: لمعة خفيفة عند التمرير */
.cards a,.related a{background-image:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.06) 50%,transparent 60%);background-size:250% 100%;background-position:120% 0;transition:background-position .8s ease,transform .2s,border-color .2s}
.cards a:hover,.related a:hover{background-position:-20% 0}

/* 9) نقاط "مباشر" تنبض بوضوح أكبر */
.hero-badge::before,.hx-dot{box-shadow:0 0 10px #34d399}

@media(prefers-reduced-motion:reduce){body::before,.hx-live::after,.sec-card::after,.coin::after,main,.coin-tabs button.active{animation:none!important}h2.section.aura-pre::after{transform:none}}
