/* === Hero height: desktop 60rem, mobile 44rem === */
#hero-rotator{ min-height:60rem }
@media (max-width:767px){ #hero-rotator{ min-height:44rem } }

/* === Zoom-out на първия SSR кадър ===
   Настройва се с променливи:
   #hero-rotator{ --cocox-zoom-from:1.06; --cocox-zoom-dur:2.0s }
*/
#hero-rotator .cocox-hero-ssr{
  /* по-силен ефект по подразбиране */
  --cocox-zoom-from: 1.06;
  --cocox-zoom-dur: 2.0s;

  animation: cocoxZoom var(--cocox-zoom-dur) cubic-bezier(.22,1,.36,1) both;
  transform-origin: center top;
  will-change: transform;
}
@keyframes cocoxZoom{
  from { transform: scale(var(--cocox-zoom-from)); }
  to   { transform: scale(1); }
}
/* уважаваме системните предпочитания */
@media (prefers-reduced-motion: reduce){
  #hero-rotator .cocox-hero-ssr{ animation: none }
}

/* === Gradient overlay (дублирам за устойчивост) === */
#hero-rotator::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 85%, #FDCBDA 100%);
}

/* === Стрелки === */
#hero-rotator .scroll-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:30; width:40px; height:40px; line-height:40px; text-align:center;
  border-radius:50%; background:rgba(255,255,255,.85);
  box-shadow:0 2px 6px rgba(0,0,0,.2);
  font-weight:700; cursor:pointer; user-select:none;
}
#hero-rotator .scroll-left{ left:10px }
@media (min-width:1024px){ #hero-rotator .scroll-right{ right:40px } }
@media (max-width:991px){ #hero-rotator .scroll-arrow{ display:none } }

/* ---- CocoX: по-отчетлив zoom-out на първия SSR кадър ---- */
#hero-rotator .cocox-hero-ssr{
  animation: cocoxZoomStrong 2.8s cubic-bezier(.22,1,.36,1) both !important;
  transform-origin: center top;
  will-change: transform;
}
@keyframes cocoxZoomStrong{
  from { transform: scale(1.4); }  /* <-- сила на zoom-а */
  to   { transform: scale(1); }
}

/* ако ти се иска още по-бавно – активирай този вариант вместо горния:
#hero-rotator .cocox-hero-ssr{ animation: cocoxZoomStrong 2.6s cubic-bezier(.22,1,.36,1) both !important; }
*/


/* Време на fade между слайдовете */
#hero-rotator{
  --cocox-fade-ms: 1800ms;   /* смени с 1500ms, 2000ms, 2200ms и т.н. */
}

/* (ако темата/кешът „дърпа чергата“) – подсигури, че слоевете ползват променливата */
#hero-rotator .cocox-layer{
  transition: opacity var(--cocox-fade-ms) ease-in-out !important;
}