/* ============================================================
   CINEMATIC BANNER — Immersive rotating promotional display
   Architecture mirrors marketing-flash.css exactly:
   - Outer container = invisible positioning box (set by JS)
   - Inner .cb-ad    = the visible, styled ad element
   ============================================================ */

/* ── Outer positioning container (transparent, JS-sized) ───── */
.cinematic-banner-container {
    position: fixed;
    /* top, height, left, right ALL set by JS to match toggle btn */
    z-index: 5;
    pointer-events: none;
    will-change: transform;
    transform: translateZ(0);
    contain: layout style paint;
}

.cinematic-banner-container.hidden {
    display: none !important;
}

/* ── Inner ad element (fills the container) ────────────────── */
.cb-ad {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    pointer-events: all;
    /* Glassmorphism */
    background: rgba(12, 12, 20, 0.92);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ── Mesh-gradient backdrop ────────────────────────────────── */
.cb-ad__mesh {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.35;
    background:
        radial-gradient(ellipse 80% 150% at 5% 50%,  var(--cb-c1, #6366f1) 0%, transparent 60%),
        radial-gradient(ellipse 60% 120% at 95% 50%, var(--cb-c2, #ec4899) 0%, transparent 55%),
        radial-gradient(ellipse 50% 100% at 50% 50%, var(--cb-c3, #06b6d4) 0%, transparent 50%);
    animation: cb-mesh 12s ease-in-out infinite alternate;
}
@keyframes cb-mesh {
    0%   { transform: scale(1)    translate(0, 0);     opacity: 0.30; }
    50%  { transform: scale(1.08) translate(-3%, 2%);  opacity: 0.42; }
    100% { transform: scale(1.1)  translate(-1%, 3%);  opacity: 0.35; }
}

/* ── Shimmer sweep (same concept as flash-ad::before) ──────── */
.cb-ad__sweep {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    background-size: 200% 100%;
    animation: cb-shimmer 3.5s ease-in-out infinite;
}
@keyframes cb-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -100% 0; }
}

/* ── Tiny progress bar (top 1px edge) ──────────────────────── */
.cb-ad__progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--cb-c1, #6366f1), var(--cb-c2, #ec4899), var(--cb-c3, #06b6d4));
    z-index: 3;
    width: 0%;
}
.cb-ad__progress--running {
    animation: cb-prog var(--cb-dur, 8s) linear forwards;
}
@keyframes cb-prog {
    from { width: 0%; }
    to   { width: 100%; }
}

/* ── Edge glow line (top) ──────────────────────────────────── */
.cb-ad__glow {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--cb-c1,#6366f1) 20%, var(--cb-c2,#ec4899) 50%, var(--cb-c3,#06b6d4) 80%, transparent 100%);
    opacity: 0.45;
    z-index: 3;
    pointer-events: none;
}

/* ── Slide stage ───────────────────────────────────────────── */
.cb-ad__stage {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* ── Individual slide ──────────────────────────────────────── */
.cb-ad__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 4px 8px;
    gap: 4px;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}
.cb-ad__slide--active {
    opacity: 1;
    pointer-events: auto;
}

/* ── Transitions ───────────────────────────────────────────── */
.cb-ad__slide--enter-fade  { animation: cb-in-fade 0.6s cubic-bezier(0.16,1,0.3,1) forwards; }
.cb-ad__slide--enter-rise  { animation: cb-in-rise 0.6s cubic-bezier(0.16,1,0.3,1) forwards; }
.cb-ad__slide--enter-zoom  { animation: cb-in-zoom 0.7s cubic-bezier(0.16,1,0.3,1) forwards; }
.cb-ad__slide--exit-fade   { animation: cb-out-fade 0.4s ease-in forwards; }
.cb-ad__slide--exit-sink   { animation: cb-out-sink 0.4s ease-in forwards; }
.cb-ad__slide--exit-zoom   { animation: cb-out-zoom 0.4s ease-in forwards; }

@keyframes cb-in-fade  { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
@keyframes cb-out-fade { from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(-20px)} }
@keyframes cb-in-rise  { from{opacity:0;transform:translateY(100%)} to{opacity:1;transform:translateY(0)} }
@keyframes cb-out-sink { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(-80%)} }
@keyframes cb-in-zoom  { from{opacity:0;transform:scale(0.7);filter:blur(4px)} to{opacity:1;transform:scale(1);filter:blur(0)} }
@keyframes cb-out-zoom { from{opacity:1;transform:scale(1);filter:blur(0)} to{opacity:0;transform:scale(1.2);filter:blur(3px)} }

/* ── Slide content ─────────────────────────────────────────── */
.cb-ad__icon {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    font-size: 14px;
    line-height: 1;
    animation: cb-bounce 2s infinite;
}
.cb-ad__icon img { width: 16px; height: 16px; object-fit: contain; }
@keyframes cb-bounce {
    0%,20%,50%,80%,100% { transform: translateY(0); }
    40% { transform: translateY(-2px); }
    60% { transform: translateY(-1px); }
}

.cb-ad__text {
    flex: 1;
    min-width: 0;
    margin-right: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    gap: 1px;
}

.cb-ad__title {
    font-size: 11px;
    font-weight: 600;
    color: white;
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateY(3px);
}
.cb-ad__slide--active .cb-ad__title {
    animation: cb-reveal 0.4s 0.15s cubic-bezier(0.16,1,0.3,1) forwards;
}

.cb-ad__subtitle {
    font-size: 8px;
    color: rgba(255,255,255,0.85);
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateY(3px);
}
.cb-ad__slide--active .cb-ad__subtitle {
    animation: cb-reveal 0.4s 0.28s cubic-bezier(0.16,1,0.3,1) forwards;
}

@keyframes cb-reveal {
    from { opacity:0; transform:translateY(3px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ── CTA button ────────────────────────────────────────────── */
.cb-ad__cta {
    flex-shrink: 0;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    padding: 3px 6px;
    border-radius: 8px;
    font-size: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    white-space: nowrap;
    align-self: center;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(3px) scale(0.95);
}
.cb-ad__slide--active .cb-ad__cta {
    animation: cb-cta-in 0.4s 0.38s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes cb-cta-in {
    from { opacity:0; transform:translateY(3px) scale(0.95); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}
.cb-ad__cta:hover {
    background: rgba(255,255,255,0.3);
    transform: scale(1.05);
    box-shadow: 0 1px 4px rgba(255,255,255,0.2);
}
/* CTA shimmer */
.cb-ad__cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.2) 50%, transparent 65%);
    background-size: 250% 100%;
    animation: cb-cta-shim 3s 1s ease-in-out infinite;
}
@keyframes cb-cta-shim {
    0%   { background-position: 200% 0; }
    100% { background-position: -50% 0; }
}

/* ── Indicator dots ────────────────────────────────────────── */
.cb-ad__dots {
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 3px;
    z-index: 4;
    pointer-events: all;
}
.cb-ad__dot {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    transition: all 0.3s ease;
    cursor: pointer;
}
.cb-ad__dot--active {
    background: rgba(255,255,255,0.9);
    box-shadow: 0 0 3px rgba(255,255,255,0.4);
    transform: scale(1.3);
}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .cb-ad__mesh, .cb-ad__sweep, .cb-ad__cta::after, .cb-ad__icon { animation: none !important; }
    .cb-ad__slide--enter-fade,.cb-ad__slide--enter-rise,.cb-ad__slide--enter-zoom,
    .cb-ad__slide--exit-fade,.cb-ad__slide--exit-sink,.cb-ad__slide--exit-zoom {
        animation-duration: 0.01s !important;
    }
}

/* ── Small screens ─────────────────────────────────────────── */
@media (max-width: 380px) {
    .cb-ad__slide { padding: 3px 6px; gap: 3px; }
    .cb-ad__icon { width: 16px; font-size: 12px; }
    .cb-ad__title { font-size: 10px; }
    .cb-ad__subtitle { font-size: 7px; }
    .cb-ad__cta { padding: 2px 5px; font-size: 7px; }
}


/* ================================================================
   STYLE THEMES — Each ad gets a distinct visual personality
   ================================================================ */

/* ────────────────────────────────────────────────────────────────
   AURORA (Ad 1 — Travel App)
   Deep purple–indigo flowing aurora, soft glass CTA
   ──────────────────────────────────────────────────────────────── */
.cb-ad--aurora {
    background: rgba(15, 10, 35, 0.93);
}
.cb-ad--aurora .cb-ad__mesh {
    opacity: 0.4;
    background:
        radial-gradient(ellipse 90% 200% at 0% 50%,  #6366f1 0%, transparent 55%),
        radial-gradient(ellipse 70% 160% at 100% 30%, #a855f7 0%, transparent 50%),
        radial-gradient(ellipse 60% 140% at 50% 80%,  #818cf8 0%, transparent 50%);
    animation: cb-aurora 10s ease-in-out infinite alternate;
}
@keyframes cb-aurora {
    0%   { transform: translateX(0) scale(1);     opacity: 0.35; }
    33%  { transform: translateX(-4%) scale(1.06); opacity: 0.45; }
    66%  { transform: translateX(3%) scale(1.03);  opacity: 0.38; }
    100% { transform: translateX(-2%) scale(1.08); opacity: 0.42; }
}
.cb-ad--aurora .cb-ad__sweep {
    background: linear-gradient(105deg, transparent 30%, rgba(160,140,255,0.22) 50%, transparent 70%);
    background-size: 200% 100%;
}
.cb-ad--aurora .cb-ad__glow {
    background: linear-gradient(90deg, transparent 0%, #6366f1 30%, #a855f7 60%, #818cf8 80%, transparent 100%);
    opacity: 0.5;
}
/* Aurora CTA — frosted glass with subtle indigo glow */
.cb-ad__slide--aurora .cb-ad__cta {
    background: rgba(99,102,241,0.25);
    border: 1px solid rgba(168,85,247,0.4);
    box-shadow: 0 0 6px rgba(99,102,241,0.2), inset 0 0 4px rgba(129,140,248,0.1);
}
.cb-ad__slide--aurora .cb-ad__cta:hover {
    background: rgba(99,102,241,0.4);
    box-shadow: 0 0 10px rgba(99,102,241,0.35);
}
/* Aurora icon — gentle float */
.cb-ad__slide--aurora .cb-ad__icon {
    animation: cb-float 3s ease-in-out infinite;
}
@keyframes cb-float {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-2px); }
}
/* Aurora title — slight purple tint */
.cb-ad__slide--aurora .cb-ad__title {
    color: #e0ddff;
}
.cb-ad__slide--aurora .cb-ad__subtitle {
    color: rgba(200,195,255,0.8);
}

/* ────────────────────────────────────────────────────────────────
   GOLD (Ad 2 — Premium Tours)
   Warm amber-to-red diagonal gradient, premium metallic CTA
   ──────────────────────────────────────────────────────────────── */
.cb-ad--gold {
    background: rgba(25, 15, 8, 0.94);
}
.cb-ad--gold .cb-ad__mesh {
    opacity: 0.38;
    background:
        linear-gradient(135deg, rgba(245,158,11,0.6) 0%, transparent 45%),
        radial-gradient(ellipse 60% 130% at 85% 45%, rgba(239,68,68,0.5) 0%, transparent 55%),
        radial-gradient(ellipse 70% 100% at 30% 70%, rgba(236,72,153,0.35) 0%, transparent 55%);
    animation: cb-gold-shift 8s ease-in-out infinite alternate;
}
@keyframes cb-gold-shift {
    0%   { transform: scale(1)    rotate(0deg);   opacity: 0.35; }
    50%  { transform: scale(1.05) rotate(0.5deg); opacity: 0.45; }
    100% { transform: scale(1.02) rotate(-0.3deg); opacity: 0.38; }
}
/* Gold sweep — warm spotlight */
.cb-ad--gold .cb-ad__sweep {
    background: linear-gradient(90deg, transparent 20%, rgba(245,180,60,0.25) 48%, rgba(255,255,255,0.12) 52%, transparent 80%);
    background-size: 220% 100%;
    animation: cb-shimmer 4s ease-in-out infinite;
}
.cb-ad--gold .cb-ad__glow {
    background: linear-gradient(90deg, transparent 0%, #f59e0b 25%, #ef4444 55%, #ec4899 80%, transparent 100%);
    opacity: 0.55;
}
/* Gold CTA — premium metallic button */
.cb-ad__slide--gold .cb-ad__cta {
    background: linear-gradient(135deg, rgba(245,158,11,0.5) 0%, rgba(239,68,68,0.35) 100%);
    border: 1px solid rgba(245,180,80,0.5);
    color: #fff5e0;
    text-shadow: 0 0 4px rgba(245,158,11,0.3);
    box-shadow: 0 0 6px rgba(245,158,11,0.2);
}
.cb-ad__slide--gold .cb-ad__cta:hover {
    background: linear-gradient(135deg, rgba(245,158,11,0.65) 0%, rgba(239,68,68,0.5) 100%);
    box-shadow: 0 1px 8px rgba(245,158,11,0.4);
}
.cb-ad__slide--gold .cb-ad__cta::after {
    background: linear-gradient(105deg, transparent 30%, rgba(255,220,120,0.3) 50%, transparent 70%);
    background-size: 250% 100%;
}
/* Gold icon — sparkle pulse */
.cb-ad__slide--gold .cb-ad__icon {
    animation: cb-sparkle 2.5s ease-in-out infinite;
    filter: drop-shadow(0 0 2px rgba(245,158,11,0.5));
}
@keyframes cb-sparkle {
    0%,100% { transform: scale(1) rotate(0deg);   filter: drop-shadow(0 0 2px rgba(245,158,11,0.5)); }
    25%     { transform: scale(1.12) rotate(-5deg); filter: drop-shadow(0 0 4px rgba(245,158,11,0.7)); }
    50%     { transform: scale(1) rotate(0deg);    filter: drop-shadow(0 0 2px rgba(245,158,11,0.5)); }
    75%     { transform: scale(1.08) rotate(5deg);  filter: drop-shadow(0 0 3px rgba(245,180,60,0.6)); }
}
/* Gold title — warm tint */
.cb-ad__slide--gold .cb-ad__title {
    color: #fff5e0;
}
.cb-ad__slide--gold .cb-ad__subtitle {
    color: rgba(255,230,180,0.8);
}

/* ────────────────────────────────────────────────────────────────
   CYBER (Ad 3 — Local Guides)
   Cool cyan-green neon, outlined CTA with glow, scan line effect
   ──────────────────────────────────────────────────────────────── */
.cb-ad--cyber {
    background: rgba(5, 18, 22, 0.94);
}
.cb-ad--cyber .cb-ad__mesh {
    opacity: 0.35;
    background:
        radial-gradient(ellipse 80% 160% at 10% 50%,  rgba(6,182,212,0.6) 0%, transparent 55%),
        radial-gradient(ellipse 50% 130% at 90% 40%,  rgba(16,185,129,0.45) 0%, transparent 50%),
        radial-gradient(ellipse 90% 80%  at 50% 100%, rgba(34,211,238,0.25) 0%, transparent 50%);
    animation: cb-cyber-pulse 6s ease-in-out infinite alternate;
}
@keyframes cb-cyber-pulse {
    0%   { transform: scale(1) translateY(0);   opacity: 0.3; }
    50%  { transform: scale(1.04) translateY(-3%); opacity: 0.42; }
    100% { transform: scale(1.01) translateY(1%);  opacity: 0.34; }
}
/* Cyber sweep — fast sharp streak */
.cb-ad--cyber .cb-ad__sweep {
    background: linear-gradient(90deg, transparent 40%, rgba(6,182,212,0.3) 49%, rgba(34,211,238,0.15) 51%, transparent 60%);
    background-size: 250% 100%;
    animation: cb-cyber-streak 2.5s ease-in-out infinite;
}
@keyframes cb-cyber-streak {
    0%   { background-position: 250% 0; }
    100% { background-position: -100% 0; }
}
.cb-ad--cyber .cb-ad__glow {
    background: linear-gradient(90deg, transparent 0%, #06b6d4 20%, #10b981 55%, #22d3ee 85%, transparent 100%);
    opacity: 0.6;
    height: 1px;
    box-shadow: 0 0 4px rgba(6,182,212,0.3);
}
/* Cyber also gets a faint bottom glow line */
.cb-ad--cyber::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 5%, #06b6d4 30%, #10b981 70%, transparent 95%);
    opacity: 0.35;
    z-index: 3;
    pointer-events: none;
}
/* Cyber CTA — neon outline */
.cb-ad__slide--cyber .cb-ad__cta {
    background: transparent;
    border: 1px solid rgba(6,182,212,0.6);
    color: #7df3ff;
    text-shadow: 0 0 4px rgba(6,182,212,0.4);
    box-shadow: 0 0 4px rgba(6,182,212,0.15), inset 0 0 4px rgba(6,182,212,0.08);
}
.cb-ad__slide--cyber .cb-ad__cta:hover {
    background: rgba(6,182,212,0.15);
    box-shadow: 0 0 10px rgba(6,182,212,0.3), inset 0 0 6px rgba(6,182,212,0.1);
    border-color: rgba(34,211,238,0.7);
}
.cb-ad__slide--cyber .cb-ad__cta::after {
    background: linear-gradient(105deg, transparent 35%, rgba(6,182,212,0.25) 50%, transparent 65%);
    background-size: 250% 100%;
}
/* Cyber icon — glitch flicker */
.cb-ad__slide--cyber .cb-ad__icon {
    animation: cb-glitch 4s ease-in-out infinite;
}
@keyframes cb-glitch {
    0%,88%,92%,96%,100% { transform: translate(0,0); opacity: 1; }
    89%  { transform: translate(-1px, 0); opacity: 0.8; }
    91%  { transform: translate(1px, -1px); opacity: 0.9; }
    93%  { transform: translate(0, 1px); opacity: 0.85; }
    95%  { transform: translate(-1px, 0); opacity: 0.9; }
}
/* Cyber title — cyan tint */
.cb-ad__slide--cyber .cb-ad__title {
    color: #d0fffe;
}
.cb-ad__slide--cyber .cb-ad__subtitle {
    color: rgba(180,245,240,0.8);
}