/* ==========================================================================
   SECTION 06 — THUNDERBOLTX PROGRESS / MARKET VALIDATION TO REAL-WORLD MOBILITY
   Split stage: Glowing 3D wireframe cube + 2x2 stat cards with neon glow borders
   ========================================================================== */

@property --ang {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes ring {
  to {
    --ang: 360deg;
  }
}

.s6 {
  --bg: #050403;
  --ink: #f4efe9;
  --ink-soft: rgba(244, 239, 233, 0.78);
  --ink-dim: rgba(244, 239, 233, 0.2);
  --accent: #ff9a5c;
  --accent-hi: #ffc29a;
  --accent-line: rgba(255, 154, 92, 0.28);
  --card: rgba(255, 255, 255, 0.025);
  --font: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  position: relative;
  max-width: 1680px;
  margin: 0 auto;
  min-height: min(100svh, 56vw);
  display: grid;
  align-items: center;
  padding-block: clamp(40px, 6vw, 96px);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  isolation: isolate;
  --p: 0.5;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
}

.s6, .s6 * {
  box-sizing: border-box;
}

.s6::before {
  content: "";
  position: absolute;
  left: -10%;
  top: 10%;
  width: 60%;
  height: 90%;
  background: radial-gradient(closest-side, rgba(255, 150, 80, 0.16), rgba(255, 150, 80, 0.04) 55%, transparent 75%);
  z-index: -1;
  pointer-events: none;
}

.s6 .grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(24px, 4.2vw, 72px);
  align-items: center;
  padding-inline: clamp(0px, 3.5vw, 64px);
  width: 100%;
}

/* ---------- left ---------- */
.s6 .left {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 0.92;
  min-width: 0;
  touch-action: pan-y;
  cursor: grab;
}

.s6 .left:active {
  cursor: grabbing;
}

.s6 .cube {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: translate3d(calc(var(--mx, 0) * 14px), calc((var(--p) - 0.5) * -36px + var(--my, 0) * 10px), 0);
  transition: transform 0.25s ease-out;
}

.s6 .cube canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.s6 .title {
  position: relative;
  margin: 0;
  text-align: center;
  font-family: var(--font-venera, 'Venera', 'Venara', sans-serif);
  font-weight: 800;
  font-size: clamp(1.6rem, 2.7vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
  z-index: 2;
  pointer-events: none;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.6);
  color: var(--ink);
}

.s6 .title .ln {
  display: block;
}

.s6 .title .l1 {
  translate: calc((var(--p) - 0.5) * -44px) 0;
}

.s6 .title .l2 {
  translate: calc((var(--p) - 0.5) * 44px) 0;
  background: linear-gradient(90deg, #e0916a, #f5be98 55%, #e0916a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 140, 70, 0.35));
  font-weight: 700;
}

/* ---------- right ---------- */
.s6 .right {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 40px);
}

.s6 .lede {
  margin: 0;
  max-width: 32em;
  font-family: var(--font-lausanne, 'Lausanne', sans-serif);
  font-size: clamp(0.95rem, 1vw, 1.1rem);
  line-height: 1.65;
  font-weight: 400;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.s6 .lede .w {
  display: inline-block;
  white-space: pre;
}

.s6 .rule {
  display: block;
  width: clamp(110px, 9vw, 160px);
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform-origin: left;
}

.s6 .cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.9vw, 32px);
}

.s6 .card {
  position: relative;
  display: grid;
  grid-template-columns: max-content 1px minmax(0, 1fr);
  align-items: center;
  gap: clamp(10px, 1.3vw, 22px);
  padding: clamp(16px, 1.9vw, 32px) clamp(14px, 1.5vw, 26px);
  border-radius: clamp(16px, 1.4vw, 24px);
  background: var(--card);
  box-shadow: inset 0 0 40px rgba(255, 140, 70, 0.05), 0 0 26px rgba(255, 120, 50, 0.06);
  min-height: clamp(130px, 10.9vw, 190px);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.s6 .card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 170, 110, 0.95) 0%, rgba(255, 150, 90, 0.18) 22%, rgba(255, 150, 90, 0.12) 70%, rgba(255, 170, 110, 0.9) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.s6 .card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--ang), transparent 0 74%, rgba(255, 150, 80, 0.25) 82%, rgba(255, 196, 150, 0.95) 94%, #fff4e8 98%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 5px rgba(255, 140, 60, 0.9));
  animation: ring 7s linear infinite;
  animation-delay: calc(var(--k) * -1.75s);
  pointer-events: none;
}

.s6 .card:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 40px rgba(255, 140, 70, 0.05), 0 0 26px rgba(255, 120, 50, 0.06);
}

/* ---------- gravitate tilt (transform written per frame by JS) ---------- */
.s6 .card .spot {
  display: none !important;
}

.s6 .card > .stat,
.s6 .card > .vr,
.s6 .card > .txt {
  position: relative;
  z-index: 1;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.s6 .card.tilt-on {
  transform-style: preserve-3d;
  will-change: transform;
  box-shadow: inset 0 0 40px rgba(255, 140, 70, 0.05), 0 0 26px rgba(255, 120, 50, 0.06);
}

.s6 .card.tilt-on > .stat { transform: translateZ(34px); }
.s6 .card.tilt-on > .vr { transform: translateZ(18px); }
.s6 .card.tilt-on > .txt { transform: translateZ(24px); }

.s6 .card.tilt-on,
.s6.armed.in .card.tilt-on {
  transition: opacity 0.9s ease, translate 1s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.s6 .stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(6px, 0.8vw, 14px);
  min-width: 0;
}

.s6 .stat svg {
  width: clamp(28px, 2.9vw, 50px);
  height: auto;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.95;
}

.s6 .stat b {
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 46px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.s6 .vr {
  align-self: stretch;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 154, 92, 0.4), transparent);
  margin-block: 4px;
}

.s6 .txt {
  min-width: 0;
}

.s6 .txt h3 {
  margin: 0 0 clamp(6px, 0.7vw, 12px);
  font-weight: 500;
  font-size: clamp(14px, 1.2vw, 22px);
  line-height: 1.18;
  color: var(--ink);
}

.s6 .txt p {
  margin: 0;
  font-weight: 300;
  font-size: clamp(12px, 0.98vw, 17px);
  line-height: 1.42;
  color: rgba(244, 239, 233, 0.66);
}

.s6 .foot {
  margin: clamp(0px, 0.6vw, 10px) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.8vw, 28px);
  font-size: clamp(16px, 1.75vw, 32px);
  font-weight: 400;
  white-space: nowrap;
  color: var(--ink);
}

.s6 .foot em {
  font-style: normal;
  color: var(--accent);
}

.s6 .foot i {
  flex: 1 1 0;
  height: 1px;
  max-width: 8vw;
  min-width: 16px;
  background: linear-gradient(90deg, transparent, var(--accent-line) 40%, var(--accent));
}

.s6 .foot i:last-child {
  background: linear-gradient(270deg, transparent, var(--accent-line) 40%, var(--accent));
}

/* ---------- reveal choreography (starts from visible; only hidden once JS arms it) ---------- */
.s6.armed .title .l1 span,
.s6.armed .title .l2 span {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
}

.s6.armed .title .l1 span {
  transform: translateX(-70px);
}

.s6.armed .title .l2 span {
  transform: translateX(70px);
}

.s6.armed.in .title span {
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition: opacity 1.1s ease var(--d, 0s), filter 1.1s ease var(--d, 0s), transform 1.3s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s);
}

.s6.armed .lede .w {
  opacity: 0.14;
  filter: blur(3px);
}

.s6.armed.in .lede .w {
  opacity: 1;
  filter: blur(0);
  transition: opacity 0.7s ease calc(0.5s + var(--i) * 45ms), filter 0.7s ease calc(0.5s + var(--i) * 45ms);
}

.s6.armed .rule {
  transform: scaleX(0);
}

.s6.armed.in .rule {
  transform: none;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) 1.5s;
}

.s6.armed .card {
  opacity: 0;
  translate: 0 34px;
}

.s6.armed.in .card {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.9s ease calc(1.3s + var(--k) * 160ms), translate 1s cubic-bezier(0.16, 1, 0.3, 1) calc(1.3s + var(--k) * 160ms), transform 0.4s ease, box-shadow 0.4s ease;
}

.s6.armed .foot {
  opacity: 0;
  translate: 0 14px;
}

.s6.armed.in .foot {
  opacity: 1;
  translate: 0 0;
  transition: opacity 1s ease 2.3s, translate 1s ease 2.3s;
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .s6 {
    min-height: 0;
  }
  .s6 .grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(8px, 3vw, 24px);
    padding-inline: 0;
  }
  .s6 .left {
    aspect-ratio: 1 / 0.8;
    max-width: 640px;
    width: 100%;
    margin-inline: auto;
  }
  .s6 .title {
    font-size: clamp(30px, 6.4vw, 56px);
  }
  .s6 .right {
    max-width: 760px;
    width: 100%;
    margin-inline: auto;
  }
  .s6 .lede {
    font-size: clamp(17px, 2.6vw, 24px);
    max-width: 28em;
  }
  .s6 .txt p {
    font-size: clamp(13px, 1.7vw, 16px);
  }
  .s6 .txt h3 {
    font-size: clamp(15px, 2vw, 20px);
  }
  .s6 .stat svg {
    width: clamp(30px, 5vw, 44px);
  }
  .s6 .stat b {
    font-size: clamp(28px, 5vw, 44px);
  }
  .s6 .card {
    min-height: 0;
    padding: 20px 18px;
    gap: 14px;
  }
  .s6 .foot {
    font-size: clamp(16px, 2.6vw, 24px);
  }
}

@media (max-width: 600px) {
  .s6 .cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .s6 .card {
    grid-template-columns: 76px 1px minmax(0, 1fr);
  }
  .s6 .stat b {
    font-size: 28px;
  }
  .s6 .left {
    aspect-ratio: 1 / 0.92;
  }
  .s6 .title {
    font-size: clamp(27px, 8.2vw, 36px);
  }
  .s6 .foot {
    white-space: normal;
    text-align: center;
    flex-wrap: wrap;
  }
  .s6 .foot i {
    display: none;
  }
  .s6 .lede {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .s6 .card::after {
    animation: none;
  }
  .s6.armed .title span,
  .s6.armed .edge,
  .s6.armed .node,
  .s6.armed .cube canvas,
  .s6.armed .lede .w,
  .s6.armed .rule,
  .s6.armed .card,
  .s6.armed .foot {
    all: revert-layer;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    translate: none !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  .s6 .cube,
  .s6 .title .l1,
  .s6 .title .l2 {
    transform: none;
    translate: none;
  }
}