/**
 * Secure Grid — Core Stylesheet
 * Structural layout for the grid visualisation. Works on its own.
 * Optional: load secure-grid-backgrounds.css for the built-in background,
 * overlay tint, and placeholder fade-out support.
 */

/* ── Section container ───────────────────────────────────────────────────── */

.sgd-section {
  position:   relative;
  height:     var(--sgd-height);
  min-height: var(--sgd-min-height);
  overflow:   hidden;
  box-sizing: border-box;
}

/* ── Canvas wrapper ──────────────────────────────────────────────────────── */

.sgd-canvas-wrapper {
  position: absolute;
  inset:    0;
  z-index:  1;
}

.sgd-canvas-wrapper canvas {
  display: block;
  width:   100%;
  height:  100%;
}

/* ── Content layer ───────────────────────────────────────────────────────── */

.sgd-content {
  position:        relative;
  z-index:         10;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  height:          100%;
  text-align:      center;
  padding:         0 24px;
}

/* ── Fade-up entrance animation ──────────────────────────────────────────── */

.sgd-fade-up {
  opacity:    0;
  transform:  translateY(24px);
  animation:  sgd-fadeUp 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.sgd-fade-up.delay-1 { animation-delay: 0.10s; }
.sgd-fade-up.delay-2 { animation-delay: 0.20s; }
.sgd-fade-up.delay-3 { animation-delay: 0.30s; }
.sgd-fade-up.delay-4 { animation-delay: 0.40s; }
.sgd-fade-up.delay-5 { animation-delay: 0.50s; }

@keyframes sgd-fadeUp {
  to { opacity: 1; transform: none; }
}