/* ============================================================
   OPTIMUMBANK HERO SLIDER  —  hero-slider.css
   ============================================================
   SPEED CONTROLS (edit these three lines only):
     --slide-duration   = how long each slide is visible
     --transition-speed = crossfade time between slides
     --kb-scale         = Ken Burns end-zoom (1.0=none, 1.08=subtle, 1.15=strong)
   ============================================================ */

:root {
    --slide-duration:   6s;
    --transition-speed: 1.2s;
    --kb-scale:         1.08;
}

/* ── Wrapper ─────────────────────────────────────────────── */
.ob-hero {
    position: relative;
    width: 100%;
    height: 620px;
    overflow: hidden;
    background: #0a1f3c;
}

@media (max-width: 991px)  { .ob-hero { height: 520px; } }
@media (max-width: 575px)  { .ob-hero { height: 460px; } }

/* ── Slides ──────────────────────────────────────────────── */
.ob-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 1;
    transition: opacity var(--transition-speed) ease-in-out;
    pointer-events: none;
}

.ob-slide.is-active {
    opacity: 1;
    z-index: 2;
    pointer-events: auto;
}

/* ── Background image ──────────────────────────────────────
   THE FIX FOR THE JUMP-BACK:
   Three states are used for .ob-slide__bg:

   1. Default (not active, not leaving):
      No animation running. transform stays at scale(1).
      This is the "reset" state before a slide has been shown.

   2. .is-active  → run Ken Burns from scale(1) → scale(--kb-scale)
      `forwards` fill-mode holds it at the zoomed state while visible.

   3. .is-leaving → strip the animation entirely and hard-set
      transform: scale(--kb-scale) so it stays frozen at maximum
      zoom during the fade-out. The JS adds this class the instant
      a slide stops being active, and removes it after the
      transition finishes. This is what prevents the snap-back.
   ─────────────────────────────────────────────────────────── */
.ob-slide__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-repeat: no-repeat;

    /* Default focal point – overridden per-slide via data attrs */
    background-position: center center;

    will-change: transform;
    transform: scale(1);
    animation: none;
}

.ob-slide.is-active .ob-slide__bg {
    animation: kenBurns var(--slide-duration) ease-out forwards;
}

/* Hold the zoomed state while fading out — no snap-back */
.ob-slide.is-leaving .ob-slide__bg {
    animation: none !important;
    transform: scale(var(--kb-scale));
    transition: transform 0s; /* no transition, just stay there */
}

@keyframes kenBurns {
    from { transform: scale(1); }
    to   { transform: scale(var(--kb-scale)); }
}

/* ── Overlay ─────────────────────────────────────────────── */
.ob-slide__overlay {
    position: absolute;
    inset: 0;
    background: rgba(5, 20, 50, 0);
	z-index: 1;
}

/* ── Text content ────────────────────────────────────────── */
.ob-slide__content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
}

.ob-slide__inner {
    max-width: 600px;
    padding: 0 20px;
}

/* Text elements start invisible/shifted */
.ob-eyebrow,
.ob-heading,
.ob-body,
.ob-cta {
    opacity: 0;
    transform: translateY(26px);
}

.ob-slide.is-active .ob-eyebrow { animation: slideUp 0.6s ease forwards 0.30s; }
.ob-slide.is-active .ob-heading { animation: slideUp 0.6s ease forwards 0.55s; }
.ob-slide.is-active .ob-body    { animation: slideUp 0.6s ease forwards 0.80s; }
.ob-slide.is-active .ob-cta     { animation: slideUp 0.6s ease forwards 1.00s; }

@keyframes slideUp {
    to { opacity: 1; transform: translateY(0); }
}

/* ── Typography ──────────────────────────────────────────── */
.ob-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #f0b429;
    margin-bottom: 14px;
    border-left: 3px solid #f0b429;
    padding-left: 10px;
}

.ob-heading {
    font-size: clamp(1.75rem, 4vw, 2.9rem);
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    margin-bottom: 18px;
}

.ob-heading span { color: #f0b429; }

.ob-body {
    font-size: clamp(0.9rem, 1.8vw, 1.05rem);
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.65;
    margin-bottom: 30px;
    max-width: 480px;
}

.ob-cta .btn-3,
.ob-cta .btn { display: inline-block; }

/* ── Dots ────────────────────────────────────────────────── */
.ob-dots {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 10px;
    align-items: center;
}

.ob-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s, transform 0.3s;
}

.ob-dot.is-active {
    background: #f0b429;
    transform: scale(1.35);
}

/* ── Arrows ──────────────────────────────────────────────── */
.ob-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
    backdrop-filter: blur(4px);
}

.ob-arrow:hover  { background: rgba(240, 180, 41, 0.6); }
.ob-arrow--prev  { left: 18px; }
.ob-arrow--next  { right: 18px; }

/* ── Hide ALL navigation controls on mobile ──────────────── */
@media (max-width: 767px) {
    .ob-arrow { display: none !important; }
    .ob-dots  { display: none !important; }
}

/* ── Progress bar ────────────────────────────────────────── */
/* Sits just below the hero as a block element — outside the
   hero's stacking context entirely, so it can never bleed
   through the mobile menu.                                  */
.ob-progress {
    display: block;
    position: relative;
    height: 3px;
    width: 0%;
    background: #f0b429;
    z-index: 1;
    margin-top: -3px; /* tucks it flush against the hero bottom */
}