/* Descent v1 — progressive, optional visual instability */

.descent-shell {
  margin: 22px 0 0;
  padding: 0 0 48px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  isolation: isolate;
}

.descent-head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
  gap: 36px;
  align-items: end;
  padding: 42px 0 28px;
}

.descent-head h2 {
  margin: 0 0 12px;
  font-size: clamp(24px, 3vw, 44px);
  font-weight: 400;
  letter-spacing: .18em;
}

.descent-head p {
  margin: 0;
  max-width: 760px;
  color: #aaa8a3;
  font-size: 14px;
  line-height: 1.7;
}

.effects-panel {
  justify-self: end;
  min-width: min(100%, 360px);
  border: 1px solid var(--line);
  padding: 14px;
  background: rgba(10, 11, 12, .72);
}

.effects-panel .effects-label {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 10px;
  font: 8px Arial, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.effects-panel .effects-status {
  color: var(--red);
}

.effects-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.effects-buttons button {
  min-height: 38px;
  border: 1px solid #343638;
  background: transparent;
  color: #a8a8a4;
  cursor: pointer;
  font: 8px Arial, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.effects-buttons button:hover,
.effects-buttons button:focus-visible,
.effects-buttons button[aria-pressed="true"] {
  border-color: var(--red);
  color: #f1eee7;
  outline: none;
}

.effects-note {
  margin-top: 9px;
  color: #6f7070;
  font: 8px/1.5 Arial, sans-serif;
  letter-spacing: .06em;
}

.descent-stage {
  position: relative;
  display: grid;
  gap: 18px;
}

.descent-layer {
  position: relative;
  min-height: 480px;
  padding: 34px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0a0b0c;
  opacity: .76;
  transform: translateY(12px);
  transition: opacity .7s ease, transform .7s ease, border-color .7s ease;
}

.descent-layer.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.descent-layer::before,
.descent-layer::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.descent-layer::before {
  inset: 0;
  background:
    radial-gradient(circle at 20% 15%, rgba(125, 14, 20, .08), transparent 30%),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, .22));
}

.descent-layer::after {
  left: 34px;
  right: 34px;
  bottom: 24px;
  height: 1px;
  background: rgba(183, 25, 34, .32);
  transform-origin: left center;
  transform: scaleX(var(--thread-scale, .16));
}

.descent-layer[data-depth="2"] { background: #090a0b; }
.descent-layer[data-depth="3"] { background: #080909; }
.descent-layer[data-depth="4"] { background: #050607; border-color: #2e2426; }

.layer-copy,
.layer-grid {
  position: relative;
  z-index: 2;
}

.layer-copy {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

.layer-index {
  color: #6f7070;
  font: 9px Arial, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.layer-title {
  position: relative;
  margin: 0;
  font-size: clamp(22px, 2.7vw, 38px);
  font-weight: 400;
  letter-spacing: .18em;
}

.layer-title .ghost {
  position: absolute;
  inset: 0 auto auto 0;
  color: var(--red);
  opacity: 0;
  pointer-events: none;
  transform: translate(0,0);
}

.layer-copy p {
  grid-column: 2;
  max-width: 760px;
  margin: 4px 0 0;
  color: #9d9b97;
  font-size: 13px;
  line-height: 1.65;
}

.layer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  min-width: 0;
}

.descent-piece {
  min-width: 0;
  position: relative;
  height: 300px;
  overflow: hidden;
  border: 1px solid #222426;
  background: #0b0c0d;
  cursor: pointer;
}

.descent-piece img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(0, var(--parallax, 0px), 0) scale(var(--piece-scale, 1.01));
  transition: filter .6s ease, transform .8s ease;
  will-change: transform;
}

.descent-piece::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.78), transparent 44%);
  pointer-events: none;
}

.descent-piece figcaption {
  position: absolute;
  z-index: 2;
  left: 13px;
  right: 13px;
  bottom: 11px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: end;
}

.descent-piece figcaption strong {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .07em;
}

.descent-piece figcaption span {
  color: #777;
  font: 7px Arial, sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.descent-signal {
  position: absolute;
  z-index: 3;
  top: 15px;
  right: 16px;
  color: #5f6262;
  font: 7px Arial, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.descent-layer[data-depth="3"] .descent-piece:nth-child(2) {
  transform: translateY(7px);
}

.descent-layer[data-depth="4"] .descent-piece:nth-child(1) {
  transform: translateX(5px);
}

.descent-layer[data-depth="4"] .descent-piece:nth-child(3) {
  transform: translate(-4px, 9px);
}

.descent-tail {
  padding: 22px 0 0;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  color: #6d6e6d;
  font: 8px Arial, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.descent-tail strong {
  color: #b8b3ab;
  font-weight: 400;
}

/* FULL effects */
body.effects-full .descent-layer[data-depth="1"] .descent-piece:nth-child(2) img {
  animation: descent-breathe 12s ease-in-out infinite alternate;
}

body.effects-full .descent-layer[data-depth="2"] .layer-title .ghost {
  animation: descent-ghost 8.5s steps(1, end) infinite;
}

body.effects-full .descent-layer[data-depth="2"] .descent-piece:nth-child(3) img {
  animation: descent-drift 13s ease-in-out infinite alternate;
}

body.effects-full .descent-layer[data-depth="3"] .descent-piece img {
  filter: saturate(.9) contrast(1.04);
}

body.effects-full .descent-layer[data-depth="3"] .descent-piece:nth-child(1) img {
  animation: descent-breathe-deep 7.2s ease-in-out infinite alternate-reverse;
}

body.effects-full .descent-layer[data-depth="3"] .descent-piece:nth-child(2) img {
  animation: descent-drift-deep 8.4s ease-in-out infinite alternate;
}

body.effects-full .descent-layer[data-depth="3"] .descent-piece:nth-child(3) img {
  animation: descent-breathe-deep 9.1s ease-in-out infinite alternate;
}

body.effects-full .descent-layer[data-depth="3"]::before {
  animation: descent-pulse 10s ease-in-out infinite;
}

body.effects-full .descent-layer[data-depth="4"] {
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px, transparent 1px, transparent 5px),
    #050607;
}

body.effects-full .descent-layer[data-depth="4"] .layer-title {
  text-shadow: 1px 0 rgba(183,25,34,.34), -1px 0 rgba(230,230,220,.08);
}

body.effects-full .descent-layer[data-depth="4"] .layer-title .ghost {
  opacity: .18;
  animation: descent-fracture 6.7s steps(1,end) infinite;
}

body.effects-full .descent-layer[data-depth="4"] .descent-piece:nth-child(1) img {
  animation: descent-void-left 6.8s ease-in-out infinite alternate;
}

body.effects-full .descent-layer[data-depth="4"] .descent-piece:nth-child(2) img {
  animation: descent-void 6.2s ease-in-out infinite alternate;
}

body.effects-full .descent-layer[data-depth="4"] .descent-piece:nth-child(3) img {
  animation: descent-void-right 7.4s ease-in-out infinite alternate-reverse;
}

/* REDUCED keeps only reveal/fade and no continuous distortion */
body.effects-reduced .descent-piece img,
body.effects-reduced .layer-title .ghost,
body.effects-reduced .descent-layer::before {
  animation: none !important;
  filter: none !important;
  transform: none !important;
}

body.effects-reduced .descent-layer {
  transition-duration: .25s;
}

/* OFF means static and immediate */
body.effects-off .descent-layer {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

body.effects-off .descent-piece img,
body.effects-off .layer-title .ghost,
body.effects-off .descent-layer::before,
body.effects-off .descent-layer::after {
  animation: none !important;
  filter: none !important;
  transform: none !important;
}

body.effects-off .layer-title .ghost {
  display: none;
}

@keyframes descent-breathe {
  from { transform: translate3d(0,var(--parallax,0px),0) scale(1.01); }
  to { transform: translate3d(0,var(--parallax,0px),0) scale(1.045); }
}

@keyframes descent-drift {
  from { transform: translate3d(-1.5%,var(--parallax,0px),0) scale(1.04); }
  to { transform: translate3d(1.5%,var(--parallax,0px),0) scale(1.04); }
}

@keyframes descent-pulse {
  0%, 82%, 100% { opacity: .72; }
  86% { opacity: .92; }
  89% { opacity: .64; }
}

@keyframes descent-ghost {
  0%, 87%, 100% { opacity: 0; transform: translate(0,0); }
  88% { opacity: .2; transform: translate(2px,0); }
  89% { opacity: 0; }
  91% { opacity: .12; transform: translate(-1px,1px); }
  92% { opacity: 0; }
}

@keyframes descent-fracture {
  0%, 77%, 100% { transform: translate(0,0); opacity: .08; }
  78% { transform: translate(3px,-1px); opacity: .24; }
  79% { transform: translate(-2px,1px); opacity: .12; }
  81% { transform: translate(1px,0); opacity: .2; }
  82% { transform: translate(0,0); opacity: .08; }
}

@keyframes descent-breathe-deep {
  from { transform: translate3d(-1%,var(--parallax,0px),0) scale(1.015); filter: contrast(1.02); }
  to { transform: translate3d(1.4%,var(--parallax,0px),0) scale(1.075); filter: contrast(1.10) brightness(.94); }
}

@keyframes descent-drift-deep {
  from { transform: translate3d(-3.5%,var(--parallax,0px),0) scale(1.055); }
  to { transform: translate3d(3.5%,var(--parallax,0px),0) scale(1.075); }
}

@keyframes descent-void {
  from { transform: translate3d(-1.5%,var(--parallax,0px),0) scale(1.035); filter: contrast(1.02) brightness(.96); }
  to { transform: translate3d(2%,var(--parallax,0px),0) scale(1.095); filter: contrast(1.22) brightness(.82); }
}

@keyframes descent-void-left {
  from { transform: translate3d(-3%,var(--parallax,0px),0) scale(1.04) rotate(-.15deg); filter: contrast(1.02); }
  to { transform: translate3d(2.5%,var(--parallax,0px),0) scale(1.10) rotate(.12deg); filter: contrast(1.18) brightness(.86); }
}

@keyframes descent-void-right {
  from { transform: translate3d(2.5%,var(--parallax,0px),0) scale(1.04) rotate(.12deg); filter: contrast(1.03); }
  to { transform: translate3d(-3%,var(--parallax,0px),0) scale(1.10) rotate(-.14deg); filter: contrast(1.20) brightness(.84); }
}

@media(max-width:900px) {
  .descent-head { grid-template-columns: 1fr; align-items: start; }
  .effects-panel { justify-self: stretch; }
  .layer-copy { grid-template-columns: 1fr; gap: 8px; }
  .layer-copy p { grid-column: 1; }
  .layer-grid { grid-template-columns: 1fr 1fr; }
  .descent-piece { height: 330px; }
  .descent-piece:last-child { grid-column: span 2; }
}

@media(max-width:560px) {
  .descent-layer { padding: 22px 16px; min-height: 0; }
  .descent-layer::after { left: 16px; right: 16px; }
  .layer-grid { grid-template-columns: 1fr; }
  .descent-piece,
  .descent-piece:last-child { grid-column: auto; height: 360px; }
  .descent-tail { flex-direction: column; }
}

/* Descent v1.1 — unmistakable ambient motion */

.descent-atmosphere {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.descent-mote {
  position: absolute;
  left: var(--x);
  top: 108%;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: rgba(226, 219, 206, var(--alpha));
  opacity: 0;
  filter: blur(var(--blur));
}

.red-thread {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
}

.red-thread path {
  fill: none;
  stroke: rgba(183,25,34,.7);
  stroke-width: var(--thread-width, 1);
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-dasharray: 8 16 2 18;
}

.layer-flicker {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent 0 34%, rgba(185,25,34,.06) 36%, transparent 39%),
    linear-gradient(180deg, transparent 0 62%, rgba(230,230,220,.035) 63%, transparent 65%);
}

.void-slice {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  height: 10%;
  top: 42%;
  pointer-events: none;
  opacity: 0;
  border-top: 1px solid rgba(183,25,34,.35);
  border-bottom: 1px solid rgba(255,255,255,.05);
  background: rgba(183,25,34,.025);
  mix-blend-mode: screen;
}

body.effects-full .descent-layer[data-depth="1"] .descent-mote {
  animation: mote-rise var(--duration) linear var(--delay) infinite;
}

body.effects-full .descent-layer[data-depth="2"] .descent-mote,
body.effects-full .descent-layer[data-depth="3"] .descent-mote,
body.effects-full .descent-layer[data-depth="4"] .descent-mote {
  animation: mote-rise-deep var(--duration) linear var(--delay) infinite;
}

body.effects-full .descent-layer[data-depth="2"] .red-thread {
  opacity: .56;
  animation: thread-wander 9.5s ease-in-out infinite alternate;
}

body.effects-full .descent-layer[data-depth="2"] .red-thread path {
  animation: thread-flow 5.5s linear infinite;
}

body.effects-full .descent-layer[data-depth="3"] .red-thread {
  opacity: .76;
  animation: thread-wander-deep 6.2s ease-in-out infinite alternate-reverse;
}

body.effects-full .descent-layer[data-depth="3"] .red-thread path {
  stroke-width: 1.25;
  animation: thread-flow 3.8s linear infinite reverse;
}

body.effects-full .descent-layer[data-depth="3"] .layer-flicker {
  animation: flesh-flicker 6.4s steps(1,end) infinite;
}

body.effects-full .descent-layer[data-depth="4"] .red-thread {
  opacity: .92;
  animation: thread-wander-void 4.2s ease-in-out infinite alternate;
}

body.effects-full .descent-layer[data-depth="4"] .red-thread path {
  stroke-width: 1.5;
  animation: thread-flow 2.8s linear infinite;
}

body.effects-full .descent-layer[data-depth="4"] .layer-flicker {
  animation: void-flicker 4.1s steps(1,end) infinite;
}

body.effects-full .descent-layer[data-depth="4"] .void-slice {
  animation: void-scan 3.7s steps(1,end) infinite;
}

body.effects-full .descent-layer[data-depth="4"] .descent-piece:nth-child(1) {
  animation: card-jolt 7.2s steps(1,end) infinite;
}

body.effects-full .descent-layer[data-depth="4"] .descent-piece:nth-child(3) {
  animation: card-jolt-alt 9.1s steps(1,end) infinite;
}

body.effects-reduced .descent-atmosphere,
body.effects-off .descent-atmosphere {
  display: none;
}

@keyframes mote-rise {
  0%   { transform: translate3d(0,0,0); opacity: 0; }
  10%  { opacity: .55; }
  75%  { opacity: .35; }
  100% { transform: translate3d(var(--drift), -620px, 0); opacity: 0; }
}

@keyframes mote-rise-deep {
  0%   { transform: translate3d(0,0,0) scale(.8); opacity: 0; }
  9%   { opacity: .75; }
  52%  { transform: translate3d(var(--drift-half), -320px, 0) scale(1.25); opacity: .5; }
  100% { transform: translate3d(var(--drift), -700px, 0) scale(.7); opacity: 0; }
}

@keyframes thread-flow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -132; }
}

@keyframes thread-wander {
  from { transform: translate3d(-2%, 1%, 0) scale(1.025); }
  to { transform: translate3d(2%, -1%, 0) scale(1.045); }
}

@keyframes thread-wander-deep {
  from { transform: translate3d(-3.5%, 2%, 0) scale(1.035) rotate(-.15deg); }
  to { transform: translate3d(3.5%, -2%, 0) scale(1.065) rotate(.15deg); }
}

@keyframes thread-wander-void {
  from { transform: translate3d(-5%, 2.5%, 0) scale(1.05) rotate(-.25deg); }
  to { transform: translate3d(5%, -2.5%, 0) scale(1.09) rotate(.25deg); }
}

@keyframes flesh-flicker {
  0%, 72%, 100% { opacity: 0; transform: translateX(0); }
  73% { opacity: .7; transform: translateX(0); }
  74% { opacity: 0; }
  79% { opacity: .35; transform: translateX(7px); }
  80% { opacity: 0; }
}

@keyframes void-flicker {
  0%, 65%, 100% { opacity: 0; }
  66% { opacity: .9; transform: translateX(-4px); }
  67% { opacity: .15; transform: translateX(7px); }
  68% { opacity: 0; }
  84% { opacity: .55; transform: translateX(2px); }
  85% { opacity: 0; }
}

@keyframes void-scan {
  0%, 62%, 100% { opacity: 0; transform: translateY(0) skewX(0deg); }
  63% { opacity: .7; transform: translateY(-55px) skewX(-4deg); }
  65% { opacity: .28; transform: translateY(70px) skewX(3deg); }
  67% { opacity: 0; transform: translateY(110px); }
}

@keyframes card-jolt {
  0%, 81%, 100% { transform: translateX(5px); }
  82% { transform: translateX(10px); }
  83% { transform: translateX(1px); }
  84% { transform: translateX(6px); }
}

@keyframes card-jolt-alt {
  0%, 74%, 100% { transform: translate(-4px, 9px); }
  75% { transform: translate(3px, 6px); }
  76% { transform: translate(-8px, 11px); }
  77% { transform: translate(-4px, 9px); }
}
/* Persistent ambient effects control */
.global-effects-toggle{
  position:fixed;
  left:14px;
  bottom:14px;
  z-index:40;
  min-width:76px;
  padding:8px 10px;
  border:1px solid rgba(105,107,108,.52);
  background:rgba(7,8,9,.82);
  color:#8d8d89;
  backdrop-filter:blur(8px);
  cursor:pointer;
  font:7px Arial,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.global-effects-toggle:hover,
.global-effects-toggle:focus-visible{
  border-color:var(--red);
  color:#eeeae3;
  outline:none;
}
body.effects-full .global-effects-toggle{color:#b98f8f;border-color:rgba(183,25,34,.5)}
body.effects-off .global-effects-toggle{color:#777}
@media(max-width:560px){
  .global-effects-toggle{left:10px;bottom:10px;padding:7px 9px}
}