/*
  Voltpunkten El – home page motion (loaded ONLY on the home page via front matter "css:").

  Principles (DESIGN.md / AGENTS.md): brand palette only (charcoal + electric yellow), motion supports
  hierarchy, nothing is ever hidden behind an animation, and everything is off under reduced motion.

  1. Hero, on load (time-based CSS, no JS): eyebrow line draws, the yellow word gets an underline,
     copy and panel ease in, the panel's breakers switch on one by one, the jour LED flickers on,
     and one spark of "current" runs along the wire above the trust row.
     The <h1> itself is never faded: it is the page's LCP element and must paint immediately.
  2. Scroll (CSS scroll-driven animations, off the main thread): sections rise in as they enter,
     cards cascade, the facts card's yellow bar charges, the hero drifts and fades as it leaves
     (wide screens only), and a thin yellow "current" line under the header shows scroll progress.
  3. Browsers without scroll-driven animations get the same entrance reveals from home-motion.js
     (IntersectionObserver). If that script never runs, content simply stays visible.
*/

/* The site-wide JS reveal (site.css + site.js) is replaced on this page by the system below.
   "html.js" (not ".js") on purpose: this file loads BEFORE site.css, so it must win on specificity,
   not on source order. Without this, content would stay hidden until site.js runs. */
html.js .reveal{opacity:1;transform:none;transition:none}

/* The facts card slides in from the right (§2 / §3). While it waits below the fold it sits 40–44px to the
   right, which would widen the page and allow sideways scrolling on phones. Clip that at the section edge.
   "clip" (not "hidden") so the section never becomes a scroll container. */
.hm-clip-x{overflow-x:clip}

/* Static support for the spark wire (see index.html). It replaces the trust row's own top border,
   so the layout is pixel-identical with or without motion. */
.hero .hm-wire{position:relative;height:1px;margin-top:44px;background:var(--line-dark);overflow:hidden}
.hero .hm-wire + .trust{margin-top:0;border-top:0}

/* ---------- Miniature circuit breakers (always, including reduced motion) ----------
   Same 34×48 footprint as before. A beveled dark body (border shading + gradient, deliberately NO
   box-shadow so last round's glow can keep animating box-shadow on its own), a recessed handle track,
   and a glossy toggle tab. The tab's colour still comes from background-color (grey off / yellow on),
   so round one's switch-on keyframes drive it unchanged; the gloss is a translucent overlay on top.
   Selectors use .hero to beat site.css on specificity (this file loads first). */
.hero .breaker{
  border-radius:4px;
  border:1px solid;border-color:#434A55 #0C0E11 #07080A #0C0E11;
  background:linear-gradient(180deg,#2C323A 0%,#1C2026 55%,#15181C 100%);
}
.hero .breaker::before{
  content:"";position:absolute;left:6px;right:6px;top:3px;bottom:3px;border-radius:3px;
  background:linear-gradient(180deg,#07080A,#0E1115 50%,#07080A);
  border:1px solid;border-color:#050608 #1E232A #2A3038 #1E232A;
}
.hero .breaker::after{
  z-index:1;left:9px;right:9px;border-radius:2px;
  background-image:linear-gradient(180deg,rgba(255,255,255,.6) 0,rgba(255,255,255,.14) 30%,rgba(255,255,255,0) 55%,rgba(0,0,0,.24) 100%);
  outline:1px solid rgba(0,0,0,.45);
}
.hero .breaker.on::after{
  background-image:linear-gradient(180deg,rgba(255,255,255,.6) 0,rgba(255,255,255,.14) 30%,rgba(255,255,255,0) 55%,rgba(0,0,0,.24) 100%);
}

/* ---------- Panel door (decorative; only shown when motion is allowed and JS is on, see §1b) ---------- */
.hero .panel{position:relative;perspective:1600px}
.hero .panel-door{
  display:none;position:absolute;inset:-1px;z-index:3;border-radius:inherit;pointer-events:none;
  transform-origin:100% 50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border:1px solid;border-color:#48505B #1A1E24 #111418 #3A414B;
  background:
    radial-gradient(circle at 18px 18px,#5A626D 0 2.5px,#15181C 3px 4.5px,transparent 5px),
    radial-gradient(circle at calc(100% - 18px) 18px,#5A626D 0 2.5px,#15181C 3px 4.5px,transparent 5px),
    radial-gradient(circle at 18px calc(100% - 18px),#5A626D 0 2.5px,#15181C 3px 4.5px,transparent 5px),
    radial-gradient(circle at calc(100% - 18px) calc(100% - 18px),#5A626D 0 2.5px,#15181C 3px 4.5px,transparent 5px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.014) 0 1px,transparent 1px 4px),
    linear-gradient(160deg,#2E343D 0%,#21262D 52%,#282E36 100%);
}
.hero .panel-door::before{ /* recessed inner frame of the door */
  content:"";position:absolute;inset:30px 26px;border-radius:10px;
  border:1px solid;border-color:#15181C #3A414B #434A55 #15181C;
  background:linear-gradient(180deg,rgba(0,0,0,.14),rgba(0,0,0,0) 40%);
}
.hero .pd-hinge{position:absolute;right:-5px;width:8px;height:52px;border-radius:3px;background:linear-gradient(90deg,#15181C,#5A626D 45%,#2A3038);border:1px solid #0C0E11}
.hero .pd-hinge-top{top:16%}
.hero .pd-hinge-bottom{bottom:16%}
.hero .pd-latch{position:absolute;left:14px;top:50%;width:12px;height:70px;margin-top:-35px;border-radius:6px;background:linear-gradient(90deg,#101317,#3A414B 60%,#22272E);border:1px solid #0C0E11}
.hero .pd-latch::after{content:"";position:absolute;left:4px;top:24px;width:2px;height:20px;border-radius:1px;background:var(--volt)}
.hero .pd-plate{
  position:absolute;left:50%;top:58px;transform:translateX(-50%);white-space:nowrap;
  padding:7px 16px;border-radius:4px;border:1px solid;border-color:#48505B #15181C #0C0E11 #2A3038;
  background:linear-gradient(180deg,#252A31,#191D22);
  font:700 11px/1 var(--font);letter-spacing:.22em;text-transform:uppercase;color:#9AA3AD;
}
.hero .pd-label{position:absolute;left:50%;top:44%;width:92px;height:auto;margin-left:-46px;transform:translateY(-50%)}
.hero .pd-vents{position:absolute;left:50%;bottom:58px;width:132px;height:40px;margin-left:-66px;background:repeating-linear-gradient(180deg,#0E1115 0 4px,transparent 4px 10px)}

@media (prefers-reduced-motion:no-preference){

  /* ---------- 1. Hero on load ---------- */
  @keyframes hm-fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes hm-panel-in{from{opacity:0;transform:translateX(28px) scale(.985)}to{opacity:1;transform:none}}
  @keyframes hm-line-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes hm-underline{to{background-size:100% .08em}}
  @keyframes hm-breaker-on{
    0%{transform:translateY(-16px);background-color:#C9CED4}
    70%{transform:translateY(1px);background-color:var(--volt)}
    100%{transform:none;background-color:var(--volt)}
  }
  @keyframes hm-led-on{0%{opacity:0}18%{opacity:1}28%{opacity:.25}42%{opacity:1}52%{opacity:.6}100%{opacity:1}}
  @keyframes hm-spark{
    0%{transform:translateX(-160px);opacity:0}
    8%{opacity:1}
    92%{opacity:1}
    100%{transform:translateX(100%);opacity:0}
  }

  .hero .eyebrow::before{transform-origin:0 50%;animation:hm-line-draw .7s cubic-bezier(.6,0,.2,1) .1s both}

  .hero h1 .hl{
    background:linear-gradient(var(--volt),var(--volt)) 0 94%/0% .08em no-repeat;
    animation:hm-underline .9s cubic-bezier(.6,0,.2,1) .55s forwards;
  }

  .hero .hero-lead{animation:hm-fade-up .7s cubic-bezier(.2,.7,.2,1) .12s both}
  .hero .hero-ctas{animation:hm-fade-up .7s cubic-bezier(.2,.7,.2,1) .22s both}
  .hero .hm-wire,.hero .trust{animation:hm-fade-up .7s cubic-bezier(.2,.7,.2,1) .32s both}
  .hero .panel{animation:hm-panel-in .9s cubic-bezier(.2,.7,.2,1) .18s both}

  /* ---------- 1b. Panel door + power-up sequence ----------
     The sequence starts the first time the panel is on screen (home-motion.js adds .hm-live to the hero
     once, then stops watching, so it never replays on scroll). The door swings open first; the breaker,
     LED, glow and spark animations below keep round one's exact durations and spacing, shifted by
     --hm-d so they start just after the door is open. */
  @keyframes hm-door-open{
    0%{transform:rotateY(0)}
    10%{transform:rotateY(-2.5deg)}             /* latch releases: the door gives a little first */
    100%{transform:rotateY(100deg);visibility:hidden}
  }
  /* Opacity, not just visibility: Edge did not apply the end state of a visibility-only animation here. */
  @keyframes hm-door-failsafe{to{opacity:0;visibility:hidden}}

  html.js .hero{--hm-d:.9s}                      /* door plays: delay .45s + 0.95s swing, sequence follows */
  html.hm-door-skip .hero{--hm-d:0s}              /* script arrived too late to show the door */
  html.js .hero .panel-door{display:block}
  html.hm-door-skip .hero .panel-door{display:none}
  /* Safety net: if home-motion.js never runs, the door hides itself after 2.5s, so the panel is never stuck closed. */
  html.js:not(.hm-door-js) .hero .panel-door{animation:hm-door-failsafe .3s ease-out 2.5s forwards}
  .hero.hm-live .panel-door{animation:hm-door-open .95s cubic-bezier(.55,.05,.3,1) .45s both}

  /* Breakers switch on in sequence, top to bottom */
  .hero.hm-live .breaker.on::after{animation:hm-breaker-on .45s cubic-bezier(.3,.9,.4,1) both}
  .hero.hm-live .circuit:nth-child(1) .breaker.on::after{animation-delay:calc(var(--hm-d,0s) + .7s)}
  .hero.hm-live .circuit:nth-child(2) .breaker.on::after{animation-delay:calc(var(--hm-d,0s) + .88s)}
  .hero.hm-live .circuit:nth-child(3) .breaker.on::after{animation-delay:calc(var(--hm-d,0s) + 1.06s)}
  .hero.hm-live .circuit:nth-child(4) .breaker.on::after{animation-delay:calc(var(--hm-d,0s) + 1.24s)}

  /* Visibility boost (added after round one, deliberately subtle): as each switch lands, its breaker
     housing gets a brief soft yellow glow that fades back out, so the sequence registers on a first
     viewing. Starts and ends with no glow, so the settled panel looks exactly as in round one. */
  @keyframes hm-breaker-glow{
    0%{box-shadow:0 0 0 0 rgba(245,196,0,0),0 0 0 0 rgba(245,196,0,0)}
    30%{box-shadow:0 0 0 1px rgba(245,196,0,.55),0 0 14px 2px rgba(245,196,0,.28)}
    100%{box-shadow:0 0 0 0 rgba(245,196,0,0),0 0 0 0 rgba(245,196,0,0)}
  }
  /* No fill mode: before and after the glow the housing has no box-shadow at all, exactly as in round one. */
  .hero.hm-live .breaker.on{animation:hm-breaker-glow 1.2s ease-out}
  .hero.hm-live .circuit:nth-child(1) .breaker.on{animation-delay:calc(var(--hm-d,0s) + 1s)}
  .hero.hm-live .circuit:nth-child(2) .breaker.on{animation-delay:calc(var(--hm-d,0s) + 1.18s)}
  .hero.hm-live .circuit:nth-child(3) .breaker.on{animation-delay:calc(var(--hm-d,0s) + 1.36s)}
  .hero.hm-live .circuit:nth-child(4) .breaker.on{animation-delay:calc(var(--hm-d,0s) + 1.54s)}

  /* The jour LED flickers on with its breaker, then keeps its calm existing pulse */
  .hero.hm-live .led.pulse{animation:hm-led-on .6s linear calc(var(--hm-d,0s) + .78s) both,pulse 2.2s ease-in-out calc(var(--hm-d,0s) + 1.6s) infinite}

  /* One spark of current runs along the wire after the panel has powered up */
  .hero .hm-wire::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,transparent,var(--volt) 70%,#FFF6C8 88%,transparent) 0 0/160px 100% no-repeat;
    transform:translateX(-160px);opacity:0;
  }
  .hero.hm-live .hm-wire::after{animation:hm-spark 1.5s cubic-bezier(.5,0,.3,1) calc(var(--hm-d,0s) + 1.5s) both}

  /* ---------- 2. Scroll-driven (only where the browser supports it) ---------- */
  @supports (animation-timeline:view()){
    @keyframes hm-rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
    @keyframes hm-slide-left{from{opacity:0;transform:translateX(44px)}to{opacity:1;transform:none}}
    @keyframes hm-charge{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    @keyframes hm-hero-out{from{opacity:1;transform:none}to{opacity:.15;transform:translateY(90px) scale(.97)}}
    @keyframes hm-grid-drift{from{transform:none}to{transform:translateY(120px)}}
    @keyframes hm-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

    /* Sections rise in as they enter the viewport, scrubbed by scroll position */
    .reveal,.cta-band .cta-inner>*{
      animation:hm-rise cubic-bezier(.2,.7,.2,1) both;
      animation-timeline:view();
      animation-range:entry 0% cover 28%;
    }
    /* Cards and review slots cascade within a row */
    .services .card:nth-child(3n+2),.reviews .review-slot:nth-child(2){animation-range:entry 8% cover 34%}
    .services .card:nth-child(3n+3),.reviews .review-slot:nth-child(3){animation-range:entry 16% cover 40%}
    .cta-band .cta-inner>*:nth-child(2){animation-range:entry 10% cover 34%}

    /* The facts card slides in from the side, and its yellow bar charges up */
    .facts{
      animation:hm-slide-left cubic-bezier(.2,.7,.2,1) both;
      animation-timeline:view();
      animation-range:entry 0% cover 30%;
      view-timeline:--hm-facts block;
    }
    .facts::before{
      transform-origin:0 50%;
      animation:hm-charge cubic-bezier(.6,0,.2,1) both;
      animation-timeline:--hm-facts;
      animation-range:entry 30% cover 45%;
    }

    /* Section eyebrow lines draw as their heading arrives */
    .section-head .eyebrow::before,.about-copy .eyebrow::before{
      transform-origin:0 50%;
      animation:hm-line-draw cubic-bezier(.6,0,.2,1) both;
      animation-timeline:view();
      animation-range:entry 20% cover 35%;
    }

    /* A thin line of current under the header shows how far down the page you are */
    .site-header::after{
      content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;
      background:var(--volt);transform-origin:0 50%;transform:scaleX(0);
      animation:hm-progress linear both;
      animation-timeline:scroll(root block);
    }

    /* Cinematic exit: on wide screens the hero drifts down and fades as it scrolls away.
       Not on narrow screens, where the hero is taller than the viewport and still being read. */
    @media (min-width:981px){
      .hero{view-timeline:--hm-hero block}
      .hero .hero-inner{
        animation:hm-hero-out linear both;
        animation-timeline:--hm-hero;
        animation-range:exit 0% exit 100%;
      }
      .hero.grid-bg::before{
        animation:hm-grid-drift linear both;
        animation-timeline:--hm-hero;
        animation-range:exit 0% exit 100%;
      }
    }
  }

  /* ---------- 3. Fallback reveals (home-motion.js adds .hm-io only when scroll-driven animations are unsupported) ---------- */
  @supports not (animation-timeline:view()){
    /* "html.hm-io" matches the specificity of the override above and comes later, so it wins. */
    html.hm-io .reveal,html.hm-io .cta-band .cta-inner>*{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
    html.hm-io .reveal:not(.hm-in),html.hm-io .cta-band .cta-inner>*:not(.hm-in){opacity:0;transform:translateY(32px)}
    html.hm-io .services .card:nth-child(3n+2),html.hm-io .reviews .review-slot:nth-child(2),html.hm-io .cta-band .cta-inner>*:nth-child(2){transition-delay:.1s}
    html.hm-io .services .card:nth-child(3n+3),html.hm-io .reviews .review-slot:nth-child(3){transition-delay:.2s}
    html.hm-io .facts:not(.hm-in){transform:translateX(40px)}
  }
}