/* ============================================================
   RPM page transition — BMW S1000RR TFT style
   Barra de RPM horizontal segmentada + shift lights + marcha/RPM.
   100% CSS. Ativado por page-transition.js.
   ============================================================ */

.rpm-transition {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0a0b0c;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    /* fade-out suave ao fechar */
    transition: opacity .3s ease, visibility 0s linear .3s;
}
.rpm-transition.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    /* fade-in suave ao surgir */
    transition: opacity .25s ease;
}

/* ---- Cluster TFT ---- */
.bmw-cluster {
    width: min(92vw, 760px);
    padding: 28px clamp(16px, 4vw, 40px) 34px;
    background: linear-gradient(180deg, #161719 0%, #0c0d0e 100%);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
    transform: scale(.98);
    opacity: 0;
    transition: opacity .3s ease, transform .3s ease;
}
.rpm-transition.is-active .bmw-cluster {
    opacity: 1;
    transform: scale(1);  /* fade-in + leve zoom suave */
}

/* ---- Shift lights ---- */
.bmw-shift {
    display: flex;
    justify-content: center;
    gap: clamp(6px, 1.4vw, 12px);
    margin-bottom: 18px;
}
.bmw-shift__led {
    width: clamp(20px, 4vw, 34px);
    height: 8px;
    border-radius: 3px;
    background: rgba(255,255,255,.08);
    transition: background .06s linear, box-shadow .06s linear;
}
.bmw-shift__led:nth-child(-n+3).is-on {
    background: #19c37d;  /* verdes (low) */
    box-shadow: 0 0 10px rgba(25,195,125,.8);
}
.bmw-shift__led:nth-child(n+4):nth-child(-n+5).is-on {
    background: #ffcc00;  /* amarelos (mid) */
    box-shadow: 0 0 10px rgba(255,204,0,.85);
}
.bmw-shift__led:nth-child(n+6).is-on {
    background: #ff2e2e;  /* vermelhos (shift!) */
    box-shadow: 0 0 12px rgba(255,46,46,.9);
}
/* piscar no redline */
.rpm-transition.is-redline .bmw-shift__led.is-on {
    animation: bmw-blink .12s steps(1) infinite;
}
@keyframes bmw-blink {
    50% { background: #fff; box-shadow: 0 0 16px #fff; }
}

/* ---- Barra de RPM segmentada ---- */
.bmw-rpmbar {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 56px;
}
.bmw-seg {
    flex: 1 1 auto;
    height: 60%;
    background: rgba(255,255,255,.07);
    border-radius: 2px;
    transition: background .05s linear, box-shadow .05s linear, height .05s linear;
}
/* segmentos crescem em altura ao longo da barra (perfil tipo tacho) */
.bmw-rpmbar .bmw-seg { height: 45%; }
.bmw-seg.bmw-seg--yellow { height: 75%; }
.bmw-seg.bmw-seg--red { height: 100%; }

/* acesos */
.bmw-seg.is-on {
    background: #ffffff;
    box-shadow: 0 0 8px rgba(255,255,255,.5);
}
.bmw-seg--yellow.is-on {
    background: #ffcc00;
    box-shadow: 0 0 8px rgba(255,204,0,.7);
}
.bmw-seg--red.is-on {
    background: #ff2e2e;
    box-shadow: 0 0 10px rgba(255,46,46,.85);
}

/* ---- Escala numérica ---- */
.bmw-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    padding: 0 2px;
    font-family: "Tektur", "Arial Narrow", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    color: rgba(255,255,255,.45);
}

/* ---- Leitura central ---- */
.bmw-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 5vw, 48px);
    margin-top: 26px;
}
.bmw-gear {
    font-family: "Tektur", "Arial Narrow", sans-serif;
    font-weight: 800;
    font-size: clamp(64px, 14vw, 120px);
    line-height: .9;
    color: #fff;
    min-width: 1.2ch;
    text-align: center;
    text-shadow: 0 0 24px rgba(255,255,255,.18);
}
.rpm-transition.is-redline .bmw-gear { color: #ff2e2e; }

.bmw-readout {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-left: 1px solid rgba(255,255,255,.12);
    padding-left: clamp(16px, 4vw, 36px);
}
.bmw-rpm-value {
    font-family: "Tektur", "Arial Narrow", sans-serif;
    font-weight: 800;
    font-size: clamp(34px, 8vw, 60px);
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.rpm-transition.is-redline .bmw-rpm-value { color: #ff2e2e; }
.bmw-rpm-unit {
    margin-top: 6px;
    font-family: "Tektur", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--base-color, #cafd05);
}

/* tremor subtil no redline (mota a cortar) */
@keyframes bmw-shake {
    0%, 100% { transform: scale(1) translateX(0); }
    25%      { transform: scale(1) translateX(-1.5px); }
    75%      { transform: scale(1) translateX(1.5px); }
}
.rpm-transition.is-redline .bmw-cluster {
    animation: bmw-shake .07s linear infinite;
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce) {
    .bmw-cluster { transition: opacity .25s ease; transform: none; animation: none; }
    .rpm-transition.is-redline .bmw-cluster,
    .rpm-transition.is-redline .bmw-shift__led.is-on { animation: none; }
}