/* ===== Fanora — Decorations (additive, safe) ===== */

html{scroll-behavior:smooth}
::selection{background:rgba(139,92,246,.45);color:#fff}

/* ambient glow background */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
 background:
  radial-gradient(900px 500px at 10% -10%, rgba(139,92,246,.13), transparent 60%),
  radial-gradient(800px 500px at 100% 0%, rgba(236,72,153,.10), transparent 55%),
  radial-gradient(700px 600px at 50% 120%, rgba(56,189,248,.08), transparent 60%);}

/* top scroll progress bar */
.progress-bar{position:fixed;top:0;left:0;height:3px;z-index:99999;width:0;
 background:linear-gradient(90deg,#8b5cf6,#ec4899,#38bdf8);
 box-shadow:0 0 12px rgba(139,92,246,.7);border-radius:0 2px 2px 0;transition:width .08s linear}

/* animated gradient logo text */
.brand-text,.logo{background:linear-gradient(90deg,#c9b6fd,#f0abfc,#93c5fd,#c9b6fd);
 background-size:300% 100%;-webkit-background-clip:text;background-clip:text;
 -webkit-text-fill-color:transparent;animation:decor-shine 6s linear infinite}
@keyframes decor-shine{to{background-position:300% 0}}

/* section heading underline */
.sec-head h2{position:relative;padding-bottom:8px}
.sec-head h2::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:46px;
 border-radius:3px;background:linear-gradient(90deg,#8b5cf6,#ec4899)}

/* card hover glow */
.card:hover .thumb,.video-card:hover .thumb-wrapper,.video-card:hover .video-card__media{
 box-shadow:0 12px 34px rgba(139,92,246,.38)}

/* chip hover gradient */
.chip:hover{background:linear-gradient(135deg,#8b5cf6,#ec4899)!important;
 color:#fff!important;border-color:transparent!important}
.chip.active{box-shadow:0 4px 14px rgba(139,92,246,.45)}

/* card title hover accent */
.card:hover .card-title{color:#c4b5fd!important}

/* back to top button */
.to-top{position:fixed;right:18px;bottom:18px;z-index:9999;width:46px;height:46px;
 border-radius:50%;border:1px solid rgba(255,255,255,.16);
 background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;font-size:20px;
 cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;
 box-shadow:0 6px 22px rgba(139,92,246,.5)}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{transform:translateY(-3px)}