/* =========================================================
   Core layout — canvas, UI overlay, section grid
   ========================================================= */

html,
body {
  width: 100%;
  overflow-x: hidden;
}

/* Full-screen Three.js canvas — sits behind everything */
#canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-canvas);
  display: block;
}

/* UI overlay — sits above canvas */
#ui {
  position: relative;
  z-index: var(--z-ui);
  pointer-events: none; /* pass through to canvas by default */
}

/* Restore pointer events on interactive children */
#ui header,
#ui nav,
#ui button,
#ui a,
#ui input,
#ui form,
.app-card,
.plugin-card,
#preloader,
#sections-container {
  pointer-events: auto;
}

/* =========================================================
   Header
   ========================================================= */

#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: calc(var(--z-ui) + 10);
  padding: 8px var(--base-padding-x);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-size: var(--header-size);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: lowercase;
}

.nav-desktop {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.nav-desktop a {
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.nav-desktop a:hover {
  opacity: 1;
}

@media (max-width: 812px) {
  .nav-desktop {
    display: none;
  }
}

/* =========================================================
   Sections — scrollable content over canvas
   ========================================================= */

#sections-container {
  position: relative;
}

.section {
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  padding: var(--base-padding-y) var(--base-padding-x);
  padding-top: calc(var(--base-padding-y) + 80px); /* clear fixed header */
  align-content: center;
}

@media (max-width: 812px) {
  .section {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    min-height: 0;
    padding-top: calc(var(--base-padding-y) + 70px);
  }
}

/* =========================================================
   Hero section
   ========================================================= */

#section-hero {
  align-items: center;
}

.section-content {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 900px;
}

#section-hero .section-content {
  grid-column: 1 / 9;
}

@media (max-width: 812px) {
  #section-hero .section-content {
    grid-column: 1 / -1;
  }
}

/* =========================================================
   Apps grid
   ========================================================= */

#section-apps h3 {
  grid-column: 1 / -1;
  margin-bottom: 2rem;
}

.apps-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
}

@media (max-width: 812px) {
  .apps-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* =========================================================
   Plugins grid
   ========================================================= */

#section-plugins h3 {
  grid-column: 1 / -1;
  margin-bottom: 2rem;
}

.plugins-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 600px);
  gap: var(--grid-gap);
}

@media (max-width: 812px) {
  .plugins-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* =========================================================
   Footer / contact section
   ========================================================= */

#section-contact {
  align-items: end;
}

#footer {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding-bottom: var(--base-padding-y);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.footer-copyright {
  opacity: 0.5;
}

/* =========================================================
   Preloader
   ========================================================= */

#preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  background: #000000;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

#preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-logo {
  width: clamp(120px, 20vw, 200px);
  height: auto;
  object-fit: contain;
}

/* =========================================================
   Accessibility utility
   ========================================================= */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   Input blocker (during transitions)
   ========================================================= */

#input-blocker {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-preloader) - 1);
  display: none;
}

#input-blocker.is-active {
  display: block;
}