/* ════════════════════════════════════════════════════════════════════
   portfolio-showcase.css — Premium Animated Showcase Section
   Provides responsive grid, micro-animations, slide transitions,
   SVG dashboards, and complete bilingual RTL layout support.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Self-contained token bridge ───────────────────────────────────────
   The showcase originally lived on /Portfolio, which loads news-public.css +
   portfolio.css to provide --surface, --ink, --muted, --line, --teal etc.
   Now that it also renders on the Home page (which has a different token
   scheme), we declare all required tokens directly here so the file works
   on any page, regardless of which parent stylesheets are present.
   Values are intentionally identical to those in news-public.css so there
   is no conflict when both files load on the same page.
   ────────────────────────────────────────────────────────────────────── */
:root {
    /* Shared surface / ink / border tokens */
    --surface:       #ffffff;
    --surface-soft:  #f8fafc;
    --ink:           #0f172a;
    --muted:         #5b6677;
    --line:          rgba(148, 163, 184, 0.18);
    /* Teal brand palette */
    --teal:          #14b8a6;
    --teal-dark:     #0f766e;
    --teal-soft:     #ecfbf7;
    /* Typography */
    --pf-mono:       'IBM Plex Mono', ui-monospace, monospace;
    /* Status colours */
    --pf-green:      #22c55e;
    --pf-green-soft: rgba(34, 197, 94, 0.12);
    --pf-red:        #ef4444;
    --pf-red-soft:   rgba(239, 68, 68, 0.12);
    --pf-amber:      rgba(245, 158, 11, 0.90);
    /* Showcase-specific tokens */
    --pf-showcase-glow:     rgba(20, 184, 166, 0.15);
    --pf-showcase-border:   var(--line);
    --pf-showcase-gradient: linear-gradient(135deg, rgba(20, 184, 166, 0.08) 0%, rgba(22, 163, 74, 0.03) 100%);
    --pf-card-bg-active:    var(--teal-soft);
}

[data-theme="dark"] {
    --surface:       #0b0c0d;
    --surface-soft:  rgba(14, 20, 27, 0.95);
    --ink:           #eef2f6;
    --muted:         #9ca6b5;
    --line:          rgba(255, 255, 255, 0.08);
    --teal:          #14b8a6;
    --teal-dark:     #2dd4bf;
    --teal-soft:     rgba(20, 184, 166, 0.15);
}

[data-theme="light"] {
    --pf-showcase-glow:     rgba(20, 184, 166, 0.1);
    --pf-showcase-gradient: linear-gradient(135deg, rgba(20, 184, 166, 0.04) 0%, rgba(22, 163, 74, 0.02) 100%);
    --pf-card-bg-active:    rgba(20, 184, 166, 0.06);
}

/* ─── Section wrapper (Home page) ───────────────────────────────────────
   #pfShowcaseRoot is now only on the Home page. Give it the same premium
   section treatment the old static portfolio section had: vertical padding,
   a surface background that responds to theme, an ambient radial glow,
   and a top border that matches the rest of the home page sections.
   ────────────────────────────────────────────────────────────────────── */
#pfShowcaseRoot {
    position: relative;
    overflow: hidden;
    padding: 7rem 0 5rem;
    background: var(--surface);
    border-top: 1px solid var(--line);
}
[data-theme="dark"] #pfShowcaseRoot {
    /* Richer dark surface matching the portfolio page's dark aesthetic */
    background: linear-gradient(180deg, #090d14 0%, #06080f 100%);
}
#pfShowcaseRoot::before {
    /* Ambient radial glow — same treatment as the old #hp-portfolio-section */
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 75% 50%, rgba(20, 184, 166, 0.10), transparent 45%),
        radial-gradient(circle at 15% 75%, rgba(139, 92, 246, 0.07), transparent 35%);
}
#pfShowcaseRoot > * {
    position: relative;
    z-index: 1;
}

/* ─── Container & Grid Layout ───────────────────────────────────────── */
.pf-showcase-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 3rem 1.5rem 1rem;
}

.pf-showcase-header {
    text-align: center;
    margin-bottom: 3.5rem;
    position: relative;
}

.pf-showcase-tag {
    font-family: var(--pf-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--teal);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(20, 184, 166, 0.08);
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(20, 184, 166, 0.15);
}

.pf-showcase-title {
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 850;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin: 0 0 0.75rem;
    color: var(--ink);
    font-family: Manrope, Sora, Arial, sans-serif;
}

.pf-showcase-sub {
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    color: var(--muted);
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.55;
}

.pf-showcase-grid {
    display: grid;
    grid-template-columns: 1.1fr 1.9fr;
    gap: 3.5rem;
    align-items: center;
}

/* ─── Left Side: Feature Selectors ──────────────────────────────────── */
.pf-showcase-features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pf-feature-card {
    display: flex;
    align-items: flex-start;
    gap: 1.15rem;
    padding: 1.25rem 1.5rem;
    border-radius: 1rem;
    border: 1.5px solid var(--pf-showcase-border);
    background: var(--surface);
    cursor: pointer;
    transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    user-select: none;
    text-align: start;
}

.pf-feature-card:hover {
    border-color: rgba(20, 184, 166, 0.35);
    transform: translateX(4px);
}

html[dir="rtl"] .pf-feature-card:hover {
    transform: translateX(-4px);
}

/* Active Highlight state */
.pf-feature-card.active {
    border-color: var(--teal);
    background: var(--pf-card-bg-active);
    box-shadow: 0 8px 30px var(--pf-showcase-glow), inset 0 0 12px rgba(20, 184, 166, 0.05);
}

.pf-feature-card.active::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3.5px;
    background: var(--teal);
    border-radius: 4px;
}
html[dir="ltr"] .pf-feature-card.active::after { left: 0; }
html[dir="rtl"] .pf-feature-card.active::after { right: 0; }

.pf-feature-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    background: rgba(20, 184, 166, 0.08);
    color: var(--teal);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border: 1px solid rgba(20, 184, 166, 0.15);
    transition: all 250ms ease;
}
.pf-feature-icon svg {
    width: 1.35rem;
    height: 1.35rem;
    color: var(--teal);
    transition: color 250ms ease, transform 250ms ease;
}
.pf-feature-card.active .pf-feature-icon {
    background: var(--teal);
    border-color: var(--teal);
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.25);
}
.pf-feature-card.active .pf-feature-icon svg {
    color: #fff;
    transform: scale(1.08);
}

.pf-feature-info {
    flex: 1;
    min-width: 0;
}

.pf-feature-card h3 {
    margin: 0 0 0.3rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    transition: color 200ms ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.pf-feature-card.active h3 {
    color: var(--ink);
    font-weight: 800;
}

.pf-feature-card p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.5;
    transition: color 200ms ease;
}
.pf-feature-card.active p {
    color: var(--ink);
    opacity: 0.95;
}

/* Feature Checkmark Badge */
.pf-feature-checkmark {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--pf-green);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    opacity: 0;
    transform: scale(0.6);
    transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}
.pf-feature-card.active .pf-feature-checkmark {
    opacity: 1;
    transform: scale(1);
}

/* ─── Right Side: Viewport Container ────────────────────────────────── */
.pf-showcase-viewport {
    position: relative;
    border-radius: 1.25rem;
    border: 1.5px solid var(--line);
    background: var(--surface-soft);
    padding: 1.25rem;
    height: 480px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    transition: border-color 300ms ease, box-shadow 300ms ease;
}
[data-theme="dark"] .pf-showcase-viewport {
    background: linear-gradient(180deg, rgba(14, 20, 27, 0.95) 0%, rgba(8, 12, 17, 0.98) 100%);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
[data-theme="light"] .pf-showcase-viewport {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 248, 250, 0.98) 100%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.pf-showcase-inner {
    flex: 1;
    position: relative;
    width: 100%;
    height: 100%;
}

/* ─── Individual Slides (Absolute Transitions) ──────────────────────── */
.pf-showcase-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.97) translateY(12px);
    transition: opacity 550ms cubic-bezier(0.16, 1, 0.3, 1), transform 550ms cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pf-showcase-slide.active {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    z-index: 5;
}

/* Slide Header Mockup */
.pf-showcase-slide-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.65rem;
    margin-bottom: 0.2rem;
}
.pf-showcase-slide-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.pf-showcase-slide-title .indicator {
    width: 0.5rem;
    height: 0.5rem;
    background: var(--teal);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px var(--teal);
    animation: pf-pulse 2s infinite;
}

/* ─── Mockup Dashboard Components ───────────────────────────────────── */
.pf-mock-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.pf-mock-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .pf-mock-panel {
    background: rgba(22, 30, 41, 0.6);
    backdrop-filter: blur(12px);
}
[data-theme="light"] .pf-mock-panel {
    background: #ffffff;
}

/* Fluctuating KPI Panel */
.pf-mock-kpi-wrap {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 1rem;
    align-items: center;
}
.pf-mock-kpi-main {
    display: flex;
    flex-direction: column;
}
.pf-mock-kpi-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 0.25rem;
}
.pf-mock-kpi-value {
    font-family: var(--pf-mono);
    font-size: 1.6rem;
    font-weight: 750;
    color: var(--ink);
    letter-spacing: -0.02em;
    transition: color 250ms ease;
}
.pf-mock-kpi-sub {
    font-family: var(--pf-mono);
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 0.15rem;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

/* Live updates glow flash animation */
.pf-flash-pos { animation: pf-flash-green 500ms ease; }
.pf-flash-neg { animation: pf-flash-red 500ms ease; }

@keyframes pf-flash-green {
    0% { background: rgba(34, 197, 94, 0.25); color: #22c55e; }
    100% { background: transparent; }
}
@keyframes pf-flash-red {
    0% { background: rgba(239, 68, 68, 0.25); color: #ef4444; }
    100% { background: transparent; }
}

/* Ticker Table and logs */
.pf-mock-table-wrap {
    overflow: hidden;
    height: 180px;
    position: relative;
}
.pf-mock-table {
    width: 100%;
    border-collapse: collapse;
}
.pf-mock-table th {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    padding: 0.4rem 0.5rem;
    text-align: start;
    border-bottom: 1px solid var(--line);
}
.pf-mock-table td {
    font-size: 0.75rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.pf-mock-table tr:last-child td {
    border-bottom: none;
}
.pf-mock-table td.num {
    text-align: end;
    font-family: var(--pf-mono);
    font-weight: 600;
}
.pf-mock-badge-chip {
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    font-family: var(--pf-mono);
    display: inline-block;
}

/* Live transaction addition animation */
.pf-tx-row-new {
    animation: pf-tx-slide-in 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pf-tx-slide-in {
    0% { opacity: 0; transform: translateY(-16px); background: var(--teal-soft); }
    100% { opacity: 1; transform: none; background: transparent; }
}

.pf-mock-log-panel {
    height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.pf-mock-log-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    overflow: hidden;
    max-height: 100%;
}
.pf-mock-log-item {
    font-size: 0.72rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.35rem;
    background: rgba(148, 163, 184, 0.05);
    border: 1px solid var(--line);
    animation: pf-log-in 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pf-log-in {
    0% { opacity: 0; transform: scale(0.9) translateY(8px); }
    100% { opacity: 1; transform: none; }
}

/* ─── Slide 2: Gorgeous Performance Chart ───────────────────────────── */
.pf-showcase-chart-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.pf-showcase-chart-wrap {
    position: relative;
    flex: 1;
    height: 250px;
    margin-top: 0.5rem;
}
.pf-chart-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Animated performance path drawing */
.pf-chart-path-portfolio {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: pf-draw-line 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.pf-chart-path-benchmark {
    stroke-dasharray: 8;
}

@keyframes pf-draw-line {
    to { stroke-dashoffset: 0; }
}

/* Interactive tracer indicator */
.pf-chart-tracer-line {
    transition: transform 300ms ease;
}
.pf-chart-tracer-dot {
    transition: transform 300ms ease;
    animation: pf-ping-dot 1.8s infinite ease-in-out;
}

@keyframes pf-ping-dot {
    0% { r: 5px; stroke-width: 2.5px; opacity: 1; }
    50% { r: 8px; stroke-width: 4px; opacity: 0.5; }
    100% { r: 5px; stroke-width: 2.5px; opacity: 1; }
}

/* Performance statistics strip */
.pf-mock-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border-radius: 0.5rem;
    overflow: hidden;
    margin-top: 0.25rem;
    border: 1px solid var(--line);
}
.pf-mock-stat-box {
    background: var(--surface);
    padding: 0.5rem;
    text-align: center;
}
.pf-mock-stat-label {
    font-size: 0.58rem;
    text-transform: uppercase;
    color: var(--muted);
    letter-spacing: 0.04em;
    margin-bottom: 0.15rem;
}
.pf-mock-stat-value {
    font-family: var(--pf-mono);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink);
}

/* ─── Slide 3: Allocation Donut & Sector progress bars ───────────────── */
.pf-alloc-mock-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 1.25rem;
    align-items: center;
}

.pf-donut-container {
    display: flex;
    justify-content: center;
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto;
}
.pf-donut-svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}
.pf-donut-circle-bg {
    fill: none;
    stroke: var(--line);
    stroke-width: 16px;
}
.pf-donut-segment {
    fill: none;
    stroke-width: 18px;
    stroke-linecap: round;
    transition: stroke-dasharray 600ms cubic-bezier(0.16, 1, 0.3, 1), stroke-dashoffset 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pf-donut-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.pf-donut-text-value {
    font-family: var(--pf-mono);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1;
}
.pf-donut-text-label {
    font-size: 0.65rem;
    color: var(--muted);
    margin-top: 0.15rem;
}

/* Allocation legend rows */
.pf-showcase-legend-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
}
.pf-showcase-legend-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.75rem;
}
.pf-showcase-legend-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    flex-shrink: 0;
}
.pf-showcase-legend-name {
    flex: 1;
    color: var(--muted);
    font-weight: 500;
}
.pf-showcase-legend-pct {
    font-family: var(--pf-mono);
    font-weight: 700;
    color: var(--ink);
}

/* Sector bars */
.pf-showcase-sectors {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.pf-showcase-sector-row {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.pf-showcase-sector-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pf-showcase-sector-name {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ink);
}
.pf-showcase-sector-pct {
    font-family: var(--pf-mono);
    font-size: 0.72rem;
    color: var(--muted);
    font-weight: 600;
}
.pf-showcase-bar-track {
    height: 6px;
    background: var(--line);
    border-radius: 99px;
    overflow: hidden;
}
.pf-showcase-bar-fill {
    height: 100%;
    background: var(--teal);
    border-radius: 99px;
    width: 0;
    transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── Slide 4: Risk and Dividend Accrual ────────────────────────────── */
.pf-risk-grid-showcase {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}
.pf-risk-card-showcase {
    padding: 0.75rem;
    text-align: center;
    border-radius: 0.6rem;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.pf-risk-card-showcase label {
    font-size: 0.58rem;
    text-transform: uppercase;
    color: var(--muted);
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 0.2rem;
}
.pf-risk-card-showcase span {
    font-family: var(--pf-mono);
    font-size: 1rem;
    font-weight: 750;
    color: var(--ink);
}

/* Dividend Income mock bar chart */
.pf-div-chart-showcase {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 140px;
    padding: 0.5rem 0.25rem 0.25rem;
    border-bottom: 1px solid var(--line);
    position: relative;
}
.pf-div-bar-wrap-showcase {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    height: 100%;
    justify-content: flex-end;
}
.pf-div-bar-showcase {
    width: 100%;
    background: linear-gradient(180deg, var(--teal) 0%, rgba(20, 184, 166, 0.5) 100%);
    border-radius: 3px 3px 0 0;
    height: 0;
    transition: height 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    box-shadow: 0 2px 6px rgba(20, 184, 166, 0.15);
}
.pf-div-bar-showcase:hover {
    filter: brightness(1.1);
}
.pf-div-bar-showcase.active-pulse {
    animation: pf-div-pulse-highlight 1.5s infinite alternate;
}
@keyframes pf-div-pulse-highlight {
    0% { filter: brightness(1); }
    100% { filter: brightness(1.25); box-shadow: 0 0 10px rgba(20, 184, 166, 0.6); }
}

.pf-div-month-showcase {
    font-size: 0.58rem;
    color: var(--muted);
    font-family: var(--pf-mono);
    font-weight: 600;
}

/* ─── Bottom Navigation Controls Panel ──────────────────────────────── */
.pf-showcase-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--line);
    margin-top: auto;
    z-index: 10;
}

.pf-ctrl-btn {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 200ms ease;
    outline: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.pf-ctrl-btn:hover {
    border-color: var(--teal);
    color: var(--teal);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.15);
}
.pf-ctrl-btn:active {
    transform: scale(0.95);
}

.pf-ctrl-indicator {
    font-family: var(--pf-mono);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted);
    background: var(--surface);
    padding: 0.35rem 0.85rem;
    border-radius: 99px;
    border: 1px solid var(--line);
    user-select: none;
}

/* ─── Pulse animation helpers ───────────────────────────────────────── */
@keyframes pf-pulse {
    0% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.7); }
    70% { transform: scale(1.1); opacity: 0.9; box-shadow: 0 0 0 6px rgba(20, 184, 166, 0); }
    100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(20, 184, 166, 0); }
}

/* ─── Responsive Media Queries ──────────────────────────────────────── */
@media (max-width: 893px) {
    .pf-showcase-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .pf-showcase-viewport {
        height: 480px;
    }
}

@media (max-width: 518px) {
    .pf-showcase-container {
        padding-top: 2rem;
    }
    .pf-feature-card {
        padding: 1rem 1.15rem;
    }
    .pf-feature-icon {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1rem;
        border-radius: 0.5rem;
    }
    .pf-showcase-viewport {
        height: 500px;
        padding: 0.95rem;
    }
    .pf-mock-grid {
        grid-template-columns: 1fr;
    }
    .pf-mock-log-panel {
        height: 100px;
    }
    .pf-alloc-mock-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .pf-donut-container {
        width: 105px;
        height: 105px;
    }
    .pf-risk-grid-showcase {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
}

/* ─── RTL Layout Support overrides ──────────────────────────────────── */
html[dir="rtl"] .pf-feature-card:hover {
    transform: translateX(-4px);
}
html[dir="rtl"] .pf-feature-card.active::after {
    left: auto;
    right: 0;
}
html[dir="rtl"] .pf-mock-table th,
html[dir="rtl"] .pf-mock-table td {
    text-align: right;
}
html[dir="rtl"] .pf-mock-table td.num {
    text-align: left;
}
html[dir="rtl"] .pf-donut-svg {
    transform: scaleX(-1) rotate(-90deg); /* Mirror donut directions in RTL */
}

/* RTL Fonts Alignment for IBM Plex Arabic Standardizations */
html[dir="rtl"] .pf-showcase-title {
    font-family: 'IBM Plex Sans Arabic', Manrope, sans-serif;
    font-weight: 700;
}
html[dir="rtl"] .pf-feature-card h3 {
    font-family: 'IBM Plex Sans Arabic', Manrope, sans-serif;
    font-weight: 600;
}
html[dir="rtl"] .pf-feature-card p,
html[dir="rtl"] .pf-showcase-sub {
    font-family: 'IBM Plex Sans Arabic', Manrope, sans-serif;
    font-weight: 400;
}
html[dir="rtl"] .pf-showcase-slide-title,
html[dir="rtl"] .pf-showcase-sector-name {
    font-family: 'IBM Plex Sans Arabic', Manrope, sans-serif;
    font-weight: 600;
}

/* ─── Premium Flashy Shining CTA Button ────────────────────────────── */
.pf-showcase-cta {
    position: relative;
    overflow: hidden;
    padding: 0.55rem 1.6rem;
    border: none;
    border-radius: 99px;
    background: linear-gradient(135deg, #13b8a6 0%, #0d9488 100%);
    color: #ffffff !important;
    font-size: 0.8rem;
    font-weight: 800;
    font-family: 'Manrope', 'Sora', sans-serif;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 0 15px rgba(19, 184, 166, 0.4), 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: all 400ms cubic-bezier(0.16, 1, 0.3, 1);
    animation: pf-cta-glow 2s infinite ease-in-out;
    z-index: 10;
    outline: none;
}

@keyframes pf-cta-glow {
    0% { transform: scale(1); box-shadow: 0 0 15px rgba(19, 184, 166, 0.4), 0 4px 15px rgba(0, 0, 0, 0.15); }
    50% { transform: scale(1.03); box-shadow: 0 0 25px rgba(19, 184, 166, 0.7), 0 6px 20px rgba(13, 148, 136, 0.3); }
    100% { transform: scale(1); box-shadow: 0 0 15px rgba(19, 184, 166, 0.4), 0 4px 15px rgba(0, 0, 0, 0.15); }
}

.pf-showcase-cta::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 30%;
    height: 200%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);
    transform: rotate(30deg);
    animation: pf-cta-sweep 4s infinite linear;
}

@keyframes pf-cta-sweep {
    0% { left: -60%; }
    30% { left: 140%; }
    100% { left: 140%; }
}

.pf-showcase-cta:hover {
    transform: scale(1.06) translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 0 30px rgba(19, 184, 166, 0.9), 0 8px 25px rgba(13, 148, 136, 0.45);
}

.pf-showcase-cta:active {
    transform: scale(0.96);
}

[data-theme="dark"] .pf-showcase-cta {
    background: linear-gradient(135deg, #0d9488 0%, #13b8a6 100%);
    box-shadow: 0 0 15px rgba(19, 184, 166, 0.3), 0 4px 15px rgba(0, 0, 0, 0.3);
}

html[dir="rtl"] .pf-showcase-cta {
    font-family: 'IBM Plex Sans Arabic', Manrope, sans-serif;
    font-weight: 700;
    letter-spacing: 0;
}