/* ==========================================================================
   VC Animated Hero Banner — banner.css  v3.0
   Scroll-based GSAP animations + fully responsive layout
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Outfit:wght@700;800;900&display=swap');

/* ── Custom Properties ─────────────────────────────────────────────────────── */
.vcab-banner {
    --vcab-c1:            #020E36;
    --vcab-c2:            #0AA8FF;
    --vcab-c3:            #020E36;
    --vcab-h:             100vh;
    --vcab-heading-color: #ffffff;
    --vcab-sub-color:     rgba(255,255,255,0.60);
    --vcab-btn-text:      #ffffff;
    --vcab-btn-border:    rgba(255,255,255,0.45);
    --ease-expo:          cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring:        cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
.vcab-banner *, .vcab-banner *::before, .vcab-banner *::after {
    box-sizing: border-box; margin: 0; padding: 0;
}

/* ── Banner Shell ──────────────────────────────────────────────────────────── */
.vcab-banner {
    position:        relative;
    width:           100%;
    min-height:      var(--vcab-h);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    overflow:        hidden;          /* clips carousel edges for full-width look */
    font-family:     'Inter', sans-serif;
    padding:         100px 0 0;       /* no bottom pad — carousel sits flush */
}

/* ── Animated Gradient Background ─────────────────────────────────────────── */
.vcab-bg-gradient {
    position:        absolute;
    inset:           0;
    z-index:         0;
    background:      linear-gradient(
                         180deg,
                         #020E36               0%,
                         rgba(10,168,255,0.80) 51%,
                         #020E36               100%
                     );
    background-size: 100% 300%;
    animation:       vcabGrad 10s ease-in-out infinite;
}

@keyframes vcabGrad {
    0%   { background-position: 50% 0%;   }
    50%  { background-position: 50% 100%; }
    100% { background-position: 50% 0%;   }
}

/* ── Orbs ──────────────────────────────────────────────────────────────────── */
.vcab-orbs { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.vcab-orb {
    position:      absolute;
    border-radius: 50%;
    filter:        blur(100px);
    will-change:   transform;
}
.vcab-orb--1 {
    width: 700px; height: 700px;
    top: -20%; left: -15%;
    background: var(--vcab-c2);
    opacity: .25;
    animation: vcabOrb1 20s ease-in-out infinite;
}
.vcab-orb--2 {
    width: 550px; height: 550px;
    bottom: -25%; right: -12%;
    background: #1565c0;
    opacity: .18;
    animation: vcabOrb2 26s ease-in-out infinite;
}
.vcab-orb--3 {
    width: 400px; height: 400px;
    top: 35%; left: 45%;
    background: #5b21b6;
    opacity: .10;
    animation: vcabOrb1 32s ease-in-out infinite reverse;
}

@keyframes vcabOrb1 {
    0%,100% { transform: translate(0,0) scale(1);           }
    40%     { transform: translate(60px,-50px) scale(1.10); }
    70%     { transform: translate(-40px,30px) scale(0.95); }
}
@keyframes vcabOrb2 {
    0%,100% { transform: translate(0,0) scale(1);           }
    35%     { transform: translate(-50px,40px) scale(1.08); }
    70%     { transform: translate(35px,-25px) scale(0.93); }
}

/* ── Grid overlay — off ────────────────────────────────────────────────────── */
.vcab-grid-overlay { display: none; }

/* ══════════════════════════════════════════════════════════════════════════════
   HERO CONTENT
══════════════════════════════════════════════════════════════════════════════ */
.vcab-content {
    position:    relative;
    z-index:     10;
    text-align:  center;
    padding:     0 clamp(16px, 5vw, 40px);
    max-width:   920px;
    width:       100%;
}

/* ── Pre-title ─────────────────────────────────────────────────────────────── */
.vcab-pre-title {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    font-size:       clamp(0.62rem, 1.2vw, 0.75rem);
    font-weight:     500;
    letter-spacing:  0.22em;
    text-transform:  uppercase;
    color:           var(--vcab-sub-color);
    padding:         5px 18px;
    border:          1px solid rgba(255,255,255,0.14);
    border-radius:   100px;
    background:      rgba(255,255,255,0.05);
    backdrop-filter: blur(8px);
    margin-bottom:   clamp(18px, 3vw, 28px);
    /* Initial state — JS will animate in */
    opacity:         0;
    transform:       translateY(24px);
}

.vcab-pre-dot { display: none; }

/* ── Heading ───────────────────────────────────────────────────────────────── */
.vcab-heading {
    font-family:    'Outfit', 'Inter', sans-serif;
    font-size:      clamp(2rem, 5.5vw, 4.6rem);
    font-weight:    800;
    line-height:    1.08;
    letter-spacing: -0.025em;
    color:          var(--vcab-heading-color);
    margin-bottom:  clamp(24px, 4vw, 38px);
    /* Overflow hidden for line-mask reveal */
    overflow:       visible;   /* outer keeps it; inner clips */
}

/*
   Line-mask structure created by JS:
   <span class="vcab-line-outer">   ← overflow:hidden  (clip mask)
     <span class="vcab-line-inner"> ← translateY(100%) → 0
       line text
     </span>
   </span>
*/
.vcab-line-outer {
    display:     block;
    overflow:    hidden;
    line-height: 1.15;
    padding-bottom: 0.06em; /* prevent descender clip */
}

.vcab-line-inner {
    display: block;
    /* Initial state set by GSAP */
}

/* ── CTA Button ────────────────────────────────────────────────────────────── */
.vcab-btn {
    position:        relative;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    overflow:        hidden;
    padding:         clamp(10px,1.5vw,14px) clamp(24px,3vw,40px);
    border-radius:   6px;
    border:          1px solid var(--vcab-btn-border);
    background:      rgba(255,255,255,0.07);
    backdrop-filter: blur(10px);
    color:           var(--vcab-btn-text);
    font-family:     'Inter', sans-serif;
    font-size:       clamp(0.82rem, 1.4vw, 0.95rem);
    font-weight:     500;
    letter-spacing:  0.05em;
    text-decoration: none;
    cursor:          pointer;
    margin-bottom:   clamp(14px, 2vw, 24px);
    transition:      background .3s, border-color .3s,
                     transform .25s var(--ease-spring), box-shadow .3s;
    /* Initial state — GSAP will animate */
    opacity:         0;
    transform:       translateY(20px) scale(0.95);
}

.vcab-btn__shine {
    position:   absolute; top: 0; left: -120%;
    width:      55%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    transform:  skewX(-20deg);
    transition: left 0s;
}
.vcab-btn:hover .vcab-btn__shine { left: 180%; transition: left .55s ease; }
.vcab-btn:hover {
    background:   rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.80);
    transform:    translateY(-2px) scale(1) !important;
    box-shadow:   0 14px 44px rgba(0,130,220,.35);
}
.vcab-btn:active { transform: translateY(0) !important; }

/* ── Sub text ──────────────────────────────────────────────────────────────── */
.vcab-sub-text {
    font-size:      clamp(0.73rem, 1.3vw, 0.85rem);
    color:          var(--vcab-sub-color);
    letter-spacing: 0.01em;
    /* Initial state */
    opacity:        0;
    transform:      translateY(14px);
}

/* ══════════════════════════════════════════════════════════════════════════════
   COVERFLOW CAROUSEL  —  full-width fan, edges clipped by banner overflow:hidden
══════════════════════════════════════════════════════════════════════════════ */
.vcab-carousel-wrap {
    position:       relative;
    z-index:        10;
    width:          100%;
    margin-top:     clamp(32px, 5vw, 55px);
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            14px;
    overflow:       visible;
    /* Initial state for GSAP */
    opacity:        0;
    transform:      translateY(55px);
}

/* Perspective stage — flat layout, no 3D tilt */
.vcab-carousel {
    position:           relative;
    width:              100vw;
    left:               50%;
    transform:          translateX(-50%);
    height:             clamp(155px, 20vw, 290px);
    cursor:             grab;
    user-select:        none;
}
.vcab-carousel:active { cursor: grabbing; }

/* Every slide — absolutely positioned by JS */
.vcab-slide {
    position:         absolute;
    bottom:           0;
    border-radius:    10px;
    overflow:         hidden;
    cursor:           pointer;
    transform-origin: bottom center;
    will-change:      transform, opacity, width, height, left;
    transition:
        transform  .75s var(--ease-expo),
        opacity    .75s ease,
        width      .75s var(--ease-expo),
        height     .75s var(--ease-expo),
        box-shadow .75s ease,
        left       .75s var(--ease-expo);
    box-shadow: 0 12px 36px rgba(0,0,0,.55);
}

/* Dark vignette on inactive slides */
.vcab-slide::after {
    content:        '';
    position:       absolute;
    inset:          0;
    border-radius:  inherit;
    background:     rgba(0, 0, 15, 0.42);
    transition:     opacity .6s ease;
    pointer-events: none;
}
.vcab-slide--active::after { opacity: 0; }

.vcab-slide img {
    width:          100%;
    height:         100%;
    object-fit:     cover;
    display:        block;
    pointer-events: none;
    border-radius:  inherit;
    -moz-user-select: none;
}

/* ─── Slide positional classes ─────────────────────────────────────────────
   Sizes are scaled with vw so the fan always fills the full banner width.
   Offsets (in px) are set by JS getOffsets() per breakpoint.
───────────────────────────────────────────────────────────────────────────── */

/* Active / centre — largest, full brightness */
.vcab-slide--active {
    width:      clamp(230px, 30vw, 430px);
    height:     clamp(155px, 20vw, 290px);
    opacity:    1;
    transform:  translateX(-50%) scale(1);
    z-index:    10;
    box-shadow:
        0 0 0 2px rgba(255,255,255,.30),
        0 28px 80px rgba(0,0,0,.65),
        0 0  100px rgba(10,168,255,.22);
}

/* ±1 neighbours */
.vcab-slide--r1 {
    width:    clamp(155px, 20vw, 285px);
    height:   clamp(105px, 14vw, 195px);
    opacity:  .82;
    transform: translateX(-50%) scale(1);
    z-index:   8;
}
.vcab-slide--l1 {
    width:    clamp(155px, 20vw, 285px);
    height:   clamp(105px, 14vw, 195px);
    opacity:  .82;
    transform: translateX(-50%) scale(1);
    z-index:   8;
}

/* ±2 */
.vcab-slide--r2 {
    width:    clamp(108px, 14vw, 200px);
    height:   clamp( 73px,  9vw, 136px);
    opacity:  .58;
    transform: translateX(-50%) scale(1);
    z-index:   6;
}
.vcab-slide--l2 {
    width:    clamp(108px, 14vw, 200px);
    height:   clamp( 73px,  9vw, 136px);
    opacity:  .58;
    transform: translateX(-50%) scale(1);
    z-index:   6;
}

/* ±3 far edges */
.vcab-slide--r3 {
    width:    clamp( 72px,  9vw, 130px);
    height:   clamp( 49px,  6vw,  88px);
    opacity:  .35;
    transform: translateX(-50%) scale(1);
    z-index:   4;
}
.vcab-slide--l3 {
    width:    clamp( 72px,  9vw, 130px);
    height:   clamp( 49px,  6vw,  88px);
    opacity:  .35;
    transform: translateX(-50%) scale(1);
    z-index:   4;
}

/* Hidden — just beyond clipping boundary */
.vcab-slide--hidden {
    opacity:        0;
    width:          70px; height: 50px;
    transform:      translateX(-50%) rotateY(55deg) scale(.55);
    z-index:        1;
    pointer-events: none;
}

/* ── Dots ──────────────────────────────────────────────────────────────────── */
.vcab-dots {
    display:     flex;
    gap:         7px;
    align-items: center;
}
.vcab-dot {
    width:         7px; height: 7px;
    border-radius: 50%;
    background:    rgba(255,255,255,0.28);
    cursor:        pointer;
    border:        none; padding: 0;
    flex-shrink:   0;
    transition: background .3s, width .4s var(--ease-spring), border-radius .4s;
}
.vcab-dot--active {
    width:         26px;
    border-radius: 4px;
    background:    #38bdf8;
    box-shadow:    0 0 10px rgba(56,189,248,.55);
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════════════════ */

/* ── Tablet 768–1024px ── */
@media (max-width: 1024px) {
    .vcab-banner  { padding: 80px 0 0; }
    .vcab-content { max-width: 780px; }
    .vcab-carousel { height: clamp(105px, 14vw, 195px); }
}

/* ── Small Tablet 601–768px ── */
@media (max-width: 768px) {
    .vcab-banner   { padding: 70px 0 0; min-height: auto; }
    .vcab-content  { padding: 0 clamp(12px, 4vw, 24px); max-width: 100%; }
    .vcab-heading  { font-size: clamp(1.7rem, 6.5vw, 2.6rem); letter-spacing: -0.02em; margin-bottom: 20px; }
    .vcab-pre-title { font-size: 0.65rem; padding: 4px 14px; margin-bottom: 18px; }
    .vcab-btn      { padding: 10px 26px; font-size: 0.84rem; }
    .vcab-carousel-wrap { margin-top: 28px; gap: 10px; }
    .vcab-carousel { height: clamp(105px, 14vw, 155px); }
}

/* ── Mobile up to 600px ── */
@media (max-width: 600px) {
    .vcab-banner   { padding: 60px 0 0; }
    .vcab-heading  { font-size: clamp(1.5rem, 7.5vw, 2.2rem); line-height: 1.12; }
    .vcab-pre-title { font-size: 0.6rem; letter-spacing: 0.14em; padding: 4px 12px; }
    .vcab-sub-text { font-size: 0.72rem; }
    .vcab-btn      { padding: 9px 22px; font-size: 0.80rem; margin-bottom: 14px; }
    .vcab-carousel-wrap { margin-top: 22px; gap: 8px; }
    .vcab-carousel { height: clamp(105px, 14vw, 155px); }
}

/* ── Extra small up to 380px ── */
@media (max-width: 380px) {
    .vcab-heading  { font-size: clamp(1.3rem, 8.5vw, 1.8rem); }
    .vcab-carousel-wrap { margin-top: 18px; }
    .vcab-carousel { height: 120px; }
}