/* =========================================================
   NIKOOSEN — BLOG LIST
   Hero + aligned professional article grid.
   ========================================================= */

.bl{
  position:relative;background:var(--bg);color:var(--text);
  --acc:#4F7CFF;--acc-soft:rgba(79,124,255,.12);--acc-line:rgba(79,124,255,.35);
}
.bl .en{font-family:ui-monospace,'SF Mono',Menlo,monospace;letter-spacing:.12em}
.bl .acc-blue  {--acc:#4F7CFF;--acc-soft:rgba(79,124,255,.13);--acc-line:rgba(79,124,255,.38)}
.bl .acc-cyan  {--acc:#55D6FF;--acc-soft:rgba(85,214,255,.12);--acc-line:rgba(85,214,255,.38)}
.bl .acc-violet{--acc:#8B7CFF;--acc-soft:rgba(139,124,255,.15);--acc-line:rgba(139,124,255,.42)}
.bl .acc-pink  {--acc:#FF8AB7;--acc-soft:rgba(255,138,183,.12);--acc-line:rgba(255,138,183,.38)}
.bl .acc-mint  {--acc:#4AFFD4;--acc-soft:rgba(74,255,212,.10);--acc-line:rgba(74,255,212,.34)}
.bl .reveal{opacity:0;transform:translateY(30px)}

/* ---------- hero ---------- */
.bl-hero{position:relative;padding:156px 0 60px;overflow:hidden}
.bl-hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bl-orb{position:absolute;border-radius:50%;opacity:.55;will-change:transform,opacity;animation:blDrift 18s ease-in-out infinite alternate}
/* the gradient and its blur live on the child so scrolling re-composites one texture instead of re-blurring every frame */
.bl-orb::after{content:'';position:absolute;inset:0;border-radius:inherit;filter:blur(76px)}
.bl-orb--a{width:520px;height:520px;top:-180px;inset-inline-end:-120px}
.bl-orb--a::after{background:radial-gradient(circle,rgba(79,124,255,.4),transparent 65%)}
.bl-orb--b{width:420px;height:420px;bottom:-150px;inset-inline-start:-100px;animation:blDrift2 21s ease-in-out infinite alternate}
.bl-orb--b::after{background:radial-gradient(circle,rgba(139,124,255,.32),transparent 65%)}
@keyframes blDrift{0%{transform:translate3d(0,0,0) scale(1);opacity:.45}100%{transform:translate3d(-52px,40px,0) scale(1.2);opacity:.7}}
@keyframes blDrift2{0%{transform:translate3d(0,0,0) scale(1.1);opacity:.4}100%{transform:translate3d(48px,-36px,0) scale(.92);opacity:.64}}
.bl-gridlines{
  position:absolute;inset:-2px;
  background-image:linear-gradient(rgba(126,161,197,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(126,161,197,.07) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(ellipse 85% 70% at 50% 22%,#000,transparent 76%);
}
.bl-hero__grid{
  position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(30px,5vw,58px);align-items:center;
}
.bl-hero__copy{max-width:620px}
.bl-badge{display:inline-flex;align-items:center;gap:9px;font-size:.8rem;color:var(--muted);border:1px solid var(--line);border-radius:80px;padding:6px 14px;margin-bottom:24px;background:rgba(255,255,255,.04);backdrop-filter:blur(6px)}
.bl-badge__dot{width:7px;height:7px;border-radius:50%;background:#55D6FF;box-shadow:0 0 12px rgba(85,214,255,.7);animation:blPulse 2s infinite}
@keyframes blPulse{50%{opacity:.4}}
.bl-hero h1{font-size:clamp(1.9rem,4.4vw,3rem);font-weight:900;line-height:1.4;letter-spacing:-.01em;margin-bottom:18px}
.bl-accent{background:linear-gradient(90deg,#4F7CFF,#55D6FF,#8B7CFF);background-size:200%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:blShimmer 5s linear infinite}
@keyframes blShimmer{to{background-position:200% center}}
.bl-hero__sub{color:var(--muted);font-size:1.02rem;line-height:2.05;max-width:600px;margin-bottom:30px}

.bl-search{display:flex;align-items:center;gap:10px;max-width:520px;border:1px solid var(--line);border-radius:16px;padding:8px 8px 8px 16px;background:rgba(255,255,255,.04);backdrop-filter:blur(8px)}
.bl-search svg{color:var(--muted);flex-shrink:0}
.bl-search input{flex:1;min-width:0;border:none;background:transparent;color:var(--text);font:inherit;font-size:.95rem;padding:8px 0}
.bl-search input:focus{outline:none}
.bl-search input::placeholder{color:var(--muted)}
.bl-search input::-webkit-search-cancel-button,
.bl-search input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}

/* ---------- hero visual: floating article cards ---------- */
.bl-hero__visual{position:relative;display:grid;place-items:center;min-height:360px}
.bl-stack{position:relative;width:min(430px,100%);height:340px}
.bl-stack__card{
  position:absolute;width:74%;border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:10px;
  border:1px solid rgba(148,183,214,.16);background:linear-gradient(155deg,rgba(18,35,60,.96),rgba(10,22,38,.92));
  box-shadow:0 22px 54px rgba(0,0,0,.42);
}
.bl-stack__card i{display:block;border-radius:6px;background:rgba(148,183,214,.24)}
.bl-stack__tag{width:44%;height:9px;background:rgba(85,214,255,.5)!important}
.bl-stack__title{width:88%;height:13px;background:rgba(255,255,255,.5)!important}
.bl-stack__line{width:100%;height:8px}
.bl-stack__line.short{width:62%}
.bl-stack__cover{width:100%;height:66px;border-radius:10px;background:linear-gradient(135deg,rgba(79,124,255,.5),rgba(139,124,255,.35))!important}
.bl-stack__card--1{top:0;inset-inline-start:0;transform:rotate(-6deg);opacity:.6;animation:blFloat1 8s ease-in-out infinite}
.bl-stack__card--2{top:64px;inset-inline-end:0;transform:rotate(5deg);opacity:.8;animation:blFloat2 9s ease-in-out infinite}
.bl-stack__card--3{bottom:0;inset-inline-start:12%;transform:rotate(-1deg);z-index:2;animation:blFloat3 7.5s ease-in-out infinite}
@keyframes blFloat1{0%,100%{transform:rotate(-6deg) translate(0,0)}50%{transform:rotate(-6deg) translate(0,-12px)}}
@keyframes blFloat2{0%,100%{transform:rotate(5deg) translate(0,0)}50%{transform:rotate(5deg) translate(0,10px)}}
@keyframes blFloat3{0%,100%{transform:rotate(-1deg) translate(0,0)}50%{transform:rotate(-1deg) translate(0,-9px)}}

/* ---------- bar ---------- */
.bl-posts{padding:44px 0 96px}
.bl-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:32px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.bl-bar__count{font-size:.9rem;color:var(--muted);font-weight:700}
.bl-bar__clear{font-size:.84rem;color:var(--acc);text-decoration:none}

/* ---------- grid ---------- */
.bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.bl-card{
  display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:var(--card);text-decoration:none;color:inherit;height:100%;
  transition:transform .4s cubic-bezier(.2,.7,.3,1),border-color .4s,box-shadow .4s;
}
.bl-card:hover{transform:translateY(-7px);border-color:var(--acc-line);box-shadow:0 24px 60px rgba(0,0,0,.4)}
.bl-card__cover{position:relative;height:200px;display:flex;align-items:flex-start;justify-content:space-between;padding:16px;overflow:hidden}
.bl-card__cover::after{content:'';position:absolute;inset:0;background:radial-gradient(120% 120% at 100% 0%,rgba(255,255,255,.14),transparent 55%)}
.bl-card__cat{position:relative;z-index:1;font-size:.72rem;font-weight:700;color:#eaf2ff;background:rgba(6,13,24,.5);border:1px solid rgba(255,255,255,.18);border-radius:30px;padding:4px 12px;backdrop-filter:blur(6px)}
.bl-card__idx{position:relative;z-index:1;font-size:1.5rem;font-weight:900;color:rgba(255,255,255,.35)}
.bl-card__body{padding:22px;display:flex;flex-direction:column;gap:12px;flex:1}
.bl-card__body h3{font-size:1.06rem;font-weight:800;line-height:1.7}
.bl-card__excerpt{color:var(--muted);font-size:.86rem;line-height:1.9}
.bl-card__foot{margin-top:auto;display:flex;flex-direction:column;gap:14px;padding-top:8px}
.bl-card__meta{display:flex;align-items:center;gap:10px;font-size:.76rem;color:var(--muted)}
.bl-card__meta i{width:4px;height:4px;border-radius:50%;background:var(--muted);opacity:.6}
.bl-card__read{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:700;color:var(--acc)}
.bl-card__read svg{transition:transform .3s}
.bl-card:hover .bl-card__read svg{transform:translateX(-5px)}

/* ---------- empty ---------- */
.bl-empty{text-align:center;padding:70px 20px;border:1px dashed var(--line);border-radius:20px}
.bl-empty p{color:var(--muted);margin-bottom:20px}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .bl-hero__grid{grid-template-columns:1fr;gap:38px}
  .bl-hero__copy{max-width:none}
  .bl-hero__visual{min-height:320px;order:2}
}
@media (max-width:960px){.bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){
  .bl-hero{padding:128px 0 44px}
  .bl-grid{grid-template-columns:1fr}
  .bl-search{flex-wrap:wrap;padding:12px}
  .bl-search .btn{width:100%;justify-content:center}
  .bl-hero__visual{min-height:280px}
  .bl-stack{height:300px}
}
@media (prefers-reduced-motion:reduce){
  .bl *,.bl *::before,.bl *::after{animation:none!important;transition:none!important}
  .bl .reveal{opacity:1;transform:none}
}