/* ============================================================
   THE CREATIVITY LAB — Living capability cards
   Subtle TCL accent (#FF5A2C), pointer tilt, light sweep.
   Layered ON TOP of creativity-lab-2.css (.cap-*) — load after it.
   ============================================================ */

/* Global — premium hardware feel: tilt + lift + accent glow on hover */
.cap-card { transition: border-color 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.5s cubic-bezier(0.22,1,0.36,1), box-shadow 0.6s cubic-bezier(0.22,1,0.36,1); }
.cap-card:hover {
  border-color: rgba(255,90,44,0.35);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px);
  box-shadow: 0 30px 70px -42px rgba(0,0,0,0.9), 0 0 44px -18px rgba(255,90,44,0.32);
}
/* periodic light sweep removed per request */
.cap-sweep { display: none; }

/* Card 1 — living neural intelligence network */
.cap-neural__svg { width: 100%; height: 100%; display: block; overflow: visible;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 94%);
          mask-image: linear-gradient(180deg, #000 60%, transparent 94%); }
.nn-link { stroke: rgba(255,255,255,0.07); stroke-width: 0.35; }
.nn-node { fill: rgba(255,255,255,0.42); transform-box: fill-box; transform-origin: center;
  animation: nnNode var(--dur,4s) ease-in-out var(--del,0s) infinite; will-change: opacity; }
@keyframes nnNode { 0%,100% { opacity: 0.26; } 50% { opacity: 0.78; } }
.nn-node.is-hub { fill: #ff5a1f; filter: drop-shadow(0 0 1.4px rgba(255,90,31,0.85)); animation-name: nnHub; }
@keyframes nnHub { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
.nn-pulse { stroke: #ff7a3a; stroke-width: 0.8; stroke-linecap: round;
  stroke-dasharray: 2 9999; stroke-dashoffset: var(--len, 60);
  filter: drop-shadow(0 0 1.6px rgba(255,90,31,0.9));
  animation: nnPulse var(--dur,6s) cubic-bezier(0.4,0,0.4,1) var(--del,0s) infinite; will-change: stroke-dashoffset, opacity; }
@keyframes nnPulse {
  0% { stroke-dashoffset: var(--len, 60); opacity: 0; }
  12% { opacity: 1; } 88% { opacity: 1; }
  100% { stroke-dashoffset: -2; opacity: 0; }
}
.cap-card--1:hover .nn-node.is-hub { opacity: 1; }

/* Cursor-tracked glow + accent on every card (cinematic hover) */
.cap-glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx,50%) var(--my,30%), rgba(255,90,44,0.16), transparent 60%);
  opacity: 0; transition: opacity 0.5s var(--ease-out); }
.cap-card:hover .cap-glow { opacity: 1; }
.cap-card__title, .cap-card__text { position: relative; z-index: 2; }

/* Card 4 — scarcity signal (rare, by selection) */
.cap-card--4 .cap-rare { position: absolute; top: clamp(22px,2.3vw,30px); right: clamp(22px,2.3vw,30px); z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 10.5px; line-height: 1;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); }
.cap-rare__dot { width: 6px; height: 6px; border-radius: 50%; background: #ff5a1f;
  box-shadow: 0 0 9px 2px rgba(255,90,44,0.7); animation: capRarePulse 2.4s ease-in-out infinite; }
@keyframes capRarePulse { 0%,100% { opacity: 0.5; transform: scale(0.78); } 50% { opacity: 1; transform: scale(1.3); } }

/* Card 4 — invite-only application review board (private membership feel) */
.cap-card--4 .cap-review { position: absolute; z-index: 1; pointer-events: none; overflow: hidden;
  left: clamp(22px,2.3vw,30px); right: clamp(22px,2.3vw,30px); top: clamp(64px, 8vw, 100px); }
.cap-review__head { display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint);
  padding-bottom: clamp(11px,1.3vw,16px); margin-bottom: clamp(10px,1.2vw,15px);
  border-bottom: 1px solid var(--border-subtle); }
.cap-review__live { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #ff5a1f;
  box-shadow: 0 0 8px 2px rgba(255,90,44,0.7); animation: capRvLive 2.6s ease-in-out infinite; }
@keyframes capRvLive { 0%,100% { opacity: 0.45; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.25); } }
.cap-review__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(9px,1.05vw,14px); }
.cap-review__row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  animation: capRvRow 12s ease-in-out infinite; will-change: opacity; }
.cap-review__row:nth-child(1) { animation-delay: 0s; }
.cap-review__row:nth-child(2) { animation-delay: -2.4s; }
.cap-review__row:nth-child(3) { animation-delay: -4.8s; }
.cap-review__row:nth-child(4) { animation-delay: -7.2s; }
.cap-review__row:nth-child(5) { animation-delay: -9.6s; }
@keyframes capRvRow { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
.cap-review__city { font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: clamp(0.92rem,1.02vw,1.1rem); letter-spacing: -0.01em; color: var(--text-secondary); }
.cap-review__ind { flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,90,44,0.26); animation: capRvInd 4.4s ease-in-out infinite; will-change: background, box-shadow; }
.cap-review__row:nth-child(1) .cap-review__ind { animation-delay: -0.2s; }
.cap-review__row:nth-child(2) .cap-review__ind { animation-delay: -1.5s; }
.cap-review__row:nth-child(3) .cap-review__ind { animation-delay: -2.6s; }
.cap-review__row:nth-child(4) .cap-review__ind { animation-delay: -3.4s; }
.cap-review__row:nth-child(5) .cap-review__ind { animation-delay: -0.9s; }
@keyframes capRvInd {
  0%,100% { background: rgba(255,90,44,0.24); box-shadow: 0 0 0 0 rgba(255,90,44,0); }
  50% { background: #ff5a1f; box-shadow: 0 0 9px 2px rgba(255,90,44,0.7); }
}
.cap-review__scan { position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,90,44,0.5) 50%, transparent);
  opacity: 0; transform: translateY(28px); will-change: transform, opacity;
  animation: capRvScan 8s cubic-bezier(0.45,0,0.55,1) infinite; }
@keyframes capRvScan { 0% { transform: translateY(28px); opacity: 0; } 14% { opacity: 0.65; } 86% { opacity: 0.65; } 100% { transform: translateY(220px); opacity: 0; } }
@media (max-width: 719px) {
  .cap-card--4 .cap-review { top: 58px; }
  .cap-review__list { gap: 9px; }
  .cap-review__city { font-size: 0.9rem; }
}

/* Card 2 — reactor-core motion */
.cap-circles span { position: absolute; inset: 0; margin: auto; }
.cap-ring { border: 1px solid var(--border-default); border-radius: 50%; width: 100%; height: 100%; opacity: 0; }
.cap-ring:nth-child(1) { animation: capRing 4s ease-out infinite; }
.cap-ring:nth-child(2) { animation: capRing 4s ease-out 1.2s infinite; }
.cap-ring:nth-child(3) { animation: capRing 4s ease-out 2.4s infinite; }
@keyframes capRing { 0% { transform: scale(0.42); opacity: 0; } 18% { opacity: 0.5; } 100% { transform: scale(1.08); opacity: 0; } }
.cap-wave { width: 40%; height: 40%; border-radius: 50%; border: 1px solid rgba(255,90,44,0.5); opacity: 0; animation: capWave 4s ease-out infinite; }
@keyframes capWave { 0% { transform: scale(0.5); opacity: 0; } 10% { opacity: 0.6; } 60% { transform: scale(2.5); opacity: 0; } 100% { opacity: 0; } }
.cap-core { width: 34%; height: 34%; border-radius: 50%; background: var(--surface-card);
  border: 1px solid rgba(255,90,44,0.4); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 24px 2px rgba(255,90,44,0.4); animation: capCore 2.8s ease-in-out infinite; }
.cap-core svg { color: #FF5A2C; }
@keyframes capCore { 0%, 100% { box-shadow: 0 0 16px 2px rgba(255,90,44,0.32); } 50% { box-shadow: 0 0 30px 7px rgba(255,90,44,0.6); } }

/* Card 3 — indexing globe, repositioned upper-right, smaller */
.cap-globe { top: clamp(14px,1.8vw,22px); right: clamp(14px,1.8vw,22px); transform: none;
  width: clamp(86px, 9.5vw, 138px); height: clamp(86px, 9.5vw, 138px); }
.cap-geo { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #FF5A2C;
  box-shadow: 0 0 8px 1px rgba(255,90,44,0.7); animation: capGeo 2.6s ease-in-out infinite; }
.cap-geo--ams { top: 30%; left: 54%; animation-delay: 0s; }
.cap-geo--ldn { top: 42%; left: 37%; animation-delay: 0.6s; }
.cap-geo--dxb { top: 62%; left: 60%; animation-delay: 1.2s; }
.cap-geo--nyc { top: 50%; left: 19%; animation-delay: 1.9s; }
@keyframes capGeo { 0%, 100% { transform: scale(0.8); opacity: 0.5; } 50% { transform: scale(1.35); opacity: 1; } }

/* Card 4 — connected network nodes */
.cap-net { position: absolute; top: clamp(58px,7vw,92px); left: clamp(22px,2.3vw,30px); right: clamp(22px,2.3vw,30px); height: 86px; z-index: 2; pointer-events: none; }
.cap-net span { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #FF5A2C;
  box-shadow: 0 0 9px 1px rgba(255,90,44,0.6); animation: capNode 3s ease-in-out infinite; }
.cap-net span:nth-child(1) { top: 0; left: 8%; animation-delay: 0s; }
.cap-net span:nth-child(2) { top: 64%; left: 46%; animation-delay: 0.9s; }
.cap-net span:nth-child(3) { top: 22%; right: 6%; animation-delay: 1.7s; }
@keyframes capNode { 0%, 100% { transform: scale(0.72); opacity: 0.45; } 50% { transform: scale(1.28); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .nn-node, .nn-pulse,
  .cap-ring, .cap-wave, .cap-core, .cap-geo, .cap-net span, .cap-rare__dot,
  .cap-review__live, .cap-review__row, .cap-review__ind, .cap-review__scan { animation: none; }
  .nn-pulse { opacity: 0; }
  .cap-ring { opacity: 0.4; }
  .cap-review__row { opacity: 0.92; }
  .cap-review__ind { background: #ff5a1f; }
  .cap-review__scan { opacity: 0; }
}