/* =============================================================
   about.css  — EJB Home Lightings
   Connected to: about.php  |  $page_css = 'about'
   Covers: hero, bulb SVG animation, story section, mission/
           values, product specs, why-ejb, solar showcase,
           charity section — all keyframes and responsive rules
============================================================= */

/* ---- BASE ---- */
.abt-wrap{max-width:1200px;margin:0 auto;padding:0 24px;}
.sec-c{text-align:center;}
.orange-glow{color:var(--orange);text-shadow:0 0 28px rgba(232,116,26,.45);}
.pill-white{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:.72rem;font-weight:600;padding:5px 16px;border-radius:20px;margin-bottom:18px;letter-spacing:.05em;}

/* ---- KEYFRAMES ---- */
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes glow{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.18)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes ray{0%,100%{opacity:0;transform:scaleY(.5)}50%{opacity:.6;transform:scaleY(1)}}
@keyframes fillW{from{width:0}to{width:var(--w)}}
@keyframes ledRun{0%{background:var(--orange);box-shadow:0 0 6px rgba(232,116,26,.9)}50%{background:#FFD580;box-shadow:0 0 10px rgba(255,213,128,.95)}100%{background:var(--orange);box-shadow:0 0 6px rgba(232,116,26,.9)}}
@keyframes cellAnim{0%,100%{background:rgba(37,99,235,.5)}50%{background:rgba(96,165,250,.85);box-shadow:0 0 6px rgba(96,165,250,.4)}}
@keyframes beam{0%,100%{opacity:.3;transform:scaleY(.7)}50%{opacity:.9;transform:scaleY(1)}}
@keyframes sunRing{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:0;transform:scale(1.4)}}
@keyframes edotFall{0%{transform:translateY(0);opacity:0}20%{opacity:1}80%{opacity:.8}100%{transform:translateY(72px);opacity:0}}
@keyframes ecFill{from{width:0}to{width:88%}}
@keyframes partFly{0%,100%{transform:translateY(0) translateX(0);opacity:.4}50%{transform:translateY(-20px) translateX(10px);opacity:.9}}
@keyframes charityGlow{0%,100%{box-shadow:0 0 0 0 rgba(232,116,26,0)}50%{box-shadow:0 0 24px 4px rgba(232,116,26,.2)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* ---- HERO ---- */
.about-hero{background:linear-gradient(135deg,#0d1b35,var(--navy-3));padding:80px 5% 70px;position:relative;overflow:hidden;}
.abt-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;}
.abt-hero-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.2fr .8fr;gap:55px;align-items:center;position:relative;z-index:2;}
.abt-h1{font-family:'Poppins',sans-serif;font-size:clamp(1.7rem,3.5vw,2.8rem);font-weight:700;color:#fff;line-height:1.25;margin-bottom:18px;}
.abt-sub{color:rgba(255,255,255,.68);font-size:1rem;line-height:1.7;margin-bottom:28px;}
.abt-btns{display:flex;gap:12px;flex-wrap:wrap;}

/* ---- BULB ---- */
.bulb-scene{display:flex;flex-direction:column;align-items:center;gap:16px;position:relative;padding-top:20px;}
.bulb-halo{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(255,215,64,.22) 0%,rgba(232,116,26,.08) 55%,transparent 75%);animation:haloBreath 2.5s ease-in-out infinite;pointer-events:none;}
@keyframes haloBreath{0%,100%{transform:translateX(-50%) scale(1);opacity:.7;}50%{transform:translateX(-50%) scale(1.2);opacity:1;}}
.bulb-float{position:relative;z-index:2;animation:floatY 3.5s ease-in-out infinite;}
.bulb-svg{width:110px;height:auto;}
.bulb-glass{animation:glassBreath 2.5s ease-in-out infinite;}
@keyframes glassBreath{0%,100%{filter:drop-shadow(0 0 8px rgba(255,200,0,.5));}50%{filter:drop-shadow(0 0 20px rgba(255,200,0,.95));}}
.bulb-inner-glow{animation:innerGlow 1.8s ease-in-out infinite;}
@keyframes innerGlow{0%,100%{opacity:.55;}50%{opacity:1;}}
.led-c{animation:ledChip 2s ease-in-out infinite;}
@keyframes ledChip{0%,100%{fill:#FFF9C4;}50%{fill:#FFFFFF;filter:drop-shadow(0 0 3px #FFD740);}}
.led-array rect:nth-child(1){animation-delay:0s}.led-array rect:nth-child(2){animation-delay:.18s}.led-array rect:nth-child(3){animation-delay:.36s}
.led-array rect:nth-child(4){animation-delay:.12s}.led-array rect:nth-child(5){animation-delay:.3s}.led-array rect:nth-child(6){animation-delay:.24s}
.rays-wrap{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);width:180px;height:180px;z-index:1;pointer-events:none;}
.ray-beam{position:absolute;top:50%;left:50%;width:2px;height:88px;transform-origin:top center;margin-top:2px;background:linear-gradient(to bottom,rgba(255,220,80,.55),rgba(255,180,0,.1),transparent);border-radius:1px;animation:rayPulse 2.2s ease-in-out infinite;}
@keyframes rayPulse{0%,100%{opacity:.45;}50%{opacity:1;}}
.energy-card{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:13px 18px;width:100%;max-width:200px;backdrop-filter:blur(4px);}
.ec-label{font-size:.65rem;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;}
.ec-track{height:8px;background:rgba(255,255,255,.12);border-radius:4px;overflow:hidden;}
.ec-fill{height:100%;width:0;background:linear-gradient(90deg,var(--orange),#FFD580);border-radius:4px;animation:ecFill 2.5s .6s ease forwards;}
.ec-val{font-size:.7rem;color:var(--orange-light);font-weight:600;margin-top:6px;}
.solar-chip{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:12px 16px;text-align:center;backdrop-filter:blur(4px);}
.sc-cells{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;}
.sc-cell{width:18px;height:13px;background:rgba(37,99,235,.65);border:1px solid rgba(96,165,250,.45);border-radius:2px;animation:cellAnim 2s ease-in-out infinite;}
.sc-lbl{font-size:.65rem;color:rgba(255,255,255,.7);font-weight:600;text-transform:uppercase;letter-spacing:.07em;margin-top:6px;}

/* ---- STORY ---- */
.story-sec{padding:90px 0;background:var(--white);}
.story-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:70px;align-items:center;}
.story-text p{color:var(--text-muted);font-size:.95rem;line-height:1.9;margin-bottom:16px;}
.story-quote{border-left:4px solid var(--orange);background:var(--orange-bg);padding:18px 22px;border-radius:0 8px 8px 0;margin-top:24px;font-style:italic;color:var(--navy);font-size:.93rem;line-height:1.7;}
.story-visual{position:relative;padding:24px;}
.since-card{background:linear-gradient(135deg,var(--navy),var(--navy-3));border-radius:20px;padding:40px 32px;text-align:center;position:relative;overflow:hidden;}
.since-ico{font-size:3.5rem;display:block;margin-bottom:14px;animation:floatY 3s ease-in-out infinite;}
.since-yr{font-family:'Poppins',sans-serif;font-size:1.6rem;font-weight:700;color:#fff;margin-bottom:8px;}
.since-txt{font-size:.83rem;color:rgba(255,255,255,.6);line-height:1.6;}
.beams{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:flex;gap:14px;}
.bm{width:3px;height:70px;background:linear-gradient(to bottom,rgba(232,116,26,.7),transparent);border-radius:2px;animation:beam 2s ease-in-out infinite;}
.fstat{position:absolute;background:var(--white);border-radius:10px;padding:11px 17px;text-align:center;box-shadow:0 8px 24px rgba(27,42,74,.14);border-left:3px solid var(--orange);animation:floatY 4s ease-in-out infinite;}
.fstat b{display:block;font-family:'Poppins',sans-serif;font-size:1.3rem;font-weight:700;color:var(--orange);}
.fstat span{font-size:.68rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;}
.s1{top:-14px;right:-14px;}.s2{bottom:.5px;right:-22px;}.s3{bottom:-14px;left:-14px;}

/* ---- MV ---- */
.mv-sec{padding:80px 0;background:var(--light);}
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.mv-card{background:var(--white);border-radius:var(--radius-lg);padding:38px 34px;border:2px solid var(--border);position:relative;overflow:hidden;transition:all .3s;}
.mv-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);}
.mv-ico-box{width:60px;height:60px;border-radius:14px;background:var(--orange-bg);display:flex;align-items:center;justify-content:center;font-size:1.9rem;margin-bottom:18px;}
.mv-ico-box.blue{background:rgba(37,99,235,.08);}
.mv-card h3{font-family:'Poppins',sans-serif;font-size:1.15rem;font-weight:700;color:var(--navy);margin-bottom:12px;}
.mv-card p{color:var(--text-muted);font-size:.92rem;line-height:1.8;}
.mv-line{position:absolute;bottom:0;left:0;height:4px;width:0;transition:width .45s;border-radius:2px;}
.mv-line.orange{background:var(--orange);}.mv-line.blue{background:#2563EB;}
.mv-card:hover .mv-line{width:100%;}

/* ---- VALUES ---- */
.vals-sec{padding:80px 0;background:var(--white);}
.vals-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;}
.val-card{border-radius:var(--radius-lg);padding:34px 26px;border:1px solid var(--border);position:relative;overflow:hidden;transition:all .3s;}
.val-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.orange-top{border-top:3px solid var(--orange);}.blue-top{border-top:3px solid #2563EB;}.green-top{border-top:3px solid #16A34A;}
.val-ico{font-size:2.4rem;margin-bottom:16px;display:block;animation:floatY 3.5s ease-in-out infinite;}
.val-card h3{font-family:'Poppins',sans-serif;font-size:1.05rem;font-weight:700;color:var(--navy);margin-bottom:10px;}
.val-card p{color:var(--text-muted);font-size:.88rem;line-height:1.7;}
.val-line{position:absolute;bottom:0;left:0;height:3px;width:0;transition:width .4s;border-radius:2px;}
.val-card:hover .val-line{width:100%;}

/* ---- SPECS ---- */
.specs-sec{padding:80px 0;background:var(--light);}
.specs-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px;}
.spec-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;transition:all .3s;}
.spec-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);}
.spec-hd{display:flex;align-items:center;gap:12px;margin-bottom:22px;}
.spec-hd span{font-size:1.6rem;}
.spec-hd h3{font-family:'Poppins',sans-serif;font-size:1.05rem;font-weight:700;color:var(--navy);}
.spec-ul{list-style:none;display:flex;flex-direction:column;gap:12px;}
.spec-ul li{display:flex;align-items:flex-start;gap:10px;font-size:.87rem;color:var(--text-muted);line-height:1.55;}
.spec-ul li strong{color:var(--navy);}
.sdot{width:8px;height:8px;border-radius:50%;background:var(--orange);flex-shrink:0;margin-top:5px;}
.tbars{margin-top:24px;padding-top:20px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:12px;}
.tbar-row{display:grid;grid-template-columns:110px 1fr 70px;align-items:center;gap:10px;font-size:.77rem;color:var(--text-muted);}
.tbar-track{height:8px;background:var(--light-2);border-radius:4px;overflow:hidden;}
.tbar-fill{height:100%;width:0;border-radius:4px;animation:fillW 2.2s ease forwards;animation-delay:.5s;}
.tbar-n{font-weight:600;color:var(--navy);text-align:right;font-size:.75rem;}
.led-strip-wrap{margin-top:48px;text-align:center;}
.led-strip{display:flex;justify-content:center;gap:5px;flex-wrap:wrap;padding:14px 22px;background:var(--navy);border-radius:40px;margin-bottom:12px;}
.ldot{width:11px;height:11px;border-radius:50%;background:var(--orange);animation:ledRun 1.6s ease-in-out infinite;}
.led-strip-wrap p{font-size:.82rem;color:var(--text-muted);letter-spacing:.04em;}

/* ---- WHY EJB ---- */
.why-ejb-sec{background:var(--navy);padding:80px 0;}
.wejb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px;}
.wejb-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);padding:28px;transition:all .3s;position:relative;overflow:hidden;}
.wejb-card:hover{background:rgba(255,255,255,.09);border-color:rgba(232,116,26,.4);transform:translateY(-5px);}
.wejb-ico{font-size:2.2rem;margin-bottom:14px;display:block;}
.wejb-card h3{font-family:'Poppins',sans-serif;font-size:.97rem;font-weight:700;color:#fff;margin-bottom:8px;}
.wejb-card p{font-size:.84rem;color:rgba(255,255,255,.55);line-height:1.6;}
.wejb-bar{position:absolute;bottom:0;left:0;height:3px;width:0;background:var(--orange);transition:width .4s;}
.wejb-card:hover .wejb-bar{width:100%;}

/* ---- SOLAR SHOWCASE SVG ---- */
.solar-show-sec{padding:80px 0;background:var(--light);}
.solar-show-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:center;}
.ss-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:16px;}
.ss-list li{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--text-muted);}
.ss-list li span{width:8px;height:8px;border-radius:50%;background:var(--orange);flex-shrink:0;display:block;}
.ss-art{position:relative;display:flex;align-items:center;justify-content:center;}
.solar-svg{width:100%;max-width:340px;height:auto;display:block;margin:0 auto;}
/* Sun rays — single group rotates slowly */
.sun-rays-group{animation:sunRaySpin 12s linear infinite;transform-box:fill-box;}
@keyframes sunRaySpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.sun-halo{animation:haloExpand 2.5s ease-in-out infinite;}
.sh2{animation-delay:.4s}.sh3{animation-delay:.8s}
@keyframes haloExpand{0%,100%{opacity:.5;}50%{opacity:.9;}}
.sun-core-anim{animation:sunCorePulse 2s ease-in-out infinite;}
@keyframes sunCorePulse{0%,100%{filter:drop-shadow(0 0 6px rgba(255,215,64,.6));}50%{filter:drop-shadow(0 0 18px rgba(255,215,64,1));}}
.panel-cell{animation:cellCharge 1.8s ease-in-out infinite;}
@keyframes cellCharge{0%,100%{fill:#1976D2;opacity:.75;}50%{fill:#42A5F5;opacity:1;}}
.lamp-glow{animation:lampOn 2.5s ease-in-out infinite;}
@keyframes lampOn{0%,100%{opacity:.8;}50%{opacity:1;filter:drop-shadow(0 0 10px rgba(255,215,64,.8));}}
.light-cone{animation:conePulse 2.5s ease-in-out infinite;}
@keyframes conePulse{0%,100%{opacity:.05;}50%{opacity:.2;}}
.ground-glow{animation:groundPulse 2.5s ease-in-out infinite;}
@keyframes groundPulse{0%,100%{opacity:.03;}50%{opacity:.1;}}
.energy-dot{animation:dotFade 2s ease-in-out infinite;}
@keyframes dotFade{0%,100%{opacity:0;}30%,70%{opacity:.9;}}

/* ================================================================
   CHARITY SECTION
================================================================ */
.charity-sec{
    background:linear-gradient(180deg,var(--navy) 0%,#162240 100%);
    padding:90px 0;
    position:relative;
    overflow:hidden;
}
.charity-sec::before{
    content:'💛';
    position:absolute;font-size:300px;opacity:.03;
    top:50%;left:50%;transform:translate(-50%,-50%);
    pointer-events:none;
}
.charity-header{text-align:center;margin-bottom:48px;}
.charity-badge{
    display:inline-block;
    background:rgba(232,116,26,.2);border:1px solid rgba(232,116,26,.4);
    color:var(--orange-light);font-size:.72rem;font-weight:600;
    padding:6px 18px;border-radius:20px;margin-bottom:16px;letter-spacing:.06em;
}
.charity-sub{color:rgba(255,255,255,.6);font-size:.97rem;line-height:1.7;max-width:640px;margin:0 auto;}

/* Photo gallery grid */
.charity-gallery{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-bottom:50px;
}
.charity-photo-slot{
    border-radius:12px;overflow:hidden;
    aspect-ratio:4/3;
    border:2px dashed rgba(232,116,26,.3);
    transition:border-color .3s;
    cursor:pointer;
}
.charity-photo-slot:hover{border-color:rgba(232,116,26,.7);animation:charityGlow 1s ease-in-out;}
.charity-photo-slot img{
    width:100%;height:100%;object-fit:cover;transition:transform .4s;
}
.charity-photo-slot:hover img{transform:scale(1.05);}
.cphoto-inner{
    width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.04);
}
.cphoto-placeholder{text-align:center;padding:20px;}
.cphoto-icon{font-size:2.5rem;margin-bottom:10px;opacity:.5;}
.cphoto-lbl{font-size:.8rem;color:rgba(255,255,255,.4);font-weight:500;}
.cphoto-sub{font-size:.7rem;color:rgba(255,255,255,.25);margin-top:4px;}
/* Shimmer animation on placeholders */
.cphoto-inner{
    background:linear-gradient(90deg,rgba(255,255,255,.03) 25%,rgba(255,255,255,.07) 50%,rgba(255,255,255,.03) 75%);
    background-size:200% 100%;
    animation:shimmer 2.5s ease-in-out infinite;
}

/* Highlights row */
.charity-highlights{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-bottom:40px;
}
.ch-item{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    border-radius:12px;
    padding:24px 20px;
    text-align:center;
    transition:all .3s;
}
.ch-item:hover{background:rgba(255,255,255,.09);border-color:rgba(232,116,26,.35);transform:translateY(-4px);}
.ch-ico{font-size:2rem;margin-bottom:12px;}
.ch-item h4{font-family:'Poppins',sans-serif;font-weight:700;color:#fff;font-size:.93rem;margin-bottom:8px;}
.ch-item p{font-size:.82rem;color:rgba(255,255,255,.55);line-height:1.6;}

.charity-cta{
    display:flex;align-items:center;justify-content:center;gap:20px;
    flex-wrap:wrap;
    padding:24px 32px;
    background:rgba(232,116,26,.1);
    border:1px solid rgba(232,116,26,.25);
    border-radius:12px;
    text-align:center;
}
.charity-cta p{color:rgba(255,255,255,.75);font-size:.95rem;}

/* ================================================================
   RESPONSIVE
================================================================ */
@media(max-width:1024px){
    .wejb-grid{grid-template-columns:repeat(2,1fr);}
    .vals-grid{grid-template-columns:repeat(2,1fr);}
    .charity-highlights{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
    .abt-hero-inner{grid-template-columns:1fr;gap:40px;}
    .bulb-scene{order:-1;}
    .r2{display:none;}
    .story-grid{grid-template-columns:1fr;gap:40px;}
    .story-visual{order:-1;}
    .s1,.s2,.s3{display:none;}
    .mv-grid{grid-template-columns:1fr;}
    .specs-grid{grid-template-columns:1fr;}
    .wejb-grid{grid-template-columns:1fr 1fr;}
    .solar-show-grid{grid-template-columns:1fr;}
    .charity-gallery{grid-template-columns:repeat(2,1fr);}
    .charity-highlights{grid-template-columns:repeat(2,1fr);}
    .tbar-row{grid-template-columns:90px 1fr 60px;}
}
@media(max-width:480px){
    .about-hero{padding:50px 5%;}
    .abt-h1{font-size:1.5rem;}
    .abt-btns{flex-direction:column;}
    .vals-grid,.wejb-grid{grid-template-columns:1fr;}
    .charity-gallery{grid-template-columns:1fr;}
    .charity-highlights{grid-template-columns:1fr;}
    .story-sec,.mv-sec,.vals-sec,.specs-sec,.why-ejb-sec,.solar-show-sec,.charity-sec{padding:50px 0;}
}