/* ==========================================================================
   Velto 3D motor viewer: model + throttle, rpm gauge, peak power, sound.
   Used by the knowledge-base motor pages and by product pages.
   Everything is scoped under .m3d so it can sit inside the Webflow pages.
   ========================================================================== */
.m3d { direction: rtl; }
.m3d .model-viewer {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    min-height: 520px;
    aspect-ratio: 16 / 7;
    border: 1px solid rgba(6, 64, 43, 0.12);
    border-radius: 12px;
    background:
        radial-gradient(circle at 50% 36%, rgba(150, 217, 192, 0.18), transparent 46%),
        linear-gradient(135deg, #071813 0%, #0b241b 58%, #06110d 100%);
}
.m3d .model-viewer canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.m3d .viewer-status {
    position: absolute; inset: 0; display: grid; place-items: center; padding: 24px;
    color: rgba(255, 255, 255, 0.76); font-size: 13px; line-height: 1.5; font-weight: 800;
    text-align: center; pointer-events: none;
}
@media (max-width: 767px) { .m3d .model-viewer { aspect-ratio: auto; height: 380px; min-height: 0; } }

/* throttle + rpm gauge under the viewer */
    .m3d .drive-deck {
      display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: center;
      margin-top: 16px; padding: 18px 22px; border-radius: 14px;
      background: linear-gradient(135deg, #071813 0%, #0b241b 60%, #06110d 100%); color: #e8f5ef;
    }
    .m3d .rpm-gauge { position: relative; }
    .m3d .rpm-svg { display: block; width: 100%; height: auto; overflow: visible; }
    .m3d .rpm-track, .m3d .rpm-fill { fill: none; stroke-width: 12; stroke-linecap: round; }
    .m3d .rpm-track { stroke: rgba(255, 255, 255, .1); }
    .m3d .rpm-fill { stroke: url(#rpm-grad); stroke: #cdff63; stroke-dasharray: 1; stroke-dashoffset: 1; }
    .m3d .rpm-fill.is-hot { stroke: #ff8a3d; }
    .m3d .rpm-tick { stroke: rgba(255, 255, 255, .35); stroke-width: 2; }
    .m3d .rpm-tick-label { fill: rgba(232, 245, 239, .6); font-size: 9px; font-weight: 700; text-anchor: middle; font-family: inherit; }
    .m3d .rpm-needle { stroke: #fff; stroke-width: 3; stroke-linecap: round; transform-origin: 100px 110px; }
    .m3d .rpm-hub { fill: #fff; }
    .m3d .rpm-readout { text-align: center; line-height: 1; margin-top: 6px; }
    .m3d .rpm-readout span { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
    .m3d .rpm-readout small { display: block; margin-top: 4px; font-size: 11px; color: #cdff63; font-weight: 700; }
    .m3d .throttle-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
    .m3d .throttle-label { font-weight: 800; font-size: 16px; }
    .m3d .throttle-head output { font-weight: 800; font-size: 18px; color: #cdff63; font-variant-numeric: tabular-nums; }
    .m3d .throttle-range {
      -webkit-appearance: none; appearance: none; width: 100%; height: 14px; border-radius: 999px; margin: 0;
      background: linear-gradient(90deg, #cdff63 0 var(--fill, 45%), rgba(255, 255, 255, .12) var(--fill, 45%) 100%);
      outline-offset: 6px; cursor: pointer;
    }
    .m3d .throttle-range::-webkit-slider-thumb {
      -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%;
      background: #fff; border: 4px solid #085136; box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
    }
    .m3d .throttle-range::-moz-range-thumb {
      width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid #085136;
    }
    .m3d .throttle-scale { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: rgba(232, 245, 239, .55); }
    .m3d .throttle-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
    .m3d .throttle-btn {
      border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: #e8f5ef;
      border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
      touch-action: manipulation;
    }
    .m3d .throttle-btn:hover { background: rgba(255, 255, 255, .12); }
    .m3d .throttle-btn.is-hot { border-color: #ff8a3d; color: #ffb27d; }
    .m3d .throttle-btn:active { transform: translateY(1px); }
    .m3d .throttle-help { margin: 12px 0 0; font-size: 12px; color: rgba(232, 245, 239, .6); }
    .m3d .throttle-help + .throttle-help { margin-top: 4px; }
    .m3d .sound-btn[aria-pressed="false"] { opacity: .6; }
    .m3d .rpm-redzone { fill: none; stroke: #ff3b3b; stroke-width: 4; stroke-linecap: butt; opacity: .85; }
    .m3d .throttle-btn.is-peak {
      position: relative; overflow: hidden; border-color: #ff3b3b; color: #fff;
      background: linear-gradient(135deg, #b3121b, #ff3b3b); box-shadow: 0 0 0 0 rgba(255, 59, 59, .5);
    }
    .m3d .throttle-btn.is-peak:hover { background: linear-gradient(135deg, #c8161f, #ff5454); }
    .m3d .throttle-btn.is-peak:disabled { cursor: default; }
    .m3d .peak-label { position: relative; z-index: 1; }
    .m3d .peak-bar {
      position: absolute; inset: 0; transform-origin: right center; transform: scaleX(0);
      background: rgba(255, 255, 255, .28);
    }
    .m3d .drive-deck.is-peak .peak-bar { animation: peakCountdown 3s linear forwards; }
    @keyframes peakCountdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }
    .m3d .drive-deck.is-peak { box-shadow: 0 0 0 2px #ff3b3b, 0 0 28px rgba(255, 59, 59, .35); }
    .m3d .drive-deck.is-peak .rpm-readout span { color: #ff5a5a; }
    .m3d .drive-deck.is-peak .throttle-range { opacity: .45; }
    .m3d .drive-deck.is-peak .rpm-gauge { animation: gaugeBuzz .09s linear infinite; }
    @keyframes gaugeBuzz { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(1px, -1px); } 50% { transform: translate(-1px, 1px); } 75% { transform: translate(1px, 1px); } }
    @media (prefers-reduced-motion: reduce) { .drive-deck.is-peak .rpm-gauge { animation: none; } }
    @media (max-width: 767px) {
      .m3d .drive-deck { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
      .m3d .rpm-gauge { max-width: 240px; margin-inline: auto; width: 100%; }
    }

    /* keep the viewer inside the screen on phones (16:7 + a 360px floor made it
       wider than the viewport) */
    .m3d .model-viewer { max-width: 100%; }
    @media (max-width: 767px) { .model-viewer { aspect-ratio: auto; height: 380px; min-height: 0; } }