/* ═══════════════════════════════════════════════════
   BAMI.NETWORK — HERO SLIDER v2.2
════════════════════════════════════════════════════ */

/* ── WRAPPER — height fix (elimina scroll dupa tranzitie) ── */
.hs-hero {
  position: relative !important;
  width: 100% !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  background: #020409 !important;
  display: block !important;
  contain: strict !important;
}

/* ── CANVAS ── */
#heroAmbient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* ── SWEEP ── */
.hs-sweep {
  position: absolute;
  top: 0; bottom: 0;
  width: 3px;
  z-index: 50;
  pointer-events: none;
  left: -4px;
  opacity: 0;
  background: linear-gradient(180deg,
    transparent 0%, rgba(255,255,255,0.06) 10%,
    rgba(255,255,255,0.95) 50%,
    rgba(255,255,255,0.06) 90%, transparent 100%);
  filter: blur(1px);
}
.hs-sweep.running { animation: hsSweep 0.7s cubic-bezier(0.76,0,0.24,1) forwards; }
@keyframes hsSweep {
  0%  { left:-4px; opacity:0; } 5% { opacity:1; }
  95% { opacity:1; } 100% { left:calc(100% + 4px); opacity:0; }
}

/* ── FLASH ── */
.hs-flash { position:absolute; inset:0; z-index:45; pointer-events:none; opacity:0; }
.hs-flash.pop { animation:hsFlash 0.5s ease forwards; }
@keyframes hsFlash { 0%{opacity:0} 25%{opacity:1} 100%{opacity:0} }

/* ── SCAN ── */
.hs-scan {
  position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.07),transparent);
  animation:hsScanMove 7s linear infinite; pointer-events:none; z-index:4;
}
@keyframes hsScanMove {
  0%{top:0%;opacity:0} 5%{opacity:1} 95%{opacity:1} 100%{top:100%;opacity:0}
}

/* ── SLIDES ── */
.hs-slides { position:absolute; inset:0; width:100%; height:100%; z-index:10; }

/* ── SLIDE ── */
.hs-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  box-sizing: border-box;
  overflow: hidden;
}
.hs-slide.hs-active  { opacity:1; pointer-events:all; }
.hs-slide.hs-leaving { animation:hsLeave 0.38s ease forwards; }
@keyframes hsLeave { to { opacity:0; filter:blur(5px); transform:scale(0.975); } }

/* ── GLOW ── */
.hs-bg-glow {
  position:absolute; width:55vw; height:55vw;
  max-width:700px; max-height:700px; border-radius:50%;
  top:50%; left:50%; transform:translate(-50%,-50%);
  pointer-events:none; z-index:1;
  animation:hsPulseGlow 4s ease-in-out infinite alternate;
}
@keyframes hsPulseGlow {
  from { opacity:0.04; transform:translate(-50%,-50%) scale(1); }
  to   { opacity:0.08; transform:translate(-50%,-50%) scale(1.12); }
}

/* ── FLOATING SHAPES — fix: explicit color, no dark squares ── */
.hs-shapes { position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.hs-shape {
  position: absolute;
  opacity: 0;
  animation: hsFloat linear infinite;
  animation-play-state: paused;
}
.hs-active .hs-shape { animation-play-state: running; }
.hs-shape-circle {
  border-radius: 50%;
  border: 1px solid;
  border-color: currentColor;
  background: transparent;
}
.hs-shape-square {
  border-radius: 3px;
  border: 1px solid;
  border-color: currentColor;
  background: transparent;
}
.hs-shape-hex {
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  border: none;
  background: currentColor;
  border-radius: 0;
}
@keyframes hsFloat {
  0%  { transform:translateY(0) rotate(0deg);    opacity:0;    }
  8%  { opacity:0.12; }
  92% { opacity:0.06; }
  100%{ transform:translateY(-110vh) rotate(180deg); opacity:0; }
}

/* ── CORNER ACCENTS ── */
.hs-corner {
  position:absolute; width:50px; height:50px;
  z-index:6; pointer-events:none;
  border-color:currentColor; opacity:0; border-radius:2px;
}
.hs-corner-tl { top:24px; left:24px; border-top:1.5px solid; border-left:1.5px solid; }
.hs-corner-tr { top:24px; right:24px; border-top:1.5px solid; border-right:1.5px solid; }
.hs-corner-bl { bottom:80px; left:24px; border-bottom:1.5px solid; border-left:1.5px solid; }
.hs-corner-br { bottom:80px; right:24px; border-bottom:1.5px solid; border-right:1.5px solid; }
.hs-active .hs-corner-tl { animation:hsCornerIn 0.5s cubic-bezier(0.22,1,0.36,1) 0.04s both; }
.hs-active .hs-corner-tr { animation:hsCornerIn 0.5s cubic-bezier(0.22,1,0.36,1) 0.07s both; }
.hs-active .hs-corner-bl { animation:hsCornerIn 0.5s cubic-bezier(0.22,1,0.36,1) 0.10s both; }
.hs-active .hs-corner-br { animation:hsCornerIn 0.5s cubic-bezier(0.22,1,0.36,1) 0.13s both; }
@keyframes hsCornerIn {
  from { opacity:0; transform:scale(0.7); }
  to   { opacity:0.22; transform:scale(1); }
}

/* ── CONTENT ── */
.hs-content {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 80px 2rem 100px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

/* ── BADGE ── */
.hs-badge {
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 18px; border-radius:100px;
  font-family:'Exo 2',sans-serif; font-size:0.68rem; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase;
  border:1px solid; margin-bottom:1.25rem; opacity:0;
}
.hs-active .hs-badge { animation:hsUp 0.5s cubic-bezier(0.22,1,0.36,1) 0.05s both; }

/* ── ICON ── */
.hs-icon-wrap {
  position:relative; width:96px; height:96px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.1rem; opacity:0; flex-shrink:0;
}
.hs-active .hs-icon-wrap { animation:hsUp 0.55s cubic-bezier(0.22,1,0.36,1) 0.12s both; }
.hs-icon-ring {
  position:absolute; inset:0; border-radius:50%;
  border:1.5px solid currentColor; opacity:0.35;
  animation:hsRing1 8s linear infinite;
}
.hs-icon-ring::before {
  content:''; position:absolute; top:-4px; left:50%;
  width:7px; height:7px; border-radius:50%;
  background:currentColor; transform:translateX(-50%);
}
.hs-icon-ring-2 {
  position:absolute; inset:11px; border-radius:50%;
  border:1px dashed currentColor; opacity:0.18;
  animation:hsRing1 13s linear infinite reverse;
}
.hs-icon-dot-bg { position:absolute; inset:19px; border-radius:50%; background:currentColor; opacity:0.07; }
.hs-icon { position:relative; z-index:2; font-size:2.1rem; }
@keyframes hsRing1 { to { transform:rotate(360deg); } }

/* ── TITLE ── */
.hs-title {
  font-family:'Orbitron',monospace;
  font-size:clamp(2.4rem,6vw,4.8rem);
  font-weight:900; line-height:1.08;
  color:#fff; margin:0 0 1rem 0;
  text-align:center; width:100%; opacity:0;
}
.hs-active .hs-title { animation:hsTitleIn 0.65s cubic-bezier(0.22,1,0.36,1) 0.19s both; }
@keyframes hsTitleIn {
  from { opacity:0; transform:translateY(16px) scale(0.97); filter:blur(4px); }
  to   { opacity:1; transform:none; filter:none; }
}

/* ── GRADIENT ACCENT — FIX PRINCIPAL ──
   Folosim CSS custom properties (--a1, --a2) setate pe element,
   NU inline background, pentru ca background-clip sa functioneze corect
── */
.hs-title .hs-accent {
  display: inline-block;
  background: linear-gradient(135deg, var(--a1, #00d4ff), var(--a2, #7c3aed));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
}

/* ── DESCRIPTION ── */
.hs-desc {
  font-family:'Rajdhani',sans-serif; font-size:1.05rem;
  font-weight:400; color:rgba(255,255,255,0.5); line-height:1.75;
  max-width:560px; width:100%; margin:0 0 1.4rem 0;
  text-align:center; opacity:0; word-break:normal; hyphens:none;
}
.hs-active .hs-desc { animation:hsUp 0.55s cubic-bezier(0.22,1,0.36,1) 0.3s both; }

/* ── PRICE ── */
.hs-price-row {
  display:flex; align-items:baseline; justify-content:center;
  gap:9px; flex-wrap:wrap; margin:0 0 1.6rem 0; opacity:0;
}
.hs-active .hs-price-row { animation:hsUp 0.55s cubic-bezier(0.22,1,0.36,1) 0.4s both; }
.hs-from {
  font-family:'Exo 2',sans-serif; font-size:0.7rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.32);
}
.hs-price {
  font-family:'Orbitron',monospace; font-size:2rem;
  font-weight:800; letter-spacing:-0.02em; line-height:1;
}
.hs-price-note { font-family:'Rajdhani',sans-serif; font-size:0.8rem; color:rgba(255,255,255,0.28); align-self:center; }

/* ── BUTOANE — culoarea slide-ului activ ──
   Fiecare slide are --sc (slide color) si --sr (slide rgb) ca CSS var
── */
.hs-actions {
  display:flex; align-items:center; justify-content:center;
  gap:1rem; flex-wrap:wrap; opacity:0;
}
.hs-active .hs-actions { animation:hsUp 0.55s cubic-bezier(0.22,1,0.36,1) 0.5s both; }

/* Buton principal: gradient din culoarea slide-ului */
.hs-slide .hs-btn-main {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 32px;
  border-radius: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--sc, #00d4ff), color-mix(in srgb, var(--sc, #00d4ff) 60%, #7c3aed));
  color: #fff;
  box-shadow: 0 4px 24px rgba(var(--sr, 0,212,255), 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hs-slide .hs-btn-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(var(--sr, 0,212,255), 0.5);
}

/* Buton secundar: ghost in culoarea slide-ului */
.hs-slide .hs-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 28px;
  border-radius: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  background: rgba(var(--sr, 0,212,255), 0.08);
  color: var(--sc, #00d4ff);
  border: 1px solid rgba(var(--sr, 0,212,255), 0.3);
  transition: background 0.25s ease, transform 0.2s ease;
}
.hs-slide .hs-btn-ghost:hover {
  background: rgba(var(--sr, 0,212,255), 0.15);
  transform: translateY(-2px);
}

/* ── BOTTOM ── */
.hs-bottom {
  position:absolute; bottom:0; left:0; right:0; z-index:20;
  padding:0 2rem 1.4rem;
  display:flex; flex-direction:column; align-items:center; gap:0.65rem;
}
.hs-service-label {
  font-family:'Exo 2',sans-serif; font-size:0.62rem; font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase; color:rgba(255,255,255,0.28);
  transition:color 0.5s, opacity 0.3s;
}
.hs-dots { display:flex; align-items:center; gap:8px; }
.hs-dot {
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,0.15);
  transition:all 0.45s cubic-bezier(0.34,1.56,0.64,1);
  cursor:default;
}
.hs-dot.hs-dot-active { width:24px; border-radius:4px; }
.hs-progress-wrap {
  width:min(420px,86vw); height:2px;
  background:rgba(255,255,255,0.06); border-radius:2px; overflow:hidden;
}
.hs-progress-fill { height:100%; width:0%; border-radius:2px; }

/* ── SHARED ── */
@keyframes hsUp {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── RESPONSIVE ── */
@media (max-width:768px) {
  .hs-content { padding:72px 1.25rem 88px; }
  .hs-title { font-size:clamp(1.9rem,8.5vw,3rem); }
  .hs-icon-wrap { width:78px; height:78px; }
  .hs-icon { font-size:1.75rem; }
  .hs-price { font-size:1.65rem; }
  .hs-corner { display:none; }
}
@media (max-width:480px) {
  .hs-content { padding:68px 1rem 84px; }
  .hs-title { font-size:clamp(1.6rem,9vw,2.4rem); }
  .hs-actions { gap:0.6rem; }
  .hs-slide .hs-btn-main,
  .hs-slide .hs-btn-ghost { padding:11px 20px; font-size:0.9rem; }
}