/* ============================================================
   LAUNCHOUSE — SERVICES WALLET CARDS
   File location on site: css/services-wallet.css
   Theme: black page bg, white text, accent #4318ff
   Fonts: Fredoka (headings) + Nunito (buttons) — same as theme.css
   ============================================================ */

body {
  background: var(--black, #000);
  margin: 0;
}

.lh-services-wallet {
  background: var(--black, #000);
  padding: 60px 20px 100px;
}

.lh-sw-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
}

/* ---------------- WALLET (outer card) ---------------- */
.lh-wallet {
  position: relative;
  height: 340px;
  border-radius: 24px;
  background: linear-gradient(160deg, #131313 0%, #0a0a0a 60%, #101014 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease,
              box-shadow 0.45s ease;
}

.lh-wallet:hover,
.lh-wallet.lh-active {
  transform: translateY(-6px);
  border-color: rgba(67, 24, 255, 0.55);
  box-shadow: 0 24px 60px -18px rgba(67, 24, 255, 0.45),
              0 8px 24px rgba(0, 0, 0, 0.6);
}

/* leather stitching around the wallet */
.lh-wallet::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1.5px dashed rgba(255, 255, 255, 0.13);
  border-radius: 17px;
  pointer-events: none;
  z-index: 1;
}

/* soft ambient light inside the wallet */
.lh-wallet::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 115%, rgba(255, 255, 255, 0.07), transparent 60%);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 0;
  pointer-events: none;
}

.lh-wallet:hover::before,
.lh-wallet.lh-active::before {
  opacity: 1;
}

/* ---------------- HEAD: title + View Details ---------------- */
.lh-wallet-head {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 22px 0;
}

/* animated service icon (top-left, keeps popping) */
.lh-wallet-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

 

  

/* service title — sits ON the wallet pocket (front face) */
.lh-wallet-title {
  margin: 0;
  position: relative;
  z-index: 2;
  font-family: var(--font-heading, "Fredoka", sans-serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white, #fff);
  line-height: 1.3;
  text-align: center;
  padding: 0 24px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* creative CTA — white pill that inverts + arrow slides on hover */
.lh-view-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--white, #fff);
  color: #000;
  font-family: var(--font-btn, "Nunito", sans-serif);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  border: 1px solid var(--white, #fff);
  transition: background 0.35s ease, color 0.35s ease,
              box-shadow 0.35s ease, transform 0.35s ease;
}

.lh-arrow {
  width: 14px;
  height: 14px;
  display: inline-block;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7"/><path d="M8 7h9v9"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7"/><path d="M8 7h9v9"/></svg>') center / contain no-repeat;
  transition: transform 0.35s ease;
}

.lh-view-btn:hover {
  background: #000;
  border-color: var(--white, #fff);
  color: var(--white, #fff);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
  transform: translateY(-2px);
}

.lh-view-btn:hover .lh-arrow {
  transform: translate(2px, -2px);
}

/* ---------------- MINI CARDS (the 3 cards in the wallet) ---------------- */
.lh-cards {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.lh-mini {
  overflow: hidden;
  position: absolute;
  left: 50%;
  bottom: 34px; /* tucked so only the top edge peeks above the pocket */
  width: 168px;
  height: 104px;
  border-radius: 14px;
  padding: 12px 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  transition: transform 0.55s cubic-bezier(0.34, 1.45, 0.5, 1);
  will-change: transform;
}

.lh-mini p {
  margin: 0;
  font-family: var(--font-btn, "Nunito", sans-serif);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--white, #fff);
  text-transform: capitalize;
}

/* contactless (tap-to-pay) waves icon — like on a real card */
.lh-tap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.lh-tap i {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.78);
  transform: rotate(90deg);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* three cards — dark matte with patterns + one white premium card */

/* card 1: matte black, diagonal pinstripes */
.lh-mini-left {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.055) 0 2px, transparent 2px 11px),
    linear-gradient(135deg, #232327 0%, #131315 100%);
  transform: translateX(-50%) translateY(0) rotate(-4deg);
  z-index: 1;
}

/* card 2: dark graphite, dot-matrix pattern + soft sheen */
.lh-mini-mid {
  background:
    radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1.5px) 0 0 / 13px 13px,
    radial-gradient(120% 120% at 0% 0%, rgba(255, 255, 255, 0.08), transparent 55%),
    linear-gradient(135deg, #2b2b33 0%, #17171d 100%);
  transform: translateX(-50%) translateY(-14px) rotate(0deg);
  z-index: 2;
}

/* card 3: WHITE premium card, fine wave rings pattern, dark text */
.lh-mini-right {
  background:
    repeating-radial-gradient(circle at 115% -25%, rgba(0, 0, 0, 0.05) 0 1.5px, transparent 1.5px 13px),
    linear-gradient(135deg, #ffffff 0%, #e8e8ee 100%);
  border-color: rgba(0, 0, 0, 0.15);
  transform: translateX(-50%) translateY(-6px) rotate(4deg);
  z-index: 3;
}

.lh-mini-right p {
  color: #111;
}

/* dark waves on the white card */
.lh-mini-right .lh-tap i {
  color: rgba(0, 0, 0, 0.65);
  text-shadow: none;
}

/* shine sweep layer on every mini card */
.lh-mini::after {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 0;
  width: 55%;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.28) 50%, transparent 80%);
  transform: translateX(-160%) skewX(-18deg);
  pointer-events: none;
}

.lh-mini-right::after {
  background: linear-gradient(105deg, transparent 20%, rgba(67, 24, 255, 0.14) 50%, transparent 80%);
}

/* creative color animation while the wallet is open */
.lh-wallet:hover .lh-mini::after,
.lh-wallet.lh-active .lh-mini::after {
  animation: lhShine 1.9s ease-in-out infinite;
}

.lh-wallet:hover .lh-mini,
.lh-wallet.lh-active .lh-mini {
  animation: lhCardGlow 2.4s ease-in-out infinite;
}

.lh-wallet:hover .lh-mini-mid,
.lh-wallet.lh-active .lh-mini-mid {
  animation-delay: 0.3s;
}

.lh-wallet:hover .lh-mini-right,
.lh-wallet.lh-active .lh-mini-right {
  animation-delay: 0.6s;
}

@keyframes lhShine {
  0% { transform: translateX(-160%) skewX(-18deg); }
  60%, 100% { transform: translateX(320%) skewX(-18deg); }
}

@keyframes lhCardGlow {
  0%, 100% {
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  }
  50% {
    border-color: rgba(67, 24, 255, 0.65);
    box-shadow: 0 14px 34px rgba(67, 24, 255, 0.35);
  }
}

/* ---- HOVER: cards pop out of the wallet and fan (exact video move) ---- */
.lh-wallet:hover .lh-mini-left,
.lh-wallet.lh-active .lh-mini-left {
  transform: translateX(-50%) translate(-72px, -118px) rotate(-16deg);
  transition-delay: 0s;
}

.lh-wallet:hover .lh-mini-mid,
.lh-wallet.lh-active .lh-mini-mid {
  transform: translateX(-50%) translate(0, -142px) rotate(0deg);
  transition-delay: 0.05s;
}

.lh-wallet:hover .lh-mini-right,
.lh-wallet.lh-active .lh-mini-right {
  transform: translateX(-50%) translate(72px, -118px) rotate(16deg);
  transition-delay: 0.1s;
}

/* ---------------- POCKET (front slot of the wallet) ---------------- */
.lh-pocket {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 118px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 26px 26px 24px 24px;
  background:
    radial-gradient(140% 100% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 55%),
    linear-gradient(180deg, #1d1d21 0%, #0e0e11 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 -14px 28px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  overflow: hidden;
}

/* stitching inside the pocket (wallet seam) */
.lh-pocket::after {
  content: "";
  position: absolute;
  inset: 10px 10px 10px 10px;
  border: 1.5px dashed rgba(255, 255, 255, 0.16);
  border-radius: 14px 14px 16px 16px;
  pointer-events: none;
}

/* soft white seam highlight on the pocket lip */
.lh-pocket-glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  opacity: 0.5;
  transition: opacity 0.4s ease;
}

.lh-wallet:hover .lh-pocket-glow,
.lh-wallet.lh-active .lh-pocket-glow {
  opacity: 1;
}

/* ---------------- ENTRY REVEAL (staggered, via JS) ---------------- */
.lh-wallet {
  opacity: 0;
  translate: 0 26px;
}

.lh-wallet.lh-in {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.6s ease, translate 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease, box-shadow 0.45s ease;
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 1024px) {
  .lh-sw-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 380px) {
  .lh-wallet {
    height: 300px;
  }

  .lh-mini {
    width: 136px;
    height: 88px;
  }

  .lh-wallet:hover .lh-mini-left,
  .lh-wallet.lh-active .lh-mini-left {
    transform: translateX(-50%) translate(-50px, -100px) rotate(-16deg);
  }

  .lh-wallet:hover .lh-mini-mid,
  .lh-wallet.lh-active .lh-mini-mid {
    transform: translateX(-50%) translate(0, -120px) rotate(0deg);
  }

  .lh-wallet:hover .lh-mini-right,
  .lh-wallet.lh-active .lh-mini-right {
    transform: translateX(-50%) translate(50px, -100px) rotate(16deg);
  }
}

@media (max-width: 640px) {
  .lh-sw-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .lh-wallet {
    height: 320px;
  }

  .lh-wallet-title {
    font-size: 16px;
    padding: 0 16px;
  }

  .lh-wallet-icon {
    width: 42px;
    height: 42px;
  }

    

  .lh-tap i {
    font-size: 13px;
  }

  .lh-mini {
    width: 150px;
    height: 94px;
  }

  .lh-wallet:hover .lh-mini-left,
  .lh-wallet.lh-active .lh-mini-left {
    transform: translateX(-50%) translate(-58px, -108px) rotate(-16deg);
  }

  .lh-wallet:hover .lh-mini-mid,
  .lh-wallet.lh-active .lh-mini-mid {
    transform: translateX(-50%) translate(0, -130px) rotate(0deg);
  }

  .lh-wallet:hover .lh-mini-right,
  .lh-wallet.lh-active .lh-mini-right {
    transform: translateX(-50%) translate(58px, -108px) rotate(16deg);
  }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lh-wallet,
  .lh-mini,
  .lh-view-btn,
  .lh-arrow {
    transition: none !important;
  }

  .lh-wallet-icon,
  .lh-mini,
  .lh-mini::after {
    animation: none !important;
  }

  .lh-wallet {
    opacity: 1;
    translate: 0 0;
  }
}