/* mechanic.monster - Industrial horizontal-scroll workshop */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
    --workshop:#0D0D0D;
    --sheet-metal:#1C1E22;
    --iron:#2A2D33;
    --arc-light:#E8E4DF;
    --worn:#8A8580;
    --amber:#D4883A;
    --safety:#E8C840;
    --weld-blue:#4A7CC9;
    --oxide:#B04030;
    --grease:#3A3D42;
}

html{font-size:16px}

body{
    background:linear-gradient(180deg,var(--workshop) 0%,var(--sheet-metal) 100%);
    color:var(--arc-light);
    font-family:'IBM Plex Sans',sans-serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.8vw,1.15rem);
    line-height:1.65;
    overflow-x:hidden;
    overflow-y:hidden;
    height:100vh;
}

/* Gear Layer */
.gear-layer{
    position:fixed;inset:0;
    pointer-events:none;
    z-index:1;
}

.gear{position:absolute;opacity:0.4}
.g1{width:200px;top:10%;left:5%;animation:gear-spin 30s linear infinite}
.g2{width:160px;top:20%;left:18%;animation:gear-spin 24s linear infinite reverse}
.g3{width:240px;bottom:15%;right:10%;animation:gear-spin 36s linear infinite}
.g4{width:180px;bottom:25%;right:28%;animation:gear-spin 28s linear infinite reverse}

@keyframes gear-spin{to{transform:rotate(360deg)}}

/* Workshop horizontal container */
.workshop{
    display:flex;
    height:100vh;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    position:relative;
    z-index:2;
}

.workshop::-webkit-scrollbar{height:12px;background:var(--sheet-metal)}
.workshop::-webkit-scrollbar-thumb{
    background:var(--grease);
    border-top:2px solid var(--safety);
    border-bottom:2px solid var(--safety);
}

/* Bays */
.bay{
    min-width:100vw;
    height:100vh;
    scroll-snap-align:start;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    flex-shrink:0;
    padding:24px;
    padding-bottom:104px;
}

/* Bay 1 - Entrance */
.bay-entrance{flex-direction:column}

.lamp-glow{
    position:absolute;
    width:60vw;height:60vh;
    top:20%;left:20%;
    background:radial-gradient(circle,rgba(212,136,58,0.15) 0%,transparent 70%);
    pointer-events:none;
}

.hero-title{
    font-family:'Chakra Petch',sans-serif;
    font-weight:700;
    font-size:clamp(3.5rem,10vw,9rem);
    text-transform:uppercase;
    letter-spacing:0.12em;
    color:var(--arc-light);
    line-height:1;
}

.hero-monster{
    font-family:'Chakra Petch',sans-serif;
    font-weight:700;
    font-size:clamp(1.4rem,4vw,3.6rem);
    text-transform:uppercase;
    letter-spacing:0.12em;
    color:var(--amber);
    animation:pulse-monster 3s ease-in-out infinite;
}

@keyframes pulse-monster{
    0%,100%{opacity:0.7}
    50%{opacity:1}
}

.scroll-hint{
    position:absolute;
    right:40px;top:50%;
    transform:translateY(-50%);
}

.hint-chevron{
    font-family:'Share Tech Mono',monospace;
    font-size:1.5rem;
    color:var(--amber);
    animation:hint-slide 1.5s ease-in-out infinite;
}

@keyframes hint-slide{
    0%,100%{transform:translateX(0);opacity:0.5}
    50%{transform:translateX(10px);opacity:1}
}

/* Bay 2 - Diagnostic */
.bay-diagnostic{align-items:flex-start;padding-top:60px}

.masonry-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    max-width:900px;width:100%;
}

.metal-panel{
    background:var(--sheet-metal);
    border:1px solid var(--iron);
    padding:2rem;
    position:relative;
    box-shadow:inset 0 1px 0 rgba(232,228,223,0.05),0 4px 16px rgba(0,0,0,0.4);
    opacity:0;transform:translateY(40px);
    transition:opacity 0.5s ease,transform 0.5s ease;
}

.metal-panel.revealed{opacity:1;transform:translateY(0)}

.metal-panel.tall{grid-row:span 2}
.metal-panel.wide{grid-column:span 2}

/* Bolts */
.bolt{
    position:absolute;
    width:16px;height:16px;
    background:var(--grease);
    clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
    transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

.metal-panel:hover .bolt{transform:rotate(60deg)}

.b-tl{top:8px;left:8px}
.b-tr{top:8px;right:8px}
.b-bl{bottom:8px;left:8px}
.b-br{bottom:8px;right:8px}

.panel-label{
    font-family:'Share Tech Mono',monospace;
    font-size:0.8rem;
    letter-spacing:0.05em;
    color:var(--amber);
    display:block;
    margin-bottom:0.75rem;
}

.panel-text{
    color:var(--arc-light);
    line-height:1.65;
}

/* Bay 3 - Parts */
.bay-parts{flex-direction:column;gap:2rem}

.bay-heading{
    font-family:'Chakra Petch',sans-serif;
    font-weight:700;
    font-size:clamp(1.6rem,3.5vw,3rem);
    text-transform:uppercase;
    letter-spacing:0.12em;
    color:var(--arc-light);
}

.parts-grid{
    display:grid;
    grid-template-columns:repeat(3,160px);
    grid-template-rows:repeat(2,200px);
    gap:16px;
}

.part-card{
    background:var(--sheet-metal);
    border:1px solid var(--iron);
    padding:1.25rem;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;
    position:relative;
    opacity:0;transform:translateY(20px);
    transition:opacity 0.4s ease,transform 0.4s ease,border-color 0.3s,box-shadow 0.3s;
}

.part-card.revealed{opacity:1;transform:translateY(0)}

.part-card:hover{
    transform:translateY(-8px);
    border-color:var(--amber);
    box-shadow:0 8px 24px rgba(0,0,0,0.5);
}

.part-icon{width:48px;height:48px;margin-bottom:0.75rem}

.part-number{
    font-family:'Share Tech Mono',monospace;
    font-size:0.8rem;
    letter-spacing:0.05em;
    color:var(--safety);
    display:block;
    margin-bottom:0.25rem;
}

.part-name{
    font-family:'Chakra Petch',sans-serif;
    font-weight:700;
    font-size:0.85rem;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:var(--arc-light);
}

/* Bay 4 - Pit */
.bay-pit{background:var(--workshop)}

.schematic-container{
    max-width:600px;width:100%;
}

.engine-schematic{width:100%;height:auto}

.draw-path{
    stroke-dasharray:600;
    stroke-dashoffset:600;
    transition:stroke-dashoffset 2s ease;
}

.bay-pit.active .draw-path{stroke-dashoffset:0}

.label-text{
    opacity:0;
    transition:opacity 1s ease 1.5s;
}

.bay-pit.active .label-text{opacity:1}

/* Bay 5 - Exit */
.bay-exit{flex-direction:column;gap:2rem}

.exit-heading{
    font-family:'Chakra Petch',sans-serif;
    font-weight:700;
    font-size:clamp(1.6rem,3.5vw,3rem);
    text-transform:uppercase;
    letter-spacing:0.12em;
    color:var(--arc-light);
}

.exit-codes{
    overflow:hidden;
    white-space:nowrap;
    max-width:600px;
}

.code-scroll{
    font-family:'Share Tech Mono',monospace;
    font-size:0.8rem;
    letter-spacing:0.05em;
    color:var(--amber);
    display:inline-block;
    animation:code-marquee 20s linear infinite;
}

@keyframes code-marquee{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
}

.exit-domain{
    font-family:'Chakra Petch',sans-serif;
    font-weight:400;
    font-size:1rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--worn);
    margin-top:2rem;
}

/* HUD Strip */
.hud-strip{
    position:fixed;bottom:0;left:0;right:0;
    height:80px;
    background:rgba(13,13,13,0.85);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    z-index:100;
    display:flex;flex-direction:column;
}

.hazard-edge{
    height:4px;
    background:repeating-linear-gradient(45deg,var(--safety),var(--safety) 8px,var(--workshop) 8px,var(--workshop) 16px);
}

.hud-content{
    flex:1;
    display:flex;align-items:center;justify-content:center;
    gap:3rem;
    padding:0 2rem;
}

.gauge{display:flex;flex-direction:column;align-items:center;gap:4px}

.rpm-svg{width:80px;height:50px}

.gauge-label{
    font-family:'Share Tech Mono',monospace;
    font-size:0.7rem;
    letter-spacing:0.05em;
    color:var(--amber);
}

.temp-track{
    width:12px;height:36px;
    background:var(--iron);
    border-radius:2px;
    overflow:hidden;
    position:relative;
}

.temp-fill{
    position:absolute;bottom:0;left:0;right:0;
    height:0%;
    background:linear-gradient(to top,var(--weld-blue),var(--amber),var(--oxide));
    transition:height 0.3s ease;
}

.odo-value{
    font-family:'Share Tech Mono',monospace;
    font-size:1.2rem;
    letter-spacing:0.1em;
    color:var(--safety);
}

/* Hazard stripes */
.hazard-stripe{
    background:repeating-linear-gradient(45deg,var(--safety),var(--safety) 8px,var(--workshop) 8px,var(--workshop) 16px);
}

/* Responsive */
@media(max-width:768px){
    body{overflow-y:auto;overflow-x:hidden;height:auto}
    .workshop{
        flex-direction:column;
        height:auto;
        overflow-x:hidden;
        overflow-y:visible;
        scroll-snap-type:none;
    }
    .bay{min-width:auto;width:100%;min-height:100vh;height:auto}
    .masonry-grid{grid-template-columns:1fr}
    .metal-panel.tall{grid-row:auto}
    .metal-panel.wide{grid-column:auto}
    .parts-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:auto}
    .scroll-hint{display:none}
    .hud-strip{display:none}
    .gear-layer{display:none}
}

@media(prefers-reduced-motion:reduce){
    .gear{animation:none}
    .hero-monster{animation:none;opacity:1}
    .hint-chevron{animation:none;opacity:1}
    .code-scroll{animation:none}
    .metal-panel,.part-card{opacity:1;transform:none;transition:none}
    .draw-path{stroke-dashoffset:0;transition:none}
    .label-text{opacity:1;transition:none}
    .bolt{transition:none}
}