/* ============================================================
   FRANCIZOR.RO — Banner „Asociația" (storyboard ca art direction)
   Imaginea = fundal cinematic (object-fit:cover). Textul principal
   e HTML live, crisp și bilingv, deasupra unui overlay dark/gold
   pentru lizibilitate. ADN auriu + particule animate peste imagine.
   ============================================================ */
#asociatie{ padding-top:0 !important; }

.asoc-banner{
  position:relative; width:100%;
  aspect-ratio:1983 / 793;          /* = imaginea, deci cover NU taie pe desktop */
  min-height:520px; max-height:92vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:#070d1c;
  border-bottom:1px solid var(--line-soft); isolation:isolate;
}
/* storyboard background */
.ab-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; z-index:0; user-select:none;
}
#banner-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:2; display:block; pointer-events:none; }
/* legibility overlay — soft wash + gentle central focus for crisp HTML text */
.ab-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(70% 52% at 50% 56%, rgba(4,8,18,.78) 0%, rgba(4,8,18,.5) 34%, rgba(4,8,18,.12) 62%, rgba(4,8,18,0) 80%),
    linear-gradient(180deg,
      rgba(4,8,18,.6) 0%, rgba(4,8,18,.22) 9%, rgba(4,8,18,.05) 18%,
      rgba(4,8,18,0) 34%, rgba(4,8,18,0) 64%,
      rgba(4,8,18,.28) 82%, rgba(4,8,18,.55) 100%),
    linear-gradient(0deg, rgba(4,8,18,.2), rgba(4,8,18,.08));
}

/* ---- center text (HTML live) — positioned over the dark central band ---- */
.ab-center{
  position:absolute; top:56%; left:50%; transform:translate(-50%,-50%); z-index:3;
  text-align:center; max-width:min(900px,90vw);
  padding:0 22px; display:flex; flex-direction:column; align-items:center;
}
.ab-eyebrow{font-family:var(--sans); font-size:clamp(10px,1.1vw,13px); font-weight:700;
  letter-spacing:.34em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:14px;
  text-shadow:0 2px 14px rgba(0,0,0,.6)}
.ab-title{font-family:var(--serif); font-weight:600; font-size:clamp(46px,8.6vw,118px); line-height:.94;
  color:#fff; letter-spacing:.01em; margin:0; text-shadow:0 6px 50px rgba(0,0,0,.85), 0 0 80px rgba(0,0,0,.5)}
.ab-subtitle{font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(18px,2.7vw,36px);
  line-height:1.08; margin:6px 0 0;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.ab-msg{font-family:var(--sans); font-size:clamp(14px,1.55vw,19px); line-height:1.55; color:#e7ecf6;
  margin:20px 0 0; max-width:620px; text-wrap:pretty; text-shadow:0 2px 16px rgba(0,0,0,.8)}
.ab-msg .gold{background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:600}
.ab-cta{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:30px}

/* entrance: transform-only (text stays visible even if animation can't tick) */
@keyframes abIn{ from{transform:translate(-50%,-46%)} to{transform:translate(-50%,-50%)} }
.asoc-banner.inview .ab-center{animation:abIn 1s var(--ease) both}

/* relocated stats (below banner, in Association content) */
.asoc-stats{margin:0 auto 8px; max-width:760px}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:1024px){
  .asoc-banner{ aspect-ratio:1983 / 1000; }   /* a touch taller → room for text */
}
@media(max-width:760px){
  .asoc-banner{
    aspect-ratio:auto; min-height:86vh; max-height:none;
    padding:120px 0 56px;
  }
  /* image crops to centre on mobile; keep the DNA + portraits core in view */
  .ab-bg{ object-position:center; }
  .ab-center{ position:relative; top:auto; left:auto; transform:none; }
  .asoc-banner.inview .ab-center{animation:none}
  .ab-overlay{
    background:
      radial-gradient(150% 78% at 50% 50%, rgba(4,8,18,.8) 0%, rgba(4,8,18,.52) 40%, rgba(4,8,18,.25) 68%),
      linear-gradient(180deg, rgba(4,8,18,.66) 0%, rgba(4,8,18,.2) 22%, rgba(4,8,18,.2) 58%, rgba(4,8,18,.72) 100%);
  }
  .ab-title{font-size:clamp(44px,15vw,76px)}
  .ab-msg{font-size:15px}
}
@media(max-width:480px){
  .ab-cta{flex-direction:column; width:100%}
  .ab-cta .btn{width:100%; justify-content:center}
}

@media(prefers-reduced-motion:reduce){
  .asoc-banner.inview .ab-center > *{animation:none}
  #banner-canvas{display:none}   /* image + overlay are enough; no motion */
}