/* ================= Engineering Cycle Component =================
	 Class name prefix: eng-cycle-*  to avoid collisions */

     .eng-cycle { 
        --eng-size: 400px; 
        --eng-node-size:110px; 
        --eng-core-size: 340px; 
        --eng-color-bg: #f9fff5; 
        --eng-color-node:#6e8f2d; 
        --eng-color-accent:#6e8f2d; 
        --eng-transition: 0.8s cubic-bezier(.77,0,.18,1); 
        --eng-panel-width:500px; 
        --eng-rotation:0deg; 
        --eng-ring-gap: calc(var(--eng-node-size)/2 - 30px); 
        display:flex; 
        flex-wrap:wrap; gap:3rem; 
        align-items:center; 
        justify-content:center; 
        margin:60px auto 60px; 
        font-family:inherit; 
        position:relative; 
    }
    
    @media (max-width: 1080px){
        .eng-cycle { --eng-size:360px; --eng-core-size:280px; --eng-node-size:96px; }
    }
    @media (max-width: 860px){
        .eng-cycle { flex-direction:column; --eng-panel-width:100%; }
    }
    
    .eng-cycle-visual { position:relative; width:var(--eng-size); height:var(--eng-size); flex:0 0 auto; }
    
    .eng-cycle-orbit { position:relative; width:100%; height:100%; border-radius:50%; background:var(--eng-color-bg); box-shadow:0 6px 18px -4px rgba(0,0,0,.3),0 2px 4px rgba(0,0,0,.25) inset; display:grid; place-items:center; overflow:visible; }
    
    .eng-cycle-core { position:absolute; width:var(--eng-core-size); height:var(--eng-core-size); border-radius:50%; background:var(--eng-color-bg); box-shadow:0 4px 12px rgba(0,0,0,.18); display:flex; align-items:center; justify-content:center; font-size:48px; font-weight:600; color:#1d3615; letter-spacing:2px; pointer-events:none; z-index:1; }
    
    .eng-cycle-core-text { user-select:none; }
    
    /* Nodes */
    .eng-cycle-node { --_angle: calc(var(--eng-node-index) * 90deg); position:absolute; top:50%; left:50%; width:var(--eng-node-size); height:var(--eng-node-size); border-radius:50%; background:var(--eng-color-node); border:0; color:#fff; font-weight:600; font-size:18px; line-height:1.2; cursor:pointer; display:flex; align-items:center; justify-content:center; text-align:center; transform:translate(-50%,-50%) rotate(calc(var(--_angle) + var(--eng-rotation))) translate(calc(var(--eng-core-size)/2 + var(--eng-ring-gap))) rotate(calc(-1 * (var(--_angle) + var(--eng-rotation)))); transition:transform var(--eng-transition), box-shadow .4s, background .4s; box-shadow:0 0 0 0 rgba(85,211,56,0); z-index:2; }
    
    .eng-cycle-node:focus-visible { outline:3px solid #fff; outline-offset:3px; }
    
    .eng-cycle-node.is-active { background:#7ca231; box-shadow:0 0 0 6px rgba(85,211,56,.35), 0 0 0 12px rgba(85,211,56,.15); transform:translate(-50%,-50%) rotate(calc(var(--_angle) + var(--eng-rotation))) translate(calc(var(--eng-core-size)/2 + var(--eng-ring-gap))) rotate(calc(-1 * (var(--_angle) + var(--eng-rotation)))) scale(1.15); z-index:3; }
    
    .eng-cycle-node:not(.is-active):hover { background:#7ca231; }
    
    .eng-cycle-node-label { pointer-events:none; display:block; transform:translateY(2px); }
    
    /* Rotation handled per node via --eng-rotation variable on root; no orbit rotation (core stays static) */
    .eng-cycle[data-rotation] .eng-cycle-node { transition:transform var(--eng-transition), box-shadow .5s, background .5s, color .5s; }
    
    /* Panel */
    .eng-cycle-panel { flex:0 0 var(--eng-panel-width); max-width:var(--eng-panel-width); min-height:260px; position:relative; }
    .eng-cycle-panel-inner { position:relative; height:100%; }
    
    .eng-cycle-text { position:absolute; margin-left: 80px; inset:0; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .5s, transform .5s; }
    .eng-cycle-text.is-visible { opacity:1; visibility:visible; transform:translateY(0); }
    .eng-cycle-text-title { margin:0 0 .5rem; font-size:1.8rem; color:#31580e; }
    .eng-cycle-text-body { margin-left:50px; line-height:1.55; font-size:1rem; }
    
    /* Accessibility reduce motion */
    @media (prefers-reduced-motion: reduce){
        .eng-cycle-orbit, .eng-cycle-node, .eng-cycle-text { transition:none !important; }
    }
    
    /* Optional dark background adaptation (if placed on dark) */
    .eng-cycle[data-theme="dark"] .eng-cycle-orbit { background:#1d1f1a; color:#fff; }
    .eng-cycle[data-theme="dark"] .eng-cycle-core { background:#222; color:#fff; }
    
    /* End Engineering Cycle Component */