/* =========================================================
   Adhira Electricals — premium theme & electrical animations
   Designed & Developed by Hindustan Digital Services
   ========================================================= */
:root { --red: #E3141B; --red-d: #A80F14; --amber: #F6B700; --amber-d: #E08A00; --ink: #0F1013; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--amber); color: var(--ink); }

/* ---------- Typography helpers ---------- */
.eyebrow { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: linear-gradient(90deg, var(--red), var(--amber)); }
.grad-red { background: linear-gradient(180deg, #FF2A31 0%, #E3141B 45%, #9E0B10 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-amber { background: linear-gradient(180deg, #FFD54A 0%, #F6B700 45%, #E08A00 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.text-stroke { -webkit-text-stroke: 1px rgba(255,255,255,.14); color: transparent; }

/* ---------- Power-on flicker for hero headline ---------- */
.power-on { animation: powerOn 1.6s steps(1) both; }
@keyframes powerOn { 0%{opacity:.08} 8%{opacity:1} 12%{opacity:.2} 20%{opacity:1} 24%{opacity:.4} 30%,100%{opacity:1} }
.neon-amber { text-shadow: 0 0 18px rgba(246,183,0,.45), 0 0 48px rgba(246,183,0,.25); }

/* ---------- Backgrounds ---------- */
.bg-dark-grid { background-color: #0F1013; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 26px 26px; }
.bg-noise::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); }
.glow-red { background: radial-gradient(closest-side, rgba(227,20,27,.45), transparent); filter: blur(10px); }
.glow-amber { background: radial-gradient(closest-side, rgba(246,183,0,.38), transparent); filter: blur(10px); }
canvas[data-circuit] { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.diagonal-stripes { background: repeating-linear-gradient(135deg, var(--amber) 0 14px, #141519 14px 28px); }

/* ---------- Electric border button (current running round the edge) ---------- */
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.btn-electric { position: relative; isolation: isolate; }
.btn-electric::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; z-index: -1; background: conic-gradient(from var(--ang), transparent 0 70%, #FFE08A 80%, #F6B700 85%, transparent 92%); animation: rot 2.4s linear infinite; }
.btn-electric::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: inherit; }
@keyframes rot { to { --ang: 360deg; } }
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after { content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); transition: left .7s ease; }
.btn-shine:hover::after { left: 140%; }

/* ---------- Illustration animations ---------- */
.spin { transform-origin: 100px 100px; animation: spin 1.1s linear infinite; }
.spin-slow .spin { animation-duration: 3.2s; }
@keyframes spin { to { transform: rotate(360deg); } }
.float { animation: float 6s ease-in-out infinite; }
.float-d1 { animation-delay: -2s; } .float-d2 { animation-delay: -4s; }
@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-14px) } }
.current { stroke-dasharray: 5 16; animation: dash .9s linear infinite; filter: drop-shadow(0 0 3px #FFD54A); }
@keyframes dash { to { stroke-dashoffset: -42; } }
.led-blink { animation: blink 1.4s steps(1) infinite; }
@keyframes blink { 50% { opacity: .15 } }
.charge rect { animation: charge 2.2s ease-in-out infinite both; }
@keyframes charge { 0%,15% { opacity: .15 } 40%,100% { opacity: 1 } }
.beam { animation: beam 3s ease-in-out infinite; transform-origin: 84px 100px; }
@keyframes beam { 0%,100% { opacity: .55 } 50% { opacity: 1 } }
.steam path { animation: steam 2.4s ease-in-out infinite; }
.steam path:nth-child(2) { animation-delay: .8s; }
@keyframes steam { 0% { opacity: 0; transform: translateY(8px) } 50% { opacity: 1 } 100% { opacity: 0; transform: translateY(-10px) } }
.mcb-toggle { animation: mcb 4s ease-in-out infinite; }
@keyframes mcb { 0%,85%,100% { transform: none } 90% { transform: translateY(12px); fill: #E3141B } }

/* Bulb power states (hero switch) */
.bulb-wrap .bulb-halo { opacity: 0; transition: opacity .6s ease; }
.bulb-wrap .bulb-glass { filter: grayscale(1) brightness(.75); transition: filter .5s ease; }
.bulb-wrap .bulb-filament { stroke: #6B6E77; transition: stroke .3s; }
.bulb-wrap.on .bulb-halo { opacity: 1; animation: halo 3s ease-in-out infinite .6s; }
.bulb-wrap.on .bulb-glass { filter: none; }
.bulb-wrap.on .bulb-filament { stroke: #C2410C; }
@keyframes halo { 0%,100% { opacity: 1 } 50% { opacity: .75 } }
.page-dim { transition: background-color .6s ease; }

/* Toggle switch control */
.power-switch { width: 64px; height: 100px; border-radius: 14px; background: linear-gradient(#fff,#E4E6EA); box-shadow: 0 10px 30px -10px rgba(0,0,0,.6), inset 0 0 0 1px #CDD0D6; padding: 10px; cursor: pointer; }
.power-switch span { display:block; height:100%; border-radius:8px; background: linear-gradient(#F6F7F9,#D2D5DB); box-shadow: inset 0 0 0 1px #C3C7CE; position:relative; transition: transform .25s ease; }
.power-switch span::after { content:""; position:absolute; left:50%; top:10px; width:16px; height:4px; margin-left:-8px; border-radius:2px; background:#9CA0A8; transition: background .25s, box-shadow .25s; }
.power-switch[aria-pressed="true"] span { transform: perspective(200px) rotateX(14deg); }
.power-switch[aria-pressed="true"] span::after { background: var(--red); box-shadow: 0 0 10px var(--red); }

/* ---------- AC sine-wave divider ---------- */
.wave path { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 3.5s ease forwards; }
.wave.in path { animation-play-state: running; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.wave-run { animation: waveRun 8s linear infinite; }
@keyframes waveRun { to { transform: translateX(-200px); } }

/* ---------- Lightning flash ---------- */
.bolt-flash { animation: bolt 5s infinite; }
@keyframes bolt { 0%,90%,100% { opacity: .0 } 91% { opacity: 1 } 92% { opacity: .2 } 93%,95% { opacity: 1 } }

/* ---------- Brand marquee ---------- */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 16px; width: max-content; animation: marquee 42s linear infinite; }
.marquee.reverse .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.brand-pill { display:inline-flex; align-items:center; gap:10px; padding: 14px 26px; border-radius: 14px; font-family: Montserrat, sans-serif; font-weight: 800; font-size: 17px; letter-spacing: .01em; white-space: nowrap; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: #fff; transition: all .3s; }
.brand-pill:hover { background:#fff; color:#0F1013; box-shadow: 0 0 30px rgba(246,183,0,.35); }
.brand-pill i { width:8px; height:8px; border-radius:50%; background: var(--amber); box-shadow: 0 0 10px var(--amber); }

/* ---------- Cards ---------- */
.card-glow { position: relative; }
.card-glow::before { content:""; position:absolute; inset:0; border-radius: inherit; padding:1px; background: linear-gradient(140deg, rgba(227,20,27,.0), rgba(227,20,27,.0)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: background .4s; pointer-events:none; }
.card-glow:hover::before { background: linear-gradient(140deg, #E3141B, #F6B700 60%, transparent); }
.tilt { transform-style: preserve-3d; transition: transform .25s ease, box-shadow .3s ease; will-change: transform; }
.ill-stage { background: radial-gradient(90% 80% at 50% 30%, #FFFFFF 0%, #F4F5F7 60%, #E9EBEF 100%); }
.ill-stage-dark { background: radial-gradient(90% 80% at 50% 30%, #2A2C33 0%, #17181C 70%); }
.cat-card .arrow { transition: transform .3s; } .cat-card:hover .arrow { transform: translateX(5px); }
.chip[aria-pressed="true"] { background: #0F1013; color: #fff; border-color: #0F1013; box-shadow: 0 8px 20px -10px rgba(0,0,0,.6); }

/* ---------- Scroll progress (current bar) ---------- */
#progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 60; background: linear-gradient(90deg, var(--red), var(--amber)); box-shadow: 0 0 10px var(--amber); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .1s } .reveal-d2 { transition-delay: .2s } .reveal-d3 { transition-delay: .3s }

/* ---------- Forms ---------- */
.field { width: 100%; border: 1px solid #DADCE0; background: #fff; border-radius: 12px; padding: 13px 15px; font-size: 15px; color: #0F1013; transition: border-color .2s, box-shadow .2s; }
.field:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 4px rgba(227,20,27,.12); }
.field-dark { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: #fff; }
.field-dark::placeholder { color: rgba(255,255,255,.45); }
.field-dark option { color: #0F1013; }
.seg input:checked + span { background: linear-gradient(180deg,#F0232A,#B80F15); color: #fff; border-color: transparent; box-shadow: 0 8px 20px -8px rgba(227,20,27,.7); }

/* ---------- FAQ ---------- */
details summary { list-style: none; cursor: pointer; } details summary::-webkit-details-marker { display: none; }
details[open] .faq-plus { transform: rotate(45deg); background: var(--red); color: #fff; }
.faq-plus { transition: transform .3s, background .3s; }

/* ---------- Modal ---------- */
.modal[hidden] { display: none; }
.modal-panel { animation: pop .35s cubic-bezier(.2,.9,.3,1.2); }
@keyframes pop { from { transform: translateY(18px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Floating actions ---------- */
.pulse-ring { position: absolute; inset: 0; border-radius: 9999px; animation: ring 2.2s infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.55); } 80%,100% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } }

/* ---------- Header ---------- */
.header-scrolled { box-shadow: 0 10px 30px -18px rgba(15,16,19,.45); }
.nav-link { position: relative; }
.nav-link::after { content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px; background: linear-gradient(90deg,var(--red),var(--amber)); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}