/* ============================================================
   Modelomni – Chart Animations & Transitions
   Consolidated from all flexible-content/chart_*.php files
   ============================================================ */

/* ── Animation Keyframes ──────────────────────────────────── */
@keyframes chartZoomOut {
    0%   { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.85); }
}

@keyframes chartFadeIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* ── Chart Cycle (value-of-modelomni / alpha-premium / synthetic-floor) ── */
.chart-instance {
    position: relative;
    min-height: 400px;
    width: 100%;
}

.chart-heading-wrapper {
    opacity: 0;
    z-index: 2;
    pointer-events: none;
}
.chart-heading-wrapper.fade {
    animation: chartFadeIn 0.3s forwards;
}
.chart-heading-wrapper.zoom {
    animation: chartZoomOut 0.4s forwards;
}

.chart-canvas {
    position: relative;
    z-index: 1;
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-height: 400px;
}

.chart-canvas.fade {
    animation: chartFadeIn 0.3s forwards;
}
.chart-canvas.zoom {
    animation: chartZoomOut 0.5s forwards;
}

/* ── Tactical Exposure Chart ──────────────────────────────── */
.alpha-anim-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
.alpha-anim-controls {
    display: flex;
    gap: 10px;
}
.alpha-btn {
    background-color: #f3f4f6;
    border: 1px solid #d1d5db;
    color: #374151;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.alpha-btn:hover {
    background-color: #e5e7eb;
}
.alpha-btn.active {
    background-color: #00d884;
    border-color: #00d884;
    color: #ffffff;
}
.alpha-anim-container {
    position: relative;
    width: 100%;
    height: 460px;
}

/* ── Risk Mitigation Chart ────────────────────────────────── */
.chart-wrapper {
    width: 1020px;
    height: auto;
    position: relative;
    overflow: hidden;
}
/* Base layer always visible — anchors container height on iOS */
.chart-wrapper #frame_base {
    position: relative !important;
    width: 100%;
    height: auto !important;
    display: block;
    opacity: 1 !important;
}
/* Overlay layers: absolutely positioned, hidden by default, animated by keyframes */
.chart-wrapper > img:not(#frame_base) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
}

/* ── Home Banner ──────────────────────────────────────────── */

.slider-glow {
  width: 1200px; 
  height: 1200px; 
  border-radius: 50%; 
  /* Soft center fade outward */
  background: radial-gradient(circle, rgba(0, 216, 132, 0.25) 0%, rgba(0, 216, 132, 0) 70%); 
  position: absolute; /* Enables z-index */
  z-index: 0;
  pointer-events: none;
}

.bg-glow {
  width: 1920px; 
  height: 1920px; 
  border-radius: 50%; 
  /* Soft center fade outward */
  background: radial-gradient(circle, rgba(0, 216, 132, 0.25) 0%, rgba(0, 216, 132, 0) 70%); 
  position: absolute; /* Enables z-index */
  z-index: 0;
  pointer-events: none;
}

/* Panel glass effect */
.slider-background-panel {
    background: rgba(246, 255, 252, 0.65); 
    border: 1px solid #FFFFFF;            
    backdrop-filter: blur(50px);           
    -webkit-backdrop-filter: blur(50px);    
    z-index: 1;
}



/* ── Home Banner Tooltip Styles ───────────────────────────── */
.custom-home-tooltip {
    background: transparent;
    border: none;
    outline: none;
    transition: opacity 0.2s ease-in-out;
}
.custom-home-tooltip:hover,
.custom-home-tooltip:focus-visible {
    background: transparent !important;
    opacity: 0.7;
    color: #000 !important;
}
.custom-home-tooltip:focus {
    background: transparent !important;
    box-shadow: none !important;
}
.home-arrow-icon {
    display: inline-block;
    transition: transform 0.25s ease-in-out;
}
.custom-home-tooltip:hover .home-arrow-icon,
.custom-home-tooltip:focus-visible .home-arrow-icon {
    transform: rotate(-90deg);
}
.custom-home-tooltip:focus:not(:hover) .home-arrow-icon {
    transform: rotate(0deg);
}

/* ── Logos Marquee ────────────────────────────────────────── */
.swiper-wrapper-linear {
    transition-timing-function: linear !important;
}

/* ── News block last border fix ───────────────────────────── */
.last-border-0:last-child {
    border-bottom: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.object-cover {
    object-fit: cover;
}