/* design-ads.css — Compact rotating banner ad system for launch-pure homepage
   Replaces large bento tiles with feed-style ad cards. */

body.launch-pure{ background: var(--bg-dark); color: var(--text-light); }

.ads-c{ max-width: 1380px; margin: 0 auto; padding: 0 clamp(16px,3vw,40px); }

/* ─── ROTATING PRIVILEGE CARDS HERO ─────────────────────── */
.cards-hero{
  padding: clamp(28px,4vh,52px) 0 clamp(20px,3vh,32px);
  background:
    radial-gradient(ellipse at 50% 30%, rgba(198,161,91,.10) 0%, transparent 55%),
    var(--bg-dark);
}
.cards-hero-stage{
  position: relative;
  height: clamp(220px, 32vw, 360px);
  max-width: 560px;
  margin: 0 auto;
  perspective: 1000px;
}
.cards-hero-slot{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(20px) scale(.95);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.cards-hero-slot.is-on{
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: auto;
}
.cards-hero-slot .credit-card{
  max-width: 460px;
}
.cards-hero-dots{
  display: flex; gap: 8px; justify-content: center;
  margin-top: 22px;
}
.cards-hero-dot{
  width: 28px; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 0; padding: 0; cursor: pointer;
  transition: background .25s, width .25s;
}
.cards-hero-dot.is-on{
  background: var(--gold);
  width: 44px;
}
.cards-hero-dot:hover{ background: rgba(198,161,91,.5); }
.cards-hero-label{
  text-align: center;
  font: 600 10px/1 Georgia; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 18px;
}
.cards-hero-label::before, .cards-hero-label::after{
  content: ""; display: inline-block; vertical-align: middle;
  width: 30px; height: 1px; background: var(--gold); margin: 0 12px;
}

@media (max-width: 540px){
  .cards-hero-stage{ height: 230px; }
  .cards-hero-slot .credit-card{ max-width: 340px; }
}

/* ─── COMPACT AD GRID ─────────────────────────────────────── */
.ads-section{ padding: clamp(20px,3vh,32px) 0 clamp(28px,4vh,48px); }
.ads-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
@media (max-width: 1280px){ .ads-grid{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 960px){  .ads-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px){  .ads-grid{ grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* ─── AD CARD ─────────────────────────────────────────────── */
.ad{
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(198,161,91,.22);
  text-decoration: none; color: #fff;
  isolation: isolate;
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, border-color .25s;
  background: #1a1a1a;
}
.ad:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,.6);
  border-color: rgba(198,161,91,.5);
}

/* Rotating frame stack */
.ad-frames{ position: absolute; inset: 0; z-index: 0; }
.ad-frame{
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity 1s ease;
}
.ad-frame.is-on{ opacity: 1; }

/* Permanent gradient overlay */
.ad::after{
  content:""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11,11,10,.15) 0%, rgba(11,11,10,.10) 35%, rgba(11,11,10,.88) 88%);
  pointer-events: none;
}

/* Top tag (category) */
.ad-tag{
  position: absolute; top: 10px; left: 10px; z-index: 3;
  font: 600 9px/1 Georgia; letter-spacing: .18em; text-transform: uppercase;
  background: rgba(0,0,0,.55); color: var(--gold);
  padding: 6px 9px; border-radius: 999px;
  border: 1px solid rgba(198,161,91,.32);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* Push notification badge */
.ad-push{
  position: absolute; top: 10px; right: 10px; z-index: 3;
  font: 700 9px/1 Georgia; letter-spacing: .16em; text-transform: uppercase;
  padding: 6px 9px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ad-push::before{
  content:""; width: 5px; height: 5px; border-radius: 50%;
  animation: adPulse 1.4s ease-in-out infinite;
}
.ad-push--free { background: rgba(37,211,102,.22);  color: #25D366;  border: 1px solid rgba(37,211,102,.42); }
.ad-push--free::before { background: #25D366; box-shadow: 0 0 10px #25D366; }
.ad-push--hot  { background: rgba(255,159,10,.22);  color: #ffb04d;  border: 1px solid rgba(255,159,10,.42); }
.ad-push--hot::before  { background: #ff9f0a; box-shadow: 0 0 10px #ff9f0a; }
.ad-push--new  { background: rgba(255,69,58,.22);   color: #ff8a82;  border: 1px solid rgba(255,69,58,.42); }
.ad-push--new::before  { background: #ff453a; box-shadow: 0 0 10px #ff453a; }
.ad-push--gold { background: rgba(198,161,91,.24);  color: var(--gold); border: 1px solid var(--border-gold); }
.ad-push--gold::before { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.ad-push--sale { background: rgba(255,69,58,.92);   color: #fff;     border: 1px solid #ff453a; font-weight: 800; }
.ad-push--sale::before { background: #fff; }
@keyframes adPulse{
  0%,100%{ opacity: 1; transform: scale(1); }
  50%    { opacity: .5; transform: scale(1.4); }
}

/* Meta block (bottom) */
.ad-meta{
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 12px 14px 14px;
}
.ad-title{
  font: 500 16px/1.2 Georgia,Georgia,serif;
  margin: 0 0 4px; color: #fff; letter-spacing: -.005em;
}
.ad-title .it{ font-style: italic; color: var(--gold-soft); }
.ad-sub{
  font: 400 11px/1.4 Georgia; color: rgba(255,255,255,.78); margin: 0;
}
.ad-cta{
  margin-top: 8px;
  font: 600 9px/1 Georgia; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); display: inline-flex; align-items: center; gap: 4px;
}
.ad-cta::after{ content: "→"; transition: transform .2s; }
.ad:hover .ad-cta::after{ transform: translateX(3px); }

/* Variants — gold card / contact card / cards-promo */
.ad-gold{
  background: linear-gradient(135deg, #2a2018 0%, #14110d 100%);
  border-color: rgba(198,161,91,.45);
}
.ad-gold::after{
  background: linear-gradient(180deg, rgba(198,161,91,.06) 0%, transparent 30%, rgba(11,11,10,.94) 100%);
}
.ad-gold .ad-title{ color: #fff; }
.ad-gold .ad-cta{ color: var(--gold-soft); }

.ad-wa{
  background: linear-gradient(135deg, #0d2916 0%, #061a0b 100%);
  border-color: rgba(37,211,102,.42);
}
.ad-wa::after{
  background: linear-gradient(180deg, rgba(37,211,102,.06) 0%, transparent 30%, rgba(6,26,11,.94) 100%);
}
.ad-wa .ad-cta{ color: #25D366; }

.ad-cards{
  background: linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 60%, #A8862A 100%);
  border-color: var(--gold);
  color: #1a1612;
}
.ad-cards::after{
  background: linear-gradient(180deg, transparent 0%, rgba(26,22,18,.18) 100%);
}
.ad-cards .ad-tag{ background: rgba(26,22,18,.32); color: #1a1612; border-color: rgba(26,22,18,.32); }
.ad-cards .ad-title{ color: #1a1612; }
.ad-cards .ad-sub  { color: rgba(26,22,18,.72); }
.ad-cards .ad-cta  { color: #1a1612; }

/* Inline icon (for icon-driven cards) */
.ad-icon{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -68%); z-index: 2;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: rgba(198,161,91,.18); color: var(--gold);
  border: 1px solid rgba(198,161,91,.32);
}
.ad-icon svg{ width: 22px; height: 22px; }
.ad-wa .ad-icon{ background: rgba(37,211,102,.18); color: #25D366; border-color: rgba(37,211,102,.32); }
.ad-cards .ad-icon{ background: rgba(26,22,18,.18); color: #1a1612; border-color: rgba(26,22,18,.32); }

/* Hide tag if push is on the same horizontal line (small cards) */
@media (max-width: 380px){ .ad-tag{ display: none; } }