/* ============================================================================
   Durusi — rb.css (2026-07-12)
   React Bits component ports, brand-tinted (mint on ivory):
   · MagicBento / BorderGlow → cursor-proximity glow ring + global spotlight
   · GooeyNav → sliding pill behind the header links
   · LineSidebar → right-edge section rail (mirrors left for RTL)
   · CardNav → mobile menu as a card panel
   Hover/pointer states only — no autonomous animation.
   ============================================================================ */

/* ── MagicBento glow ring (vars driven by rb.js) ──────────────────────────── */
.rb-glow{
  --glow-x:50%;
  --glow-y:50%;
  --glow-intensity:0;
  --glow-radius:220px;
  position:relative;
}
.rb-glow::after{
  content:"";
  position:absolute;
  inset:0;
  padding:3px;
  border-radius:inherit;
  background:radial-gradient(
    var(--glow-radius) circle at var(--glow-x) var(--glow-y),
    rgba(var(--rbA-rgb), calc(var(--glow-intensity) * 0.95)) 0%,
    rgba(var(--rbA-rgb), calc(var(--glow-intensity) * 0.55)) 28%,
    transparent 60%
  );
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite:exclude;
  pointer-events:none;
  z-index:1;
}
.rb-glow > *{ position:relative; z-index:2; }
/* keep absolutely-positioned corner controls (e.g. the sc-card expand button)
   out of the glow's position override — otherwise they drop into the flex flow */
.rb-glow > .sc-expand{ position:absolute; z-index:6; }
/* Hover = clean lift + soft depth shadow only. The glow itself is the
   accent-coloured cursor-following ring above — consistent on EVERY card. */
.rb-glow{ transition:transform .25s ease, box-shadow .25s ease; }
.rb-glow:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 42px rgba(16,39,24,0.16) !important;
}

/* the roaming section spotlight (one fixed node, injected by rb.js) */
.rb-spotlight{
  position:fixed;
  width:720px;
  height:720px;
  border-radius:50%;
  pointer-events:none;
  z-index:3;
  opacity:0;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,
    rgba(var(--rbA-rgb),0.06) 0%,
    rgba(var(--rbA-rgb),0.03) 22%,
    rgba(var(--rbA-rgb),0.02) 42%,
    transparent 68%);
  mix-blend-mode:multiply;
  transition:opacity .3s ease;
}

/* ── GooeyNav pill (header) ───────────────────────────────────────────────── */
.site-header .nav{ position:relative; }
.rb-pill{
  position:absolute;
  top:50%;
  height:34px;
  transform:translateY(-50%);
  border-radius:999px;
  background:rgba(var(--rbA-rgb),0.13);
  border:1px solid rgba(var(--rbA-rgb),0.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.55);
  opacity:0;
  pointer-events:none;
  z-index:0;
  transition:left .32s cubic-bezier(0.34,1.3,0.64,1),
             width .32s cubic-bezier(0.34,1.3,0.64,1),
             opacity .2s ease;
}
.site-header .nav a{ position:relative; z-index:1; }
@media (max-width:860px){ .rb-pill{ display:none; } }
@media (prefers-reduced-motion:reduce){ .rb-pill{ transition:none; } }

/* ── LineSidebar section rail ─────────────────────────────────────────────── */
.rb-rail{
  position:fixed;
  right:22px;
  top:50%;
  transform:translateY(-50%);
  z-index:90;
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:flex-end;
}
[dir="rtl"] .rb-rail{ right:auto; left:22px; align-items:flex-start; }
.rb-rail button{
  --effect:0;
  display:flex;
  align-items:center;
  gap:10px;
  flex-direction:row-reverse;
  background:none;
  border:0;
  padding:4px 0;
  cursor:pointer;
}
[dir="rtl"] .rb-rail button{ flex-direction:row; }
.rb-rail .ln{
  display:block;
  height:2px;
  border-radius:2px;
  width:calc(22px + var(--effect) * 26px);
  background:rgba(16,39,24, calc(0.22 + var(--effect) * 0.5));
  transition:background .15s ease;
}
.rb-rail button.on .ln{ background:rgb(var(--rbA-rgb)); box-shadow:0 0 8px rgba(var(--rbA-rgb),0.55); }
.rb-rail .lb{
  font-size:0.74rem;
  font-weight:600;
  color:var(--forest);
  opacity:var(--effect);
  transform:translateX(calc((1 - var(--effect)) * 6px));
  white-space:nowrap;
  pointer-events:none;
}
[dir="rtl"] .rb-rail .lb{ transform:translateX(calc((1 - var(--effect)) * -6px)); }
.rb-rail button:focus-visible{ outline:2px solid var(--mint-deep); outline-offset:3px; border-radius:6px; }
/* over dark bands (CTA, footer) the rail flips to light */
.rb-rail.inverse .ln{ background:rgba(255,255,255, calc(0.55 + var(--effect) * 0.4)); }
.rb-rail.inverse button.on .ln{ background:#fff; box-shadow:0 0 8px rgba(var(--rbA-rgb),0.7); }
.rb-rail.inverse .lb{ color:#fff; }
@media (max-width:1279px), (hover:none){ .rb-rail{ display:none; } }

/* ── CardNav mobile panel ─────────────────────────────────────────────────── */
@media (max-width:860px){
  .nav.open{
    background:rgba(255,255,255,0.72);
    -webkit-backdrop-filter:blur(18px) saturate(1.7);
    backdrop-filter:blur(18px) saturate(1.7);
    border:1px solid rgba(255,255,255,0.65);
    border-radius:20px;
    margin:8px 12px 0;
    padding:10px;
    box-shadow:0 24px 60px rgba(16,39,24,0.16);
  }
  .nav.open a{
    background:rgba(255,255,255,0.55);
    border:1px solid rgba(16,39,24,0.06);
    border-radius:14px;
    padding:13px 16px;
    margin-bottom:8px;
    font-weight:600;
    color:var(--forest);
  }
  .nav.open a:last-child{ margin-bottom:0; }
  .nav.open .btn{ text-align:center; }
  .nav-toggle.open{ color:var(--mint-deep); }
}

/* ── MagicBento cards: 3D tilt + particle stars (bento section) ───────────── */
.mb-card{
  transform-style:preserve-3d;
  transition:transform .3s cubic-bezier(0.4,0,0.2,1), box-shadow .25s ease;
  will-change:transform;
}
.mb-particle{
  position:absolute;
  width:4px; height:4px;
  border-radius:50%;
  background:rgba(var(--rbA-rgb),0.95);
  box-shadow:0 0 7px rgba(var(--rbA-rgb),0.85);
  pointer-events:none;
  z-index:4;
  opacity:0;
  animation:mbParticle 2.2s ease-out forwards;
}
@keyframes mbParticle{
  0%{ opacity:0; transform:translateY(2px) scale(0.4); }
  22%{ opacity:1; }
  100%{ opacity:0; transform:translateY(-28px) scale(1); }
}
@media (hover:none), (prefers-reduced-motion:reduce){
  .mb-card{ transform:none !important; transition:box-shadow .25s ease; }
  .mb-particle{ display:none; }
}