/* ══════════════════════════════════════════════════════════════════
   "From switch-on to first löyly" — reusable heat-up animation block.
   Block-specific styles only; brand tokens (var(--sauna) etc.) come from
   the host landing page's CSS. Enqueued on the sauna heater landing pages.
   ══════════════════════════════════════════════════════════════════ */
.loyly{position:relative; overflow:hidden}
.loyly-amber{
  position:absolute; left:62%; top:50%; width:680px; height:680px; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(240,96,32,.16) 0%, rgba(240,96,32,0) 62%);
  pointer-events:none; z-index:0;
}
.loyly .wrap{position:relative; z-index:1}
.loyly-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:72px; align-items:center}

/* ── Copy + milestones ─────────────────────────────────────────────── */
.loyly-copy h2{color:#fff; margin-bottom:8px}
/* Newcomer-friendly definition line, directly under the heading. */
.loyly-def{margin-top:14px; max-width:54ch; font-size:.96rem; line-height:1.55; color:#aeb4bc}
.loyly-copy .lead{margin-top:14px; color:#cfd3d8}
.loyly-miles{margin-top:clamp(28px,3.4vw,40px); display:flex; flex-direction:column; gap:2px}
.loyly-miles .m{
  display:flex; align-items:center; gap:16px; padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.09); color:var(--nav-muted);
  transition:color .35s;
}
.loyly-miles .m:last-child{border-bottom:0}
.loyly-miles .m .dot{
  width:11px; height:11px; border-radius:50%; flex:none; background:rgba(255,255,255,.22);
  transition:background .35s, box-shadow .35s, transform .35s;
}
.loyly-miles .m .t{
  font-weight:600; font-variant-numeric:tabular-nums; font-size:1rem; min-width:2.6em;
  color:var(--nav-muted); opacity:.7; transition:color .35s, opacity .35s;
}
.loyly-miles .m .l{font-size:1.02rem; line-height:1.35}
.loyly-miles .m .l b{color:#fff; font-weight:600}
.loyly-miles .m.on{color:#fff}
.loyly-miles .m.on .t{opacity:1; color:var(--sauna)}
.loyly-miles .m.on .dot{background:var(--sauna); box-shadow:0 0 0 5px rgba(232,128,80,.18); transform:scale(1.12)}
.loyly-miles .m--loyly.on .dot{background:var(--cta); box-shadow:0 0 0 6px rgba(240,96,32,.26)}

/* ── Stage: ring + glowing stones + steam + readout ────────────────── */
.loyly-stage{display:flex; flex-direction:column; align-items:center}
.loyly-dial{position:relative; width:clamp(290px,32vw,360px); aspect-ratio:1; display:flex; align-items:center; justify-content:center}
.loyly-ring{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); overflow:visible}
.loyly-track{fill:none; stroke:rgba(255,255,255,.09); stroke-width:13; stroke-linecap:round}
.loyly-arc{fill:none; stroke:url(#loylyGrad); stroke-width:13; stroke-linecap:round; filter:drop-shadow(0 0 10px rgba(240,96,32,.45))}

/* Glowing stones — fill set per-frame by JS; group glow scales with --g */
.loyly-stones{
  position:absolute; width:46%; height:auto; top:50%; left:50%;
  transform:translate(-50%,-58%);
  filter:drop-shadow(0 0 calc(var(--g,0) * 16px) rgba(240,96,32, calc(var(--g,0) * .75)));
}
.loyly-coreglow{opacity:calc(var(--g,0) * .85)}
.loyly-cage{fill:none; stroke:#8a8f96; stroke-width:3}
.loyly-bars{fill:none; stroke:#777c83; stroke-width:2; opacity:.7}
.loyly-foot{stroke:#8a8f96; stroke-width:3; stroke-linecap:round}
.loyly-stone{stroke:rgba(0,0,0,.25); stroke-width:.5}

/* Readout */
.loyly-read{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; transform:translateY(40px)}
.loyly-num{font-weight:600; letter-spacing:-.045em; color:#fff; line-height:1; font-variant-numeric:tabular-nums; display:flex; align-items:flex-start}
.loyly-num .val{font-size:clamp(3.4rem,5.4vw,4.8rem)}
.loyly-num .deg{font-size:1.7rem; margin-top:.5em; color:var(--sauna); font-weight:500}
.loyly-state{margin-top:8px; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--sauna); min-height:1em}

/* ── Steam wisps — gentle while hot, a burst on first löyly ─────────── */
.loyly-steam{
  position:absolute; left:50%; top:6%; transform:translateX(-50%);
  display:flex; gap:14px; opacity:0; transition:opacity .5s; z-index:3; pointer-events:none;
}
.loyly.is-hot .loyly-steam{opacity:.5}
.loyly.is-loyly .loyly-steam{opacity:1}
.loyly-steam span{display:block; width:13px; height:66px}
.loyly-steam svg{width:100%; height:100%; overflow:visible}
.loyly-steam path{fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; opacity:.55}
@media (prefers-reduced-motion:no-preference){
  .loyly.is-hot .loyly-steam span{animation:loylyRise 3s ease-in-out infinite}
  .loyly.is-hot .loyly-steam span:nth-child(2){animation-delay:.5s}
  .loyly.is-hot .loyly-steam span:nth-child(3){animation-delay:1s}
  .loyly.is-hot .loyly-steam span:nth-child(4){animation-delay:1.5s}
  .loyly.is-hot .loyly-steam span:nth-child(5){animation-delay:2s}
  .loyly.is-loyly .loyly-steam span{animation:loylyBurst 1.5s ease-out forwards}
  .loyly.is-loyly .loyly-steam span:nth-child(2){animation-delay:.08s}
  .loyly.is-loyly .loyly-steam span:nth-child(3){animation-delay:.16s}
  .loyly.is-loyly .loyly-steam span:nth-child(4){animation-delay:.24s}
  .loyly.is-loyly .loyly-steam span:nth-child(5){animation-delay:.32s}
}
@keyframes loylyRise{
  0%{opacity:0; transform:translateY(14px) scaleY(.85)}
  25%{opacity:.6}
  100%{opacity:0; transform:translateY(-40px) scaleY(1.1)}
}
@keyframes loylyBurst{
  0%{opacity:0; transform:translateY(20px) scale(.7)}
  20%{opacity:.95; transform:translateY(-6px) scale(1.1)}
  100%{opacity:0; transform:translateY(-58px) scale(1.35)}
}

/* ── Replay control (default is the continuous loop) ───────────────── */
.loyly-replay{
  margin:clamp(34px,4vw,48px) auto 0; display:inline-flex; align-items:center; gap:9px;
  padding:.7rem 1.3rem; border:1px solid rgba(255,255,255,.28); border-radius:var(--r-lg);
  color:#fff; font-weight:600; font-size:.82rem; letter-spacing:.02em;
  transition:background .15s, border-color .15s;
}
.loyly-replay:hover{background:rgba(255,255,255,.08); border-color:#fff}
.loyly-replay svg{width:15px; height:15px; stroke:var(--sauna); fill:none; stroke-width:2.2; transition:transform .4s}
.loyly-replay:hover svg{transform:rotate(-180deg)}

@media (max-width:1080px){
  .loyly-grid{grid-template-columns:1fr; gap:44px}
  .loyly-stage{order:-1}
}