/* ============================================================
   THE CREATIVITY LAB — Operating System (execution pipeline)
   Console spine + cinematic horizontal expand + per-stage boot-up visuals.
   ============================================================ */
.process {
  position: relative;
  padding: clamp(56px, 7vw, 116px) clamp(20px, 4.5vw, 52px) clamp(80px, 11vw, 170px);
  border-top: 1px solid var(--border-subtle);
}
@media (min-width: 1800px) { .process { max-width: 1760px; margin: 0 auto; } }

.pr-head { position: relative; padding-top: clamp(18px, 3.5vw, 48px); }
.pr-eyebrow { font-family: var(--font-label); font-size: 13px; font-weight: var(--fw-semibold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); }
.pr-eyebrow .idx { color: var(--text-faint); }
.pr-headline {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: clamp(2rem, 5vw, 4.6rem); line-height: 1.0; letter-spacing: var(--tracking-tight);
  color: var(--text-primary); margin-top: clamp(22px, 3vw, 40px); max-width: 18ch; text-wrap: balance;
}
.pr-headline .ln { display: block; }
.pr-headline .muted { color: var(--text-muted); }
.pr-intro { margin-top: clamp(22px, 2.6vw, 36px); max-width: 56ch; font-size: clamp(1rem, 1.2vw, 1.22rem); line-height: 1.55; letter-spacing: -0.01em; color: var(--text-secondary); }
.pr-intro .dim { color: var(--text-muted); }

.pr-body { display: grid; grid-template-columns: 1fr; gap: clamp(36px, 4.5vw, 64px); margin-top: clamp(44px, 5.5vw, 84px); }
@media (min-width: 1024px) { .pr-body { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: clamp(40px, 4vw, 72px); align-items: start; } }

/* ---- Left: system console ---- */
.pr-left { display: flex; flex-direction: column; gap: clamp(26px, 3vw, 40px); }
.pr-sys__label { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-label); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); }
.pr-sys__live { width: 6px; height: 6px; border-radius: 50%; background: #ff5a1f; box-shadow: 0 0 8px 2px rgba(255,90,44,0.7); animation: prLive 2.6s ease-in-out infinite; }
@keyframes prLive { 0%,100% { opacity: 0.45; transform: scale(0.82); } 50% { opacity: 1; transform: scale(1.25); } }
.pr-sys__title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: clamp(1.25rem, 1.5vw, 1.55rem); letter-spacing: -0.01em; color: var(--text-primary); margin-top: 12px; }
.pr-sys__text { font-size: clamp(0.95rem, 1.05vw, 1.05rem); line-height: 1.55; color: var(--text-muted); margin-top: 12px; max-width: 34ch; }

/* stage spine (the OS menu) — desktop only; mobile uses the accordion below */
.pr-spine { list-style: none; margin: 0; padding: 0; display: none; }
@media (min-width: 1024px) { .pr-spine { display: block; border-top: 1px solid var(--border-subtle); } }
.pr-spine__item { position: relative; width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 14px 4px; background: none; border: none; border-bottom: 1px solid var(--border-subtle);
  cursor: pointer; text-align: left; color: var(--text-muted); transition: color 0.4s var(--ease-out); }
.pr-spine__n { flex: none; width: 22px; font-family: var(--font-label); font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: 0.08em; color: var(--text-faint); transition: color 0.4s var(--ease-out); }
.pr-spine__name { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 1.02rem; letter-spacing: 0.02em; text-transform: uppercase; transition: color 0.4s var(--ease-out); }
.pr-spine__bar { position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: #ff5a1f; box-shadow: 0 0 8px rgba(255,90,44,0.6); transition: width 0.6s cubic-bezier(0.22,1,0.36,1); }
.pr-spine__item:hover { color: var(--text-secondary); }
.pr-spine__item:focus-visible { outline: 2px solid rgba(255,90,44,0.6); outline-offset: 3px; }
.pr-spine__item.on { color: var(--text-primary); }
.pr-spine__item.on .pr-spine__n { color: #ff5a1f; }
.pr-spine__item.on .pr-spine__name { color: var(--text-primary); }
.pr-spine__item.on .pr-spine__bar { width: 100%; }

/* ---- Cards: mobile vertical accordion ---- */
.pr-cards { display: flex; flex-direction: column; gap: 12px; }
.pr-card {
  position: relative; overflow: hidden; cursor: pointer;
  border: 1px solid var(--border-subtle); background: var(--surface-raised);
  padding: clamp(18px, 2.4vw, 30px);
  transition: border-color 0.55s var(--ease-out), background 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out);
}
.pr-card.active { border-color: rgba(255,90,44,0.38); background: var(--surface-card); box-shadow: 0 0 60px -26px rgba(255,90,44,0.55); }
/* orange edge glow — mobile: top bar */
.pr-card__edge { position: absolute; z-index: 2; left: 0; top: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #ff5a1f 18%, #ff8a4a 50%, #ff5a1f 82%, transparent);
  box-shadow: 0 0 14px rgba(255,90,44,0.7); opacity: 0; transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out); }
.pr-card.active .pr-card__edge { opacity: 1; }
.pr-card__num { position: relative; z-index: 1; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(1.6rem, 2.2vw, 2.1rem); line-height: 1; color: var(--text-faint); transition: color 0.6s var(--ease-out), transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.pr-card.active .pr-card__num { color: var(--text-primary); }
.pr-card__viz { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 0.8s var(--ease-out); pointer-events: none; }
.pr-card__viz::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, var(--surface-card) 96%); }
.pr-card.active .pr-card__viz { opacity: 1; }
.pr-card__content { position: relative; z-index: 1; }
.pr-card__title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: clamp(1.15rem, 1.4vw, 1.5rem); letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-primary); margin-top: 14px; }
.pr-card__text { font-size: clamp(0.95rem, 1.05vw, 1.08rem); line-height: 1.5; color: var(--text-secondary); margin-top: 12px; max-width: 38ch; }
.pr-line { position: absolute; left: clamp(18px,2.4vw,30px); right: clamp(18px,2.4vw,30px); bottom: clamp(14px,1.8vw,22px); height: 1px; background: var(--border-default); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease-out); z-index: 1; }
.pr-card.active .pr-line { transform: scaleX(1); }

@media (max-width: 1023px) {
  .pr-card__text-wrap { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.7s var(--ease-out), opacity 0.5s var(--ease-out); }
  .pr-card.active .pr-card__text-wrap { max-height: 320px; opacity: 1; }
  .pr-card { padding-bottom: clamp(26px, 3vw, 34px); }
}

/* ---- Cards: desktop cinematic horizontal expand ---- */
@media (min-width: 1024px) {
  .pr-cards { flex-direction: row; gap: 14px; height: clamp(440px, 54vh, 540px); min-width: 0; }
  /* Deterministic width model: fixed basis percentages, no grow/shrink, so panel
     widths never depend on content. The 4 gaps (14px) are subtracted evenly
     (56px / 5 = 11.2px each), so 5 panels + 4 gaps always sum to exactly 100%
     of the column = zero overflow, zero trailing slack, at any width.
     Inactive = 10%, active = 60%. Smooth interpolation by transitioning flex-basis. */
  .pr-card {
    flex: 0 0 calc(10% - 11.2px); min-width: 0; display: flex; flex-direction: column;
    transition: flex-basis 0.9s cubic-bezier(0.22,1,0.36,1), border-color 0.55s var(--ease-out), background 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out);
  }
  .pr-card.active { flex-basis: calc(60% - 11.2px); }
  .pr-card__num { transform: rotate(90deg); transform-origin: left center; margin-left: 10px; white-space: nowrap; }
  .pr-card.active .pr-card__num { transform: rotate(0deg); margin-left: 0; }
  .pr-card__content { margin-top: auto; opacity: 0; transform: translateY(16px); transition: opacity 0.6s 0.2s var(--ease-out), transform 0.7s 0.2s cubic-bezier(0.22,1,0.36,1); width: min(380px, 36vw); }
  .pr-card.active .pr-card__content { opacity: 1; transform: none; }
  .pr-card:not(.active) .pr-card__content { pointer-events: none; }
  .pr-card:not(.active) .pr-card__title, .pr-card:not(.active) .pr-card__text { white-space: normal; }
  /* orange edge glow — desktop: leading vertical bar */
  .pr-card__edge { left: 0; top: 14%; bottom: 14%; right: auto; width: 2px; height: auto;
    background: linear-gradient(180deg, transparent, #ff5a1f 18%, #ff8a4a 50%, #ff5a1f 82%, transparent);
    transform: scaleY(0.35); transform-origin: center; }
  .pr-card.active .pr-card__edge { transform: scaleY(1); }
}

/* ============================================================
   Per-stage boot-up visuals — animate ONLY while the panel is active.
   ============================================================ */
.prv { position: absolute; inset: 0; }
.prv svg { width: 100%; height: 100%; display: block; }
.prv svg circle, .prv svg rect { transform-box: fill-box; transform-origin: center; }
/* paused until the panel powers on */
.pr-card__viz .prv *, .pr-card__viz .prv-intel__scan { animation-play-state: paused; }
.pr-card.active .pr-card__viz .prv *, .pr-card.active .pr-card__viz .prv-intel__scan { animation-play-state: running; }

/* 01 Intelligence — scanning grid with signal pulses */
.prv-intel__grid line { stroke: rgba(255,255,255,0.08); stroke-width: 0.5; vector-effect: non-scaling-stroke; }
.prv-intel__blips circle { fill: #ff5a1f; opacity: 0; filter: drop-shadow(0 0 2px rgba(255,90,44,0.9)); animation: prBlip 3.6s ease-in-out infinite; }
@keyframes prBlip { 0%,100% { opacity: 0; transform: scale(0.5); } 8% { opacity: 1; transform: scale(1.5); } 34% { opacity: 0.22; transform: scale(1); } }
.prv-intel__scan { position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 46%, rgba(255,122,58,0.85) 50%, transparent 54%);
  background-size: 100% 220%; background-repeat: no-repeat; mix-blend-mode: screen;
  animation: prScan 3.6s cubic-bezier(0.45,0,0.55,1) infinite; }
@keyframes prScan { 0% { background-position: 0 -70%; } 100% { background-position: 0 170%; } }

/* 02 Architecture — wireframe structures assembling themselves */
.prv-arch rect, .prv-arch line { fill: none; stroke: rgba(255,255,255,0.5); stroke-width: 0.8; vector-effect: non-scaling-stroke;
  stroke-dasharray: 360; stroke-dashoffset: 360; opacity: 0; animation: prDraw 6.4s ease-in-out infinite; }
.prv-arch .accent { stroke: #ff7a3a; filter: drop-shadow(0 0 2px rgba(255,90,44,0.8)); }
@keyframes prDraw { 0% { stroke-dashoffset: 360; opacity: 0; } 12% { opacity: 0.75; } 42% { stroke-dashoffset: 0; opacity: 0.75; } 84% { stroke-dashoffset: 0; opacity: 0.75; } 100% { stroke-dashoffset: 0; opacity: 0; } }

/* 03 Execution — interface blocks snapping into place */
.prv-exec .blk { position: absolute; border: 1px solid rgba(255,255,255,0.26); background: rgba(255,255,255,0.035);
  opacity: 0; animation: prSnap 5.2s cubic-bezier(0.22,1,0.36,1) infinite; will-change: transform, opacity; }
.prv-exec .blk--bar { background: rgba(255,90,44,0.16); border-color: rgba(255,90,44,0.5); }
@keyframes prSnap { 0% { opacity: 0; transform: translate(7px,9px) scale(0.9); } 14% { opacity: 1; transform: translate(0,0) scale(1); } 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-5px) scale(0.98); } }

/* 04 Automation — data streams flowing through connected pathways */
.prv-auto__track path { fill: none; stroke: rgba(255,255,255,0.1); stroke-width: 0.8; vector-effect: non-scaling-stroke; }
.prv-auto__flow path { fill: none; stroke: #ff7a3a; stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 3 10; filter: drop-shadow(0 0 3px rgba(255,122,58,0.8)); animation: prFlow 2.6s linear infinite; }
@keyframes prFlow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -26; } }
.prv-auto__nodes circle { fill: #ff5a1f; filter: drop-shadow(0 0 3px rgba(255,90,44,0.8)); animation: prNode 2.8s ease-in-out infinite; }
@keyframes prNode { 0%,100% { opacity: 0.45; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.15); } }

/* 05 Dominance — command center activating slowly */
.prv-dom__rings circle { fill: none; stroke: rgba(255,90,44,0.5); stroke-width: 0.8; vector-effect: non-scaling-stroke; opacity: 0; animation: prDomRing 5.6s ease-out infinite; }
.prv-dom__rings circle:nth-child(2) { animation-delay: 1.87s; }
.prv-dom__rings circle:nth-child(3) { animation-delay: 3.73s; }
@keyframes prDomRing { 0% { transform: scale(0.5); opacity: 0; } 14% { opacity: 0.7; } 100% { transform: scale(3.4); opacity: 0; } }
.prv-dom__sweep { transform-box: view-box; transform-origin: 60px 60px; animation: prDomSweep 6.5s linear infinite; }
.prv-dom__sweep line { stroke: #ff7a3a; stroke-width: 1; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0.7; filter: drop-shadow(0 0 3px rgba(255,122,58,0.7)); }
@keyframes prDomSweep { to { transform: rotate(360deg); } }
.prv-dom__sats circle { fill: rgba(255,255,255,0.2); animation: prDomSat 5s ease-in-out infinite; }
@keyframes prDomSat { 0%,100% { fill: rgba(255,255,255,0.16); transform: scale(0.7); } 50% { fill: #ff5a1f; transform: scale(1.25); } }
.prv-dom__core { fill: #ff5a1f; filter: drop-shadow(0 0 6px rgba(255,90,44,0.9)); animation: prDomCore 3s ease-in-out infinite; }
@keyframes prDomCore { 0%,100% { opacity: 0.6; transform: scale(0.82); } 50% { opacity: 1; transform: scale(1.12); } }

@media (prefers-reduced-motion: reduce) {
  .prv *, .prv-intel__scan, .pr-sys__live { animation: none !important; }
  .pr-card, .pr-card__content, .pr-line, .pr-card__num, .pr-card__edge, .pr-spine__bar { transition: none; }
  .prv-arch rect, .prv-arch line { stroke-dashoffset: 0; opacity: 0.55; }
  .prv-exec .blk { opacity: 1; transform: none; }
  .prv-intel__blips circle { opacity: 0.5; }
  .prv-auto__nodes circle, .prv-dom__core { opacity: 0.7; }
  .prv-dom__rings circle { opacity: 0; }
}