/* ==========================================================================
   ELDAx eSSL Interactive Pinwheel v4 – Seyfor Style + Animations
   ========================================================================== */
:root {
    --el-dark:#1a2332; --el-dark2:#0f1923; --el-green:#8bc63f; --el-purple:#7b4fbe;
    --el-white:#fff; --el-gray:#94a3b8; --el-text:#e2e8f0;
    --el-border:rgba(255,255,255,.08); --el-ease:cubic-bezier(.25,.46,.45,.94);
    --el-font:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
}

/* ---- Section ---- */
.eldax-section{position:relative;width:100%;padding:60px 20px;background:linear-gradient(165deg,var(--el-dark),var(--el-dark2));overflow:hidden;font-family:var(--el-font);color:var(--el-white)}
.eldax-wrap{position:relative;max-width:1100px;margin:0 auto;aspect-ratio:11/7}
.eldax-svg-holder{position:absolute;inset:0;z-index:1}
.eldax-svg-holder svg{width:100%;height:100%;display:block}

/* ==========================================================================
   SVG ELEMENT STYLES
   ========================================================================== */

/* ---- Segments ---- */
.eldax-seg{cursor:pointer;outline:none;
    transition:filter .4s var(--el-ease),opacity .4s ease}
.eldax-seg:hover,.eldax-seg:focus-visible{
    filter:brightness(1.3) drop-shadow(0 0 20px rgba(139,198,63,.4))}
.eldax-seg.is-active{
    filter:brightness(1.4) drop-shadow(0 0 28px rgba(139,198,63,.55))}
.eldax-svg-holder svg.has-hover .eldax-seg:not(:hover):not(.is-active){opacity:.5}

/* ---- Orbit slow spin (transform-box keeps it centered on itself) ---- */
.eldax-orbit{animation:eldax-spin 90s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes eldax-spin{to{transform:rotate(360deg)}}

/* ---- Center pulse ---- */
.eldax-center-glow{animation:eldax-pulse 3s ease-in-out infinite}
@keyframes eldax-pulse{
    0%,100%{stroke-opacity:.35;r:43.5}
    50%{stroke-opacity:.6;r:45}}

/* ---- Connectors ---- */
.eldax-conn{stroke-opacity:.4;transition:stroke-opacity .4s ease}
.eldax-conn.is-active{stroke-opacity:1}
.eldax-dot{transition:filter .3s ease}
.eldax-dot.is-active{filter:drop-shadow(0 0 8px currentColor)}

/* ---- Icons subtle float ---- */
.eldax-icon{pointer-events:none;transition:transform .4s var(--el-ease)}

/* ==========================================================================
   ENTRANCE  (scroll-triggered via .is-in-view)
   ========================================================================== */
.eldax-seg,.eldax-icon,.eldax-conn,.eldax-dot,
.eldax-center-circle,.eldax-center-text{opacity:0}

/* segments scale in from center */
.eldax-section.is-in-view .eldax-seg{opacity:1;transition:opacity .5s ease,filter .4s var(--el-ease)}
.eldax-section.is-in-view .eldax-seg[data-index="0"]{transition-delay:.05s}
.eldax-section.is-in-view .eldax-seg[data-index="1"]{transition-delay:.15s}
.eldax-section.is-in-view .eldax-seg[data-index="2"]{transition-delay:.25s}
.eldax-section.is-in-view .eldax-seg[data-index="3"]{transition-delay:.35s}
.eldax-section.is-in-view .eldax-seg[data-index="4"]{transition-delay:.45s}

/* center */
.eldax-section.is-in-view .eldax-center-circle,
.eldax-section.is-in-view .eldax-center-text{opacity:1;transition:opacity .6s ease .5s}

/* icons pop in */
.eldax-section.is-in-view .eldax-icon{opacity:1;transition:opacity .4s ease,transform .4s var(--el-ease)}
.eldax-section.is-in-view .eldax-icon[data-index="0"]{transition-delay:.55s}
.eldax-section.is-in-view .eldax-icon[data-index="1"]{transition-delay:.65s}
.eldax-section.is-in-view .eldax-icon[data-index="2"]{transition-delay:.75s}
.eldax-section.is-in-view .eldax-icon[data-index="3"]{transition-delay:.85s}
.eldax-section.is-in-view .eldax-icon[data-index="4"]{transition-delay:.95s}

/* connectors + dots draw in */
.eldax-section.is-in-view .eldax-conn,
.eldax-section.is-in-view .eldax-dot{opacity:1;transition:opacity .4s ease}
.eldax-section.is-in-view .eldax-conn[data-index="0"],
.eldax-section.is-in-view .eldax-dot[data-index="0"]{transition-delay:.9s}
.eldax-section.is-in-view .eldax-conn[data-index="1"],
.eldax-section.is-in-view .eldax-dot[data-index="1"]{transition-delay:1s}
.eldax-section.is-in-view .eldax-conn[data-index="2"],
.eldax-section.is-in-view .eldax-dot[data-index="2"]{transition-delay:1.1s}
.eldax-section.is-in-view .eldax-conn[data-index="3"],
.eldax-section.is-in-view .eldax-dot[data-index="3"]{transition-delay:1.2s}
.eldax-section.is-in-view .eldax-conn[data-index="4"],
.eldax-section.is-in-view .eldax-dot[data-index="4"]{transition-delay:1.3s}

/* ==========================================================================
   LABELS
   ========================================================================== */
.eldax-label{position:absolute;z-index:2;max-width:220px;cursor:pointer;
    opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.eldax-section.is-in-view .eldax-label{opacity:1;transform:translateY(0)}
.eldax-section.is-in-view .eldax-label--0{transition-delay:1s}
.eldax-section.is-in-view .eldax-label--1{transition-delay:1.1s}
.eldax-section.is-in-view .eldax-label--2{transition-delay:1.2s}
.eldax-section.is-in-view .eldax-label--3{transition-delay:1.3s}
.eldax-section.is-in-view .eldax-label--4{transition-delay:1.4s}

.eldax-label__dot{width:14px;height:14px;border-radius:50%;margin-bottom:10px;position:relative;
    transition:transform .3s ease,box-shadow .3s ease}
.eldax-label:hover .eldax-label__dot{transform:scale(1.3);box-shadow:0 0 12px currentColor}
.eldax-label__title{font-size:16px;font-weight:800;line-height:1.25;margin:0 0 6px;color:var(--el-white);transition:color .3s ease}
.eldax-label:hover .eldax-label__title{color:var(--el-green)}
.eldax-label__desc{font-size:13px;color:var(--el-gray);line-height:1.55;margin:0;font-style:italic}

/* positions – aligned so HTML dots overlap SVG endpoint dots
   SVG dots: 0=(155,52) 1=(950,52) 2=(1010,335) 3=(900,545) 4=(135,495)
   viewBox 1100x600 → percentages */
.eldax-label--0{top:13.5%;left:13.5%;text-align:left}
.eldax-label--0 .eldax-label__dot{background:var(--el-dark);border:2px solid #3a5a6f;color:#3a5a6f}
.eldax-label--1{top:13.5%;right:13%;text-align:right}
.eldax-label--1 .eldax-label__dot{background:var(--el-dark);border:2px solid #3a5a6f;color:#3a5a6f;margin-left:auto}
.eldax-label--2{top:53.8%;right:7.5%;text-align:right}
.eldax-label--2 .eldax-label__dot{background:var(--el-purple);color:var(--el-purple);margin-left:auto}
.eldax-label--3{top:83.8%;right:17.5%;text-align:right}
.eldax-label--3 .eldax-label__dot{background:var(--el-green);color:var(--el-green);margin-left:auto}
.eldax-label--4{top:76.8%;left:11.6%;text-align:left}
.eldax-label--4 .eldax-label__dot{background:var(--el-purple);color:var(--el-purple)}

/* ==========================================================================
   DETAIL POPUP (centered modal over the graph)
   ========================================================================== */
.eldax-detail{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.85);
    width:min(460px,92vw);max-height:85vh;overflow-y:auto;
    background:linear-gradient(180deg,var(--el-dark),#0d1620);
    border:1px solid rgba(139,198,63,.15);border-radius:20px;
    z-index:10000;padding:36px;font-family:var(--el-font);
    box-shadow:0 24px 80px rgba(0,0,0,.6),0 0 40px rgba(139,198,63,.08);
    opacity:0;visibility:hidden;transition:opacity .35s ease,transform .35s var(--el-ease),visibility .35s ease}
.eldax-detail.is-open{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.eldax-detail__close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:10px;
    border:1px solid var(--el-border);background:rgba(255,255,255,.04);color:var(--el-gray);font-size:20px;
    cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.3s ease}
.eldax-detail__close:hover{background:rgba(255,255,255,.08);color:var(--el-white)}
.eldax-detail__header{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.eldax-detail__icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;
    justify-content:center;color:var(--el-white);flex-shrink:0}
.eldax-detail__icon svg{width:32px;height:32px}
.eldax-detail__title{font-size:22px;font-weight:800;color:var(--el-white);margin:0;line-height:1.2}
.eldax-detail__text{font-size:14px;color:var(--el-gray);line-height:1.7;margin:0 0 16px}
.eldax-detail__extra{padding-top:16px;border-top:1px solid var(--el-border)}
.eldax-detail__extra ul{list-style:none;padding:0;margin:0}
.eldax-detail__extra li{position:relative;padding:8px 0 8px 22px;font-size:13px;color:var(--el-text);
    line-height:1.5;border-bottom:1px solid rgba(255,255,255,.04)}
.eldax-detail__extra li::before{content:'';position:absolute;left:0;top:14px;width:8px;height:8px;
    border-radius:50%;background:var(--el-green)}
.eldax-detail-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;
    opacity:0;visibility:hidden;transition:.35s ease;backdrop-filter:blur(6px)}
.eldax-detail-backdrop.is-visible{opacity:1;visibility:visible}

/* ==========================================================================
   LIGHT THEME
   ========================================================================== */
.eldax-section--light{background:transparent;color:#1a2332}

/* labels */
.eldax-section--light .eldax-label__title{color:#1a2332}
.eldax-section--light .eldax-label:hover .eldax-label__title{color:#5a9a10}
.eldax-section--light .eldax-label__desc{color:#475569}
.eldax-section--light .eldax-label--0 .eldax-label__dot,
.eldax-section--light .eldax-label--1 .eldax-label__dot{background:#e2e8f0;border-color:#3a5a6f}

/* SVG center */
.eldax-section--light .eldax-center-circle{stroke:rgba(139,198,63,0.25)}
.eldax-section--light circle.eldax-center-circle:not(.eldax-center-glow){fill:#f1f5f9}
.eldax-section--light .eldax-center-text{fill:#1a2332}

/* connectors */
.eldax-section--light .eldax-seg:hover,
.eldax-section--light .eldax-seg:focus-visible{filter:brightness(1.15) drop-shadow(0 0 16px rgba(0,0,0,.15))}
.eldax-section--light .eldax-seg.is-active{filter:brightness(1.2) drop-shadow(0 0 22px rgba(0,0,0,.2))}

/* detail popup */
.eldax-section--light ~ .eldax-detail,
.eldax-section--light .eldax-detail{background:linear-gradient(180deg,#ffffff,#f8fafc);border-color:rgba(139,198,63,.25);
    box-shadow:0 24px 80px rgba(0,0,0,.12),0 0 40px rgba(139,198,63,.06)}
.eldax-section--light .eldax-detail__title{color:#1a2332}
.eldax-section--light .eldax-detail__text{color:#475569}
.eldax-section--light .eldax-detail__close{border-color:rgba(0,0,0,.1);background:rgba(0,0,0,.03);color:#64748b}
.eldax-section--light .eldax-detail__close:hover{background:rgba(0,0,0,.06);color:#1a2332}
.eldax-section--light .eldax-detail__extra{border-top-color:rgba(0,0,0,.08)}
.eldax-section--light .eldax-detail__extra li{color:#334155;border-bottom-color:rgba(0,0,0,.05)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:900px){
    .eldax-section{padding:0 0 10px}
    .eldax-wrap{aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 10px 12px}
    /* zoom SVG into the wheel center – the wheel is ~30% of the 1100x600 viewBox */
    .eldax-svg-holder{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden}
    .eldax-svg-holder svg{transform:scale(2.6) translateY(-3%);transform-origin:50.5% 50%}
    /* hide connector lines & dots on mobile, force icons visible */
    .eldax-conn,.eldax-dot{display:none!important}
    .eldax-icon{opacity:1!important}
    .eldax-label{position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
        max-width:100%;width:100%;text-align:left!important;padding:14px 18px;background:rgba(255,255,255,.03);
        border:1px solid var(--el-border);border-radius:12px;backdrop-filter:blur(8px);
        display:flex;align-items:flex-start;gap:14px;flex-direction:row;
        opacity:1!important;transform:none!important}
    .eldax-label .eldax-label__dot{margin-left:0!important;margin-bottom:0;margin-top:5px;flex-shrink:0}
    .eldax-label .eldax-label__title{font-size:15px}
    .eldax-label .eldax-label__desc{font-size:13px}
    .eldax-label:hover{background:rgba(255,255,255,.06);border-color:rgba(139,198,63,.2)}
    /* light mobile cards */
    .eldax-section--light .eldax-label{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.08)}
    .eldax-section--light .eldax-label:hover{background:rgba(0,0,0,.06);border-color:rgba(139,198,63,.3)}
}
@media(max-width:480px){
    .eldax-detail__title{font-size:19px}.eldax-detail{padding:28px 20px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}