/* ============================================================
   ComniCube — Scroll-driven Hero Cube
   3D transform rules + component styling.
   Brand tokens are defined in app.css (:root).
   ============================================================ */

/* All motion is driven by GSAP (resources/js/components/hero-cube.js).
   No CSS transitions on animated elements — the bloom colour is tweened
   via `currentColor` so GSAP can interpolate it. */

/* ---------------------------------------------------------------
   Section shell — full viewport, pinned by ScrollTrigger
   --------------------------------------------------------------- */
.hero-cube-section {
  position: relative;
  z-index: 1;               /* stay below the site nav (z-index: 100) */
  width: 100%;
  height: 100vh;
  background: var(--void, #0A0C10);
  overflow: hidden;
  /* No padding here — the nav offset lives on the inner wrapper so the
     ScrollTrigger pin spacer measures the full 100vh and there is no jump. */
}

/* Inner content wrapper (the two-column grid). Carries the nav offset. */
.hero-cube {
  display: grid;
  grid-template-columns: 55% 45%;
  align-items: center;
  width: 100%;
  height: 100vh;
  padding-top: 68px;        /* offset content below the fixed 68px nav */
  box-sizing: border-box;
}

/* ---------------------------------------------------------------
   Left column — 3D stage
   --------------------------------------------------------------- */
.hero-cube__stage {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
}

/* Radial bloom behind the cube — visible on first paint in Signal Teal.
   Colour is updated per face via `currentColor` (JS sets bloom.style.color). */
.cube-bloom {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1200px;   /* ~600px radius */
  height: 1200px;
  transform: translate(-50%, -50%);   /* CSS-centred (no longer GSAP-centred) */
  border-radius: 50%;
  color: #16E0B0;
  background: radial-gradient(circle at center, currentColor 0%, transparent 70%);
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

.cube-scene {
  position: relative;
  z-index: 1;
  width: 400px;
  height: 400px;
  perspective: 1100px;
  transform-style: preserve-3d;
}

/* Nested transform wrappers — one concern each so transforms never clash:
   .cube-mouse-wrapper  → mouse parallax (rotateX/Y)
   .cube-breath-wrapper → idle breathing (rotateX/Y) + outro scale/opacity
   .cube                → scroll-driven rotation (rotateX/Y/Z) */
.cube-mouse-wrapper,
.cube-breath-wrapper {
  position: relative;
  width: 400px;
  height: 400px;
  transform-style: preserve-3d;
}

.cube {
  position: relative;
  width: 400px;
  height: 400px;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

/* ---------------------------------------------------------------
   Faces — transparent crystalline wireframe
   --------------------------------------------------------------- */
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  /* INACTIVE (at rest): faint wireframe edge only */
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
  opacity: 1;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

/* Standard CSS 3D face positions (half-side = 200px) */
.face--front  { transform: translateZ(200px); }
.face--back   { transform: rotateY(180deg) translateZ(200px); }
.face--right  { transform: rotateY(90deg)  translateZ(200px); }
.face--left   { transform: rotateY(-90deg) translateZ(200px); }
.face--top    { transform: rotateX(90deg)  translateZ(200px); }
.face--bottom { transform: rotateX(-90deg) translateZ(200px); }

/* ACTIVE face — lit-from-within state, toggled instantly via JS class.
   --face-color / --face-color-rgb are set inline on the active face. */
.face--active {
  border-color: var(--face-color);
  background: rgba(var(--face-color-rgb), 0.07);
  box-shadow:
    inset 0 0 60px rgba(var(--face-color-rgb), 0.12),
    inset 0 0 20px rgba(var(--face-color-rgb), 0.08);
}
.face--active .face__icon {
  opacity: 1;
  color: var(--face-color);
  filter: drop-shadow(0 0 8px var(--face-color));
}

/* Icon on a face */
.face__icon {
  width: 64px;
  height: 64px;
  color: #ffffff;
  opacity: 0.15;     /* inactive */
  transform: scale(1);
  line-height: 0;
}
.face__icon svg {
  width: 64px;
  height: 64px;
  display: block;
}

/* ---------------------------------------------------------------
   Override site.css's generic .cube / .cube .face rules (those were
   written for the old orbit cubes and otherwise win on specificity).
   Scoping under .hero-cube-section lifts these to (0,2,0) so the hero
   cube keeps its own wireframe styling and is driven only by GSAP.
   --------------------------------------------------------------- */
.hero-cube-section .cube { animation: none; }     /* not the CSS cube-spin */
.hero-cube-section .face {
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  background: transparent;
}
.hero-cube-section .face--active {
  border-color: var(--face-color);
  background: rgba(var(--face-color-rgb), 0.07);
}

/* ---------------------------------------------------------------
   12 explicit edge lines — always visible at constant opacity.
   Base line spans the X axis through the cube centre; we translate
   and rotate each into one of the 12 cube edges (half-side 200px).
   --------------------------------------------------------------- */
.cube__edges {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}
.cube__edge {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 400px;
  height: 2px;
  margin-left: -200px;
  margin-top: -1px;
  transform-origin: center;
}
/* The drawable line lives inside each positioned 3D edge container. */
.cube__edge-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.cube__edge-svg line {
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 1;
}

/* 4 edges along X */
.cube__edge.x1 { transform: translateY(-200px) translateZ(200px); }
.cube__edge.x2 { transform: translateY( 200px) translateZ(200px); }
.cube__edge.x3 { transform: translateY(-200px) translateZ(-200px); }
.cube__edge.x4 { transform: translateY( 200px) translateZ(-200px); }
/* 4 edges along Y (rotateZ 90deg about centre) */
.cube__edge.y1 { transform: translateX(-200px) translateZ(200px)  rotateZ(90deg); }
.cube__edge.y2 { transform: translateX( 200px) translateZ(200px)  rotateZ(90deg); }
.cube__edge.y3 { transform: translateX(-200px) translateZ(-200px) rotateZ(90deg); }
.cube__edge.y4 { transform: translateX( 200px) translateZ(-200px) rotateZ(90deg); }
/* 4 edges along Z (rotateY 90deg about centre) */
.cube__edge.z1 { transform: translateX(-200px) translateY(-200px) rotateY(90deg); }
.cube__edge.z2 { transform: translateX( 200px) translateY(-200px) rotateY(90deg); }
.cube__edge.z3 { transform: translateX(-200px) translateY( 200px) rotateY(90deg); }
.cube__edge.z4 { transform: translateX( 200px) translateY( 200px) rotateY(90deg); }

/* ---------------------------------------------------------------
   Right column — service text panels (stacked, cross-faded)
   --------------------------------------------------------------- */
.hero-cube__panels {
  position: relative;
  height: 100%;
  display: grid;
  align-items: center;
  padding: 0 8% 0 4%;
}
.panel {
  grid-area: 1 / 1;        /* stack all panels in the same cell */
  max-width: 520px;
  opacity: 0;
  pointer-events: none;
}
.panel.active {            /* only the current channel's panel is shown */
  opacity: 1;
  pointer-events: auto;
}
.panel__counter {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 22px;
}
.panel__headline {
  font-family: var(--display, 'Space Grotesk', sans-serif);
  font-weight: 700;
  font-size: 58px;
  line-height: 1.0;
  letter-spacing: -0.03em;
}
.panel__descriptor {
  font-family: var(--display, 'Space Grotesk', sans-serif);
  font-weight: 400;
  font-size: 20px;
  color: var(--text-d2, #9BA3AF);
  margin-top: 12px;
}
.panel__body {
  font-family: var(--body, 'IBM Plex Sans', sans-serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-d2, #9BA3AF);
  max-width: 40ch;
  margin-top: 20px;
}
.panel__actions {
  display: flex;
  align-items: center;
  margin-top: 36px;
}
.panel__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display, 'Space Grotesk', sans-serif);
  font-weight: 600;
  font-size: 15px;
  color: #0A0C10;
  padding: 14px 28px;
  border-radius: 8px;
  border: none;
  text-decoration: none;
  cursor: pointer;
}
.panel__docs {
  font-family: var(--body, 'IBM Plex Sans', sans-serif);
  font-weight: 500;
  font-size: 14px;
  margin-left: 24px;
  text-decoration: none;
}

/* ---------------------------------------------------------------
   Progress indicators (pinned to viewport bottom during scroll)
   --------------------------------------------------------------- */
.hero-cube__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 32px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 32px;
  pointer-events: none;
  z-index: 2;
}
.dots {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dot {
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: var(--slate-line, #232A35);
}
.dot.is-active {           /* active dot expands; background set inline by JS */
  height: 16px;
}
.step-counter {
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: #16E0B0;
}

/* ---------------------------------------------------------------
   Mobile fallback (< 1024px) — stacked service cards, no cube
   --------------------------------------------------------------- */
.hero-cards { display: none; }

@media (max-width: 1023px) {
  .hero-cube-section { display: none; }

  .hero-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 48px 20px;
    background: var(--void, #0A0C10);
  }
  .hero-card {
    position: relative;
    background: var(--carbon, #11151B);
    border: 1px solid var(--slate-line, #232A35);
    border-left-width: 3px;
    border-radius: 12px;
    padding: 24px 22px;
  }
  .hero-card__icon {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
  }
  .hero-card__icon svg { width: 40px; height: 40px; display: block; }
  .hero-card__counter {
    font-family: var(--mono, 'IBM Plex Mono', monospace);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
  }
  .hero-card__headline {
    font-family: var(--display, 'Space Grotesk', sans-serif);
    font-weight: 700;
    font-size: 34px;
    line-height: 1.0;
    letter-spacing: -0.03em;
    margin-top: 10px;
  }
  .hero-card__descriptor {
    font-family: var(--display, 'Space Grotesk', sans-serif);
    font-size: 16px;
    color: var(--text-d2, #9BA3AF);
    margin-top: 8px;
  }
  .hero-card__body {
    font-family: var(--body, 'IBM Plex Sans', sans-serif);
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-d2, #9BA3AF);
    margin-top: 14px;
  }
  .hero-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--display, 'Space Grotesk', sans-serif);
    font-weight: 600;
    font-size: 14px;
    color: #0A0C10;
    padding: 12px 22px;
    border-radius: 8px;
    text-decoration: none;
    margin-top: 20px;
  }
}

/* Respect reduced motion: keep everything legible without the tumble */
@media (prefers-reduced-motion: reduce) {
  .dot, .cube-bloom { transition: none; }
}