/* =====================================================
   🌌 TOSEE SAKHTEMAN — Brand Effects
   Shared reusable dark canvas + glass card
   (extracted from digital_catalog.html & brandeino)
===================================================== */

/* ========== DESIGN TOKENS ========== */
:root {
    --ts-navy:       #1b3050;
    --ts-navy-deep:  #0f1c2e;
    --ts-navy-abyss: #08111f;
    --ts-gold:       #cbaf5e;
    --ts-gold-dark:  #b8994a;
    --ts-gold-light: #e8c97a;
    --ts-gold-pale:  #f5e6b8;
    --ts-blue-glow:  #24406b;
    --ts-ease:       cubic-bezier(0.22, 1, 0.36, 1);
}

/* =====================================================
   LAYER 1 — .ts-canvas
   بک‌گراند تیره کاتالوگ برای سکشن‌های بزرگ
   ===================================================== */
.ts-canvas {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: radial-gradient(
        ellipse 120% 80% at 50% 0%,
        var(--ts-navy) 0%,
        var(--ts-navy-deep) 45%,
        var(--ts-navy-abyss) 100%
    );
}

/* گرید خطوط با mask رادیال */
.ts-canvas::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(ellipse 100% 60% at 50% 10%, #000 25%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 100% 60% at 50% 10%, #000 25%, transparent 85%);
}

/* ارب طلایی متحرک */
.ts-canvas::after {
    content: "";
    position: absolute;
    width: clamp(320px, 45vw, 620px);
    aspect-ratio: 1 / 1;
    top: -20%;
    right: -8%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(203, 175, 94, 0.55) 0%,
        rgba(203, 175, 94, 0.25) 35%,
        transparent 70%
    );
    filter: blur(80px);
    opacity: 0.75;
    pointer-events: none;
    z-index: 0;
    animation: ts-orb-gold 16s ease-in-out infinite;
}

/* ارب آبی + گرین — با یک child div، چون pseudoها اشغال شدن */
.ts-canvas__deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
}
.ts-canvas__deco::before {
    content: "";
    position: absolute;
    width: clamp(340px, 50vw, 680px);
    aspect-ratio: 1 / 1;
    bottom: -22%;
    left: -10%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(36, 64, 107, 0.7) 0%,
        rgba(36, 64, 107, 0.3) 40%,
        transparent 72%
    );
    filter: blur(90px);
    opacity: 0.7;
    animation: ts-orb-blue 18s ease-in-out infinite;
}
.ts-canvas__deco::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.03;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* محتوای داخل canvas بالاتر از لایه‌ها */
.ts-canvas > .container,
.ts-canvas > .ts-canvas__content {
    position: relative;
    z-index: 1;
}

@keyframes ts-orb-gold {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-22px, 22px) scale(1.06); }
}
@keyframes ts-orb-blue {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(28px, -18px) scale(1.1); }
}

/* =====================================================
   LAYER 2 — .ts-dark-card
   کارت تیره با بک‌گراند کاتالوگ (برای کارت‌های کوچیک)
   ===================================================== */
.ts-dark-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: radial-gradient(
        ellipse 120% 100% at 50% 0%,
        var(--ts-navy) 0%,
        var(--ts-navy-deep) 55%,
        var(--ts-navy-abyss) 100%
    );
    box-shadow:
        0 30px 60px -24px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(203, 175, 94, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: transform 0.4s var(--ts-ease),
                box-shadow 0.4s var(--ts-ease);
}
.ts-dark-card:hover {
    box-shadow:
        0 40px 80px -24px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(203, 175, 94, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ts-dark-card::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    top: -140px;
    right: -100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(203, 175, 94, 0.42), transparent 65%);
    filter: blur(70px);
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
    animation: ts-orb-gold 14s ease-in-out infinite;
}

.ts-dark-card::after {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    bottom: -150px;
    left: -120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(96, 119, 155, 0.55), transparent 65%);
    filter: blur(75px);
    opacity: 0.65;
    pointer-events: none;
    z-index: 0;
    animation: ts-orb-blue 16s ease-in-out infinite;
}

/* گرید خطوط کارتی */
.ts-dark-card__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.75;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 100% 80% at 50% 20%, #000 25%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 20%, #000 25%, transparent 85%);
    border-radius: inherit;
}

.ts-dark-card > *:not(.ts-dark-card__grid) {
    position: relative;
    z-index: 1;
}

/* =====================================================
   LAYER 3 — .ts-glass-card
   کارت شیشه‌ای (برای داخل canvas یا روی dark-card)
   ===================================================== */
.ts-glass-card {
    background: linear-gradient(
        160deg,
        rgba(255, 255, 255, 0.055),
        rgba(255, 255, 255, 0.015)
    );
    border: 1px solid rgba(203, 175, 94, 0.18);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow:
        0 30px 60px -24px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* خط طلایی محو بالای کارت */
.ts-glass-card--topline {
    position: relative;
}
.ts-glass-card--topline::before {
    content: "";
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ts-gold-pale), transparent);
}

/* =====================================================
   LAYER 4 — .ts-gold-btn
   دکمه طلایی استاندارد برند
   ===================================================== */
.ts-gold-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    border-radius: 100px;
    background: linear-gradient(135deg, var(--ts-gold-pale) 0%, var(--ts-gold-light) 40%, var(--ts-gold) 100%);
    color: var(--ts-navy);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    letter-spacing: -0.2px;
    box-shadow: 0 16px 32px -14px rgba(203, 175, 94, 0.7),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: all 0.35s var(--ts-ease);
    white-space: nowrap;
}
.ts-gold-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px -14px rgba(203, 175, 94, 0.85),
                inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* =====================================================
   RESPONSIVE + MOTION
   ===================================================== */
@media (max-width: 640px) {
    .ts-canvas::after,
    .ts-canvas__deco::before {
        width: 340px;
        height: 340px;
        filter: blur(80px);
    }
    .ts-dark-card::before,
    .ts-dark-card::after {
        width: 220px;
        height: 220px;
        filter: blur(55px);
    }
    .ts-dark-card__grid {
        background-size: 36px 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ts-canvas::after,
    .ts-canvas__deco::before,
    .ts-dark-card::before,
    .ts-dark-card::after {
        animation: none;
    }
}