/* =========================================================
   DARKFACE — THE ARCHIVE
   ========================================================= */

/* ---- CRT OVERLAY — subtle scanlines ---- */
.crt-overlay{
  position:fixed;inset:0;
  z-index:9999;pointer-events:none;
}
.crt-overlay::before{
  content:"";display:block;position:absolute;inset:0;
  background:repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 2px,
    rgba(255,255,255,0.02) 2px,
    rgba(255,255,255,0.02) 4px
  );
  z-index:2;pointer-events:none;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#0a0a0a;
  --fg:#e8e8e8;
  --accent:#b91c1c;
  --muted:rgba(255,255,255,0.35);
  --mono:'IBM Plex Mono','Courier New',monospace;
  --sans:'Inter','Helvetica Neue',sans-serif;
}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  line-height:1.35;
  text-transform:uppercase;
  letter-spacing:0.01em;
  overflow:hidden;
  height:100vh;width:100vw;
  cursor:default;
}
a{color:inherit;text-decoration:none}

/* ---- Grain overlay (matching Grid) ---- */
body::after{
  content:'';
  position:fixed;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  background-size:150px 150px;
  pointer-events:none;
  z-index:9998;
  mix-blend-mode:overlay;
  opacity:0.6;
}

/* ---- Blur overlays ---- */
.blur-top{
  position:fixed;top:0;left:0;right:0;
  height:120px;
  z-index:100;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(42,42,42, 1) 0%,
    rgba(42,42,42, 0.85) 30%,
    rgba(42,42,42, 0.5) 60%,
    rgba(42,42,42, 0) 100%
  );
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  mask-image:linear-gradient(to bottom, black 0%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, black 0%, transparent 100%);
}
.blur-bottom{
  position:fixed;bottom:0;left:0;right:0;
  height:140px;
  z-index:100;
  pointer-events:none;
  background:linear-gradient(
    to top,
    rgba(42,42,42, 1) 0%,
    rgba(42,42,42, 0.85) 30%,
    rgba(42,42,42, 0.5) 60%,
    rgba(42,42,42, 0) 100%
  );
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  mask-image:linear-gradient(to top, black 0%, transparent 100%);
  -webkit-mask-image:linear-gradient(to top, black 0%, transparent 100%);
}

/* =========================================================
   CRT OVERLAY — subtle scanlines only, NO flicker
   ========================================================= */
.crt-overlay{
  position:fixed;inset:0;
  z-index:9999;pointer-events:none;
}
.crt-overlay::before{
  content:"";display:block;position:absolute;inset:0;
  background:repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 2px,
    rgba(255,255,255,0.02) 2px,
    rgba(255,255,255,0.02) 4px
  );
  z-index:2;pointer-events:none;
}

/* =========================================================
   CORNERS — fixed positioned corner elements
   ========================================================= */
.corner{
  position:fixed;
  z-index:200;
  padding:14px;
}
.corner--tl{top:0;left:0}
.corner--tc{
  top:0;
  left:50%;
  transform:translateX(-50%);
  padding-top:20px;
  font-family:var(--mono);
  font-size:11px;
  font-weight:400;
  color:var(--muted);
  line-height:1.6;
  text-align:center;
}
.archive__title{
  font-family:'Chakra Petch','Inter',sans-serif;
  font-size:clamp(36px, 6vw, 72px);
  font-weight:700;
  color:#fff;
  letter-spacing:0.15em;
  margin:0 0 8px 0;
  text-shadow:0 0 40px rgba(255,255,255,0.1);
  position:relative;
  filter:contrast(1.3) brightness(0.85);
}
.archive__title::after{
  display:none;
}
.archive__sub{
  margin:0;
  font-size:11px;
  color:var(--muted);
  text-align:left;
}
.corner--tr{
  top:0;right:0;
  max-width:420px;
  font-size:11px;
  font-weight:700;
  color:var(--fg);
  line-height:1.55;
}
.social-links{
  display:flex;
  justify-content:flex-end;
  gap:6px;
}
.social-link{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:var(--fg);
  border:1px solid rgba(255,255,255,0.5);
  padding:6px;
  transition:color .25s, border-color .25s, background .25s;
}
.social-link:hover{
  color:var(--accent);
  border-color:var(--accent);
  background:rgba(200,40,40,0.08);
  box-shadow:0 0 8px rgba(200,40,40,0.5), 0 0 20px rgba(200,40,40,0.2);
}

.back-link{
  font-family:'Inter',sans-serif;
  font-size:12px;
  font-weight:500;
  text-decoration:none;
  color:#f3f3f3;
  display:inline-block;
  border:1px solid rgba(255,255,255,0.14);
  padding:3px 14px;
  letter-spacing:normal;
  text-transform:uppercase;
  line-height:14px;
  transition:background .25s, color .25s, border-color .25s;
  cursor:pointer;
}
.back-link:hover{
  background:rgba(255,255,255,0.9);
  color:#111;
  border-color:rgba(255,255,255,0.9);
}

.lang-switch{
  display:flex;
  gap:6px;
  margin-top:8px;
}
.lang-btn{
  font-family:'Inter',sans-serif;
  font-size:12px;
  font-weight:500;
  color:#f3f3f3;
  border:1px solid rgba(255,255,255,0.14);
  padding:3px 14px;
  text-decoration:none;
  text-transform:uppercase;
  line-height:14px;
  letter-spacing:normal;
  transition:background .25s, color .25s, border-color .25s;
  cursor:pointer;
}
.lang-btn--active{
  background:rgba(255,255,255,0.9);
  color:#111;
  border-color:rgba(255,255,255,0.9);
}
.lang-btn:hover{
  background:rgba(255,255,255,0.9);
  color:#111;
  border-color:rgba(255,255,255,0.9);
}

/* =========================================================
   VIEWS — visibility
   ========================================================= */
.view{
  position:fixed;
  inset:0;
  display:none;
  z-index:10;
}

/* =========================================================
   GALLERY VIEW — absolute positioned children
   ========================================================= */
.view--gallery.is-active{
  display:block !important;
}

/* ---- Projects list (left) — vertically centered ---- */
.projects-list{
  position:absolute !important;
  left:42% !important;
  top:50% !important;
  transform:translate(-100%,-50%) !important;
  display:flex !important;
  flex-direction:column !important;
  gap:4px;
  z-index:20;
}

.project-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:2px 0;
  cursor:pointer;
  transition:opacity .2s;
  position:relative;
}
.project-item:hover{
  opacity:1;
}
.project-item .thumb{
  flex-shrink:0;
}
.project-name{
  font-family:'Inter',sans-serif;
  font-size:11px;
  font-weight:600;
  color:rgba(255,255,255,0.5);
  text-transform:uppercase;
  letter-spacing:0.08em;
  transition:color .3s;
  border:none;
  padding:0;
  background:none;
  cursor:pointer;
}
.project-item:hover .project-name,
.project-item.is-active .project-name{
  color:#fff;
}
.project-link{
  display:none;
}

/* ---- Center 3D Cube ---- */
.preview-center{
  position:fixed !important;
  top:50% !important;
  left:50% !important;
  width:0 !important;
  height:0 !important;
  z-index:15;
  border:none !important;
  box-shadow:none !important;
  background:none !important;
  outline:none !important;
}
.cube-wrap{
  perspective:1200px;
  transform-style:preserve-3d;
}
.cube{
  transform-style:preserve-3d;
  transform-origin:0 0 0;
}
.cube__face{
  position:absolute;
  width:230px;
  height:230px;
  left:-115px;
  top:-115px;
  border:2px solid var(--cube-color, #c82828) !important;
  background:rgba(0,0,0,0.9) !important;
  box-shadow:0 0 25px var(--cube-color, #c82828);
  backface-visibility:hidden;
  transition:border-color 0.5s, box-shadow 0.5s;
}
/* Circuit traces — inline SVG */
.circuit{
  position:absolute;
  inset:8px;
  width:calc(100% - 16px);
  height:calc(100% - 16px);
  overflow:visible;
  color:var(--cube-color, #c82828);
  filter:drop-shadow(0 0 6px var(--cube-color, #c82828));
  transition:color 0.5s, filter 0.5s;
}
.circuit path{
  stroke:currentColor;
  stroke-width:2.5;
  stroke-linecap:round;
  fill:none;
}
.circuit circle{
  fill:#000;
  stroke:currentColor;
  stroke-width:2;
}
.preview-center:hover .circuit{
  filter:drop-shadow(0 0 14px var(--cube-color, #c82828));
}
.cube__face--front { transform:translateZ(115px); }
.cube__face--back  { transform:rotateY(180deg) translateZ(115px); }
.cube__face--left  { transform:rotateY(-90deg) translateZ(115px); }
.cube__face--right { transform:rotateY(90deg) translateZ(115px); }
.cube__face--top   { transform:rotateX(90deg) translateZ(115px); }
.cube__face--bottom{ transform:rotateX(-90deg) translateZ(115px); }

@keyframes cubeRotateB{
  from{transform:rotateX(-25deg) rotateY(0deg)}
  to{transform:rotateX(-25deg) rotateY(360deg)}
}
.preview-center:hover .cube__face{
  box-shadow:0 0 35px var(--cube-color, #c82828), 0 0 70px var(--cube-color, #c82828);
}


/* --- Scanlines removed from preview-center (3D cube needs clean bg) --- */

/* --- Circuit trace SVG layer --- */
#circuitSvg{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:12;
}
#circuitSvg .trace-path{
  fill:none;
  stroke:none;
}
#circuitSvg .particle{
  fill:rgba(255,60,60,0.9);
  filter:drop-shadow(0 0 4px rgba(200,40,40,0.8));
}

.preview-desc{
  position:fixed !important;
  z-index:20;
  font-family:'Chakra Petch','Inter',sans-serif;
  font-size:11px;
  font-weight:400;
  letter-spacing:0.04em;
  color:rgba(243,243,243,0.7);
  line-height:1.7;
  text-transform:uppercase;
  max-width:260px;
  opacity:0;
  transition:opacity .35s ease;
  max-height:65vh;
  overflow-y:auto;
  scrollbar-width:none;
}
.desc-label{
  font-family:'Chakra Petch','Inter',sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.1em;
  color:rgba(200,40,40,0.8);
  display:block;
  margin-bottom:6px;
}
.qr-code{
  width:260px;
  height:auto;
  object-fit:contain;
  border:3px solid rgba(255,255,255,0.6);
  display:block;
  margin-top:2px;
}
.qr-download{
  display:inline;
  font-family:'Chakra Petch','Inter',sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.08em;
  color:#f3f3f3;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,0.3);
  padding-bottom:2px;
  transition:color .25s, border-color .25s;
}
.qr-download:hover{
  color:var(--accent);
  border-color:var(--accent);
}

/* ---- Sidebar right — vertically centered ---- */
.sidebar-right{
  position:absolute !important;
  right:14px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  display:flex !important;
  flex-direction:column !important;
  gap:12px;
  align-items:center;
  z-index:20;
}

.sidebar-tagline{
  font-family:'Chakra Petch','Inter',sans-serif;
  font-size:14px;
  font-weight:700;
  color:rgba(200,40,40,0.8);
  line-height:2.2;
  text-align:right;
  letter-spacing:0.1em;
}

.minimap{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
}

.thumb{
  width:105px;
  height:82px;
  cursor:pointer;
  border:none;
  background:transparent;
  transition:transform .2s;
}
.project-item:nth-child(2) .thumb img{ animation-delay:0s; }
.project-item:nth-child(3) .thumb img{ animation-delay:0.5s; }
.project-item:nth-child(4) .thumb img{ animation-delay:1s; }
.project-item:nth-child(5) .thumb img{ animation-delay:1.5s; }
.project-item:nth-child(6) .thumb img{ animation-delay:2s; }
.project-item:nth-child(7) .thumb img{ animation-delay:2.5s; }
@keyframes thumbPulse{
  0%,100%{ filter:brightness(0.7) drop-shadow(0 0 2px rgba(200,40,40,0.1)); }
  50%{ filter:brightness(1.15) drop-shadow(0 0 10px rgba(200,40,40,0.45)); }
}
.thumb:hover{
  transform:scale(1.12);
}
.thumb:hover img{
  filter:brightness(1.3) drop-shadow(0 0 12px rgba(200,40,40,0.5)) !important;
  animation-play-state:paused;
}
.thumb.is-active{
  filter:drop-shadow(0 0 8px var(--thumb-glow, rgba(200,40,40,0.7)));
}
.thumb.is-active img{
  filter:brightness(1.4);
  animation-play-state:paused;
}
.thumb img{
  width:100%;height:100%;
  object-fit:contain;
  animation:thumbPulse 3s ease-in-out infinite;
}

/* =========================================================
   LIST VIEW
   ========================================================= */
.view--list.is-active{
  display:flex !important;
  flex-direction:column;
  overflow-y:auto;
  padding:100px 14px 100px;
}

.list-container{
  max-width:1200px;
  width:100%;
  margin:0 auto;
}

.list-row{
  border-top:1px solid rgba(255,255,255,.1);
  padding:30px 0;
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.list-row:last-child{
  border-bottom:1px solid rgba(255,255,255,.1);
}

.list-title{
  display:flex;
  align-items:baseline;
  gap:20px;
  text-decoration:none;
  color:inherit;
}

.list-num{
  font-size:12px;
  font-weight:500;
  color:var(--muted);
  flex-shrink:0;
}
.list-name{
  font-size:clamp(32px, 5vw, 72px);
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1;
  color:var(--fg);
  text-transform:uppercase;
  transition:opacity .2s;
}
.list-row:hover .list-name{
  opacity:.6;
}

.list-desc{
  font-size:12px;
  font-weight:400;
  color:var(--muted);
  line-height:1.6;
  max-width:580px;
  text-transform:none;
}

.list-explore{
  font-size:11px;
  font-weight:700;
  color:var(--fg);
  text-decoration:underline;
  display:inline-block;
  margin-top:4px;
  transition:opacity .2s;
}
.list-explore:hover{opacity:.6}

/* =========================================================
   BOTTOM CONTROLS
   ========================================================= */
.controls{
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:300;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:40px;
  padding:16px 28px;
}

/* ---- Contacts bar — fixed bottom ---- */
.contacts-bar{
  position:fixed;
  bottom:48px;
  left:0;right:0;
  z-index:100;
  display:flex;
  justify-content:center;
  gap:48px;
  padding:14px 28px;
}
.contacts-bar__item{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.contacts-bar__label{
  font-family:'Chakra Petch','Inter',sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(200,40,40,0.9);
  text-align:center;
}
.contacts-bar__value{
  font-family:'IBM Plex Mono','Courier',monospace;
  font-size:11px;
  font-weight:400;
  letter-spacing:0.04em;
  color:#fff;
  border:1px solid rgba(255,255,255,0.4);
  padding:4px 10px;
  cursor:pointer;
  transition:all 0.2s;
  user-select:none;
}
.contacts-bar__value:hover{
  border-color:rgba(255,255,255,0.35);
  color:rgba(243,243,243,0.9);
}
.contacts-bar__value.copied{
  border-color:rgba(200,40,40,0.8);
  color:rgba(200,40,40,1);
}

.controls__label{
  font-size:12px;
  font-weight:500;
  color:var(--muted);
  letter-spacing:.06em;
}

.controls__toggle{
  display:flex;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.2);
}

.toggle-btn{
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  padding:8px 22px;
  border:none;
  cursor:pointer;
  background:#1a1a1a;
  color:#999;
  transition:all .2s;
  letter-spacing:.04em;
}
.toggle-btn--active{
  background:var(--accent);
  color:#fff;
}
.toggle-btn:hover:not(.toggle-btn--active){
  background:rgba(255,255,255,.06);
}

/* ---- 3D Cubes ---- */