/* 11.5.19.55 — Nov 5, 1955: the day the flux capacitor is invented (Back to the
   Future). On trigger, the DeLorean's two flaming tire trails streak across the
   screen and a time-circuit readout lights up. (loads only on /11.5.19.55)
   Everything is gated behind body.egg-on so it can fire in sync with the
   "Great Scott!" clip once that's wired. */

#bttf-trails {
    position: fixed; left: 0; right: 0; bottom: 26%;
    z-index: 9997; pointer-events: none;
}
.tire-trail {
    height: 8px; margin: 14px 8px; border-radius: 5px;
    transform: scaleX(0); transform-origin: left center; opacity: 0;
    background: linear-gradient(90deg,
        rgba(255, 30, 0, 0) 0%, rgba(255, 60, 0, 0.9) 10%,
        #ff8c00 40%, #ffd000 66%, #fff6c0 88%, #ffffff 100%);
}
body.egg-on .tire-trail {
    box-shadow: 0 0 14px 3px rgba(255, 90, 0, 0.85), 0 0 36px 9px rgba(255, 40, 0, 0.5);
    animation:
        trail-draw 1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards,
        trail-flicker 0.1s steps(2, end) 0.2s 24,
        trail-fade 1.4s ease-in 2.4s forwards;
}
.tire-trail.t2 { margin-top: 26px; }

@keyframes trail-draw    { from { transform: scaleX(0); opacity: 1; } to { transform: scaleX(1); opacity: 1; } }
@keyframes trail-flicker { 0% { filter: brightness(1) saturate(1); } 50% { filter: brightness(1.6) saturate(1.3); } 100% { filter: brightness(0.8); } }
@keyframes trail-fade    { from { opacity: 1; } to { opacity: 0; } }

/* Time-circuit readout */
#bttf-circuit {
    position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%);
    z-index: 9999; pointer-events: none; text-align: center;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    background: rgba(8, 6, 4, 0.85); border: 1px solid #5a3a10; border-radius: 8px;
    padding: 0.6rem 1.1rem; box-shadow: 0 0 24px rgba(255, 120, 0, 0.3);
    opacity: 0; transition: opacity 0.8s ease;
}
body.egg-on #bttf-circuit { opacity: 1; }
#bttf-circuit .lbl  { font-size: 0.62rem; letter-spacing: 0.25em; color: #b06a1e; }
#bttf-circuit .date {
    font-size: clamp(1.4rem, 5vw, 2.2rem); font-weight: 800; letter-spacing: 0.14em; color: #ff8c00;
    text-shadow: 0 0 10px rgba(255, 140, 0, 0.9), 0 0 22px rgba(255, 90, 0, 0.5);
}
#bttf-circuit .scott { margin-top: 0.3rem; font-size: 0.82rem; color: #ffd27f; }
#bttf-circuit .meta  { margin-top: 0.15rem; font-size: 0.66rem; color: #9a7a4a; }

@media (prefers-reduced-motion: reduce) {
    body.egg-on .tire-trail {
        animation: none; transform: scaleX(1); opacity: 0.9;
        box-shadow: 0 0 14px 3px rgba(255, 90, 0, 0.7);
    }
    #bttf-circuit { transition: none; }
}