/* ==================== Claude: start (rotating cube styles) ==================== */

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  /* Claude: edit -- swapped flat near-black for a dark navy, per feedback */
  background: #05070f;
}

/* .scene centers the cube both horizontally and vertically and sets the
   3D perspective that makes the cube's rotation look three-dimensional. */
.scene {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
  /* Claude: edit -- establishes a positioning context for .energy-field */
  position: relative;
  overflow: hidden;
  /* Claude: edit -- avoids selecting face text while dragging the cube */
  user-select: none;
}

/* ==================== Claude: start (energy field flowing behind the cube) ====================
   Vectorized version, replacing the earlier flat glow beams: three wavy SVG
   paths, each stroked as a dashed line of round dots so the stroke reads as
   a flowing line of particles (closer to the reference image the user sent).
   Animating stroke-dashoffset moves the dots along their own wavy path --
   real vector motion, not just a straight bar sliding across.
   Still sits at a lower z-index than .cube, so the cube's opaque faces
   occlude whichever wave is passing "through" it, same trick as before. */
.energy-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.energy-field svg {
  width: 100%;
  height: 100%;
  display: block;
}

.wave {
  fill: none;
  stroke-linecap: round;
}

.wave--a {
  stroke: rgba(171, 214, 242, 0.9);
  stroke-width: 5;
  stroke-dasharray: 1 22;
  animation: flowDash 6s linear infinite;
}

.wave--b {
  stroke: rgba(120, 170, 230, 0.6);
  stroke-width: 7;
  stroke-dasharray: 1 26;
  animation: flowDash 8.5s linear infinite;
}

.wave--c {
  stroke: rgba(224, 238, 250, 0.5);
  stroke-width: 4;
  stroke-dasharray: 1 18;
  animation: flowDash 5.2s linear infinite;
}

@keyframes flowDash {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -230; }
}
/* ==================== Claude: end ==================== */

/* .cube is the 3D object itself. transform-style: preserve-3d keeps its
   children (the faces) positioned in 3D space instead of flattening them.
   Claude: edit -- swapped the continuous auto-rotate for a resting pose
   (logo face square to the viewer) that's now turned by drag/swipe via
   script.js, which sets `transform` on this element directly. */
.cube {
  position: relative;
  width: 220px;
  height: 220px;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg);
  /* sits above .energy-field (z-index: 1) so its opaque faces occlude the
     beams as they pass "through" */
  z-index: 2;
  cursor: grab;
  touch-action: none;
}

.cube.is-dragging {
  cursor: grabbing;
}

/* Each face is the same size as the cube and gets pushed outward along
   its own axis by half the cube's width (110px = 220px / 2). */
.face {
  position: absolute;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border: 1px solid #1a1a1a;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  letter-spacing: 0.05em;
  color: #1a1a1a;
  text-align: center;
}

.face img {
  /* Claude: edit -- was 80%; the logo is now cropped tight to its own
     content, so it can fill almost the whole face with just a sliver
     of breathing room against the cube's border */
  max-width: 94%;
  max-height: 94%;
  /* Claude: edit -- belt-and-suspenders alongside draggable="false" in the
     HTML: stops WebKit/Blink's native image drag from hijacking the
     mousedown before our drag-to-rotate script sees it, and lets clicks
     pass straight through to the face/cube underneath. */
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

.face--front  { transform: translateZ(110px); }
.face--back   { transform: rotateY(180deg) translateZ(110px); }
.face--right  { transform: rotateY(90deg) translateZ(110px); }
.face--left   { transform: rotateY(-90deg) translateZ(110px); }
.face--top    { transform: rotateX(90deg) translateZ(110px); }
.face--bottom { transform: rotateX(-90deg) translateZ(110px); }

/* Claude: edit -- hints that the 5 non-home faces are clickable links */
.face[data-panel] {
  cursor: pointer;
}

/* ==================== Claude: end ==================== */

/* ==================== Claude: start (in-place content panel) ====================
   A single bottom drawer, hidden below the viewport by default and slid up
   into view when a face is clicked. Title/body text are swapped by
   script.js depending on which face triggered it -- see PANEL_CONTENT there. */
.content-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  max-height: 45vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 40px 56px;
  background: rgba(5, 7, 15, 0.94);
  border-top: 1px solid rgba(171, 214, 242, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #e8f0f8;
  font-family: Arial, Helvetica, sans-serif;
  transform: translateY(100%);
  transition: transform 0.35s ease;
}

.content-panel.is-open {
  transform: translateY(0);
}

.content-panel h2 {
  margin: 0 0 14px;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  color: #ffffff;
  text-transform: uppercase;
}

.content-panel p {
  margin: 0;
  max-width: 640px;
  line-height: 1.6;
  color: #b9c6d6;
}

.panel-close {
  position: absolute;
  top: 14px;
  right: 20px;
  background: none;
  border: none;
  color: #9fb7cf;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

.panel-close:hover {
  color: #ffffff;
}
/* ==================== Claude: end ==================== */