/* ═══════════════════════════════════════════
   Vertical Banner Slider v2.0
   Yaseen | Massive Designs
═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&family=Jost:wght@200;300;400;500&display=swap');

:root {
    --vbs-h:        100vh;
    --vbs-accent:   #c8a96e;
    --vbs-white:    #fff;
    --vbs-ease:     cubic-bezier(0.76, 0, 0.24, 1);
    --vbs-speed:    900ms;
    --vbs-pad-x:    56px;
    --vbs-pad-y:    56px;
}

/* ── Reset ── */
.vbs-slider-wrap *, .vbs-slider-wrap *::before, .vbs-slider-wrap *::after { box-sizing:border-box; }
.vbs-slider-wrap button { background:none; border:none; padding:0; cursor:pointer; }

/* ── Wrapper ── */
.vbs-slider-wrap {
    position: relative;
    width:  100%;
    height: var(--vbs-h);
    overflow: hidden;
}
.vbs-swiper { width:100%; height:100%; }

/* ── Slide ── */
.vbs-slide {
    position: relative;
    width:  100%;
    height: 100%;
    overflow: hidden;
    background: #0a0a0a;
}

/* ── Background with Ken Burns ── */
.vbs-bg {
    position: absolute;
    inset: -6%;
    background-image: var(--vbs-bg);
    background-size:     cover;
    background-position: top center;
    transform:           scale(1.06);
    transform-origin:    center;
    transition:          transform 8s ease;
    will-change:         transform;
}
.swiper-slide-active .vbs-bg {
    transform: scale(1);
}

/* ── Overlay — directional gradient for bottom-left readability ── */
.vbs-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        130deg,
        rgba(0,0,0,0.08) 0%,
        rgba(0,0,0,0.2)  40%,
        rgba(0,0,0,0.72) 100%
    );
    z-index: 1;
}

/* ── Grain texture ── */
.vbs-grain {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px;
    pointer-events: none;
}

/* ── Content block — bottom left ── */
.vbs-content {
    position: absolute;
    bottom:  var(--vbs-pad-y);
    left:    var(--vbs-pad-x);
    z-index: 10;
    max-width: 740px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

/* ── Slide number ── */
.vbs-slide-num {
    font-family: 'Jost', sans-serif;
    font-size:   0.68rem;
    font-weight: 300;
    letter-spacing: 0.28em;
    color: var(--vbs-accent);
    margin-bottom: 16px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s var(--vbs-ease) 0.1s,
                transform 0.6s var(--vbs-ease) 0.1s;
}
.swiper-slide-active .vbs-slide-num {
    opacity: 1;
    transform: translateY(0);
}

/* ── Horizontal reveal line ── */
.vbs-line-wrap {
    overflow: hidden;
    margin-bottom: 20px;
}
.vbs-line {
    width: 48px;
    height: 1px;
    background: var(--vbs-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.7s var(--vbs-ease) 0.3s;
}
.swiper-slide-active .vbs-line {
    transform: scaleX(1);
}

/* ── Subtitle ── */
.vbs-subtitle {
    font-family: 'Jost', sans-serif;
    font-size:   0.72rem;
    font-weight: 300;
    letter-spacing: 0.22em;
    color: white;
    margin: 0 0 14px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s var(--vbs-ease) 0.4s,
                transform 0.7s var(--vbs-ease) 0.4s;
}
.swiper-slide-active .vbs-subtitle {
    opacity: 1;
    transform: translateY(0);
}

/* ── Title — word-by-word clip reveal ── */
.vbs-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size:   clamp(3rem, 4vw, 6.5rem);
    font-weight: 300;
    line-height: 1.0;
    letter-spacing: -0.01em;
    color: var(--vbs-white);
    margin: 0 0 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.22em;
}

/* Each word is a clip container */
.vbs-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}
.vbs-word-inner {
    display: inline-block;
    transform: translateY(110%);
    transition: transform 0.85s var(--vbs-ease);
}

/* Stagger per word using nth-child */
.swiper-slide-active .vbs-word:nth-child(1)  .vbs-word-inner { transform:translateY(0); transition-delay:0.35s; }
.swiper-slide-active .vbs-word:nth-child(2)  .vbs-word-inner { transform:translateY(0); transition-delay:0.45s; }
.swiper-slide-active .vbs-word:nth-child(3)  .vbs-word-inner { transform:translateY(0); transition-delay:0.53s; }
.swiper-slide-active .vbs-word:nth-child(4)  .vbs-word-inner { transform:translateY(0); transition-delay:0.61s; }
.swiper-slide-active .vbs-word:nth-child(5)  .vbs-word-inner { transform:translateY(0); transition-delay:0.69s; }
.swiper-slide-active .vbs-word:nth-child(6)  .vbs-word-inner { transform:translateY(0); transition-delay:0.77s; }
.swiper-slide-active .vbs-word:nth-child(7)  .vbs-word-inner { transform:translateY(0); transition-delay:0.83s; }
.swiper-slide-active .vbs-word:nth-child(8)  .vbs-word-inner { transform:translateY(0); transition-delay:0.89s; }
.swiper-slide-active .vbs-word:nth-child(n+9).vbs-word-inner { transform:translateY(0); transition-delay:0.94s; }

/* ── Button ── */
.vbs-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Jost', sans-serif;
    font-size:   0.72rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--vbs-white);
    text-decoration: none;
    padding: 14px 28px;
    border: 1px solid rgba(255,255,255,0.45);
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s var(--vbs-ease) 0.85s,
                transform 0.7s var(--vbs-ease) 0.85s,
                border-color 0.35s ease,
                color 0.35s ease;
}
.swiper-slide-active .vbs-btn {
    opacity: 1;
    transform: translateY(0);
}

/* Fill sweep on hover */
.vbs-btn-fill {
    position: absolute;
    inset: 0;
    background: var(--vbs-accent);
    transform: translateX(-101%);
    transition: transform 0.45s var(--vbs-ease);
    z-index: 0;
}
.vbs-btn:hover .vbs-btn-fill { transform: translateX(0); }
.vbs-btn:hover { border-color: var(--vbs-accent); }
.vbs-btn-text, .vbs-btn-arrow { position: relative; z-index: 1; }

/* Arrow nudge on hover */
.vbs-btn-arrow {
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}
.vbs-btn:hover .vbs-btn-arrow { transform: translateX(4px); }

/* ── Right dot nav ── */
.vbs-nav {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
}

.vbs-nav-dot {
    position: relative;
    width:  32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.vbs-nav-dot:hover { transform: scale(1.1); }

.vbs-dot-ring {
    position: absolute;
    inset: 0;
    width:  100%;
    height: 100%;
    transform: rotate(-90deg);
}
.vbs-dot-bg   { stroke: rgba(255,255,255,0.18); }
.vbs-dot-prog {
    stroke: var(--vbs-accent);
    stroke-dasharray: 94.25;    /* 2π × 15 */
    stroke-dashoffset: 94.25;
    transition: stroke-dashoffset 0.4s var(--vbs-ease);
}
.vbs-nav-dot.active .vbs-dot-prog { stroke-dashoffset: 0; }

.vbs-dot-core {
    display: block;
    width:  5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
    transition: background 0.3s ease, transform 0.3s ease;
}
.vbs-nav-dot.active .vbs-dot-core {
    background: var(--vbs-white);
    transform: scale(1.3);
}

/* ── Arrows ── */
.vbs-arrow {
    position: absolute;
    right: 28px;
    z-index: 20;
    width:  44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.55);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    transition: color 0.3s, border-color 0.3s, transform 0.3s;
}
.vbs-arrow:hover {
    color: var(--vbs-white);
    border-color: rgba(255,255,255,0.6);
    transform: scale(1.05);
    background-color: #c8a96e;
}
.vbs-arrow-prev { bottom: 92px; }
.vbs-arrow-next { bottom: 40px; }

/* ── Counter ── */
.vbs-counter {
    position: absolute;
    right: var(--vbs-pad-x);
    bottom: var(--vbs-pad-y);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Jost', sans-serif;
    font-size:   0.7rem;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.55);
}
.vbs-sep {
    display: block;
    width:  22px;
    height: 1px;
    background: rgba(255,255,255,0.3);
}
.vbs-current {
    color: var(--vbs-white);
    font-weight: 400;
    transition: opacity 0.4s ease;
}

/* ── Scroll hint ── */
.vbs-scroll-hint {
    position: absolute;
    bottom: var(--vbs-pad-y);
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.vbs-scroll-label {
    font-family: 'Jost', sans-serif;
    font-size:   0.55rem;
    letter-spacing: 0.3em;
    color: rgba(255,255,255,0.35);
}
.vbs-scroll-line {
    width:  1px;
    height: 42px;
    background: rgba(255,255,255,0.15);
    position: relative;
    overflow: hidden;
}
.vbs-scroll-ball {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width:  1px;
    height: 10px;
    background: var(--vbs-accent);
    animation: vbs-scroll-drop 2s ease-in-out infinite;
}
@keyframes vbs-scroll-drop {
    0%   { top: -10px; opacity: 1; }
    80%  { top: 42px;  opacity: 0.4; }
    100% { top: 42px;  opacity: 0; }
}

/* ── Page transition wipe ── */
.vbs-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #0a0a0a;
    z-index: 5;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0s;
    pointer-events: none;
}

/* ── Mobile ── */
@media (max-width: 768px) {
    :root {
        --vbs-pad-x: 24px;
        --vbs-pad-y: 32px;
    }
    .vbs-nav,
    .vbs-arrow,
    .vbs-scroll-hint { display: none; }
    .vbs-counter { right: 24px; }
    .vbs-title { font-size: clamp(2.4rem, 10vw, 4rem); }
}