/* ============================================================================
   SpectraRig showcase — living app windows, deep feature sections, pricing.
   Kept separate from style.css because this is the theatrical layer; the base
   sheet stays legible without it.
   Every animation here is decorative and is killed by prefers-reduced-motion
   at the bottom of this file.
   ========================================================================== */

/* ---------------------------------------------------------------- window shell */
.sr-win {
  --sr-win-hue: var(--sr-hue-fill, #22d3ee);
  border: 1px solid var(--sr-line);
  border-radius: 10px;
  background: var(--sr-deck);
  overflow: hidden;
  box-shadow:
    0 50px 90px -46px rgba(0,0,0,.95),
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 1px 0 rgba(255,255,255,.045) inset;
  font-family: var(--sr-font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--sr-text-muted);
}
.sr-win--bridge { --sr-win-hue: var(--sr-fill-cyan); }
.sr-win--map    { --sr-win-hue: var(--sr-fill-magenta); }
.sr-win--route  { --sr-win-hue: var(--sr-fill-amber); }
.sr-win--photo  { --sr-win-hue: var(--sr-fill-violet); }

.sr-win__bar {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .8rem;
  background: linear-gradient(180deg, var(--sr-rail), var(--sr-deck));
  border-bottom: 1px solid var(--sr-scrim);
}
.sr-win__lights { display: inline-flex; gap: 5px; }
.sr-win__lights i { width: 8px; height: 8px; border-radius: 50%; background: var(--sr-line); }
.sr-win__lights i:first-child { background: #ff5f57; }
.sr-win__lights i:nth-child(2) { background: #febc2e; }
.sr-win__lights i:nth-child(3) { background: #28c840; }
.sr-win__title { color: var(--sr-text-body); font-size: 10.5px; }
.sr-win__badge {
  margin-left: auto; display: inline-flex; align-items: center; gap: .35rem;
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sr-text-green);
}
.sr-win__body { padding: .7rem; }
.sr-win__body--split { display: grid; grid-template-columns: 148px minmax(0,1fr); gap: .7rem; }
.sr-win--map .sr-win__body--split,
.sr-win--route .sr-win__body--split { grid-template-columns: minmax(0,1fr) 138px; }
.sr-win__side { display: grid; gap: .3rem; align-content: start; }
.sr-win__sidehead {
  font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sr-text-faint); padding-bottom: .2rem;
}
.sr-win__foot {
  display: flex; align-items: center; gap: .8rem;
  padding: .5rem .8rem;
  border-top: 1px solid var(--sr-scrim);
  background: var(--sr-rail);
  font-size: 9.5px;
}
.sr-win__spacer { flex: 1; }
.sr-win__mono { color: var(--sr-text-faint); }
.sr-win__mono--hue { color: var(--sr-win-hue); }
.sr-kv { display: flex; justify-content: space-between; font-size: 9.5px; padding: .12rem 0; }
.sr-kv span { color: var(--sr-text-faint); }
.sr-kv b { color: var(--sr-text-bright); font-weight: 500; }

/* ---------------------------------------------------------------- bridge */
.sr-srclist { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 2px; }
.sr-srclist li {
  display: flex; align-items: center; gap: .4rem;
  padding: .3rem .4rem; border-radius: 3px; font-size: 9.5px;
  position: relative; z-index: 1; white-space: nowrap; overflow: hidden;
}
.sr-srclist__kind {
  font-size: 7.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sr-text-faint); border: 1px solid var(--sr-scrim);
  border-radius: 2px; padding: 0 .2rem; flex: none;
}
.sr-srclist__cursor {
  /* top:0 is load-bearing — without it the cursor sits at its static position
     after the last item and translates from there, escaping the list. */
  position: absolute; left: 0; right: 0; top: 0; height: 22px; z-index: 0;
  border-radius: 3px; padding: 0;
  background: color-mix(in srgb, var(--sr-win-hue) 18%, transparent);
  border-left: 2px solid var(--sr-win-hue);
  animation: sr-walk 7.2s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes sr-walk {
  0%,18%   { transform: translateY(0); }
  25%,43%  { transform: translateY(26px); }
  50%,68%  { transform: translateY(52px); }
  75%,93%  { transform: translateY(78px); }
  100%     { transform: translateY(0); }
}
.sr-preview { position: relative; height: 100%; min-height: 128px; }
.sr-preview__frame {
  position: absolute; inset: 0; border-radius: 4px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--sr-win-hue) 55%, transparent);
  background:
    radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--sr-win-hue) 20%, transparent), transparent 60%),
    var(--sr-void);
}
.sr-preview__chrome {
  position: absolute; inset: 0 0 auto 0; height: 14px;
  background: color-mix(in srgb, var(--sr-win-hue) 22%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--sr-win-hue) 40%, transparent);
}
.sr-preview__shimmer {
  position: absolute; inset: 14px 0 0 0;
  background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--sr-win-hue) 26%, transparent) 50%, transparent 70%);
  background-size: 260% 100%;
  animation: sr-sweep 4.2s ease-in-out infinite;
}
@keyframes sr-sweep { 0%,100% { background-position: 130% 0; } 50% { background-position: -30% 0; } }
.sr-preview__tag {
  position: absolute; right: .35rem; bottom: .3rem; font-size: 8.5px;
  color: var(--sr-win-hue); background: rgba(0,0,0,.5); padding: 0 .25rem; border-radius: 2px;
}

/* ---------------------------------------------------------------- map */
.sr-canvasboard {
  position: relative; min-height: 168px; border-radius: 4px;
  border: 1px solid var(--sr-scrim);
  background-color: var(--sr-void);
  background-image:
    linear-gradient(to right, var(--sr-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--sr-grid) 1px, transparent 1px);
  background-size: 22px 22px;
  overflow: hidden;
}
.sr-canvasboard__split {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: repeating-linear-gradient(180deg, var(--sr-text-faint) 0 4px, transparent 4px 8px);
}
.sr-canvasboard__label {
  position: absolute; bottom: .3rem; font-size: 8px; letter-spacing: .1em;
  color: var(--sr-text-faint);
}
.sr-canvasboard__label--l { left: .4rem; }
.sr-canvasboard__label--r { right: .4rem; }
.sr-region {
  position: absolute; border-radius: 3px; display: flex; align-items: flex-end;
  padding: .2rem .3rem; font-size: 8px;
}
.sr-region em { font-style: normal; }
.sr-region--a {
  left: 5%; top: 12%; width: 38%; height: 46%;
  border: 1px solid var(--sr-fill-cyan); color: var(--sr-text-cyan);
  background: color-mix(in srgb, var(--sr-fill-cyan) 13%, transparent);
}
.sr-region--b {
  left: 54%; top: 12%; width: 40%; height: 38%;
  border: 1px solid var(--sr-fill-violet); color: var(--sr-text-violet);
  background: color-mix(in srgb, var(--sr-fill-violet) 13%, transparent);
  animation: sr-nudge 6s cubic-bezier(.5,0,.3,1) infinite;
}
@keyframes sr-nudge {
  0%,40%   { transform: translate(6px, 8px); opacity: .75; }
  55%,100% { transform: translate(0,0); opacity: 1; }
}
.sr-region--c {
  left: 16%; top: 66%; width: 66%; height: 20%;
  border: 1px solid var(--sr-fill-amber); color: var(--sr-text-amber);
  background: color-mix(in srgb, var(--sr-fill-amber) 13%, transparent);
}
.sr-outlist { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: 3px; }
.sr-outlist li { display: flex; align-items: center; gap: .35rem; font-size: 9px; }
.sr-lamp {
  width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: var(--sr-win-hue); box-shadow: 0 0 6px var(--sr-win-hue);
  animation: sr-blink 2.4s ease-in-out infinite;
}
.sr-lamp--2 { animation-delay: .3s; }
.sr-lamp--3 { animation-delay: .6s; }
.sr-lamp--4 { animation-delay: .9s; }
@keyframes sr-blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ---------------------------------------------------------------- route */
.sr-matrix {
  display: grid; grid-template-columns: 44px repeat(4, 1fr);
  gap: 2px; padding: .3rem; border-radius: 4px;
  border: 1px solid var(--sr-scrim); background: var(--sr-void);
}
.sr-matrix__corner { }
.sr-matrix__colhead, .sr-matrix__rowhead {
  font-size: 7.5px; letter-spacing: .08em; color: var(--sr-text-faint);
  display: flex; align-items: center; justify-content: center; padding: .15rem 0;
}
.sr-matrix__rowhead { justify-content: flex-start; }
.sr-matrix__cell {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; min-height: 16px;
  border-radius: 2px; background: rgba(255,255,255,.014);
}
.sr-xpt { width: 4px; height: 4px; border-radius: 50%; background: var(--sr-scrim); }
.sr-xpt.is-on {
  width: 8px; height: 8px; background: var(--sr-win-hue);
  box-shadow: 0 0 8px var(--sr-win-hue);
  animation: sr-xptpulse 3.2s ease-in-out infinite var(--sr-xd, 0ms);
}
@keyframes sr-xptpulse { 0%,100% { opacity: .55; transform: scale(.82); } 45% { opacity: 1; transform: scale(1); } }
.sr-meters { display: flex; gap: 3px; align-items: flex-end; height: 74px; margin-bottom: .5rem; }
.sr-meter {
  flex: 1; height: 100%; border-radius: 1px;
  background: rgba(255,255,255,.03); display: flex; align-items: flex-end; overflow: hidden;
}
.sr-meter i {
  display: block; width: 100%; height: 30%;
  background: linear-gradient(180deg, var(--sr-fill-magenta), var(--sr-win-hue) 45%, var(--sr-fill-green));
  animation: sr-bounce 1.15s ease-in-out infinite alternate var(--sr-md, 0ms);
}
@keyframes sr-bounce { from { height: 18%; } to { height: 86%; } }

/* ---------------------------------------------------------------- photo */
.sr-slideshow {
  position: relative; border-radius: 4px; overflow: hidden;
  border: 1px solid var(--sr-scrim); background: var(--sr-void);
  aspect-ratio: 16/9; min-height: 150px;
}
.sr-slide { position: absolute; inset: 0; opacity: 0; animation: sr-cross 9s ease-in-out infinite; }
.sr-slide--1 { background: radial-gradient(80% 90% at 30% 25%, #4b3a7a, #17122b 70%); }
.sr-slide--2 { background: radial-gradient(80% 90% at 70% 30%, #7a3a63, #2b1220 70%); animation-delay: 3s; }
.sr-slide--3 { background: radial-gradient(80% 90% at 45% 70%, #2f5a7a, #12202b 70%); animation-delay: 6s; }
@keyframes sr-cross { 0%,26% { opacity: 1; } 36%,100% { opacity: 0; } }
.sr-facebox {
  position: absolute; left: 34%; top: 22%; width: 30%; height: 46%;
  animation: sr-settle 9s ease-in-out infinite;
}
.sr-facebox i { position: absolute; width: 11px; height: 11px; }
.sr-facebox i::before, .sr-facebox i::after {
  content: ''; position: absolute; background: var(--sr-win-hue);
}
.sr-facebox i::before { width: 11px; height: 1.5px; }
.sr-facebox i::after { width: 1.5px; height: 11px; }
.sr-facebox__tl { left: 0; top: 0; }
.sr-facebox__tr { right: 0; top: 0; }
.sr-facebox__tr::before { right: 0; }
.sr-facebox__tr::after { right: 0; }
.sr-facebox__bl { left: 0; bottom: 0; }
.sr-facebox__bl::before { bottom: 0; }
.sr-facebox__br { right: 0; bottom: 0; }
.sr-facebox__br::before { bottom: 0; right: 0; }
.sr-facebox__br::after { right: 0; bottom: 0; }
@keyframes sr-settle {
  0%,8%    { transform: translate(10px,6px) scale(1.12); opacity: 0; }
  16%,30%  { transform: none; opacity: 1; }
  38%,100% { opacity: 0; }
}
.sr-slideshow__tag {
  position: absolute; left: .35rem; bottom: .3rem; font-size: 8px;
  color: var(--sr-win-hue); background: rgba(0,0,0,.55); padding: 0 .25rem; border-radius: 2px;
}
.sr-queue { display: flex; align-items: center; gap: .5rem; margin-top: .55rem; }
.sr-queue__label, .sr-queue__count { font-size: 8.5px; color: var(--sr-text-faint); flex: none; }
.sr-queue__count { color: var(--sr-win-hue); }
.sr-queue__strip { display: flex; gap: 3px; flex: 1; overflow: hidden; }
.sr-queue__strip i {
  flex: 1; height: 15px; border-radius: 2px; background: rgba(255,255,255,.05);
  animation: sr-advance 9s linear infinite;
}
.sr-queue__strip i:nth-child(1) { animation-delay: 0s; }
.sr-queue__strip i:nth-child(2) { animation-delay: .9s; }
.sr-queue__strip i:nth-child(3) { animation-delay: 1.8s; }
.sr-queue__strip i:nth-child(4) { animation-delay: 2.7s; }
.sr-queue__strip i:nth-child(5) { animation-delay: 3.6s; }
.sr-queue__strip i:nth-child(6) { animation-delay: 4.5s; }
.sr-queue__strip i:nth-child(7) { animation-delay: 5.4s; }
.sr-queue__strip i:nth-child(8) { animation-delay: 6.3s; }
.sr-queue__strip i:nth-child(9) { animation-delay: 7.2s; }
.sr-queue__strip i:nth-child(10) { animation-delay: 8.1s; }
@keyframes sr-advance {
  0%,88%  { background: rgba(255,255,255,.05); }
  92%     { background: color-mix(in srgb, var(--sr-win-hue) 65%, transparent); }
  100%    { background: rgba(255,255,255,.05); }
}

/* ---------------------------------------------------------------- deep sections */
.sr-deep { position: relative; padding-block: clamp(3rem, 8vw, 6rem); overflow: hidden; }
.sr-deep + .sr-deep { border-top: 1px solid var(--sr-scrim); }
.sr-deep__inner {
  display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(1.8rem, 5vw, 4rem); align-items: center;
}
.sr-deep--flip .sr-deep__inner { grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); }
.sr-deep--flip .sr-deep__copy { order: 2; }
.sr-deep__glow {
  position: absolute; top: 8%; width: 46vw; max-width: 620px; aspect-ratio: 1;
  z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, var(--sr-deep-hue), transparent 68%);
  opacity: .11; filter: blur(8px);
}
.sr-deep__glow--l { left: -12vw; }
.sr-deep__glow--r { right: -12vw; }
.sr-deep__eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--sr-font-mono); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sr-deep-text); margin: 0 0 .9rem;
}
.sr-deep__eyebrow img { width: 22px; height: 22px; border-radius: 6px; }
.sr-deep h2 { margin-bottom: .45em; }
.sr-deep__lead { font-size: 1.05rem; color: var(--sr-text-body); margin: 0 0 1.4rem; max-width: 46ch; }
.sr-deep__points { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .65rem; }
.sr-deep__points li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .6rem; font-size: .92rem; }
.sr-deep__points li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; margin-top: .5rem;
  background: var(--sr-deep-hue); box-shadow: 0 0 8px var(--sr-deep-hue);
}
.sr-deep__cta { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.sr-deep__link {
  font-family: var(--sr-font-mono); font-size: .78rem; letter-spacing: .06em;
  color: var(--sr-deep-text);
}
.sr-deep__win { position: relative; }

@media (max-width: 940px) {
  .sr-deep__inner,
  .sr-deep--flip .sr-deep__inner { grid-template-columns: 1fr; }
  .sr-deep--flip .sr-deep__copy { order: 0; }
  .sr-win__body--split,
  .sr-win--map .sr-win__body--split,
  .sr-win--route .sr-win__body--split { grid-template-columns: 1fr; }
  .sr-win__side--right { order: -1; }
}

/* ---------------------------------------------------------------- pricing */
.sr-plans { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--sr-line); border-radius: 999px; background: var(--sr-deck); }
.sr-plans button {
  appearance: none; border: 0; cursor: pointer; border-radius: 999px;
  padding: .5rem 1.1rem; background: transparent; color: var(--sr-text-muted);
  font-family: var(--sr-font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  transition: color .15s ease, background .15s ease;
}
.sr-plans button:hover { color: var(--sr-text-bright); }
.sr-plans button[aria-selected="true"] { background: var(--sr-rail); color: var(--sr-text-bright); }
.sr-plans__save { color: var(--sr-text-green); font-size: .62rem; margin-left: .4rem; }

.sr-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: .7rem; margin-top: 1.6rem; }
.sr-tier {
  position: relative; display: grid; gap: .3rem; align-content: start;
  padding: 1.3rem 1.25rem;
  border: 1px solid var(--sr-scrim); border-radius: var(--sr-radius-lg);
  background: linear-gradient(180deg, var(--sr-deck), var(--sr-void));
  border-left: 2px solid var(--sr-tier-hue, var(--sr-line));
}
.sr-tier--suite {
  border-color: var(--sr-line);
  background:
    radial-gradient(90% 100% at 15% 0%, rgba(124,92,255,.12), transparent 60%),
    radial-gradient(80% 90% at 90% 10%, rgba(255,45,149,.09), transparent 60%),
    var(--sr-deck);
}
.sr-tier--suite::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--sr-spectrum); }
.sr-tier__flag {
  position: absolute; top: -1px; right: .9rem;
  font-family: var(--sr-font-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  background: var(--sr-spectrum); color: #04060a; padding: .1rem .45rem; border-radius: 0 0 3px 3px;
}
.sr-tier__name { display: flex; align-items: center; gap: .5rem; font-size: 1.02rem; }
.sr-tier__name img { width: 26px; height: 26px; border-radius: 7px; }
.sr-tier__price {
  font-family: var(--sr-font-display); font-size: 2.1rem; font-weight: 800; font-stretch: 114%;
  letter-spacing: -.035em; color: var(--sr-text-bright); line-height: 1.1; margin-top: .45rem;
}
.sr-tier__per { font-family: var(--sr-font-mono); font-size: .68rem; color: var(--sr-text-faint); }
.sr-tier__was { font-family: var(--sr-font-mono); font-size: .7rem; color: var(--sr-text-faint); text-decoration: line-through; }
.sr-tier__btn { margin-top: .9rem; justify-self: stretch; text-align: center; justify-content: center; }
.sr-tier__note { font-size: .78rem; color: var(--sr-text-faint); }

.sr-matrix-table { width: 100%; border-collapse: collapse; font-size: .88rem; margin-top: 1rem; }
.sr-matrix-table th, .sr-matrix-table td { padding: .74rem .6rem; border-bottom: 1px solid var(--sr-scrim); text-align: left; }
.sr-matrix-table thead th { font-family: var(--sr-font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sr-text-muted); font-weight: 500; }
.sr-matrix-table td:not(:first-child) { text-align: center; }
.sr-yes { color: var(--sr-text-green); }
.sr-no { color: var(--sr-text-faint); }

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sr-srclist__cursor, .sr-preview__shimmer, .sr-region--b, .sr-lamp,
  .sr-xpt.is-on, .sr-meter i, .sr-slide, .sr-facebox, .sr-queue__strip i {
    animation: none !important;
  }
  /* Leave the composition readable rather than mid-transition. */
  .sr-slide--1 { opacity: 1; }
  .sr-slide--2, .sr-slide--3 { opacity: 0; }
  .sr-facebox { opacity: 1; }
  .sr-meter i { height: 52%; }
  .sr-srclist__cursor { transform: translateY(26px); }
}

/* ---------------------------------------------------------------- canvas focus
   Hovering a channel strip isolates that tool's paths in the signal canvas.
   Purely additive: without JS no data-focus is ever set and nothing dims. */
.sr-flow[data-focus] .sr-wire,
.sr-flow[data-focus] .sr-node { transition: opacity .22s ease; opacity: .16; }
.sr-flow[data-focus="spectrabridge"] .sr-wire--cyan,
.sr-flow[data-focus="spectramap"] .sr-wire--magenta,
.sr-flow[data-focus="spectraroute"] .sr-wire--amber,
.sr-flow[data-focus="spectraphoto"] .sr-wire--violet { opacity: 1; }
.sr-flow[data-focus] .sr-node--tool { opacity: .3; }
.sr-flow[data-focus="spectrabridge"] .sr-node--tool:nth-of-type(1),
.sr-flow[data-focus="spectramap"] .sr-node--tool:nth-of-type(2),
.sr-flow[data-focus="spectraroute"] .sr-node--tool:nth-of-type(3),
.sr-flow[data-focus="spectraphoto"] .sr-node--tool:nth-of-type(4) { opacity: 1; }

/* ---------------------------------------------------------------- planbar + faq */
.sr-planbar { margin-top: 1.8rem; }
.sr-faq { display: grid; gap: 0; }
.sr-faq .sr-faq__item {
  border-bottom: 1px solid var(--sr-scrim); padding: 1.05rem 0;
}
.sr-faq .sr-faq__item:first-child { border-top: 1px solid var(--sr-scrim); }
.sr-faq summary {
  cursor: pointer; color: var(--sr-text-bright); font-weight: 600;
  list-style: none; display: flex; align-items: center; gap: .7rem;
}
.sr-faq summary::-webkit-details-marker { display: none; }
.sr-faq summary::before {
  content: '+'; font-family: var(--sr-font-mono); color: var(--sr-text-faint);
  flex: none; width: 1rem; transition: transform .2s ease, color .2s ease;
}
.sr-faq .sr-faq__item[open] summary::before { transform: rotate(45deg); color: var(--sr-hue-text); }
.sr-faq .sr-faq__item[open] summary { color: var(--sr-hue-text); }
.sr-faq p { margin: .7rem 0 0 1.7rem; max-width: 64ch; }
.sr-tier--soon { opacity: .74; }