/* Threads, The Unseen, Field Notes, and variable fragments */

.experience-section {
  padding: 48px 0;
  border-top: 1px solid var(--line);
}

.experience-section .intro-row {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(260px,.65fr);
  gap: 42px;
  align-items: end;
  margin-bottom: 24px;
}

.experience-section h2 {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: .26em;
}

.experience-section p {
  margin: 0;
  max-width: 780px;
  color: #9f9d98;
  font-size: 13px;
  line-height: 1.7;
}

.thread-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 24px;
}

.thread-button {
  min-height: 40px;
  padding: 10px 14px;
  border: 1px solid #343638;
  background: transparent;
  color: #9c9c98;
  cursor: pointer;
  font: 8px Arial,sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.thread-button:hover,
.thread-button:focus-visible,
.thread-button.active {
  border-color: var(--red);
  color: #f2eee8;
  outline: none;
}

.thread-stage {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 12px;
}

.thread-work {
  position: relative;
  min-width: 0;
  height: 250px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0b0c0d;
  cursor: pointer;
}

.thread-work img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease, filter .45s ease;
}

.thread-work:hover img { transform: scale(1.025); filter: contrast(1.06); }

.thread-work::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,rgba(0,0,0,.82),transparent 48%);
  pointer-events: none;
}

.thread-work figcaption {
  position: absolute;
  z-index: 2;
  left: 13px;
  right: 13px;
  bottom: 11px;
}

.thread-work strong {
  display: block;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .06em;
}

.thread-work span {
  display: block;
  margin-top: 5px;
  color: #888;
  font: 7px Arial,sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.thread-empty {
  grid-column: 1 / -1;
  padding: 34px;
  border: 1px solid var(--line);
  color: #777;
  text-align: center;
  font: 9px Arial,sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.fragment-slot {
  min-height: 22px;
  color: #686967;
  text-align: right;
  font: 9px Arial,sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.unseen-shell {
  display: grid;
  grid-template-columns: minmax(260px,.7fr) minmax(0,1.3fr);
  gap: 28px;
  align-items: stretch;
}

.unseen-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 0;
}

.unseen-copy h2 { margin-bottom: 14px; }

.unseen-button {
  align-self: flex-start;
  margin-top: 22px;
  padding: 13px 17px;
  border: 1px solid var(--red);
  background: transparent;
  color: #d73b43;
  cursor: pointer;
  font: 9px Arial,sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.unseen-card {
  min-height: 430px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #090a0b;
  cursor: pointer;
}

.unseen-card img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: contain;
  background: #070809;
  opacity: 0;
  transition: opacity .55s ease, transform .8s ease;
}

.unseen-card.revealed img { opacity: 1; }
.unseen-card:hover img { transform: scale(1.012); }

.unseen-meta {
  position: absolute;
  z-index: 2;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: end;
  pointer-events: none;
}

.unseen-meta strong {
  font-size: 17px;
  font-weight: 400;
  letter-spacing: .08em;
}

.unseen-meta span {
  color: #898984;
  font: 8px Arial,sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.field-note {
  min-width: 0;
  padding: 28px;
  background: #08090a;
}

.field-note .eyebrow {
  margin-bottom: 12px;
  color: var(--red);
  font: 8px Arial,sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.field-note h3 {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .12em;
}

.field-note p {
  font-size: 13px;
  line-height: 1.72;
}

.lightbox-detail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -98px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
}

.lightbox-thread-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lightbox-thread {
  border: 1px solid #353638;
  padding: 6px 8px;
  color: #9a9995;
  background: transparent;
  cursor: pointer;
  font: 7px Arial,sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lightbox-fragment {
  max-width: 420px;
  color: #696a68;
  text-align: right;
  font: 8px/1.5 Arial,sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
}

@media(max-width:1000px) {
  .thread-stage { grid-template-columns: repeat(3,1fr); }
}

@media(max-width:900px) {
  .experience-section .intro-row,
  .unseen-shell { grid-template-columns: 1fr; }
  .fragment-slot { text-align: left; }
  .field-grid { grid-template-columns: 1fr; }
  .thread-stage { grid-template-columns: repeat(2,1fr); }
}

@media(max-width:560px) {
  .thread-stage { grid-template-columns: 1fr; }
  .thread-work { height: 330px; }
  .unseen-card,
  .unseen-card img { min-height: 360px; }
  .lightbox-detail { display: none; }
}

/* Threads v2 — navigable associative journey */

.thread-journey-section {
  position: relative;
  overflow: hidden;
}

.thread-depth-readout {
  justify-self: end;
  min-width: 250px;
  text-align: right;
}

.thread-depth-readout span {
  display: block;
  margin-bottom: 8px;
  color: var(--red);
  font: 8px Arial,sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.thread-depth-readout strong {
  display: block;
  color: #8d8d89;
  font: 9px/1.5 Arial,sans-serif;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.thread-journey {
  position: relative;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 28% 38%, rgba(183,25,34,.04), transparent 24%),
    #08090a;
  transition: border-color .5s ease, background .7s ease;
}

.thread-trail-shell {
  min-height: 56px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.thread-trail-label {
  color: #666864;
  font: 7px Arial,sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.thread-trail {
  min-width: 0;
  display: flex;
  gap: 7px;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: thin;
}

.thread-trail-node {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #8b8b87;
  padding: 5px 3px;
  cursor: pointer;
  font: 8px Arial,sans-serif;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.thread-trail-node:hover,
.thread-trail-node.current {
  color: #eeeae3;
}

.thread-trail-arrow {
  color: #6a1e22;
  font: 9px Arial,sans-serif;
}

.thread-reset {
  border: 0;
  background: transparent;
  color: #777873;
  cursor: pointer;
  font: 7px Arial,sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.thread-reset:hover { color: var(--red); }

.thread-map {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1.18fr) minmax(320px,.82fr);
  min-height: 590px;
}

.thread-current {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(230px,.8fr);
  gap: 0;
  border-right: 1px solid var(--line);
}

.thread-current-image {
  position: relative;
  min-height: 590px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #050607;
}

.thread-current-image::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow: inset -40px 0 70px rgba(0,0,0,.34);
}

.thread-current-image img {
  width: 100%;
  height: 100%;
  max-height: 640px;
  object-fit: contain;
  transition: opacity .35s ease, transform .7s ease;
}

.thread-current-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px 28px;
  background: linear-gradient(90deg,rgba(10,11,12,.72),#0a0b0c);
}

.thread-current-kicker,
.thread-branch-label {
  color: #686a67;
  font: 7px Arial,sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.thread-current-copy h3 {
  margin: 12px 0 8px;
  font-size: clamp(21px,2vw,32px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .08em;
}

.thread-current-copy > p {
  margin: 0 0 20px;
  color: #747571;
  font: 8px Arial,sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.thread-node-threads {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 4px 0 20px;
}

.thread-node-button {
  border: 1px solid #343638;
  background: transparent;
  color: #aaa8a3;
  min-height: 34px;
  padding: 8px 10px;
  cursor: pointer;
  font: 7px Arial,sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.thread-node-button:hover,
.thread-node-button.active {
  border-color: var(--red);
  color: #f2eee8;
}

.thread-node-button.exhausted {
  opacity: .38;
}

.thread-journey-fragment {
  min-height: 44px;
  margin: 8px 0 16px;
  color: #8c292d;
  font: 10px/1.5 Georgia,serif;
  font-style: italic;
  letter-spacing: .06em;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .6s ease, transform .6s ease;
}

.thread-journey[data-depth="3"] .thread-journey-fragment,
.thread-journey[data-depth="4"] .thread-journey-fragment,
.thread-journey[data-depth="5"] .thread-journey-fragment {
  opacity: 1;
  transform: none;
}

.thread-open {
  align-self: flex-start;
  border: 0;
  border-bottom: 1px solid #414344;
  padding: 7px 0;
  background: transparent;
  color: #8c8c88;
  cursor: pointer;
  font: 7px Arial,sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.thread-open:hover { color: #ddd9d2; border-color: var(--red); }

.thread-branch-shell {
  position: relative;
  min-width: 0;
  padding: 28px 24px;
  overflow: hidden;
}

.thread-branch-shell::before {
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:22px;
  height:1px;
  background:rgba(183,25,34,.38);
}

.thread-branch-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.thread-branches {
  position: relative;
  display: grid;
  gap: 12px;
}

.thread-branches::before {
  content:"";
  position:absolute;
  left:-24px;
  top:16%;
  bottom:16%;
  width:1px;
  background:linear-gradient(180deg,transparent,rgba(183,25,34,.38),transparent);
}

.thread-branch {
  position: relative;
  min-height: 150px;
  display: grid;
  grid-template-columns: 122px 1fr;
  overflow: hidden;
  border: 1px solid #252728;
  background: #0a0b0c;
  cursor: pointer;
  transition: border-color .3s ease, transform .3s ease, background .3s ease;
}

.thread-branch::before {
  content:"";
  position:absolute;
  left:-25px;
  top:50%;
  width:24px;
  height:1px;
  background:rgba(183,25,34,.38);
}

.thread-branch:hover {
  transform: translateX(4px);
  border-color: #6d2025;
  background:#0d0d0e;
}

.thread-branch img {
  width:100%;
  height:100%;
  min-height:150px;
  object-fit:cover;
}

.thread-branch-copy {
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:15px;
}

.thread-branch-copy strong {
  display:block;
  color:#e4e0d9;
  font-size:14px;
  font-weight:400;
  line-height:1.25;
  letter-spacing:.06em;
}

.thread-branch-copy span {
  display:block;
  margin-top:8px;
  color:#777874;
  font:7px Arial,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.thread-branch-copy em {
  display:block;
  margin-top:12px;
  color:#a42a31;
  font:7px Arial,sans-serif;
  font-style:normal;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.thread-consequence {
  min-height: 76px;
  display: flex;
  gap: 15px;
  align-items: center;
  padding: 15px 18px;
  border-top: 1px solid var(--line);
  color: #777873;
  transition: background .5s ease, color .5s ease;
}

.thread-consequence-mark {
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid #313334;
  border-radius:50%;
  color:#6f7070;
  font:13px Georgia,serif;
}

.thread-consequence strong {
  display:block;
  margin-bottom:4px;
  color:#898985;
  font:8px Arial,sans-serif;
  font-weight:400;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.thread-consequence p {
  margin:0;
  color:#686965;
  font:8px/1.5 Arial,sans-serif;
  letter-spacing:.05em;
}

.thread-carry {
  margin-left:auto;
  border:1px solid #5e2024;
  background:transparent;
  color:#ad3036;
  padding:9px 12px;
  cursor:pointer;
  font:7px Arial,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* The route becomes visually more present as it deepens. */
.thread-journey[data-depth="2"] {
  border-color:#342326;
}

.thread-journey[data-depth="3"] {
  border-color:#482226;
  background:
    radial-gradient(circle at 28% 38%, rgba(183,25,34,.075), transparent 29%),
    #08090a;
}

.thread-journey[data-depth="3"] .thread-branch-shell::before,
.thread-journey[data-depth="3"] .thread-branches::before,
.thread-journey[data-depth="3"] .thread-branch::before {
  background-color:rgba(183,25,34,.55);
}

.thread-journey[data-depth="4"],
.thread-journey[data-depth="5"] {
  border-color:#602329;
  background:
    radial-gradient(circle at 25% 42%, rgba(183,25,34,.11), transparent 34%),
    linear-gradient(180deg,rgba(183,25,34,.018),transparent 45%),
    #070809;
}

.thread-journey[data-depth="4"] .thread-consequence,
.thread-journey[data-depth="5"] .thread-consequence {
  background:rgba(183,25,34,.035);
}

.thread-journey[data-depth="5"] .thread-current-image img {
  transform:scale(1.012);
}

.thread-dead-end {
  min-height:280px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:12px;
  padding:30px;
  border:1px solid #242627;
  text-align:center;
}

.thread-dead-end strong {
  color:#aaa7a1;
  font-size:16px;
  font-weight:400;
  letter-spacing:.1em;
}

.thread-dead-end span {
  max-width:320px;
  color:#70716d;
  font:8px/1.6 Arial,sans-serif;
  letter-spacing:.09em;
  text-transform:uppercase;
}

body.thread-carried #descent {
  border-top-color:#5d2025;
}

body.thread-carried #descent::before {
  content:"THREAD CARRIED BELOW";
  position:absolute;
  right:0;
  top:12px;
  color:#7e252a;
  font:7px Arial,sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
}

@media(max-width:1050px) {
  .thread-map { grid-template-columns:1fr; }
  .thread-current { border-right:0; border-bottom:1px solid var(--line); }
  .thread-branch-shell::before,
  .thread-branches::before,
  .thread-branch::before { display:none; }
  .thread-branches { grid-template-columns:repeat(3,1fr); }
  .thread-branch { grid-template-columns:1fr; }
  .thread-branch img { height:170px; }
}

@media(max-width:760px) {
  .thread-depth-readout { justify-self:start; text-align:left; }
  .thread-trail-shell { grid-template-columns:1fr auto; }
  .thread-trail-label { display:none; }
  .thread-current { grid-template-columns:1fr; }
  .thread-current-image { min-height:430px; }
  .thread-current-copy { padding:26px 20px; }
  .thread-branches { grid-template-columns:1fr; }
  .thread-branch { grid-template-columns:110px 1fr; }
  .thread-branch img { height:100%; min-height:135px; }
}

@media(max-width:480px) {
  .thread-current-image { min-height:360px; }
  .thread-branch { grid-template-columns:90px 1fr; }
  .thread-consequence { align-items:flex-start; }
  .thread-carry { margin-left:0; }
}

/* Ambient text fragments */

.poisoner-whisper-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 24;
  overflow: hidden;
}

.poisoner-whisper {
  position: absolute;
  max-width: min(360px, 46vw);
  color: rgba(226,220,211,.84);
  font: 12px/1.45 Georgia,serif;
  font-style: italic;
  letter-spacing: .08em;
  text-shadow: 0 1px 14px rgba(0,0,0,.9);
  opacity: 0;
  transform: translate3d(var(--whisper-x,0),8px,0);
  transition: opacity .9s ease, transform 1.1s ease;
}

.poisoner-whisper.visible {
  opacity: 1;
  transform: translate3d(var(--whisper-x,0),0,0);
}

.poisoner-whisper[data-zone="left-top"] { left: 3.5vw; top: 17vh; text-align:left; }
.poisoner-whisper[data-zone="right-top"] { right: 3.5vw; top: 19vh; text-align:right; }
.poisoner-whisper[data-zone="left-mid"] { left: 4vw; top: 48vh; text-align:left; }
.poisoner-whisper[data-zone="right-mid"] { right: 4vw; top: 51vh; text-align:right; }
.poisoner-whisper[data-zone="left-low"] { left: 5vw; bottom: 12vh; text-align:left; }
.poisoner-whisper[data-zone="right-low"] { right: 5vw; bottom: 12vh; text-align:right; }

body.effects-reduced .poisoner-whisper {
  transition-duration: .25s;
}

body.effects-off .poisoner-whisper-layer {
  display: none;
}

@media(max-width:700px) {
  .poisoner-whisper {
    max-width: 70vw;
    font-size: 10px;
  }
  .poisoner-whisper[data-zone="left-top"],
  .poisoner-whisper[data-zone="left-mid"],
  .poisoner-whisper[data-zone="left-low"] { left: 16px; }
  .poisoner-whisper[data-zone="right-top"],
  .poisoner-whisper[data-zone="right-mid"],
  .poisoner-whisper[data-zone="right-low"] { right: 16px; }
}

/* Whisper v2 — apparition + vapor */

.poisoner-whisper {
  position: absolute;
  max-width: min(380px, 46vw);
  color: rgba(242,242,238,.88);
  font: 12px/1.45 Georgia,serif;
  font-style: italic;
  letter-spacing: .09em;
  text-shadow:
    0 0 8px rgba(255,255,255,.16),
    0 1px 18px rgba(0,0,0,.92);
  opacity: 0;
  filter: blur(7px);
  transform:
    translate3d(var(--whisper-x,0), var(--whisper-y,12px), 0)
    scale(.985);
  transition:
    opacity .75s ease,
    filter 1.05s ease,
    transform 1.05s ease;
  isolation: isolate;
}

.poisoner-whisper::before,
.poisoner-whisper::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: 50%;
  top: 50%;
  width: 150%;
  height: 240%;
  opacity: 0;
  transform: translate(-50%,-50%) scale(.72);
  filter: blur(14px);
  background:
    radial-gradient(ellipse at 38% 48%, rgba(255,255,255,.18), transparent 38%),
    radial-gradient(ellipse at 63% 52%, rgba(238,240,241,.13), transparent 36%),
    radial-gradient(ellipse at 50% 68%, rgba(255,255,255,.09), transparent 42%);
}

.poisoner-whisper::after {
  width: 120%;
  height: 300%;
  filter: blur(22px);
  background:
    radial-gradient(ellipse at 45% 58%, rgba(255,255,255,.13), transparent 34%),
    radial-gradient(ellipse at 58% 42%, rgba(220,225,228,.09), transparent 38%);
}

.poisoner-whisper.visible {
  opacity: 1;
  filter: blur(.15px);
  transform:
    translate3d(var(--whisper-x,0), 0, 0)
    scale(1);
}

.poisoner-whisper.vanishing {
  opacity: 0;
  filter: blur(5px);
  transform:
    translate3d(
      calc(var(--whisper-x,0) + var(--vapor-drift-x,0px)),
      var(--vapor-drift-y,-14px),
      0
    )
    scale(1.025);
  transition:
    opacity 1.15s ease,
    filter 1.25s ease,
    transform 1.35s ease;
}

.poisoner-whisper.vanishing::before {
  animation: whisper-vapor-a 1.45s ease-out forwards;
}

.poisoner-whisper.vanishing::after {
  animation: whisper-vapor-b 1.7s ease-out forwards;
}

body.effects-full .poisoner-whisper.visible:not(.vanishing) {
  animation: whisper-float var(--whisper-float-time,4.1s) ease-in-out infinite alternate;
}

body.effects-reduced .poisoner-whisper {
  filter: blur(1px);
  transition-duration: .28s;
}

body.effects-reduced .poisoner-whisper::before,
body.effects-reduced .poisoner-whisper::after {
  display: none;
}

@keyframes whisper-float {
  from {
    transform: translate3d(var(--whisper-x,0), 0, 0) scale(1);
  }
  to {
    transform:
      translate3d(
        calc(var(--whisper-x,0) + var(--float-x,2px)),
        var(--float-y,-3px),
        0
      )
      scale(1.006);
  }
}

@keyframes whisper-vapor-a {
  0% {
    opacity: 0;
    transform: translate(-50%,-50%) scale(.72) rotate(0deg);
  }
  18% {
    opacity: .72;
  }
  100% {
    opacity: 0;
    transform:
      translate(
        calc(-50% + var(--smoke-a-x,18px)),
        calc(-50% + var(--smoke-a-y,-32px))
      )
      scale(1.42)
      rotate(var(--smoke-a-r,5deg));
  }
}

@keyframes whisper-vapor-b {
  0% {
    opacity: 0;
    transform: translate(-50%,-50%) scale(.68) rotate(0deg);
  }
  20% {
    opacity: .5;
  }
  100% {
    opacity: 0;
    transform:
      translate(
        calc(-50% + var(--smoke-b-x,-20px)),
        calc(-50% + var(--smoke-b-y,-44px))
      )
      scale(1.55)
      rotate(var(--smoke-b-r,-7deg));
  }
}

/* Looser zones so the apparitions don't feel pinned to six exact spots */
.poisoner-whisper[data-zone="free"] {
  left: var(--free-left,50%);
  top: var(--free-top,50%);
  right: auto;
  bottom: auto;
  text-align: var(--free-align,left);
}

/* Whisper v3 — tendrils pull individual letters into smoke */

.poisoner-whisper {
  position: absolute;
  max-width: min(420px, 52vw);
  color: rgba(242,242,238,.9);
  font: 12px/1.45 Georgia,serif;
  font-style: italic;
  letter-spacing: .08em;
  text-shadow:
    0 0 8px rgba(255,255,255,.16),
    0 1px 18px rgba(0,0,0,.92);
  opacity: 0;
  filter: blur(6px);
  transform: translate3d(var(--whisper-x,0), var(--whisper-y,10px), 0);
  transition: opacity .7s ease, filter .95s ease, transform .95s ease;
  isolation: isolate;
  white-space: pre-wrap;
}

.poisoner-whisper.visible {
  opacity: 1;
  filter: blur(.1px);
  transform: translate3d(var(--whisper-x,0), 0, 0);
}

.poisoner-whisper .whisper-letter {
  display: inline-block;
  position: relative;
  will-change: transform, opacity, filter;
}

.poisoner-whisper .whisper-space {
  display: inline-block;
  width: .34em;
}

.poisoner-whisper.vanishing .whisper-letter {
  animation:
    whisper-letter-pull var(--letter-duration,1.35s)
    cubic-bezier(.2,.6,.25,1)
    var(--letter-delay,0s)
    forwards;
}

.poisoner-whisper-tendril {
  position: absolute;
  z-index: -1;
  left: var(--tendril-left,50%);
  bottom: 40%;
  width: var(--tendril-width,18px);
  height: var(--tendril-height,90px);
  opacity: 0;
  pointer-events: none;
  filter: blur(var(--tendril-blur,5px));
  transform-origin: 50% 100%;
}

.poisoner-whisper-tendril::before,
.poisoner-whisper-tendril::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:50% 50% 45% 55% / 60% 45% 55% 40%;
  background:
    radial-gradient(ellipse at 50% 86%, rgba(255,255,255,.22), transparent 28%),
    radial-gradient(ellipse at 55% 55%, rgba(238,241,243,.14), transparent 38%),
    radial-gradient(ellipse at 44% 24%, rgba(255,255,255,.10), transparent 42%);
}

.poisoner-whisper-tendril::after {
  transform: translateX(30%) scale(.72,1.08);
  opacity:.68;
}

.poisoner-whisper.vanishing .poisoner-whisper-tendril {
  animation:
    whisper-tendril-rise var(--tendril-duration,1.7s)
    cubic-bezier(.18,.7,.24,1)
    var(--tendril-delay,0s)
    forwards;
}

.poisoner-whisper-smoke {
  position:absolute;
  z-index:-2;
  left:50%;
  top:50%;
  width:130%;
  height:230%;
  transform:translate(-50%,-50%) scale(.7);
  opacity:0;
  pointer-events:none;
  filter:blur(18px);
  background:
    radial-gradient(ellipse at 38% 50%, rgba(255,255,255,.14), transparent 34%),
    radial-gradient(ellipse at 62% 54%, rgba(230,235,238,.11), transparent 38%),
    radial-gradient(ellipse at 50% 70%, rgba(255,255,255,.08), transparent 42%);
}

.poisoner-whisper.vanishing .poisoner-whisper-smoke {
  animation: whisper-smoke-bloom 1.8s ease-out forwards;
}

body.effects-reduced .poisoner-whisper.vanishing .whisper-letter {
  animation-name: whisper-letter-reduced;
  animation-duration:.55s;
}

body.effects-reduced .poisoner-whisper-tendril,
body.effects-reduced .poisoner-whisper-smoke {
  display:none;
}

@keyframes whisper-letter-pull {
  0% {
    opacity:1;
    filter:blur(0);
    transform:translate3d(0,0,0) scale(1) rotate(0deg);
  }
  28% {
    opacity:.96;
    transform:
      translate3d(
        calc(var(--letter-x,0px) * .25),
        calc(var(--letter-y,-40px) * .16),
        0
      )
      scale(1.01)
      rotate(calc(var(--letter-r,0deg) * .2));
  }
  68% {
    opacity:.56;
    filter:blur(1.5px);
    transform:
      translate3d(
        calc(var(--letter-x,0px) * .72),
        calc(var(--letter-y,-40px) * .72),
        0
      )
      scale(.98,1.09)
      rotate(calc(var(--letter-r,0deg) * .75));
  }
  100% {
    opacity:0;
    filter:blur(6px);
    transform:
      translate3d(
        var(--letter-x,0px),
        var(--letter-y,-40px),
        0
      )
      scale(.88,1.22)
      rotate(var(--letter-r,0deg));
  }
}

@keyframes whisper-letter-reduced {
  from { opacity:1; filter:blur(0); transform:none; }
  to   { opacity:0; filter:blur(2px); transform:translateY(-5px); }
}

@keyframes whisper-tendril-rise {
  0% {
    opacity:0;
    transform:
      translate3d(0,12px,0)
      scale(.55,.48)
      rotate(var(--tendril-r0,-5deg));
  }
  18% {
    opacity:.55;
  }
  58% {
    opacity:.72;
    transform:
      translate3d(
        calc(var(--tendril-drift,10px) * .55),
        calc(var(--tendril-rise,-95px) * .58),
        0
      )
      scale(.82,1.18)
      rotate(var(--tendril-r1,4deg));
  }
  100% {
    opacity:0;
    transform:
      translate3d(
        var(--tendril-drift,10px),
        var(--tendril-rise,-95px),
        0
      )
      scale(1.08,1.58)
      rotate(var(--tendril-r2,9deg));
  }
}

@keyframes whisper-smoke-bloom {
  0% {
    opacity:0;
    transform:translate(-50%,-50%) scale(.68);
  }
  22% { opacity:.28; }
  100% {
    opacity:0;
    transform:
      translate(
        calc(-50% + var(--smoke-drift-x,18px)),
        calc(-50% + var(--smoke-drift-y,-34px))
      )
      scale(1.42);
  }
}

/* Spectral framing for Latest Works — deliberately restrained */

#work .gallery .card {
  overflow: visible;
  background: #080a09;
  isolation: isolate;
}

#work .gallery .card::before {
  content:"";
  position:absolute;
  z-index:-2;
  inset:-10px;
  border-radius:2px;
  pointer-events:none;
  opacity:.43;
  filter:blur(16px);
  background:
    radial-gradient(ellipse at 18% 22%, rgba(151,220,188,.13), transparent 35%),
    radial-gradient(ellipse at 82% 70%, rgba(92,173,139,.11), transparent 38%),
    radial-gradient(ellipse at 52% 96%, rgba(184,224,201,.075), transparent 43%);
  animation:spectral-frame-breathe 11s ease-in-out infinite alternate;
}

#work .gallery .card::after {
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(0deg,rgba(0,0,0,.78),transparent 45%),
    radial-gradient(ellipse at 50% 50%, transparent 62%, rgba(155,211,183,.038) 86%, transparent 100%);
  box-shadow:
    inset 0 0 24px rgba(141,205,174,.045),
    0 0 18px rgba(111,184,150,.085),
    0 0 1px rgba(186,225,204,.24);
}

#work .gallery .card:nth-child(2)::before { animation-delay:-3.2s; }
#work .gallery .card:nth-child(3)::before { animation-delay:-6.1s; }
#work .gallery .card:nth-child(4)::before { animation-delay:-8.4s; }

body.effects-reduced #work .gallery .card::before {
  animation:none;
  opacity:.22;
}

body.effects-off #work .gallery .card::before {
  display:none;
}

@keyframes spectral-frame-breathe {
  0% {
    opacity:.24;
    transform:scale(.992);
    filter:blur(16px);
  }
  50% {
    opacity:.38;
  }
  100% {
    opacity:.3;
    transform:scale(1.008);
    filter:blur(20px);
  }
}

/* Whisper v4 — softer apparition, longer serpentine smoke */

.poisoner-whisper {
  color:rgba(245,245,241,.86);
  text-shadow:
    0 0 10px rgba(255,255,255,.10),
    0 0 28px rgba(232,238,236,.08),
    0 2px 22px rgba(0,0,0,.92);
  opacity:0;
  filter:blur(10px) brightness(.78);
  transform:
    translate3d(var(--whisper-x,0), var(--whisper-y,12px), 0)
    scale(.985);
  transition:
    opacity 1.15s ease,
    filter 1.45s ease,
    transform 1.45s ease,
    text-shadow 1.5s ease;
}

.poisoner-whisper::before {
  content:"";
  position:absolute;
  z-index:-2;
  left:50%;
  top:50%;
  width:125%;
  height:190%;
  transform:translate(-50%,-50%) scale(.72);
  border-radius:50%;
  opacity:0;
  pointer-events:none;
  filter:blur(24px);
  background:
    radial-gradient(ellipse at 50% 48%, rgba(255,255,255,.14), transparent 36%),
    radial-gradient(ellipse at 40% 62%, rgba(225,232,230,.08), transparent 43%);
  transition:opacity 1.2s ease, transform 1.6s ease;
}

.poisoner-whisper.visible {
  opacity:1;
  filter:blur(.2px) brightness(1);
  transform:translate3d(var(--whisper-x,0),0,0) scale(1);
  text-shadow:
    0 0 8px rgba(255,255,255,.16),
    0 0 32px rgba(238,242,240,.11),
    0 2px 22px rgba(0,0,0,.9);
}

.poisoner-whisper.visible::before {
  opacity:.58;
  transform:translate(-50%,-50%) scale(1);
}

.poisoner-whisper.vanishing {
  opacity:.18;
  filter:blur(4px) brightness(1.05);
  transform:
    translate3d(
      calc(var(--whisper-x,0) + var(--vapor-drift-x,0px)),
      -8px,
      0
    )
    scale(1.01);
  transition:
    opacity 1.7s ease,
    filter 1.8s ease,
    transform 1.8s ease;
}

.poisoner-whisper.vanishing::before {
  opacity:0;
  transform:translate(-50%,-62%) scale(1.3);
  transition:opacity 1.6s ease, transform 1.9s ease;
}

.poisoner-whisper-smoke {
  opacity:0;
}

.poisoner-smoke-svg {
  position:absolute;
  z-index:-1;
  left:-8%;
  right:-8%;
  bottom:22%;
  width:116%;
  height:260%;
  overflow:visible;
  pointer-events:none;
  opacity:0;
}

.poisoner-smoke-svg path {
  fill:none;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  pathLength:1;
}

.poisoner-smoke-svg .smoke-glow {
  stroke:rgba(241,245,243,.13);
  stroke-width:8;
  filter:blur(7px);
}

.poisoner-smoke-svg .smoke-core {
  stroke:rgba(245,248,246,.26);
  stroke-width:1.1;
  filter:blur(.7px);
}

.poisoner-whisper.vanishing .poisoner-smoke-svg {
  opacity:1;
}

.poisoner-whisper.vanishing .poisoner-smoke-svg .smoke-glow,
.poisoner-whisper.vanishing .poisoner-smoke-svg .smoke-core {
  stroke-dasharray:var(--smoke-segment,.22) 1;
  stroke-dashoffset:1.08;
  animation:
    smoke-trace var(--smoke-duration,3.2s)
    cubic-bezier(.15,.62,.18,1)
    var(--smoke-delay,0s)
    forwards;
}

.poisoner-whisper.vanishing .poisoner-smoke-svg .smoke-glow {
  animation-name:smoke-trace-glow;
}

body.effects-reduced .poisoner-smoke-svg {
  display:none;
}

@keyframes smoke-trace {
  0% {
    stroke-dashoffset:1.08;
    opacity:0;
  }
  16% {
    opacity:.7;
  }
  70% {
    opacity:.46;
  }
  100% {
    stroke-dashoffset:-.24;
    opacity:0;
  }
}

@keyframes smoke-trace-glow {
  0% {
    stroke-dashoffset:1.08;
    opacity:0;
    filter:blur(9px);
  }
  20% {
    opacity:.52;
  }
  68% {
    opacity:.32;
    filter:blur(12px);
  }
  100% {
    stroke-dashoffset:-.24;
    opacity:0;
    filter:blur(18px);
  }
}

@keyframes whisper-letter-pull {
  0% {
    opacity:1;
    filter:blur(0);
    transform:translate3d(0,0,0) scale(1);
  }
  34% {
    opacity:.92;
    filter:blur(.4px);
    transform:
      translate3d(
        calc(var(--letter-x,0px) * .15),
        calc(var(--letter-y,-40px) * .12),
        0
      )
      scale(1.002,1.02)
      rotate(calc(var(--letter-r,0deg) * .12));
  }
  74% {
    opacity:.42;
    filter:blur(2px);
    transform:
      translate3d(
        calc(var(--letter-x,0px) * .62),
        calc(var(--letter-y,-40px) * .68),
        0
      )
      scale(.985,1.08)
      rotate(calc(var(--letter-r,0deg) * .65));
  }
  100% {
    opacity:0;
    filter:blur(7px);
    transform:
      translate3d(
        var(--letter-x,0px),
        var(--letter-y,-40px),
        0
      )
      scale(.93,1.16)
      rotate(var(--letter-r,0deg));
  }
}

/* Whisper v5 — fixed apparition + canvas smoke dissolution */

.poisoner-whisper {
  opacity:1;
  filter:none;
  transform:none;
  transition:none;
  overflow:visible;
}

.poisoner-whisper::before,
.poisoner-whisper::after,
.poisoner-whisper-tendril,
.poisoner-whisper-smoke,
.poisoner-smoke-svg {
  display:none !important;
}

.whisper-text {
  position:relative;
  z-index:2;
  display:inline-block;
  color:rgba(246,246,242,.84);
  opacity:.05;
  filter:blur(9px);
  transform:scale(.992);
  transform-origin:center center;
  text-shadow:
    0 0 18px rgba(255,255,255,.14),
    0 0 42px rgba(229,237,233,.08),
    0 2px 22px rgba(0,0,0,.9);
  transition:
    opacity 1.85s cubic-bezier(.2,.65,.25,1),
    filter 1.95s cubic-bezier(.2,.65,.25,1),
    transform 2.05s cubic-bezier(.2,.65,.25,1),
    text-shadow 2s ease;
  will-change:opacity,filter,transform;
}

.poisoner-whisper.visible .whisper-text {
  opacity:.82;
  filter:blur(.15px);
  transform:scale(1);
  text-shadow:
    0 0 10px rgba(255,255,255,.14),
    0 0 30px rgba(234,240,237,.08),
    0 2px 22px rgba(0,0,0,.9);
}

.poisoner-whisper.vanishing .whisper-text {
  opacity:0;
  filter:blur(6px);
  transform:scale(1.045,1.075);
  letter-spacing:.105em;
  transition:
    opacity 2.15s cubic-bezier(.25,.1,.2,1),
    filter 2.3s ease,
    transform 2.4s ease,
    letter-spacing 2.35s ease;
}

.whisper-smoke-canvas {
  position:absolute;
  z-index:3;
  left:-38%;
  bottom:-18px;
  width:176%;
  height:290px;
  pointer-events:none;
  opacity:0;
  mix-blend-mode:screen;
  transition:opacity .45s ease;
}

.poisoner-whisper.vanishing .whisper-smoke-canvas {
  opacity:.95;
}

body.effects-reduced .whisper-smoke-canvas {
  display:none;
}

body.effects-reduced .whisper-text {
  transition-duration:.55s;
}

body.effects-reduced .poisoner-whisper.vanishing .whisper-text {
  opacity:0;
  filter:blur(2px);
  transform:scale(1.015);
  transition-duration:.7s;
}

/* Stronger but still desaturated spectral perimeter for Latest Works */

#work .gallery .card {
  box-shadow:
    0 0 12px rgba(155,218,187,.13),
    0 0 30px rgba(96,171,139,.11),
    0 0 58px rgba(71,126,105,.055);
  transition:
    box-shadow 1.3s ease,
    filter .8s ease;
}

#work .gallery .card::before {
  inset:-13px;
  opacity:.52;
  filter:blur(19px);
  background:
    radial-gradient(ellipse at 12% 18%, rgba(179,231,205,.16), transparent 32%),
    radial-gradient(ellipse at 86% 24%, rgba(116,197,161,.13), transparent 35%),
    radial-gradient(ellipse at 78% 82%, rgba(88,167,134,.14), transparent 36%),
    radial-gradient(ellipse at 24% 88%, rgba(160,218,189,.11), transparent 38%);
  animation:spectral-haze-shift 14s ease-in-out infinite alternate;
}

#work .gallery .card::after {
  background:
    linear-gradient(0deg,rgba(0,0,0,.78),transparent 45%),
    radial-gradient(ellipse at 50% 50%,transparent 58%,rgba(169,222,194,.052) 83%,transparent 100%);
  box-shadow:
    inset 0 0 11px rgba(184,231,207,.075),
    inset 0 0 32px rgba(114,188,153,.045),
    0 0 1px rgba(214,239,225,.28);
}

#work .gallery .card:hover {
  box-shadow:
    0 0 14px rgba(169,226,198,.16),
    0 0 35px rgba(103,181,146,.13),
    0 0 64px rgba(70,130,106,.065);
}

body.effects-reduced #work .gallery .card::before {
  animation:none;
  opacity:.34;
}

body.effects-off #work .gallery .card {
  box-shadow:none;
}

@keyframes spectral-haze-shift {
  0% {
    opacity:.38;
    transform:translate3d(-1px,1px,0) scale(.992);
    filter:blur(18px);
  }
  45% {
    opacity:.54;
    transform:translate3d(1px,-1px,0) scale(1.002);
    filter:blur(21px);
  }
  100% {
    opacity:.44;
    transform:translate3d(-1px,-1px,0) scale(1.009);
    filter:blur(23px);
  }
}
/* Latest Works spectral leakage — glow core + slow perimeter wisps */

#work .gallery .card .spectral-edge {
  position:absolute;
  z-index:4;
  inset:-1px;
  pointer-events:none;
  border:1px solid rgba(182,231,207,.24);
  box-shadow:
    inset 0 0 9px rgba(190,237,214,.08),
    0 0 7px rgba(172,229,201,.18),
    0 0 20px rgba(91,178,143,.14);
  opacity:.82;
}

#work .gallery .card .spectral-edge::before {
  content:"";
  position:absolute;
  inset:-5px;
  border:1px solid rgba(109,196,158,.10);
  filter:blur(5px);
  box-shadow:0 0 22px rgba(81,160,130,.11);
}

.spectral-wisp {
  position:absolute;
  z-index:5;
  pointer-events:none;
  opacity:.0;
  mix-blend-mode:screen;
  filter:blur(4px);
  will-change:transform,opacity;
}

.spectral-wisp-a {
  left:-36%;
  top:-4px;
  width:42%;
  height:8px;
  background:linear-gradient(90deg,
    transparent,
    rgba(202,242,220,.08) 16%,
    rgba(165,233,199,.42) 52%,
    rgba(93,194,151,.10) 84%,
    transparent);
  animation:spectral-wisp-top 13.5s ease-in-out var(--spectral-delay,0s) infinite;
}

.spectral-wisp-b {
  right:-4px;
  top:-32%;
  width:8px;
  height:40%;
  background:linear-gradient(180deg,
    transparent,
    rgba(191,239,215,.10) 18%,
    rgba(141,221,183,.38) 54%,
    rgba(82,175,140,.08) 84%,
    transparent);
  animation:spectral-wisp-side 16s ease-in-out calc(var(--spectral-delay,0s) - 4s) infinite;
}

.spectral-wisp-c {
  right:-30%;
  bottom:-4px;
  width:36%;
  height:8px;
  background:linear-gradient(90deg,
    transparent,
    rgba(103,202,160,.08) 12%,
    rgba(174,235,204,.34) 50%,
    rgba(204,242,222,.08) 86%,
    transparent);
  animation:spectral-wisp-bottom 18s ease-in-out calc(var(--spectral-delay,0s) - 8s) infinite;
}

body.effects-reduced .spectral-wisp {
  animation:none !important;
  display:none;
}

body.effects-off #work .gallery .card .spectral-edge,
body.effects-off .spectral-wisp {
  display:none;
}

@keyframes spectral-wisp-top {
  0%,12% { opacity:0; transform:translateX(0) scaleX(.72); }
  24% { opacity:.48; }
  54% { opacity:.34; transform:translateX(205%) scaleX(1.05); }
  69%,100% { opacity:0; transform:translateX(315%) scaleX(.82); }
}

@keyframes spectral-wisp-side {
  0%,18% { opacity:0; transform:translateY(0) scaleY(.75); }
  31% { opacity:.4; }
  59% { opacity:.28; transform:translateY(210%) scaleY(1.04); }
  76%,100% { opacity:0; transform:translateY(335%) scaleY(.78); }
}

@keyframes spectral-wisp-bottom {
  0%,22% { opacity:0; transform:translateX(0) scaleX(.74); }
  35% { opacity:.38; }
  62% { opacity:.26; transform:translateX(-220%) scaleX(1.04); }
  78%,100% { opacity:0; transform:translateX(-345%) scaleX(.8); }
}

/* Final apparition timing refinement */

.whisper-text {
  opacity:.025;
  filter:blur(11px);
  transform:none;
  transition:
    opacity 2.15s cubic-bezier(.18,.68,.22,1),
    filter 2.25s cubic-bezier(.18,.68,.22,1),
    text-shadow 2.2s ease;
}

.poisoner-whisper.visible .whisper-text {
  opacity:.72;
  filter:blur(.1px);
  transform:none;
}

.poisoner-whisper.vanishing .whisper-text {
  opacity:0;
  filter:blur(7px);
  transform:scale(1.035,1.07);
  transition:
    opacity 2.5s cubic-bezier(.22,.08,.18,1),
    filter 2.65s ease,
    transform 2.7s ease;
}

.whisper-smoke-canvas {
  left:-48%;
  width:196%;
  height:360px;
  bottom:-24px;
}

/* Whisper v6 — flare, dim-back, then long supernatural exhale */

.whisper-text {
  position: relative;
  z-index: 2;
  display: inline-block;
  color: rgba(246,246,242,.82);
  opacity: .02;
  filter: blur(12px);
  transform: none;
  text-shadow:
    0 0 8px rgba(255,255,255,.06),
    0 0 18px rgba(235,242,239,.04),
    0 2px 18px rgba(0,0,0,.88);
  will-change: opacity, filter, text-shadow;
}

.poisoner-whisper.visible .whisper-text {
  animation: whisper-apparition-v6 2.25s cubic-bezier(.2,.68,.22,1) forwards;
}

.poisoner-whisper.vanishing .whisper-text {
  opacity: 0;
  filter: blur(8px);
  transform: scale(1.04,1.08);
  text-shadow:
    0 0 18px rgba(255,255,255,.10),
    0 0 40px rgba(235,242,239,.06),
    0 2px 24px rgba(0,0,0,.88);
  transition:
    opacity 2.9s cubic-bezier(.22,.08,.18,1),
    filter 3.1s ease,
    transform 3.15s ease,
    text-shadow 2.8s ease;
}

@keyframes whisper-apparition-v6 {
  0% {
    opacity: .02;
    filter: blur(12px);
    text-shadow:
      0 0 8px rgba(255,255,255,.04),
      0 0 14px rgba(235,242,239,.03),
      0 2px 16px rgba(0,0,0,.85);
  }
  18% {
    opacity: .92;
    filter: blur(2px);
    text-shadow:
      0 0 26px rgba(255,255,255,.28),
      0 0 62px rgba(236,243,240,.18),
      0 2px 20px rgba(0,0,0,.88);
  }
  34% {
    opacity: .36;
    filter: blur(1.4px);
    text-shadow:
      0 0 10px rgba(255,255,255,.08),
      0 0 18px rgba(236,243,240,.05),
      0 2px 20px rgba(0,0,0,.88);
  }
  100% {
    opacity: .74;
    filter: blur(.1px);
    text-shadow:
      0 0 12px rgba(255,255,255,.11),
      0 0 28px rgba(236,243,240,.07),
      0 2px 22px rgba(0,0,0,.9);
  }
}

.whisper-smoke-canvas {
  position: absolute;
  z-index: 3;
  left: -52%;
  width: 204%;
  height: 420px;
  bottom: -28px;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity .55s ease;
}

.poisoner-whisper.vanishing .whisper-smoke-canvas {
  opacity: 1;
}

body.effects-reduced .whisper-text {
  animation: none !important;
  transition: none !important;
}

body.effects-reduced .poisoner-whisper.visible .whisper-text {
  opacity: .72;
  filter: blur(.15px);
}

body.effects-reduced .poisoner-whisper.vanishing .whisper-text {
  opacity: 0;
  filter: blur(2px);
  transform: scale(1.015);
  transition:
    opacity .9s ease,
    filter .9s ease,
    transform .9s ease;
}

/* Whisper v7 — smoke overlaps the text and behaves as diffuse volume */

.whisper-smoke-canvas {
  opacity:0;
  transition:opacity 1.1s ease;
}

.poisoner-whisper.smoking .whisper-smoke-canvas {
  opacity:.68;
}

.poisoner-whisper.vanishing .whisper-smoke-canvas {
  opacity:.92;
}

.poisoner-whisper.smoking .whisper-text {
  text-shadow:
    0 0 13px rgba(255,255,255,.10),
    0 0 34px rgba(236,243,240,.075),
    0 2px 22px rgba(0,0,0,.90);
}

.poisoner-whisper.vanishing .whisper-text {
  opacity:0;
  filter:blur(6px);
  transform:scale(1.025,1.045);
  transition:
    opacity 2.35s cubic-bezier(.24,.08,.2,1),
    filter 2.65s ease,
    transform 2.7s ease;
}

/* Whisper v7.1 — larger text, quieter residual smoke */

.poisoner-whisper {
  font-size: 14px;
  line-height: 1.48;
}

.poisoner-whisper.smoking .whisper-smoke-canvas {
  opacity: .66;
}

.poisoner-whisper.vanishing .whisper-smoke-canvas {
  opacity: .78;
}

@media(max-width:700px) {
  .poisoner-whisper {
    font-size: 12.5px;
  }
}

/* Smoke-set inspired perimeter ribbons — custom procedural shapes */

.spectral-ribbon {
  position:absolute;
  z-index:3;
  width:96px;
  height:220px;
  pointer-events:none;
  overflow:visible;
  opacity:0;
  mix-blend-mode:screen;
  transform-origin:50% 100%;
  will-change:transform,opacity,filter;
}

.spectral-ribbon-left {
  left:-42px;
  bottom:-72px;
  animation:spectral-ribbon-left-rise 19s ease-in-out var(--spectral-delay,0s) infinite;
}

.spectral-ribbon-right {
  right:-40px;
  top:-78px;
  transform:scaleX(-1) rotate(180deg);
  animation:spectral-ribbon-right-rise 21s ease-in-out calc(var(--spectral-delay,0s) - 5s) infinite;
}

.spectral-ribbon path {
  fill:none;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.spectral-ribbon-glow {
  stroke:rgba(142,225,184,.16);
  stroke-width:10;
  filter:blur(7px);
}

.spectral-ribbon-core {
  stroke:rgba(199,241,218,.25);
  stroke-width:1.15;
  filter:blur(.7px);
}

@keyframes spectral-ribbon-left-rise {
  0%,15% {
    opacity:0;
    transform:translate3d(0,14px,0) scale(.82,1.02) rotate(-5deg);
    filter:blur(1px);
  }
  26% {
    opacity:.26;
  }
  48% {
    opacity:.20;
    transform:translate3d(12px,-34px,0) scale(.95,1.08) rotate(2deg);
    filter:blur(0);
  }
  66% {
    opacity:.10;
    transform:translate3d(20px,-72px,0) scale(1.04,1.15) rotate(6deg);
    filter:blur(1.5px);
  }
  78%,100% {
    opacity:0;
    transform:translate3d(28px,-104px,0) scale(1.10,1.20) rotate(9deg);
    filter:blur(3px);
  }
}

@keyframes spectral-ribbon-right-rise {
  0%,20% {
    opacity:0;
    transform:scaleX(-1) rotate(180deg) translate3d(0,-10px,0) scale(.84,1.0);
    filter:blur(1px);
  }
  31% {
    opacity:.22;
  }
  53% {
    opacity:.17;
    transform:scaleX(-1) rotate(180deg) translate3d(10px,32px,0) scale(.96,1.08);
    filter:blur(0);
  }
  70% {
    opacity:.08;
    transform:scaleX(-1) rotate(180deg) translate3d(17px,66px,0) scale(1.04,1.14);
    filter:blur(1.5px);
  }
  82%,100% {
    opacity:0;
    transform:scaleX(-1) rotate(180deg) translate3d(24px,98px,0) scale(1.10,1.20);
    filter:blur(3px);
  }
}

body.effects-reduced .spectral-ribbon,
body.effects-off .spectral-ribbon {
  display:none;
}

@media(max-width:700px) {
  .spectral-ribbon {
    width:72px;
    height:170px;
  }
}

/* Cinematic homepage pass — depth without heavy WebGL */

.hero img {
  transform: translate3d(var(--hero-x,0px),var(--hero-y,0px),0) scale(1.028);
  transition: transform .65s cubic-bezier(.22,.61,.36,1), filter .65s ease;
  will-change: transform;
}

.hero .hero-copy {
  transform: translate3d(var(--hero-copy-x,0px),calc(-50% + var(--hero-copy-y,0px)),0);
  transition: transform .62s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

.hero .hero-label {
  transform: translate3d(var(--hero-label-x,0px),var(--hero-label-y,0px),0);
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

.signal-interlude {
  position:relative;
  min-height:clamp(480px,62vw,720px);
  margin:28px 0 58px;
  padding:0;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  background:#050607;
  isolation:isolate;
}

.signal-media {
  position:absolute;
  inset:0 24% 0 0;
  overflow:hidden;
  clip-path:inset(8% 7% 8% 0);
  transition:clip-path 1.2s cubic-bezier(.2,.72,.16,1);
}

.signal-media img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:translate3d(var(--signal-x,0px),var(--signal-y,0px),0) scale(1.055);
  filter:saturate(.82) contrast(1.04) brightness(.73);
  transition:transform .9s cubic-bezier(.22,.61,.36,1),filter 1s ease;
  will-change:transform;
}

.signal-shade {
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,rgba(3,4,5,.03) 0%,rgba(3,4,5,.18) 48%,rgba(3,4,5,.93) 76%,#050607 100%),
    linear-gradient(0deg,rgba(3,4,5,.44),transparent 44%);
  pointer-events:none;
}

.signal-copy {
  position:absolute;
  z-index:3;
  right:4.5%;
  top:50%;
  width:min(39%,520px);
  transform:translate3d(var(--signal-copy-x,0px),calc(-50% + var(--signal-copy-y,0px)),0);
  opacity:0;
  transition:
    opacity .8s ease .16s,
    transform 1s cubic-bezier(.22,.61,.36,1);
}

.signal-interlude.in-view .signal-copy { opacity:1; }
.signal-interlude.in-view .signal-media { clip-path:inset(0); }

.signal-kicker {
  font:8px Arial,sans-serif;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:#8f9290;
  margin-bottom:18px;
}

.signal-copy h2 {
  margin:0;
  max-width:560px;
  font-size:clamp(34px,5.6vw,82px);
  line-height:.91;
  letter-spacing:.055em;
  font-weight:400;
  text-wrap:balance;
}

.signal-copy p {
  margin:22px 0 0;
  max-width:390px;
  color:#b8b5af;
  font-size:13px;
  line-height:1.65;
}

.signal-open {
  margin-top:26px;
  padding:12px 0 8px;
  border:0;
  border-bottom:1px solid rgba(183,25,34,.72);
  background:none;
  color:#d4d0ca;
  cursor:pointer;
  font:8px Arial,sans-serif;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.signal-open:hover {
  color:#fff;
  border-color:#e02a34;
}

.signal-index {
  position:absolute;
  z-index:2;
  left:18px;
  bottom:-17px;
  color:rgba(255,255,255,.055);
  font-size:clamp(96px,18vw,260px);
  line-height:.8;
  letter-spacing:-.08em;
  pointer-events:none;
  user-select:none;
}

.archive-grid .archive-card {
  transition:
    opacity .38s ease,
    transform .46s cubic-bezier(.22,.61,.36,1),
    filter .42s ease,
    border-color .42s ease;
  transform-origin:center;
}

.archive-grid.is-focus .archive-card {
  opacity:.34;
  filter:saturate(.55) brightness(.72);
  transform:scale(.985);
}

.archive-grid.is-focus .archive-card:hover,
.archive-grid.is-focus .archive-card:focus-within {
  opacity:1;
  filter:none;
  transform:translateY(-4px) scale(1.018);
  border-color:rgba(255,255,255,.22);
  z-index:3;
}

body.effects-reduced .hero img,
body.effects-off .hero img,
body.effects-reduced .hero .hero-copy,
body.effects-off .hero .hero-copy,
body.effects-reduced .hero .hero-label,
body.effects-off .hero .hero-label,
body.effects-reduced .signal-media img,
body.effects-off .signal-media img,
body.effects-reduced .signal-copy,
body.effects-off .signal-copy {
  transform:none !important;
  transition:none !important;
}

body.effects-reduced .signal-copy,
body.effects-off .signal-copy {
  opacity:1;
}

body.effects-reduced .signal-media,
body.effects-off .signal-media {
  clip-path:inset(0);
  transition:none;
}

@media(max-width:900px) {
  .signal-interlude {
    min-height:620px;
    margin:18px 0 44px;
  }
  .signal-media {
    inset:0;
    clip-path:inset(0);
  }
  .signal-shade {
    background:
      linear-gradient(0deg,#050607 0%,rgba(5,6,7,.94) 22%,rgba(5,6,7,.22) 65%,rgba(5,6,7,.08) 100%);
  }
  .signal-copy {
    top:auto;
    left:24px;
    right:24px;
    bottom:28px;
    width:auto;
    transform:none;
  }
  .signal-copy h2 {
    font-size:clamp(36px,11vw,66px);
  }
  .signal-index {
    top:14px;
    bottom:auto;
    font-size:120px;
  }
}

@media(max-width:560px) {
  .signal-interlude { min-height:560px; }
  .signal-copy p { font-size:12px; }
  .archive-grid.is-focus .archive-card { opacity:1; filter:none; transform:none; }
}

/* Whisper v8 — Peripheral Mirage */

.poisoner-whisper.mirage-whisper {
  max-width:min(620px,58vw);
  color:rgba(241,242,239,.72);
  font-family:"Felix Titling","Engravers MT","Baskerville","Palatino Linotype",Georgia,serif;
  font-size:clamp(18px,1.55vw,24px);
  font-style:normal;
  font-weight:400;
  line-height:1.18;
  letter-spacing:.055em;
  text-shadow:
    0 0 10px rgba(255,255,255,.06),
    0 1px 18px rgba(0,0,0,.92);
  opacity:1;
  filter:none;
  transform:none;
  overflow:visible;
  isolation:isolate;
}

.mirage-base,
.mirage-fragment {
  display:block;
  position:relative;
  z-index:2;
}

.mirage-base {
  opacity:0;
  filter:blur(4px) brightness(.86);
  transform:skewX(-1.1deg) scaleX(1.015);
  transform-origin:center;
  will-change:opacity,filter,transform,letter-spacing;
}

.mirage-whisper.visible .mirage-base {
  animation:mirage-resolve .46s cubic-bezier(.2,.72,.16,1) forwards;
}

.mirage-base::before,
.mirage-base::after {
  content:attr(data-text);
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  z-index:-1;
}

.mirage-whisper.chromatic.visible .mirage-base::before {
  color:rgba(130,214,255,.19);
  transform:translateX(-1.5px);
  animation:mirage-fringe .42s ease-out forwards;
}

.mirage-whisper.chromatic.visible .mirage-base::after {
  color:rgba(221,67,76,.16);
  transform:translateX(1.4px);
  animation:mirage-fringe .42s ease-out forwards;
}

.mirage-haze {
  position:absolute;
  z-index:0;
  inset:-22px -34px;
  opacity:0;
  pointer-events:none;
  border-radius:48%;
  background:
    radial-gradient(ellipse at 45% 48%,rgba(255,255,255,.035),transparent 34%),
    radial-gradient(ellipse at 60% 54%,rgba(180,205,196,.028),transparent 45%);
  backdrop-filter:blur(.8px) contrast(1.025);
  -webkit-backdrop-filter:blur(.8px) contrast(1.025);
  filter:blur(8px);
  transform:scale(.94,1.04) skewX(-1deg);
  will-change:opacity,transform,filter;
}

.mirage-whisper.visible .mirage-haze {
  animation:mirage-haze-in .58s ease-out forwards;
}

.mirage-fragment {
  position:absolute;
  inset:0;
  z-index:3;
  color:rgba(245,246,243,.46);
  opacity:0;
  pointer-events:none;
  filter:blur(.3px);
  text-shadow:0 0 8px rgba(255,255,255,.045);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 87%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 87%,transparent 100%);
  will-change:opacity,transform,filter;
}

.mirage-fragment-a {
  clip-path:polygon(0 0,100% 0,100% 34%,0 38%);
}
.mirage-fragment-b {
  clip-path:polygon(0 31%,100% 27%,100% 66%,0 61%);
}
.mirage-fragment-c {
  clip-path:polygon(0 59%,100% 64%,100% 100%,0 100%);
}

.mirage-whisper.vanishing .mirage-base {
  animation:mirage-core-dissolve .56s cubic-bezier(.22,.06,.18,1) forwards;
}

.mirage-whisper.vanishing .mirage-haze {
  animation:mirage-haze-out .62s ease-in forwards;
}

.mirage-whisper.vanishing .mirage-fragment-a {
  animation:mirage-pull-a .78s cubic-bezier(.18,.58,.2,1) var(--fragment-delay,0ms) forwards;
}
.mirage-whisper.vanishing .mirage-fragment-b {
  animation:mirage-pull-b .84s cubic-bezier(.18,.58,.2,1) var(--fragment-delay,0ms) forwards;
}
.mirage-whisper.vanishing .mirage-fragment-c {
  animation:mirage-pull-c .88s cubic-bezier(.18,.58,.2,1) var(--fragment-delay,0ms) forwards;
}

@keyframes mirage-resolve {
  0% {
    opacity:0;
    filter:blur(4px) brightness(.82);
    transform:skewX(-1.2deg) scaleX(1.025);
    letter-spacing:.095em;
  }
  42% {
    opacity:.5;
    filter:blur(1.4px) brightness(1.03);
  }
  100% {
    opacity:.72;
    filter:blur(.05px) brightness(1);
    transform:skewX(0deg) scaleX(1);
    letter-spacing:.055em;
  }
}

@keyframes mirage-fringe {
  0% { opacity:.38; filter:blur(1.4px); }
  65% { opacity:.12; }
  100% { opacity:0; filter:blur(3px); }
}

@keyframes mirage-haze-in {
  0% { opacity:0; transform:scale(.92,1.08) skewX(-1.5deg); filter:blur(12px); }
  45% { opacity:.36; }
  100% { opacity:.18; transform:scale(1.03,.98) skewX(.6deg); filter:blur(7px); }
}

@keyframes mirage-core-dissolve {
  0% { opacity:.72; filter:blur(.05px); transform:translate3d(0,0,0) scaleX(1); }
  35% { opacity:.48; filter:blur(.7px); transform:translate3d(1px,-3px,0) scaleX(1.006); }
  100% { opacity:0; filter:blur(4px); transform:translate3d(-2px,-18px,0) scaleX(.982); }
}

@keyframes mirage-pull-a {
  0% { opacity:0; transform:translate3d(0,0,0) rotate(0deg); filter:blur(.3px); }
  10% { opacity:.34; }
  42% { opacity:.24; transform:translate3d(-5px,-18px,0) rotate(-1.2deg) skewX(-2deg); filter:blur(1px); }
  100% { opacity:0; transform:translate3d(13px,-64px,0) rotate(3.2deg) skewX(4deg) scaleX(.92); filter:blur(6px); }
}

@keyframes mirage-pull-b {
  0% { opacity:0; transform:translate3d(0,0,0) rotate(0deg); filter:blur(.2px); }
  9% { opacity:.29; }
  46% { opacity:.22; transform:translate3d(6px,-21px,0) rotate(1.1deg) skewX(2deg); filter:blur(1.2px); }
  100% { opacity:0; transform:translate3d(-10px,-76px,0) rotate(-2.6deg) skewX(-4deg) scaleX(.95); filter:blur(6.5px); }
}

@keyframes mirage-pull-c {
  0% { opacity:0; transform:translate3d(0,0,0) rotate(0deg); filter:blur(.2px); }
  12% { opacity:.25; }
  48% { opacity:.18; transform:translate3d(-2px,-16px,0) rotate(-.5deg) skewX(-1deg); filter:blur(1.4px); }
  100% { opacity:0; transform:translate3d(8px,-56px,0) rotate(2deg) skewX(3deg) scaleX(.96); filter:blur(5.5px); }
}

@keyframes mirage-haze-out {
  0% { opacity:.18; transform:scale(1.03,.98) skewX(.6deg); filter:blur(7px); }
  100% { opacity:0; transform:scale(1.09,.93) skewX(-1deg); filter:blur(14px); }
}

body.effects-reduced .mirage-whisper {
  font-size:clamp(17px,1.35vw,22px);
}
body.effects-reduced .mirage-haze,
body.effects-reduced .mirage-fragment {
  display:none;
}
body.effects-reduced .mirage-base {
  animation:none !important;
  opacity:.68;
  filter:none;
  transform:none;
  transition:opacity .26s ease;
}
body.effects-reduced .mirage-whisper.vanishing .mirage-base {
  opacity:0;
  transition:opacity .45s ease;
}

@media(max-width:700px) {
  .poisoner-whisper.mirage-whisper {
    max-width:76vw;
    font-size:clamp(17px,4.8vw,21px);
    letter-spacing:.045em;
  }
}

/* Peripheral Mirage v8.1 — continuous text-to-vapor handoff */

.mirage-fragment {
  clip-path:none !important;
  animation-delay:0s !important;
  transform-origin:50% 50%;
}

.mirage-fragment-a {
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 27%,rgba(0,0,0,.78) 38%,transparent 55%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 27%,rgba(0,0,0,.78) 38%,transparent 55%);
}

.mirage-fragment-b {
  -webkit-mask-image:linear-gradient(to bottom,transparent 16%,rgba(0,0,0,.7) 30%,#000 43%,#000 61%,rgba(0,0,0,.66) 72%,transparent 86%);
  mask-image:linear-gradient(to bottom,transparent 16%,rgba(0,0,0,.7) 30%,#000 43%,#000 61%,rgba(0,0,0,.66) 72%,transparent 86%);
}

.mirage-fragment-c {
  -webkit-mask-image:linear-gradient(to bottom,transparent 46%,rgba(0,0,0,.68) 60%,#000 73%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 46%,rgba(0,0,0,.68) 60%,#000 73%,#000 100%);
}

.mirage-whisper.vanishing .mirage-base {
  animation:mirage-core-flow .72s cubic-bezier(.2,.58,.18,1) forwards;
}

.mirage-whisper.vanishing .mirage-haze {
  animation:mirage-haze-flow .74s ease-out forwards;
}

.mirage-whisper.vanishing .mirage-fragment-a,
.mirage-whisper.vanishing .mirage-fragment-b,
.mirage-whisper.vanishing .mirage-fragment-c {
  animation-duration:.76s;
  animation-timing-function:cubic-bezier(.18,.58,.2,1);
  animation-delay:0s !important;
  animation-fill-mode:forwards;
}

.mirage-whisper.vanishing .mirage-fragment-a { animation-name:mirage-vapor-a; }
.mirage-whisper.vanishing .mirage-fragment-b { animation-name:mirage-vapor-b; }
.mirage-whisper.vanishing .mirage-fragment-c { animation-name:mirage-vapor-c; }

@keyframes mirage-core-flow {
  0% {
    opacity:.72;
    filter:blur(.05px);
    transform:translate3d(0,0,0) skewX(0deg) scaleX(1);
  }
  18% {
    opacity:.64;
    filter:blur(.25px);
    transform:translate3d(0,-1px,0) skewX(-.3deg) scaleX(1.002);
  }
  48% {
    opacity:.35;
    filter:blur(1.2px);
    transform:translate3d(1px,-6px,0) skewX(.8deg) scaleX(.997);
  }
  100% {
    opacity:0;
    filter:blur(4.5px);
    transform:translate3d(-2px,-22px,0) skewX(2deg) scaleX(.972);
  }
}

@keyframes mirage-vapor-a {
  0% {
    opacity:0;
    transform:translate3d(0,0,0) rotate(0deg) skewX(0deg) scaleX(1);
    filter:blur(.15px);
  }
  14% {
    opacity:.20;
  }
  34% {
    opacity:.29;
    transform:translate3d(-2px,-7px,0) rotate(-.35deg) skewX(-.8deg) scaleX(1.002);
    filter:blur(.55px);
  }
  64% {
    opacity:.16;
    transform:translate3d(3px,-27px,0) rotate(.8deg) skewX(1.7deg) scaleX(.982);
    filter:blur(2px);
  }
  100% {
    opacity:0;
    transform:translate3d(11px,-62px,0) rotate(2.4deg) skewX(4deg) scaleX(.94);
    filter:blur(6px);
  }
}

@keyframes mirage-vapor-b {
  0% {
    opacity:0;
    transform:translate3d(0,0,0) rotate(0deg) skewX(0deg) scaleX(1);
    filter:blur(.15px);
  }
  14% {
    opacity:.18;
  }
  35% {
    opacity:.27;
    transform:translate3d(1px,-8px,0) rotate(.25deg) skewX(.55deg) scaleX(1);
    filter:blur(.65px);
  }
  65% {
    opacity:.14;
    transform:translate3d(-4px,-30px,0) rotate(-.7deg) skewX(-1.5deg) scaleX(.986);
    filter:blur(2.2px);
  }
  100% {
    opacity:0;
    transform:translate3d(-9px,-69px,0) rotate(-2deg) skewX(-3.6deg) scaleX(.947);
    filter:blur(6.2px);
  }
}

@keyframes mirage-vapor-c {
  0% {
    opacity:0;
    transform:translate3d(0,0,0) rotate(0deg) skewX(0deg) scaleX(1);
    filter:blur(.1px);
  }
  14% {
    opacity:.15;
  }
  36% {
    opacity:.23;
    transform:translate3d(0,-5px,0) rotate(-.15deg) skewX(-.35deg) scaleX(1);
    filter:blur(.7px);
  }
  66% {
    opacity:.11;
    transform:translate3d(2px,-21px,0) rotate(.55deg) skewX(1.2deg) scaleX(.989);
    filter:blur(2px);
  }
  100% {
    opacity:0;
    transform:translate3d(7px,-54px,0) rotate(1.7deg) skewX(3deg) scaleX(.955);
    filter:blur(5.7px);
  }
}

@keyframes mirage-haze-flow {
  0% {
    opacity:.18;
    transform:scale(1.03,.98) skewX(.6deg);
    filter:blur(7px);
  }
  34% {
    opacity:.14;
    transform:scale(1.045,.97) skewX(.2deg);
    filter:blur(8px);
  }
  100% {
    opacity:0;
    transform:scale(1.08,.94) skewX(-.8deg);
    filter:blur(13px);
  }
}

/* Phantom atmosphere — deep spectral background */

:root {
  --phantom-strength:.16;
  --phantom-depth:1;
  --phantom-pointer-x:0px;
  --phantom-pointer-y:0px;
}

body > header,
body > main {
  position:relative;
  z-index:1;
}

.phantom-atmosphere {
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  opacity:var(--phantom-strength);
  transform:translate3d(var(--phantom-pointer-x),var(--phantom-pointer-y),0);
  transition:opacity 1.4s ease,transform 1.2s cubic-bezier(.22,.61,.36,1);
  background:
    radial-gradient(circle at 50% 18%,rgba(64,92,77,.018),transparent 42%),
    #070809;
}

.phantom-field,
.phantom-veil {
  position:absolute;
  inset:-28%;
  will-change:transform,opacity,filter;
}

.phantom-field {
  opacity:calc(.78 * var(--phantom-depth));
  filter:blur(118px) saturate(.66);
  mix-blend-mode:screen;
}

.phantom-field-a {
  background:
    radial-gradient(ellipse at 20% 32%,rgba(108,160,131,.11) 0%,rgba(73,119,96,.052) 24%,transparent 54%),
    radial-gradient(ellipse at 72% 70%,rgba(126,181,148,.045) 0%,transparent 47%);
  animation:phantom-field-a 46s ease-in-out infinite alternate;
}

.phantom-field-b {
  opacity:calc(.62 * var(--phantom-depth));
  filter:blur(150px) saturate(.58);
  background:
    radial-gradient(ellipse at 74% 22%,rgba(144,195,161,.075) 0%,rgba(87,131,106,.04) 25%,transparent 55%),
    radial-gradient(ellipse at 30% 78%,rgba(78,128,102,.06) 0%,transparent 45%);
  animation:phantom-field-b 59s ease-in-out infinite alternate;
}

.phantom-field-c {
  opacity:calc(.5 * var(--phantom-depth));
  filter:blur(175px) saturate(.52);
  background:
    radial-gradient(ellipse at 48% 48%,rgba(153,207,172,.05) 0%,rgba(82,132,105,.028) 32%,transparent 62%),
    radial-gradient(ellipse at 88% 58%,rgba(100,155,126,.035) 0%,transparent 40%);
  animation:phantom-field-c 71s ease-in-out infinite alternate;
}

.phantom-veil {
  inset:-8%;
  opacity:.055;
  filter:blur(4px);
  background:
    radial-gradient(circle at 18% 26%,rgba(220,238,229,.09) 0 1px,transparent 1.4px),
    radial-gradient(circle at 67% 62%,rgba(190,216,202,.07) 0 1px,transparent 1.35px),
    radial-gradient(circle at 82% 18%,rgba(215,232,223,.05) 0 1px,transparent 1.25px);
  background-size:210px 210px,285px 285px,340px 340px;
  animation:phantom-veil-drift 34s linear infinite;
}

body.phantom-low {
  --phantom-strength:.11;
  --phantom-depth:.72;
}

body.phantom-mid {
  --phantom-strength:.16;
  --phantom-depth:1;
}

body.phantom-high {
  --phantom-strength:.225;
  --phantom-depth:1.18;
}

body.effects-reduced .phantom-atmosphere {
  --phantom-strength:.08;
  transform:none !important;
}

body.effects-reduced .phantom-field,
body.effects-reduced .phantom-veil {
  animation-duration:120s !important;
}

body.effects-off .phantom-atmosphere {
  display:none !important;
}

@keyframes phantom-field-a {
  0% { transform:translate3d(-3%,-1%,0) scale(1.02,1.06) rotate(-1deg); }
  48% { transform:translate3d(1.5%,2.5%,0) scale(1.08,1.02) rotate(1deg); }
  100% { transform:translate3d(4%,-2%,0) scale(1.03,1.09) rotate(2deg); }
}

@keyframes phantom-field-b {
  0% { transform:translate3d(3%,-2%,0) scale(1.02,1.04) rotate(1deg); }
  52% { transform:translate3d(-2.5%,1%,0) scale(1.09,.99) rotate(-1.5deg); }
  100% { transform:translate3d(-1%,4%,0) scale(1.04,1.08) rotate(-2deg); }
}

@keyframes phantom-field-c {
  0% { transform:translate3d(-1%,3%,0) scale(1.04,.98) rotate(-1deg); }
  50% { transform:translate3d(3%,-2%,0) scale(1.1,1.05) rotate(1.5deg); }
  100% { transform:translate3d(-3%,1%,0) scale(1.05,1.1) rotate(0deg); }
}

@keyframes phantom-veil-drift {
  0% { transform:translate3d(0,0,0); }
  100% { transform:translate3d(-24px,14px,0); }
}

@media(max-width:700px) {
  .phantom-atmosphere {
    opacity:calc(var(--phantom-strength) * .82);
  }
  .phantom-field {
    filter:blur(96px) saturate(.6);
  }
}

/* Phantom atmosphere v2 — visible spectral depth without washing out black */

body.phantom-low {
  --phantom-strength:.19;
  --phantom-depth:.92;
}

body.phantom-mid {
  --phantom-strength:.27;
  --phantom-depth:1.08;
}

body.phantom-high {
  --phantom-strength:.36;
  --phantom-depth:1.28;
}

.phantom-field {
  filter:blur(88px) saturate(.78);
}

.phantom-field-a {
  background:
    radial-gradient(ellipse at 18% 30%,
      rgba(130,194,156,.22) 0%,
      rgba(85,145,113,.12) 18%,
      rgba(54,94,75,.055) 38%,
      transparent 61%),
    radial-gradient(ellipse at 70% 73%,
      rgba(138,205,164,.13) 0%,
      rgba(74,127,100,.055) 28%,
      transparent 54%);
}

.phantom-field-b {
  opacity:calc(.72 * var(--phantom-depth));
  filter:blur(108px) saturate(.72);
  background:
    radial-gradient(ellipse at 76% 18%,
      rgba(157,216,178,.17) 0%,
      rgba(94,151,119,.085) 22%,
      transparent 54%),
    radial-gradient(ellipse at 28% 80%,
      rgba(95,160,126,.13) 0%,
      rgba(59,103,81,.05) 30%,
      transparent 52%);
}

.phantom-field-c {
  opacity:calc(.62 * var(--phantom-depth));
  filter:blur(126px) saturate(.68);
  background:
    radial-gradient(ellipse at 48% 47%,
      rgba(168,221,183,.13) 0%,
      rgba(94,150,118,.065) 28%,
      transparent 58%),
    radial-gradient(ellipse at 91% 57%,
      rgba(112,181,141,.10) 0%,
      transparent 43%);
}

/* A nearer, softer phantom layer gives the haze recognizable shape. */
.phantom-atmosphere::before {
  content:"";
  position:absolute;
  inset:-22%;
  pointer-events:none;
  opacity:calc(.58 * var(--phantom-depth));
  mix-blend-mode:screen;
  filter:blur(66px) saturate(.7);
  background:
    radial-gradient(ellipse 18% 42% at 12% 52%,
      rgba(173,224,190,.16) 0%,
      rgba(100,165,129,.075) 38%,
      transparent 75%),
    radial-gradient(ellipse 25% 17% at 56% 12%,
      rgba(136,201,160,.13) 0%,
      rgba(73,126,99,.05) 45%,
      transparent 78%),
    radial-gradient(ellipse 22% 38% at 88% 67%,
      rgba(151,210,171,.14) 0%,
      rgba(79,137,106,.055) 40%,
      transparent 76%);
  animation:phantom-near-drift 38s ease-in-out infinite alternate;
}

.phantom-atmosphere::after {
  content:"";
  position:absolute;
  inset:-12%;
  pointer-events:none;
  opacity:calc(.28 * var(--phantom-depth));
  mix-blend-mode:screen;
  filter:blur(42px);
  background:
    radial-gradient(ellipse 9% 31% at 36% 70%,
      rgba(190,229,205,.12),
      rgba(109,171,136,.045) 48%,
      transparent 78%),
    radial-gradient(ellipse 11% 28% at 72% 34%,
      rgba(174,219,191,.10),
      rgba(91,149,117,.04) 48%,
      transparent 78%);
  animation:phantom-wisp-drift 51s ease-in-out infinite alternate;
}

@keyframes phantom-near-drift {
  0% {
    transform:translate3d(-2%,-1%,0) scale(1.00,1.08) rotate(-1deg);
  }
  47% {
    transform:translate3d(2.5%,2%,0) scale(1.08,.98) rotate(1.4deg);
  }
  100% {
    transform:translate3d(-1%,4%,0) scale(1.03,1.11) rotate(-.5deg);
  }
}

@keyframes phantom-wisp-drift {
  0% {
    transform:translate3d(1%,3%,0) scale(.96,1.03) rotate(.5deg);
  }
  50% {
    transform:translate3d(-3%,-1%,0) scale(1.08,1.08) rotate(-1.3deg);
  }
  100% {
    transform:translate3d(3%,-4%,0) scale(1.02,.96) rotate(1.6deg);
  }
}

body.effects-reduced .phantom-atmosphere {
  --phantom-strength:.12;
}

body.effects-reduced .phantom-atmosphere::before,
body.effects-reduced .phantom-atmosphere::after {
  animation-duration:120s !important;
  opacity:.22;
}

body.effects-off .phantom-atmosphere::before,
body.effects-off .phantom-atmosphere::after {
  display:none !important;
}

@media(max-width:700px) {
  body.phantom-low { --phantom-strength:.15; }
  body.phantom-mid { --phantom-strength:.21; }
  body.phantom-high { --phantom-strength:.28; }

  .phantom-field { filter:blur(76px) saturate(.72); }
  .phantom-atmosphere::before { filter:blur(58px) saturate(.66); }
}

/* Phantom atmosphere v2.1 — perceptible presence */

body.phantom-low .phantom-atmosphere {
  opacity:.34;
}

body.phantom-mid .phantom-atmosphere {
  opacity:.46;
}

body.phantom-high .phantom-atmosphere {
  opacity:.60;
}

.phantom-field-a {
  opacity:.88;
  filter:blur(74px) saturate(.82);
}

.phantom-field-b {
  opacity:.80;
  filter:blur(92px) saturate(.78);
}

.phantom-field-c {
  opacity:.68;
  filter:blur(110px) saturate(.72);
}

.phantom-atmosphere::before {
  opacity:.70;
  filter:blur(58px) saturate(.76);
}

.phantom-atmosphere::after {
  opacity:.42;
  filter:blur(36px);
}

.phantom-veil {
  opacity:.08;
}

body.effects-reduced .phantom-atmosphere {
  opacity:.13 !important;
}

@media(max-width:700px) {
  body.phantom-low .phantom-atmosphere { opacity:.25; }
  body.phantom-mid .phantom-atmosphere { opacity:.34; }
  body.phantom-high .phantom-atmosphere { opacity:.44; }
}

/* Phantom atmosphere v3 — animated canvas smoke */

.phantom-atmosphere {
  background:transparent !important;
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  mix-blend-mode:normal !important;
}

.phantom-atmosphere::before,
.phantom-atmosphere::after,
.phantom-field,
.phantom-veil {
  display:none !important;
}

.phantom-smoke-canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  opacity:.82;
  filter:blur(20px) saturate(.82);
  mix-blend-mode:screen;
  transform:scale(1.08);
  transform-origin:center;
  transition:opacity 1.2s ease, filter 1.2s ease;
}

body.phantom-low .phantom-smoke-canvas {
  opacity:.68;
  filter:blur(23px) saturate(.76);
}

body.phantom-mid .phantom-smoke-canvas {
  opacity:.88;
  filter:blur(20px) saturate(.84);
}

body.phantom-high .phantom-smoke-canvas {
  opacity:1;
  filter:blur(17px) saturate(.90);
}

body.effects-reduced .phantom-smoke-canvas {
  opacity:.34 !important;
  filter:blur(28px) saturate(.60) !important;
}

body.effects-off .phantom-smoke-canvas {
  display:none !important;
}

@media(max-width:700px) {
  .phantom-smoke-canvas {
    transform:scale(1.12);
  }
  body.phantom-low .phantom-smoke-canvas { opacity:.56; }
  body.phantom-mid .phantom-smoke-canvas { opacity:.72; }
  body.phantom-high .phantom-smoke-canvas { opacity:.84; }
}

/* Phantom atmosphere v3.1 — correct compositing plane */

html {
  background:#070809 !important;
}

body {
  background:transparent !important;
  position:relative;
  isolation:isolate;
}

.phantom-atmosphere {
  position:fixed !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
  background:#070809 !important;
}

body > header,
body > main {
  position:relative;
  z-index:2;
}

.phantom-smoke-canvas {
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  display:block;
  opacity:1 !important;
  filter:blur(8px) saturate(.9) !important;
  mix-blend-mode:screen;
  transform:scale(1.05);
  transform-origin:center;
}

body.phantom-low .phantom-smoke-canvas {
  opacity:.78 !important;
  filter:blur(10px) saturate(.82) !important;
}

body.phantom-mid .phantom-smoke-canvas {
  opacity:.94 !important;
  filter:blur(8px) saturate(.9) !important;
}

body.phantom-high .phantom-smoke-canvas {
  opacity:1 !important;
  filter:blur(6px) saturate(.96) !important;
}

body.effects-reduced .phantom-smoke-canvas {
  opacity:.34 !important;
  filter:blur(14px) saturate(.62) !important;
}

body.effects-off .phantom-atmosphere {
  display:none !important;
}

section,
.latest-wrap,
.archive-intro,
.archive-grid,
.thread-grid,
.unseen-stage,
.descent-shell,
.field-grid,
.contact-panel {
  background:transparent !important;
}

/* Phantom atmosphere v4 — SVG ghost smoke ribbons */

.phantom-smoke-canvas {
  display:none !important;
}

.phantom-smoke-svg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
  pointer-events:none;
  mix-blend-mode:screen;
}

.phantom-body,
.phantom-core {
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.phantom-body {
  stroke:rgba(112,185,142,.16);
  stroke-width:82;
}

.phantom-core {
  stroke:rgba(172,229,194,.11);
  stroke-width:24;
}

.phantom-ribbon {
  transform-box:fill-box;
  transform-origin:center;
  will-change:transform,opacity;
}

.phantom-ribbon-1 {
  animation:
    phantom-ribbon-one 34s ease-in-out infinite alternate,
    phantom-pulse-one 9s ease-in-out infinite;
}
.phantom-ribbon-2 {
  animation:
    phantom-ribbon-two 41s ease-in-out infinite alternate,
    phantom-pulse-two 12s ease-in-out infinite;
}
.phantom-ribbon-3 {
  animation:
    phantom-ribbon-three 47s ease-in-out infinite alternate,
    phantom-pulse-three 10.5s ease-in-out infinite;
}
.phantom-ribbon-4 {
  animation:
    phantom-ribbon-four 38s ease-in-out infinite alternate,
    phantom-pulse-four 13s ease-in-out infinite;
}

body.phantom-low .phantom-smoke-svg {
  opacity:.58;
}
body.phantom-mid .phantom-smoke-svg {
  opacity:.82;
}
body.phantom-high .phantom-smoke-svg {
  opacity:1;
}

@keyframes phantom-ribbon-one {
  0%   { transform:translate3d(-3%,-2%,0) rotate(-2deg) scale(1.02,1.08); }
  45%  { transform:translate3d(2%,3%,0) rotate(2.5deg) scale(1.08,.98); }
  100% { transform:translate3d(5%,-1%,0) rotate(-1deg) scale(1.01,1.12); }
}
@keyframes phantom-ribbon-two {
  0%   { transform:translate3d(3%,-4%,0) rotate(1deg) scale(.98,1.06); }
  50%  { transform:translate3d(-3%,2%,0) rotate(-2deg) scale(1.09,1.00); }
  100% { transform:translate3d(1%,5%,0) rotate(2deg) scale(1.03,1.10); }
}
@keyframes phantom-ribbon-three {
  0%   { transform:translate3d(-2%,4%,0) rotate(-1.5deg) scale(1.04,.98); }
  52%  { transform:translate3d(4%,-3%,0) rotate(2deg) scale(.98,1.10); }
  100% { transform:translate3d(-4%,1%,0) rotate(-.5deg) scale(1.08,1.02); }
}
@keyframes phantom-ribbon-four {
  0%   { transform:translate3d(1%,-5%,0) rotate(2deg) scale(1.02,1.06); }
  48%  { transform:translate3d(-4%,2%,0) rotate(-2.4deg) scale(1.10,.97); }
  100% { transform:translate3d(3%,4%,0) rotate(.7deg) scale(.99,1.11); }
}

@keyframes phantom-pulse-one {
  0%,100% { opacity:.28; }
  45% { opacity:.78; }
}
@keyframes phantom-pulse-two {
  0%,100% { opacity:.22; }
  55% { opacity:.68; }
}
@keyframes phantom-pulse-three {
  0%,100% { opacity:.18; }
  50% { opacity:.72; }
}
@keyframes phantom-pulse-four {
  0%,100% { opacity:.24; }
  42% { opacity:.64; }
}

body.effects-reduced .phantom-smoke-svg {
  opacity:.28 !important;
}
body.effects-reduced .phantom-ribbon {
  animation-duration:110s,110s !important;
}
body.effects-off .phantom-smoke-svg {
  display:none !important;
}

@media(max-width:700px) {
  .phantom-body { stroke-width:96; }
  .phantom-core { stroke-width:28; }
  body.phantom-low .phantom-smoke-svg { opacity:.44; }
  body.phantom-mid .phantom-smoke-svg { opacity:.64; }
  body.phantom-high .phantom-smoke-svg { opacity:.78; }
}


/* Phantom atmosphere v5 — volumetric plumes inspired by localized smoke reference */

.phantom-smoke-svg {
  display:none !important;
}

.phantom-atmosphere {
  position:fixed !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
  background:transparent !important;
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  mix-blend-mode:normal !important;
}

.phantom-smoke-canvas {
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  display:block !important;
  pointer-events:none;
  opacity:1 !important;
  filter:blur(3.5px) saturate(.92) contrast(1.06) !important;
  mix-blend-mode:screen;
  transform:scale(1.035);
  transform-origin:center;
}

body.phantom-low .phantom-smoke-canvas {
  opacity:.78 !important;
  filter:blur(4.5px) saturate(.84) contrast(1.04) !important;
}

body.phantom-mid .phantom-smoke-canvas {
  opacity:.92 !important;
  filter:blur(3.5px) saturate(.92) contrast(1.07) !important;
}

body.phantom-high .phantom-smoke-canvas {
  opacity:1 !important;
  filter:blur(2.5px) saturate(1) contrast(1.10) !important;
}

body.effects-reduced .phantom-smoke-canvas {
  opacity:.30 !important;
  filter:blur(8px) saturate(.62) !important;
}

body.effects-off .phantom-smoke-canvas {
  display:none !important;
}

html {
  background:#070809 !important;
}

body {
  background:transparent !important;
}

body > header,
body > main {
  position:relative;
  z-index:2;
}

@media(max-width:700px) {
  .phantom-smoke-canvas {
    transform:scale(1.08);
  }
  body.phantom-low .phantom-smoke-canvas { opacity:.62 !important; }
  body.phantom-mid .phantom-smoke-canvas { opacity:.78 !important; }
  body.phantom-high .phantom-smoke-canvas { opacity:.90 !important; }
}