/* =========================
   VISUALIZATION W NODES
========================= */

/* Vizualization container ORIGINAL
.intro-viz {
  position: absolute;
  inset: 10svh 0;
  pointer-events: none;
  z-index: 1;
  perspective: 1200px;
  perspective-origin: 80% 50%;
} */

/* Vizualization container */
.intro-viz {
  position: relative;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  perspective: 1200px;
  perspective-origin: 80% 50%;
}

@media (max-width:480px) {
  .intro-viz {
    margin-top: -50px;
  }
}

/* Device 'surface' container */
.intro-surface {
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);

  width: 280px;

  pointer-events: auto; /* IMPORTANT */
  will-change: transform;
}

.surface-motion {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: 60% 50%;
  touch-action: none;
}

  /* Surface content wrapper */
  .surface-content {
    display: inline-block;
    white-space: nowrap;
    align-items: flex-start; /* TOP ALIGN */

    transform: translateZ(0); /* 🔥 forces same composite layer */
  }

    /* Surface 'face' */
    .surface-face {
      display: block;
      height: auto;
      max-height: 60vh;
      filter: brightness(calc(1 - var(--light-x, 0) * 0.15))
          contrast(1.05);
    }

    /* Surface 'edge' */
    .surface-edge {
      display: block;
      height: auto;
      max-height: 60vh;

      margin-left: calc(-5px + var(--light-x, 0) * -6px); /* left edge seam lock */

      /* edge reacts to light */
      opacity: 0.6;
      transition: opacity 200ms ease;
      filter: brightness(calc(1 + var(--light-x, 0) * 0.4))
              contrast(1.1);

      transform: translateX(calc(var(--light-x, 0) * 6px));
    }

    .surface-face,
    .surface-edge {
      display: inline-block;
      vertical-align: top;
    }


/* Nodes container ORIGINAL
.intro-nodes {
  position: absolute;
  inset: 0;
  z-index: 2;           
  pointer-events: none; 
  height: 100dvh;
  padding: 10dvh 0;
  top: 60dvh;
  left: -350px;
} */

/* Nodes container */
.intro-nodes {
  position: relative;
  inset: 0;
  z-index: 2;           
  pointer-events: none; 
  height: 80dvh;
  padding: 0;
  top: 0;
  left: -350px;
  width: 60dvw;
}

/* Nodes (base) */
.node {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;

  background: #ff4f87;
  opacity: 0;

  pointer-events: auto;
  cursor: pointer;

  transform: translate3d(0,0,0);
  transform: scale(1);
  transition: transform 160ms ease;

  z-index: 3;  
}

.node:hover {
  transform: scale(1.25);
}

.node::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: rgba(255, 79, 135, 0.15);
  opacity: 0;
  transition: opacity 200ms ease;
}

.node:hover::before {
  opacity: 1;
}

/* Node positioning (initial behavior testing) */
.node:nth-child(1) { top: 20%; left: 70%; }
.node:nth-child(2) { top: 35%; left: 80%; }
.node:nth-child(3) { top: 55%; left: 75%; }
.node:nth-child(4) { top: 65%; left: 85%; }
.node:nth-child(5) { top: 75%; left: 70%; }

/* =========================
   INTRO NODES
========================= */

/* Nodes */

[data-node] {
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 400ms ease,
    transform 200ms cubic-bezier(0.22,1,0.36,1);
}

[data-node].node-visible {
  opacity: 0.7;
}

/* Surface */

[data-surface] {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 200ms cubic-bezier(0.22,1,0.36,1);
}

/* =========================
   ORIENTATION LOCK (TEMPORARY FIX)
   ====================== */
   
   .ai-lab .orientation-lock {
      position: fixed;
      inset: 0; /* top:0; right:0; bottom:0; left:0 */
    
      z-index: 1000;
      background: #000;
    
      display: none; /* hidden by default */
    
      align-items: center;
      justify-content: center;
    
      text-align: center;
    }
    
    .ai-lab .orientation-lock__content {
      font-family: var(--font-serif);
      font-size: 3rem;
      color: #fff;

      opacity: 0;
      transform: translateY(10px);

      animation: orientationFadeIn 0.6s ease forwards;
    }

    @keyframes orientationFadeIn {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
    
    @media (max-height: 500px) {
      .ai-lab .orientation-lock {
        display: flex;
      }
    }

/* =========================
   BREAKPOINT QUERIES
========================= */

@media (max-width: 768px) {


  .intro-viz {
    z-index: 1; /* surface stays behind */
  }

  .intro-middle {
    z-index: 2; /* text above surface */
  }

  .intro-nodes {
    z-index: 3; /* nodes always on top */
  }

  .node:nth-child(1) { top: 40%;  left: 50%; transform: translateX(-50%); }
  .node:nth-child(2) { top: 30%; left: 85%; }
  .node:nth-child(3) { top: 70%; left: 85%; }
  .node:nth-child(4) { top: 15%; left: 10%; transform: translateX(-50%); }
  .node:nth-child(5) { top: 30%; left: 10%; }

  .intro-surface {
    right: auto;
    left: 50%;
    top: 45%;
    margin-left: -140px; /* half width */
    margin-top: -140px;
  }

}

@media (max-width: 480px) {
  .intro-surface {
    /*top: 52%;*/
    margin: 0;
    left: 30%;
  }

  .intro-nodes {
    /*height: 100svh;
    top: 37%;*/
    left: -50px;
  }
}