/* ==========================================================
   ENERZEX — Battery Tools & Calculators page styles
   Red / Black / White brand theme, matches site-wide look
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --ez-red:#E31E24; --ez-red-dark:#A9141A; --ez-red-glow:rgba(227,30,36,0.35);
  --ez-black:#0B0B0D; --ez-charcoal:#17181C; --ez-ink:#111214;
  --ez-grey:#6B6E76; --ez-grey-light:#9A9DA6; --ez-line:#E8E8EA;
  --ez-green:#22C55E; --ez-amber:#FFB300; --ez-radius:18px;
}
.page-hero *, .tools-wrap *{ box-sizing:border-box; }

/* ---------- reveal-on-scroll, gated so content never gets stuck invisible ---------- */
.has-js .tools-wrap .reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}
.has-js .tools-wrap .reveal.in{ opacity:1; transform:translateY(0); }
.tools-grid .tool-card:nth-child(1){transition-delay:.03s;} .tools-grid .tool-card:nth-child(2){transition-delay:.08s;}
.tools-grid .tool-card:nth-child(3){transition-delay:.13s;} .tools-grid .tool-card:nth-child(4){transition-delay:.18s;}
.tools-grid .tool-card:nth-child(5){transition-delay:.23s;} .tools-grid .tool-card:nth-child(6){transition-delay:.28s;}
.tools-grid .tool-card:nth-child(7){transition-delay:.33s;} .tools-grid .tool-card:nth-child(8){transition-delay:.38s;}

/* ---------- PAGE HERO ---------- */
.page-hero{position:relative; background:var(--ez-black); color:#fff; overflow:hidden; padding:68px 24px 54px; text-align:center;}
.page-hero::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(600px 380px at 50% -10%, rgba(227,30,36,0.28), transparent 65%);}
.page-hero::after{
  content:""; position:absolute; inset:0; opacity:.3; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:42px 42px; mask-image:linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 85%);
}
.hero-pulse{position:absolute; left:0; right:0; top:55%; height:120px; opacity:.5; pointer-events:none;}
.hero-pulse path{fill:none; stroke:var(--ez-red); stroke-width:2; stroke-dasharray:14 10; animation:ezFlow 2.2s linear infinite; filter:drop-shadow(0 0 6px var(--ez-red-glow));}
@keyframes ezFlow{ to{stroke-dashoffset:-48;} }
.page-hero h1{position:relative; z-index:1; font-family:'Sora',sans-serif; font-weight:800; font-size:clamp(2rem,4.5vw,3rem); margin:0 0 14px; letter-spacing:-.02em; animation:ezFadeUp .6s ease both;}
.page-hero p{position:relative; z-index:1; color:#B7B9C0; font-family:'Inter',sans-serif; font-size:16px; max-width:600px; margin:0 auto; line-height:1.6; animation:ezFadeUp .6s ease .1s both;}
@keyframes ezFadeUp{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}
.hero-meta{position:relative; z-index:1; display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:22px;}
.hero-meta span{background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); color:#E5E6EA; font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:999px; opacity:0; animation:chipIn .5s ease forwards;}
.hero-meta span:nth-child(1){animation-delay:.15s;} .hero-meta span:nth-child(2){animation-delay:.26s;} .hero-meta span:nth-child(3){animation-delay:.37s;} .hero-meta span:nth-child(4){animation-delay:.48s;}
@keyframes chipIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}

/* ---------- SECTION ---------- */
.section{position:relative; background:#fff; overflow:hidden; padding:64px 0 96px;}
.tools-wrap{ font-family:'Inter',sans-serif; color:var(--ez-ink); }
.section::before{content:""; position:absolute; width:460px; height:460px; border-radius:50%; z-index:0; background:radial-gradient(circle, rgba(227,30,36,0.05), transparent 70%); top:-180px; right:-140px; animation:ezDrift 17s ease-in-out infinite; pointer-events:none;}
@keyframes ezDrift{0%,100%{transform:translate(0,0);} 50%{transform:translate(-24px,30px);}}
.section .container{position:relative; z-index:1;}

.section-header{max-width:640px; margin:0 auto 52px;}
.section-header.centered{text-align:center;}
.section-label{display:inline-flex; align-items:center; gap:8px; color:var(--ez-red); font-family:'Inter',sans-serif; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px;}
.section-label::before{content:""; width:22px; height:2px; background:var(--ez-red); display:inline-block; transform-origin:left center; animation:lineGrow 1s ease .15s both;}
@keyframes lineGrow{from{transform:scaleX(0);} to{transform:scaleX(1);}}
.section-title{font-family:'Sora',sans-serif; font-size:clamp(1.8rem,3.2vw,2.4rem); font-weight:800; margin:0 0 14px; color:var(--ez-ink);}
.section-title span{color:var(--ez-red);}
.section-desc{color:var(--ez-grey); font-size:15.5px;}

/* ---------- TOOLS GRID ---------- */
.tools-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media(max-width:1000px){ .tools-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:640px){ .tools-grid{grid-template-columns:1fr;} }

.tool-card{
  background:#fff; border:1px solid var(--ez-line); border-radius:var(--ez-radius); padding:28px;
  transition:transform .3s, box-shadow .3s, border-color .3s; display:flex; flex-direction:column;
}
.tool-card:hover{transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,0.07); border-color:transparent;}
.tool-card h3{font-family:'Sora',sans-serif; font-size:17.5px; font-weight:700; margin:0 0 8px; color:var(--ez-ink); display:flex; align-items:center; gap:10px;}
.tool-icon{
  flex:none; width:36px; height:36px; border-radius:10px; background:#FFF1F1; color:var(--ez-red);
  display:flex; align-items:center; justify-content:center; font-size:17px; animation:ezBreathe 3.2s ease-in-out infinite;
}
@keyframes ezBreathe{0%,100%{transform:scale(1);} 50%{transform:scale(1.08);}}

.tool-card > p{color:var(--ez-grey); font-size:14px;}

.tool-input{ margin-bottom:14px; }
.tool-input label{display:block; font-size:12.5px; font-weight:600; color:var(--ez-ink); margin-bottom:6px;}
.tool-input input, .tool-input select{
  width:100%; border:1px solid var(--ez-line); background:#FAFAFA; border-radius:9px; padding:10px 12px;
  font-family:'Inter',sans-serif; font-size:14px; color:var(--ez-ink); transition:border-color .2s, background .2s, box-shadow .2s;
}
.tool-input input:focus, .tool-input select:focus{
  outline:none; border-color:var(--ez-red); background:#fff; box-shadow:0 0 0 3px rgba(227,30,36,0.1);
}
.tool-input input.field-error{ border-color:var(--ez-red); background:#FFF7F7; animation:ezShake .4s ease; }
@keyframes ezShake{ 20%,60%{transform:translateX(-4px);} 40%,80%{transform:translateX(4px);} }

.tool-tip{background:rgba(255,179,0,0.09); border-radius:9px; padding:10px 12px; margin-bottom:14px;}
.tool-tip small{color:var(--ez-grey); font-size:12.5px; line-height:1.5;}

.btn-tool{
  width:100%; background:var(--ez-red); color:#fff; border:none; border-radius:10px; padding:12px; font-size:14.5px; font-weight:700;
  cursor:pointer; transition:transform .2s, box-shadow .2s, background .2s; font-family:'Sora',sans-serif; margin-top:auto;
}
.btn-tool:hover{transform:translateY(-2px); box-shadow:0 12px 24px var(--ez-red-glow); background:var(--ez-red-dark);}
.btn-tool:active{transform:translateY(0);}

.tool-result{
  margin-top:14px; border-radius:12px; padding:14px 16px; font-size:14px; background:#FAFAFA; border:1px solid var(--ez-line);
  transition:background .3s, border-color .3s;
}
.tool-result.filled{
  background:#EFFBF3; border-color:#B9EBCB; animation:ezResultIn .4s ease;
}
@keyframes ezResultIn{ from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);} }
.tool-result .result-main{font-family:'Sora',sans-serif; font-weight:800; font-size:19px; color:var(--ez-ink); display:block; margin-bottom:2px;}
.tool-result.filled .result-main{color:#178A4C;}
.tool-result .result-sub{color:var(--ez-grey); font-size:12.5px;}
.tool-result .placeholder-text{color:var(--ez-grey-light); font-size:13.5px;}

/* ---------- BMS reference card (dark) ---------- */
.tool-card.dark-card{ background:linear-gradient(150deg, var(--ez-black), var(--ez-charcoal)); border-color:rgba(227,30,36,0.25); position:relative; overflow:hidden; }
.tool-card.dark-card::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(240px 200px at 90% 0%, rgba(227,30,36,0.25), transparent 65%);}
.tool-card.dark-card h3{color:#fff; position:relative;}
.tool-card.dark-card > p{color:rgba(255,255,255,0.6); position:relative;}
.ref-row{
  position:relative; display:flex; justify-content:space-between; align-items:center; padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,0.08); font-size:13.5px; transition:padding-left .25s, background .25s;
}
.ref-row:hover{background:rgba(227,30,36,0.08); padding-left:6px; border-radius:6px;}
.ref-row:last-of-type{border-bottom:none;}
.ref-label{color:rgba(255,255,255,0.6);}
.ref-value{color:var(--ez-amber); font-weight:700; font-family:'IBM Plex Mono',monospace;}
.ref-note{color:rgba(255,255,255,0.4); margin-left:8px; font-size:11.5px;}
.dark-card-link{
  position:relative; display:inline-flex; align-items:center; gap:8px; color:var(--ez-amber); font-weight:700;
  font-family:'Sora',sans-serif; margin-top:20px; font-size:14px; transition:gap .2s;
}
.dark-card-link:hover{gap:12px;}

/* ---------- CTA ---------- */
.cta-banner{
  position:relative; overflow:hidden; background:linear-gradient(120deg, var(--ez-red-dark), var(--ez-red) 60%, #ff4d51);
  border-radius:28px; padding:60px 40px; text-align:center; color:#fff; margin:0 0 40px; font-family:'Inter',sans-serif;
}
.cta-banner::after{content:""; position:absolute; inset:-40%; opacity:.5; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), transparent 60%); animation:ezSweep 8s linear infinite;}
@keyframes ezSweep{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
.cta-banner h2{position:relative; font-family:'Sora',sans-serif; font-size:clamp(1.6rem,3vw,2.1rem); margin:0 0 12px;}
.cta-banner p{position:relative; opacity:.92; margin:0 0 28px;}
.cta-actions{position:relative; display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:12px; font-weight:600; font-size:14.5px; transition:transform .2s, box-shadow .2s, background .2s; font-family:'Sora',sans-serif;}
.btn-white{background:#fff; color:var(--ez-black);}
.btn-white:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,0.35);}
.btn-ghost{border:1px solid rgba(255,255,255,0.35); color:#fff;}
.btn-ghost:hover{background:rgba(255,255,255,0.12); transform:translateY(-3px);}

@media(max-width:640px){ .section{padding:44px 0 64px;} }
@media (prefers-reduced-motion: reduce){ .page-hero *, .tools-wrap *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;} }