/* ============================================================
   MagnetOti — AI showcase (before / after)
   Light like the rest of the page, but the one playful corner of it:
   a soft pastel aurora behind the same type and sharp geometry,
   plus a little sparkle.
   ============================================================ */

.ai-showcase-section {
    position: relative;
    overflow: hidden;
    padding: var(--sec-pad, 100px 0);
    text-align: center;
    color: var(--c-ink, #0d0d12);
    background:
        radial-gradient(760px 460px at 88% 4%,   rgba(186, 166, 255, 0.45) 0%, transparent 62%),
        radial-gradient(700px 440px at 6% 22%,   rgba(255, 199, 168, 0.42) 0%, transparent 60%),
        radial-gradient(820px 520px at 50% 108%, rgba(160, 214, 255, 0.45) 0%, transparent 62%),
        linear-gradient(180deg, #fbfaff 0%, #fffaf6 100%);
    border-top: 1px solid var(--c-border, #e8e8ed);
    border-bottom: 1px solid var(--c-border, #e8e8ed);
}

/* Faint dot grid over the aurora — texture, not decoration. */
.ai-showcase-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(13, 13, 18, 0.07) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
    pointer-events: none;
}

.ai-showcase-section .container { position: relative; z-index: 1; }

/* ── Header ── */
.ai-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid rgba(13, 13, 18, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
    color: var(--c-ink-2, #4b4b55);
    margin-bottom: 22px;
}

.ai-tag .ai-tag-star { color: #e0942a; animation: ai-twinkle 2.4s ease-in-out infinite; }

.ai-showcase-section .section-title { color: var(--c-ink, #0d0d12); }

.ai-showcase-section .section-title em {
    font-style: normal;
    font-weight: 500;
    background: linear-gradient(90deg, #e0942a 0%, #e5578b 50%, #5a7cff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ai-showcase-section .section-subtitle {
    color: var(--c-ink-2, #4b4b55);
    margin-inline: auto;
    margin-bottom: 48px;
}

/* ── Gallery: portrait + landscape at the same height ── */
.ba-gallery {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    justify-content: center;
}

.ba { margin: 0; min-width: 0; }
.ba--portrait  { flex: 0.6667 1 0; }
.ba--landscape { flex: 1.5 1 0; }

.ba-frame {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    cursor: ew-resize;
    touch-action: pan-y;          /* vertical scroll still works on phones */
    user-select: none;
    -webkit-user-select: none;
    box-shadow: 0 24px 60px rgba(40, 30, 90, 0.18), 0 2px 8px rgba(13, 13, 18, 0.08);
    --pos: 50%;
}

.ba--portrait  .ba-frame { aspect-ratio: 933 / 1400; }
.ba--landscape .ba-frame { aspect-ratio: 1400 / 933; }

.ba-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* "Before" sits on top and shows to the RIGHT of the handle — Hebrew reads
   right to left, so the story goes before → after. */
.ba-before { clip-path: inset(0 0 0 var(--pos)); }

/* ── Handle ── */
.ba-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos);
    width: 2px;
    margin-left: -1px;
    background: #fff;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
    outline: none;
}

.ba-knob {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    border-radius: 50%;
    background: #fff;
    color: var(--c-ink, #0d0d12);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease;
}

.ba-knob svg { width: 22px; height: 22px; }

/* Until the visitor touches it, the knob gently pulses: "drag me". */
.ba:not(.ba--touched) .ba-knob::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.7);
    animation: ai-pulse 1.8s ease-out infinite;
}

.ba-frame:hover .ba-knob,
.ba-handle:focus-visible .ba-knob { transform: scale(1.08); }
.ba--dragging .ba-knob { transform: scale(0.94); }
.ba-handle:focus-visible .ba-knob { box-shadow: 0 0 0 4px rgba(158, 197, 255, 0.6), 0 8px 24px rgba(0, 0, 0, 0.35); }

/* ── Labels ── */
.ba-label {
    position: absolute;
    top: 14px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #fff;
    background: rgba(13, 13, 18, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.ba-label--before { right: 14px; }
.ba-label--after  { left: 14px; }

.ba figcaption {
    margin-top: 14px;
    font-size: 14px;
    font-weight: 300;
    color: var(--c-ink-2, #4b4b55);
}

.ba figcaption strong { font-weight: 500; color: var(--c-ink, #0d0d12); }
.ba figcaption .ba-arrow { display: inline-block; margin: 0 6px; color: #e0942a; }

/* ── Style chips ── */
.ai-styles {
    list-style: none;
    margin: 52px auto 0;
    padding: 0;
    max-width: 760px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.ai-styles li {
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 300;
    color: var(--c-ink, #0d0d12);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--c-border, #e8e8ed);
    box-shadow: 0 2px 6px rgba(40, 30, 90, 0.05);
    transition: transform 0.25s cubic-bezier(.34, 1.56, .64, 1), background 0.2s ease;
}

.ai-styles li:hover { transform: translateY(-3px) rotate(-2deg); background: #fff; }
.ai-styles li:nth-child(even):hover { transform: translateY(-3px) rotate(2deg); }
.ai-styles li.ai-styles-more { border-style: dashed; border-color: rgba(224, 148, 42, 0.5); color: #b8731a; }

/* ── CTA ── */
.ai-cta { margin-top: 44px; display: flex; flex-direction: column; align-items: center; gap: 12px; }

.ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 34px;
    border-radius: var(--radius-sm, 2px);
    background: var(--c-accent, #1a1a2e);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ai-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(90, 124, 255, 0.28); color: #fff; }
.ai-btn span { color: #ffd27a; }
.ai-note { font-size: 13px; font-weight: 300; color: var(--c-ink-3, #9a9aaa); }

/* ── Sparkles ── */
.ai-sparkles { position: absolute; inset: 0; pointer-events: none; }

.ai-sparkles span {
    position: absolute;
    color: #b9a6ff;
    opacity: 0;
    animation: ai-twinkle 3.6s ease-in-out infinite;
}

.ai-sparkles span:nth-child(1) { top: 12%; right: 8%;  font-size: 14px; animation-delay: 0s; }
.ai-sparkles span:nth-child(2) { top: 22%; left: 10%;  font-size: 10px; animation-delay: 0.9s; color: #e0942a; }
.ai-sparkles span:nth-child(3) { top: 58%; right: 4%;  font-size: 12px; animation-delay: 1.6s; color: #5a7cff; }
.ai-sparkles span:nth-child(4) { top: 78%; left: 6%;   font-size: 16px; animation-delay: 2.3s; }
.ai-sparkles span:nth-child(5) { top: 8%;  left: 42%;  font-size: 9px;  animation-delay: 2.9s; color: #e5578b; }
.ai-sparkles span:nth-child(6) { top: 90%; right: 30%; font-size: 11px; animation-delay: 1.2s; color: #e0942a; }

@keyframes ai-twinkle {
    0%, 100% { opacity: 0;   transform: scale(0.6) rotate(0deg); }
    50%      { opacity: 0.9; transform: scale(1.1) rotate(20deg); }
}

@keyframes ai-pulse {
    0%   { transform: scale(1);   opacity: 0.9; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* ── Responsive ── */
@media (max-width: 820px) {
    .ba-gallery { flex-direction: column; align-items: stretch; gap: 36px; }
    .ba--portrait { max-width: 420px; width: 100%; margin-inline: auto; }
    .ba--portrait, .ba--landscape { flex: none; }
    .ai-styles li { font-size: 13px; padding: 7px 13px; }
}

@media (max-width: 600px) {
    .ai-showcase-section .container { padding: 0 20px; }
    .ba-knob { width: 42px; height: 42px; margin: -21px 0 0 -21px; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-sparkles span, .ai-tag .ai-tag-star, .ba-knob::after { animation: none !important; }
    .ai-styles li { transition: none; }
}