/* =====================================================================
   MIKE: "HEART-SHINE" on the visualizer's silver rim (Oct 3, 2026).
   (Replaces the earlier glow pulse; the filename stays remodeler-pulse.css.)
   An add-on to remodeler.css (that file is NOT changed). Linked right after
   remodeler.css on bathroom-remodeler.html and CreativeTilingIdeas.html.

   What it does: once the light sweep around the rim has finished on page load,
   a silver-white glint travels round and round the rim forever. Its SPEED beats
   like a heart: two quick spurts (lub-dub), then a slow glide, about every 1.4s.
   It goes round the whole rim once every 4 beats.

   How: the glint is an extra conic-gradient layer added on top of the rim's own
   silver background (.btr-bezel). The tool's white glass covers the middle, so the
   glint only shows on the ring. The grain, sheen and load sweep from remodeler.css
   still sit on top, untouched. Nothing moves in the layout.
   Older browsers that can't animate this smoothly just keep the plain rim.
   People with "reduce motion" turned on get the plain rim, no movement.

   MIKE: KNOBS (in the .btr-bezel rule below)
     --btr-beat              speed: one lub-dub + glide. 1.4s now. Bigger = slower (e.g. 1.8s).
     --btr-heartshine        brightness: 1 now. 0.6 = softer, 1.3 = brighter.
   MIKE: TURN IT OFF: set --btr-heartshine: 0, or delete the
     <link ... remodeler-pulse.css> line on both pages.
   ===================================================================== */

/* the glint's position (an angle) and fade-in, registered so browsers can animate them smoothly */
@property --btr-hs-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --btr-hs-on    { syntax: '<number>'; inherits: false; initial-value: 0; }

.btr-bezel {
  --btr-beat: 1.4s;        /* MIKE: speed (one heartbeat) */
  --btr-heartshine: 1;     /* MIKE: brightness (0 = off) */
  --btr-hs-on: 0;          /* hidden until the animation fades it in */
  /* glint layer on top + the rim's own silver (same as remodeler.css: var(--btr-rim)) */
  background:
    conic-gradient(from var(--btr-hs-angle, 0deg),
      rgba(255,255,255,0) 0deg 296deg,
      rgba(235,240,248,calc(.35 * var(--btr-hs-on) * var(--btr-heartshine))) 326deg,
      rgba(255,255,255,calc(.95 * var(--btr-hs-on) * var(--btr-heartshine))) 344deg,
      rgba(235,240,248,calc(.45 * var(--btr-hs-on) * var(--btr-heartshine))) 352deg,
      rgba(255,255,255,0) 360deg),
    var(--btr-rim);
}

/* run it only in browsers that can animate it smoothly, and only if "reduce motion" is off.
   (Every browser that knows transition-behavior also supports @property.) */
@supports (transition-behavior: allow-discrete) {
  @media (prefers-reduced-motion: no-preference) {
    .btr-bezel {
      /* start after the load sweep: sweep delay + sweep time from remodeler.css (.6s + 2.6s) + .2s */
      animation:
        btr-hs-spin calc(var(--btr-beat) * 4) linear calc(var(--btr-sweep-delay, .6s) + var(--btr-sweep, 2.6s) + .2s) infinite,
        btr-hs-in .9s ease-out calc(var(--btr-sweep-delay, .6s) + var(--btr-sweep, 2.6s) + .2s) both;
    }
  }
}

@keyframes btr-hs-in { from { --btr-hs-on: 0; } to { --btr-hs-on: 1; } }

/* one lap = 4 heartbeats (90 degrees each). In each beat:
   first 10%: quick spurt (+30deg), next 6%: brief ease (+6deg),
   next 10%: second quick spurt (+22deg), last 74%: slow glide (+32deg). */
@keyframes btr-hs-spin {
  0%    { --btr-hs-angle:   0deg; }
  2.5%  { --btr-hs-angle:  30deg; }
  4%    { --btr-hs-angle:  36deg; }
  6.5%  { --btr-hs-angle:  58deg; }
  25%   { --btr-hs-angle:  90deg; }
  27.5% { --btr-hs-angle: 120deg; }
  29%   { --btr-hs-angle: 126deg; }
  31.5% { --btr-hs-angle: 148deg; }
  50%   { --btr-hs-angle: 180deg; }
  52.5% { --btr-hs-angle: 210deg; }
  54%   { --btr-hs-angle: 216deg; }
  56.5% { --btr-hs-angle: 238deg; }
  75%   { --btr-hs-angle: 270deg; }
  77.5% { --btr-hs-angle: 300deg; }
  79%   { --btr-hs-angle: 306deg; }
  81.5% { --btr-hs-angle: 328deg; }
  100%  { --btr-hs-angle: 360deg; }
}