/*
 * v316 — stronger lower fade and arrow navigation for the homepage hero.
 * Replaces the visual dot indicators with < and > controls without changing
 * the existing slider transition logic.
 */

/* Stronger and taller fade than v315. */
html body .hero > .irf-home-hero-bottom-fade-v315{
  height:clamp(88px,9.6vw,138px) !important;
  background:linear-gradient(
    to bottom,
    rgba(13,13,13,0) 0%,
    rgba(13,13,13,.06) 18%,
    rgba(13,13,13,.20) 40%,
    rgba(13,13,13,.50) 65%,
    rgba(13,13,13,.84) 86%,
    rgba(13,13,13,1) 100%
  ) !important;
}

/* Keep the old dots in the DOM for the original slider logic, but hide them. */
html body .hero .hero-dots{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

html body .hero .irf-hero-arrow-nav-v316{
  position:absolute !important;
  z-index:2147481200 !important;
  left:50% !important;
  bottom:30px !important;
  transform:translateX(-50%) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
  direction:ltr !important;
  pointer-events:auto !important;
}

html body .hero .irf-hero-arrow-v316{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:44px !important;
  height:38px !important;
  margin:0 !important;
  padding:0 0 3px !important;
  border:1px solid rgba(255,225,137,.72) !important;
  border-radius:999px !important;
  background:rgba(12,14,18,.72) !important;
  color:#ffe28c !important;
  box-shadow:0 6px 20px rgba(0,0,0,.26) !important;
  backdrop-filter:blur(5px) !important;
  -webkit-backdrop-filter:blur(5px) !important;
  font:700 28px/1 Arial,Tahoma,sans-serif !important;
  cursor:pointer !important;
  user-select:none !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:transform .18s ease,background-color .18s ease,color .18s ease,border-color .18s ease !important;
}

html body .hero .irf-hero-arrow-v316:hover,
html body .hero .irf-hero-arrow-v316:focus-visible{
  color:#151515 !important;
  background:#e2b83d !important;
  border-color:#f6da78 !important;
  transform:translateY(-2px) !important;
  outline:none !important;
}

html body .hero .irf-hero-arrow-v316:active{
  transform:translateY(0) scale(.96) !important;
}

@media (max-width:820px){
  html body .hero > .irf-home-hero-bottom-fade-v315{
    height:78px !important;
    background:linear-gradient(
      to bottom,
      rgba(13,13,13,0) 0%,
      rgba(13,13,13,.12) 25%,
      rgba(13,13,13,.46) 62%,
      rgba(13,13,13,.92) 88%,
      rgba(13,13,13,1) 100%
    ) !important;
  }

  html body .hero .irf-hero-arrow-nav-v316{
    bottom:18px !important;
    gap:9px !important;
  }

  html body .hero .irf-hero-arrow-v316{
    width:40px !important;
    height:35px !important;
    font-size:25px !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}