/* Animation layer — additive styles on top of kit.css */

/* ===== Scroll reveal ===== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.08s}
.reveal-delay-2{transition-delay:.16s}
.reveal-delay-3{transition-delay:.24s}
.reveal-delay-4{transition-delay:.32s}
.reveal-delay-5{transition-delay:.40s}
.reveal-delay-6{transition-delay:.48s}

/* ===== Hero: canvas mesh ===== */
.dss-hero{position:relative}
.dss-hero-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.6;mix-blend-mode:screen}
.dss-hero-content{position:relative;z-index:2}

/* ===== Section divider: single soft wave ===== */
.dss-divider{position:relative;height:48px;overflow:hidden;background:inherit}
.dss-divider svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.dss-divider .wave{stroke:var(--dss-brand);stroke-width:1;fill:none;opacity:.18}

/* ===== Ambient circuit grid ===== */
.dss-ambient{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;mix-blend-mode:screen}
.dss-ambient canvas{width:100%;height:100%;display:block}
.dss-section,.dss-hero,.dss-footer,.dss-article{position:relative;z-index:1}

/* ===== Service card — circuit glow on hover ===== */
.dss-service-card{position:relative;overflow:hidden}
.dss-service-card .circuit-trace{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s}
.dss-service-card:hover .circuit-trace{opacity:1}
.dss-service-card .circuit-trace path{stroke:var(--dss-brand);stroke-width:1.5;fill:none;stroke-dasharray:none;opacity:.5;stroke-linecap:square}
.dss-service-card.dss-is-smarthome .circuit-trace path{stroke:var(--dss-accent)}
.dss-service-card:hover .circuit-trace path{animation:none}

/* icon pulse halo */
.dss-service-card .dss-service-icon{position:relative}
.dss-service-card .dss-service-icon::after{content:'';position:absolute;inset:-6px;border-radius:14px;border:1px solid var(--card-color,var(--dss-brand));opacity:0;transform:scale(.95);transition:all .4s}
.dss-service-card.dss-is-smarthome .dss-service-icon::after{border-color:var(--dss-accent)}
.dss-service-card:hover .dss-service-icon::after{opacity:.5;transform:scale(1.1);animation:haloPulse 1.8s ease-out infinite}
@keyframes haloPulse{
  0%{transform:scale(.95);opacity:.6}
  70%{transform:scale(1.25);opacity:0}
  100%{transform:scale(1.25);opacity:0}
}

/* ===== Stat count-in (handled via JS, but guard against layout shift) ===== */
.dss-stat-number{font-variant-numeric:tabular-nums}

/* ===== Process steps: animated connector line ===== */
.dss-process{position:relative}
.dss-process::before{content:'';position:absolute;top:32px;left:10%;right:10%;height:2px;background:linear-gradient(90deg,transparent,rgba(0,195,210,.4),rgba(0,195,210,.4),transparent);transform:scaleX(0);transform-origin:left;transition:transform 1.2s ease-out}
.dss-process.in-view::before{transform:scaleX(1)}
@media (max-width:900px){.dss-process::before{display:none}}

/* ===== Tweaks panel ===== */
.tweaks-panel{position:fixed;bottom:20px;right:20px;z-index:9999;background:rgba(15,17,20,.95);backdrop-filter:blur(12px);border:1px solid var(--dss-brand);border-radius:12px;padding:16px 20px;color:var(--dss-primary);font-size:13px;box-shadow:0 20px 40px rgba(0,0,0,.5);display:none;max-width:320px;font-family:'Inter',sans-serif}
.tweaks-panel.on{display:block}
.tweaks-panel h4{color:var(--dss-brand);font-size:12px;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px;font-weight:700}
.tweaks-panel label{display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer;font-size:13px;color:var(--dss-text)}
.tweaks-panel input[type=checkbox]{accent-color:var(--dss-brand);width:16px;height:16px}
.tweaks-panel input[type=range]{width:100%;accent-color:var(--dss-brand);margin-top:4px}
.tweaks-panel .row{display:flex;justify-content:space-between;font-size:11px;color:var(--dss-text-light);margin-top:12px}

@media (prefers-reduced-motion: reduce){
  .reveal{transition:none;opacity:1;transform:none}
  .dss-hero-canvas,.dss-ambient{display:none}
  .dss-service-card:hover .circuit-trace path,.dss-service-card:hover .dss-service-icon::after{animation:none}
}