/* ============================================================
   transitions.css — 3D Board Rotation + GSAP Targets
   PCB Portfolio · rasoolpeykarporsan.me · REV A
   ============================================================ */

/* ============================================================
   Scroll Driver
   A tall element in normal document flow.
   Its height is calculated and set by JS (transition.js).
   ============================================================ */

.scroll-driver {
  position: relative;
  /* height is set dynamically by JS — no CSS height here */
}

/* ============================================================
   PCB Viewport
   Sticks to the top of the screen while the user scrolls through
   the .scroll-driver. Acts as the 3D perspective "camera."
   ============================================================ */

.pcb-viewport {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  /* NOTE: NO overflow:hidden here — it forces transform-style:flat which kills 3D rotateX.
     Horizontal overflow is already clipped by body { overflow-x: hidden } in base.css. */

  /* 3D camera — perspective on the parent of rotating children.
     140rem = 1400px: wide enough for natural-looking, non-extreme foreshortening. */
  perspective: 140rem;
  perspective-origin: 50% 50%;
}

/* ============================================================
   Cross-Section Edge Overlay
   Visible for ~0.3s during the 90° flip.
   Shows a realistic PCB cross-section: colored bands + FR4 core.
   GSAP drives opacity; starts at 0.
   ============================================================ */

.pcb-edge {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ede8de;        /* warm neutral — FR4 substrate colour */
  opacity: 0;
  pointer-events: none;
  z-index: 50;
}

.pcb-edge__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}

/* Label above the cross-section stack */
.pcb-edge__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.30);
}

/* The band stack — represents the PCB layer stack edge-on */
.pcb-edge__stack {
  width: min(50rem, 70vw);
  display: flex;
  flex-direction: column;
  border-left:  2px solid rgba(0, 0, 0, 0.14);
  border-right: 2px solid rgba(0, 0, 0, 0.14);
}

/* FR4 core / prepreg layers between copper */
.pcb-edge__core {
  height: 2.2rem;
  background: #d4c89a;        /* FR4 tan-yellow */
}

/* Copper / mask bands per layer */
.pcb-edge__band { height: 0.5rem; }

.pcb-edge__band--l1 { background: rgba(184,  58,  46, 0.92); height: 0.6rem; } /* top copper    */
.pcb-edge__band--l2 { background: rgba( 42, 112,  72, 0.88); height: 1.0rem; } /* solder mask   */
.pcb-edge__band--l3 { background: rgba(123,  94, 167, 0.85); height: 0.5rem; } /* inner copper  */
.pcb-edge__band--l4 { background: rgba( 30,  79, 154, 0.85); height: 0.5rem; } /* bottom copper */
.pcb-edge__band--l5 { background: rgba(160, 122,  16, 0.75); height: 0.8rem; } /* silkscreen    */