/* === Hero Section === */

/* Background signal flow lines */
.hero-signal-path {
  stroke-dasharray: 14 10;
  animation: heroSignalFlow 8s linear infinite;
}
.hero-signal-path--2 {
  animation-duration: 10s;
  animation-direction: reverse;
}
@keyframes heroSignalFlow {
  to { stroke-dashoffset: -480; }
}

/* Primary CTA sheen sweep on hover */
.hero-cta-sheen {
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.25) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 0.6s ease;
  pointer-events: none;
}
.hero-cta-primary:hover .hero-cta-sheen {
  transform: translateX(120%);
}

/* Visual column frame: fades/scales in on scroll via .is-visible from mainObserver */
.hero-visual-frame {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.8s ease, transform 0.8s ease, box-shadow 0.8s ease;
}
.hero-visual.is-visible .hero-visual-frame {
  opacity: 1;
  transform: scale(1);
  box-shadow:
    0 20px 40px -12px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(8, 145, 178, 0.15);
}

/* ======================================================
   3D EXPLODED PCB STACK
====================================================== */

.pcb-3d-stage {
    width: 340px;
    height: 240px;
    perspective: 1600px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Camera Angle */
.pcb-3d-tilt {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;

    /* Increase this for more front view */
    transform: rotateX(38deg);
}

/* PCB Animation */

.pcb-3d-object {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;

    animation: pcbStackFloat 10s ease-in-out infinite;
}

.hero-visual:hover .pcb-3d-object,
.hero-visual:focus-within .pcb-3d-object{
    animation-play-state: paused;
}

@keyframes pcbStackFloat{

    0%{

        transform:
            rotateY(-15deg);

    }

    50%{

        transform:
            rotateY(15deg);

    }

    100%{

        transform:
            rotateY(-15deg);

    }

}

/* ======================================================
   PCB Layers
====================================================== */

.pcb-layer{

    position:absolute;

    inset:0;

    border-radius:14px;

    overflow:hidden;

    transform-style:preserve-3d;

    border:1px solid rgba(255,255,255,.08);

    backface-visibility:hidden;

}

/* Top Edge Highlight */

.pcb-layer::after{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:2px;

    background:rgba(255,255,255,.18);

}

/* Layer Thickness */

.pcb-layer::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:-6px;

    height:6px;

    border-radius:0 0 12px 12px;

    background:rgba(0,0,0,.30);

}

/* ======================================================
   Exploded Layer Positions
====================================================== */

.pcb-layer--soldermask-bottom{

    transform:translateZ(-140px);

    background:
        linear-gradient(
            145deg,
            #135a38,
            #0b3d28,
            #062116
        );

    box-shadow:
        0 25px 45px rgba(0,0,0,.45);

}

.pcb-layer--copper-bottom{

    transform:translateZ(-70px);

    background:
        linear-gradient(
            145deg,
            #ffcf70,
            #d97706,
            #8b4513
        );

    opacity:.95;

}

.pcb-layer--core{

    transform:translateZ(0);

    background:
        linear-gradient(
            145deg,
            #55616d,
            #2d3748
        );

    border-color:rgba(255,255,255,.12);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.15);

}

.pcb-layer--copper-top{

    transform:translateZ(70px);

    background:
        linear-gradient(
            145deg,
            #ffcf70,
            #d97706,
            #8b4513
        );

    opacity:.95;

}

.pcb-layer--soldermask-top{
    transform:translateZ(140px);
    background: linear-gradient(145deg, #15784d, #0d5638, #07281a);
    box-shadow: 0 0 45px rgba(8,145,178,.25);
}

/* PCB Trace */

.pcb-layer-trace{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    opacity:.9;

}

/* ======================================================
   Responsive
====================================================== */

@media (max-width:1024px){

    .pcb-3d-stage{

        width:280px;

        height:200px;

    }

}

@media (prefers-reduced-motion:reduce){

    .pcb-3d-object{

        animation:none;

        transform:rotateY(10deg);

    }
    @media (prefers-reduced-motion:reduce){

    .pcb-3d-object{

        animation:none;

        transform:rotateY(10deg);

    }

}

.pcb-real-stage {
    position: relative;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 316.5 / 230.5;
}
.pcb-real-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.pcb-real-copper {
    filter: drop-shadow(0 0 6px rgba(8,145,178,0.35));
    transition: filter 0.5s ease;
}
.hero-visual:hover .pcb-real-copper,
.hero-visual:focus-within .pcb-real-copper {
    filter: drop-shadow(0 0 12px rgba(8,145,178,0.6));
}

}