/* =====================================================
   VIP PRODUCT CATEGORY TITLE
   Production-ready / Drop-in Replace
===================================================== */

/* ---------- ROOT ---------- */
:root{
  --vip-card-width: 340px;
  --vip-blue: #0b2a55;
  --vip-blue-accent: #2a74ff;
  --vip-gold: #c9a24d;
}

/* ---------- TITLE WRAP ---------- */
.vip-title-wrap{
  max-width: var(--vip-card-width);
}

/* =====================================================
   BASE TITLE
===================================================== */
.vip-group-title{
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;

  width: 100%;
  padding: 12px 0 14px;

  text-transform: uppercase;
  opacity: 0;
  transform: translateY(24px);

  transition:
    opacity .6s ease,
    transform .6s ease;
}

.vip-group-title{
  margin-bottom: 20px;
}

/* ICON */
.vip-group-icon{
  width: 1.45em;
  height: auto;
  flex-shrink: 0;
}

/* =====================================================
   MODERN TECH
===================================================== */
.vip-group-title.modern-tech{
  font-size: clamp(1.4rem, 1.6vw, 1.6rem);
  font-weight: 700;
  letter-spacing: .6px;
  color: var(--vip-blue);
}

.vip-group-title.modern-tech .vip-group-icon{
  filter: drop-shadow(0 2px 4px rgba(11,42,85,.25));
}

/* LEFT BAR */
.vip-group-title.modern-tech::before{
  content:"";
  position:absolute;
  left:-18px;
  top:50%;
  transform:translateY(-50%);

  width:5px;
  height:65%;
  border-radius:4px;

  background:linear-gradient(
    to bottom,
    var(--vip-blue),
    var(--vip-blue-accent)
  );
}

/* BOTTOM LINE = CARD WIDTH */
.vip-group-title.modern-tech::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;

  width:100%;
  height:2px;

  background:linear-gradient(
    to right,
    rgba(11,42,85,.6),
    rgba(11,42,85,.15),
    transparent
  );

  transform:scaleX(0);
  transform-origin:left;
  transition:transform .8s ease .3s;
}

/* =====================================================
   ULTRA LUXURY
===================================================== */
.vip-group-title.ultra-luxury{
  font-size: clamp(1.45rem, 1.7vw, 1.7rem);
  font-weight: 600;
  letter-spacing: 1px;
  color: #1a1a1a;
}

.vip-group-title.ultra-luxury .vip-group-icon{
  width: 1.5em;
  filter: drop-shadow(0 3px 8px rgba(180,150,80,.45));
}

.vip-group-title.ultra-luxury::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;

  width:100%;
  height:2px;

  background:linear-gradient(
    to right,
    var(--vip-gold),
    rgba(201,162,77,.35),
    transparent
  );

  transform:scaleX(0);
  transform-origin:left;
  transition:transform .9s ease .35s;
}

/* =====================================================
   SCROLL ACTIVE
===================================================== */
.vip-group-title.is-visible{
  opacity:1;
  transform:translateY(0);
}

.vip-group-title.is-visible::after{
  transform:scaleX(1);
}

.vip-product-group{
  padding-inline: clamp(24px, 4vw, 64px);
}