*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#3B2F2F;color:#F2E6D9;font-family:'Bitter',serif;overflow-x:hidden;line-height:1.75}
#iso-grid{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0.5;transition:opacity 0.6s ease-out}
.scan-line{position:fixed;top:-2px;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,#2EFFFF,transparent);z-index:1000;pointer-events:none;opacity:0;filter:blur(1px);transition:none}

.scene{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;justify-content:center}

/* SCENE 1: WORKBENCH */
.scene-workbench{min-height:100vh;background:repeating-radial-gradient(circle at 47% 52%,rgba(194,168,130,0.04) 0px,transparent 1.5px),linear-gradient(180deg,#3B2F2F 0%,#4A3A35 100%)}
.workbench-surface{perspective:800px;transform:rotateX(12deg) rotateZ(-3deg);transform-style:preserve-3d;text-align:center;padding:60px 24px;position:relative;width:100%;max-width:900px}
.hero-title{font-family:'Bungee Shade',cursive;font-size:clamp(4rem,12vw,10rem);color:#F2E6D9;text-transform:uppercase;line-height:1.1;letter-spacing:0.02em;text-shadow:3px 3px 0 rgba(0,0,0,0.4);position:relative;z-index:2}
.hero-sub{font-family:'Righteous',cursive;font-size:clamp(1rem,2vw,1.5rem);color:#C4A882;letter-spacing:0.15em;text-transform:uppercase;margin-top:16px}

/* Crystals */
.crystal{position:absolute;z-index:3}.crystal-1{top:15%;left:5%}.crystal-2{top:20%;right:8%}.crystal-3{bottom:10%;left:15%}
.facet{position:absolute;transition:transform 0.6s cubic-bezier(0.34,1.56,0.64,1),opacity 0.4s ease-out}
.crystal .f1{width:30px;height:50px;background:rgba(46,107,98,0.6);clip-path:polygon(50% 0%,100% 35%,80% 100%,20% 100%,0% 35%)}
.crystal .f2{width:25px;height:40px;background:rgba(212,168,75,0.3);clip-path:polygon(50% 0%,100% 40%,75% 100%,25% 100%,0% 40%);transform:translate(10px,-15px) rotate(15deg)}
.crystal .f3{width:20px;height:35px;background:rgba(46,107,98,0.4);clip-path:polygon(50% 0%,100% 30%,85% 100%,15% 100%,0% 30%);transform:translate(-5px,-10px) rotate(-10deg)}
.crystal .f4{width:15px;height:25px;background:rgba(212,168,75,0.2);clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);transform:translate(20px,5px) rotate(25deg)}

/* SCENE 2: LEATHER WORKSHOP */
.scene-leather{min-height:200vh;flex-direction:column;padding:80px 24px;background:linear-gradient(180deg,#3B2F2F 0%,#5C4033 50%,#3B2F2F 100%);gap:80px}
.room-content{max-width:700px;width:100%;display:flex;flex-direction:column;gap:60px;align-items:center}
.leather-card{background:linear-gradient(15deg,#5C4033,#826644);border:2px dashed #C4A882;border-image:repeating-linear-gradient(90deg,#C4A882 0px,#C4A882 4px,transparent 4px,transparent 6px) 2;padding:40px;max-width:60ch;opacity:0;transform:translate(-40px,20px) rotate(-2deg);transition:opacity 0.8s ease-out,transform 0.8s ease-out;box-shadow:4px 2px 8px rgba(0,0,0,0.4);position:relative}
.leather-card.visible{opacity:1;transform:translate(0,0) rotate(0deg)}
.card-label{font-family:'Courier Prime',monospace;font-size:0.85rem;letter-spacing:0.06em;color:#C4A882;display:block;margin-bottom:12px;text-transform:uppercase}
.leather-card h2{font-family:'Righteous',cursive;font-size:clamp(1.5rem,3vw,2rem);color:#F2E6D9;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:16px;line-height:1.1}
.leather-card p{font-family:'Bitter',serif;font-size:clamp(1rem,1.2vw,1.25rem);line-height:1.75;color:#F2E6D9;max-width:60ch}
.card-2{transform:translate(40px,20px) rotate(2deg)}.card-2.visible{transform:translate(0,0) rotate(0deg)}
.card-3{transform:translate(-30px,30px) rotate(-1.5deg)}.card-3.visible{transform:translate(0,0) rotate(0deg)}

.crystal-shelf{position:relative;width:80px;height:60px}.shelf-crystal{animation:crystalSpin 30s linear infinite}
@keyframes crystalSpin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
.shelf-crystal .f1{width:24px;height:40px;background:rgba(46,107,98,0.6);clip-path:polygon(50% 0%,100% 35%,80% 100%,20% 100%,0% 35%)}
.shelf-crystal .f2{width:20px;height:32px;background:rgba(212,168,75,0.3);clip-path:polygon(50% 0%,100% 40%,70% 100%,30% 100%,0% 40%);transform:translate(8px,-10px)}
.shelf-crystal .f3{width:16px;height:28px;background:rgba(46,107,98,0.4);clip-path:polygon(50% 0%,100% 30%,80% 100%,20% 100%,0% 30%);transform:translate(-4px,-8px)}

/* SCENE 3: MINERAL CABINET */
.scene-mineral{min-height:150vh;flex-direction:column;padding:80px 24px;background:linear-gradient(180deg,#3B2F2F 0%,#2F3535 100%)}
.hex-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:30px;max-width:800px}
.hex-case{width:220px;height:240px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:linear-gradient(135deg,rgba(46,107,98,0.15),rgba(59,47,47,0.8));border:1px solid rgba(196,168,130,0.2);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;text-align:center;opacity:0;transform:scale(0.6);transition:opacity 0.6s ease-out,transform 0.6s cubic-bezier(0.34,1.56,0.64,1),border-color 0.3s ease}
.hex-case.visible{opacity:1;transform:scale(1)}
.hex-case:hover{border-color:#2EFFFF}
.hex-crystal{position:relative;width:50px;height:50px;margin-bottom:10px}
.hex-crystal .f1{width:20px;height:35px;background:rgba(46,107,98,0.7);clip-path:polygon(50% 0%,100% 35%,80% 100%,20% 100%,0% 35%);position:absolute;left:15px;top:0}
.hex-crystal .f2{width:16px;height:28px;background:rgba(212,168,75,0.4);clip-path:polygon(50% 0%,100% 40%,70% 100%,30% 100%,0% 40%);position:absolute;left:25px;top:5px}
.hex-crystal .f3{width:14px;height:24px;background:rgba(46,107,98,0.5);clip-path:polygon(50% 0%,100% 30%,80% 100%,20% 100%,0% 30%);position:absolute;left:8px;top:10px}
.hex-crystal .f4{width:12px;height:20px;background:rgba(212,168,75,0.25);clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);position:absolute;left:30px;top:18px}
.hex-crystal .f5{width:10px;height:18px;background:rgba(46,107,98,0.35);clip-path:polygon(50% 0%,100% 35%,80% 100%,20% 100%,0% 35%);position:absolute;left:4px;top:22px}
.hex-crystal .f6{width:8px;height:14px;background:rgba(212,168,75,0.2);clip-path:polygon(50% 0%,100% 40%,50% 100%,0% 40%);position:absolute;left:20px;top:28px}
.specimen-label{font-family:'Courier Prime',monospace;font-size:0.75rem;letter-spacing:0.06em;color:#C4A882;text-transform:uppercase;margin-bottom:6px}
.hex-desc{font-family:'Bitter',serif;font-size:0.8rem;line-height:1.5;color:#F2E6D9;opacity:0;max-height:0;overflow:hidden;transition:opacity 0.4s ease,max-height 0.4s ease}
.hex-case:hover .hex-desc{opacity:1;max-height:100px}

/* SCENE 4: FAULT LINE */
.scene-fault{min-height:100vh;background:#3B2F2F;position:relative;overflow:hidden}
.fault-content{text-align:center;position:relative;z-index:2}
.fault-title{font-family:'Bungee Shade',cursive;font-size:clamp(2.5rem,8vw,6rem);color:#F2E6D9;text-transform:uppercase;line-height:1.1;position:relative}
.fault-title.glitching{animation:chromaShift 0.15s steps(2) infinite}
@keyframes chromaShift{0%{text-shadow:2px 0 #FF2E2E,-2px 0 #2EFFFF}50%{text-shadow:-3px 1px #FF2E2E,3px -1px #2EFFFF}100%{text-shadow:1px -2px #FF2E2E,-1px 2px #2EFFFF}}
.fault-sub{font-family:'Bitter',serif;font-size:clamp(0.9rem,1.5vw,1.15rem);color:#C4A882;margin-top:24px;max-width:50ch;margin-left:auto;margin-right:auto}
.fault-fragment{position:absolute;background:rgba(46,107,98,0.4);clip-path:polygon(50% 0%,100% 60%,30% 100%)}
.frag-1{width:40px;height:50px;top:20%;left:15%;animation:orbit1 12s linear infinite}
.frag-2{width:30px;height:40px;top:30%;right:20%;animation:orbit2 15s linear infinite}
.frag-3{width:25px;height:35px;bottom:25%;left:25%;animation:orbit3 18s linear infinite}
.frag-4{width:35px;height:45px;top:40%;left:60%;animation:orbit1 20s linear infinite reverse}
.frag-5{width:20px;height:30px;bottom:30%;right:30%;animation:orbit2 14s linear infinite reverse}
@keyframes orbit1{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(15px,-10px) rotate(90deg)}50%{transform:translate(0,-20px) rotate(180deg)}75%{transform:translate(-15px,-10px) rotate(270deg)}100%{transform:translate(0,0) rotate(360deg)}}
@keyframes orbit2{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(-10px,15px) rotate(90deg)}50%{transform:translate(-20px,0) rotate(180deg)}75%{transform:translate(-10px,-15px) rotate(270deg)}100%{transform:translate(0,0) rotate(360deg)}}
@keyframes orbit3{0%{transform:translate(0,0) rotate(0)}33%{transform:translate(12px,-8px) rotate(120deg)}66%{transform:translate(-8px,12px) rotate(240deg)}100%{transform:translate(0,0) rotate(360deg)}}

.scene-fault .texture-tear{position:absolute;left:0;width:100%;height:12px;background:#3B2F2F;z-index:1;transform:translateX(0);transition:none}

/* SCENE 5: REASSEMBLY */
.scene-reassembly{min-height:100vh;flex-direction:column;gap:40px;padding:80px 24px;background:linear-gradient(180deg,#2F3535 0%,#3B2F2F 40%,#5C4033 100%)}
.reassembly-content{display:flex;flex-direction:column;align-items:center;gap:40px;max-width:700px}
.crystal-whole{position:relative;width:80px;height:80px}
.crystal-whole .f1{width:30px;height:50px;background:rgba(46,107,98,0.7);clip-path:polygon(50% 0%,100% 35%,80% 100%,20% 100%,0% 35%);position:absolute;left:25px;top:0;box-shadow:0 0 20px rgba(212,168,75,0.15)}
.crystal-whole .f2{width:25px;height:42px;background:rgba(212,168,75,0.4);clip-path:polygon(50% 0%,100% 40%,70% 100%,30% 100%,0% 40%);position:absolute;left:38px;top:8px;box-shadow:0 0 15px rgba(212,168,75,0.1)}
.crystal-whole .f3{width:22px;height:38px;background:rgba(46,107,98,0.5);clip-path:polygon(50% 0%,100% 30%,80% 100%,20% 100%,0% 30%);position:absolute;left:15px;top:12px}
.crystal-whole .f4{width:18px;height:30px;background:rgba(212,168,75,0.3);clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);position:absolute;left:42px;top:22px}
.crystal-whole .f5{width:16px;height:26px;background:rgba(46,107,98,0.4);clip-path:polygon(50% 0%,100% 35%,80% 100%,20% 100%,0% 35%);position:absolute;left:10px;top:28px}
.crystal-whole .f6{width:14px;height:22px;background:rgba(212,168,75,0.2);clip-path:polygon(50% 0%,100% 40%,50% 100%,0% 40%);position:absolute;left:35px;top:35px}
.open-book{background:linear-gradient(15deg,#5C4033,#826644);padding:48px 40px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),4px 4px 12px rgba(0,0,0,0.5);max-width:60ch}
.book-text{font-family:'Bitter',serif;font-size:clamp(1rem,1.2vw,1.25rem);line-height:1.75;color:#F2E6D9}
.brass-nameplate{background:linear-gradient(135deg,#D4A84B,#C4A882);padding:16px 40px;box-shadow:0 2px 8px rgba(0,0,0,0.4);text-align:center}
.nameplate-text{font-family:'Righteous',cursive;font-size:1.2rem;letter-spacing:0.08em;text-transform:uppercase;color:#3B2F2F;text-shadow:0 1px 0 rgba(255,255,255,0.3),0 -1px 0 rgba(0,0,0,0.5)}

/* Accent colors */
.accent-ember{color:#C1440E}
.accent-teal{color:#2E6B62}

/* Glitch utilities */
.chroma-split{text-shadow:2px 0 #FF2E2E,-2px 0 #2EFFFF !important;transition:none}

@media(max-width:600px){
.hex-grid{gap:16px}
.hex-case{width:160px;height:180px;padding:20px}
.workbench-surface{transform:rotateX(6deg) rotateZ(-1.5deg)}
}