/* Pass 3 — art direction: consequence, optical detail, and deliberate entrances */

:root {
  --ease-out: cubic-bezier(0.16, 0.84, 0.24, 1);
  --ease-switch: cubic-bezier(0.76, 0, 0.24, 1);
}

html {
  scrollbar-color: #a96b2d #090709;
  scrollbar-width: thin;
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #090709; }
::-webkit-scrollbar-thumb {
  border: 3px solid #090709;
  border-radius: 20px;
  background: linear-gradient(#f3a93d, #705c82);
}

::selection {
  color: #130c09;
  background: #ffd889;
  text-shadow: none;
}

.census ::selection,
.guide-doc ::selection {
  color: #fff0d3;
  background: #543b55;
}

body {
  font-kerning: normal;
  font-synthesis: none;
  font-optical-sizing: auto;
}

h1 { letter-spacing: -0.058em; }
h2 { letter-spacing: -0.047em; }
h3 { letter-spacing: -0.025em; }

.eyebrow,
.site-header,
.stage-caption,
.hero-index,
.ledger,
.specimen-meta dl,
.night-chart,
footer {
  font-variant-numeric: tabular-nums slashed-zero;
}

.eyebrow {
  line-height: 1.62;
  letter-spacing: 0.175em;
}

.dek,
.lead,
.apology-copy > p:not(.eyebrow),
.guide-copy p {
  hyphens: auto;
}

.site-header nav a,
.field-link,
footer a,
.guide-header a {
  transition:
    color 0.22s ease,
    background-color 0.22s ease,
    text-shadow 0.22s ease,
    transform 0.35s var(--ease-out);
}

.site-header nav a:hover,
.site-header nav a:focus-visible,
.field-link:hover,
.field-link:focus-visible,
footer a:hover,
footer a:focus-visible,
.guide-header a:hover,
.guide-header a:focus-visible {
  color: var(--amber2);
  text-shadow: 0 0 18px rgba(243, 169, 61, 0.36);
}

.field-link:hover,
.field-link:focus-visible { transform: translateX(5px); }

.porch-switch,
.inline-switch,
.specimen-row,
.dust-touch,
.final-switch {
  -webkit-tap-highlight-color: rgba(255, 216, 137, 0.2);
}

.switch-track,
.final-switch span,
.inline-switch {
  transition-timing-function: var(--ease-out);
}

.porch-switch:active .switch-track { transform: scale(0.94); }
.inline-switch:focus-visible { background: var(--amber); color: var(--deep); }
.inline-switch:focus-visible span { color: var(--deep); }

.specimen-row:active { transform: translateX(4px) scale(0.995); }

.dust {
  grid-template-columns: minmax(0, 1.12fr) minmax(310px, 0.88fr);
  min-height: 920px;
  background-image:
    radial-gradient(circle at 10% 48%, rgba(247, 191, 105, 0.09), transparent 24rem),
    radial-gradient(circle at 88% 17%, rgba(109, 83, 124, 0.19), transparent 23rem),
    repeating-linear-gradient(112deg, transparent 0 57px, rgba(228, 185, 124, 0.018) 58px 59px),
    linear-gradient(135deg, #1a110e, #0d0b0c 68%);
}

.dust-study {
  position: relative;
  min-width: 0;
  height: 670px;
  isolation: isolate;
  border: 1px solid rgba(239, 200, 145, 0.1);
  background:
    linear-gradient(90deg, rgba(239, 200, 145, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(239, 200, 145, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(246, 186, 94, 0.07), transparent 55%);
  background-size: 38px 38px, 38px 38px, auto;
  overflow: hidden;
}

.dust-study::before {
  content: "SPECIMEN SURFACE / UNTOUCHED";
  position: absolute;
  z-index: 5;
  top: 18px;
  left: 20px;
  color: #b99d7f;
  font: 7px var(--mono);
  letter-spacing: 0.13em;
  transition: color 0.35s ease;
}

.dust-study.touched::before {
  content: "TRACE DEPOSIT / 0.7 MG IMAGINED";
  color: #e2a950;
}

.dust-study .dust-texture {
  position: absolute;
  inset: 25px 18px 112px;
  height: auto;
  margin: 0;
  transform: rotate(-6deg) scale(1.07);
  transition: filter 0.9s ease;
}

.dust-study .dust-texture i {
  transform: translateY(var(--y, 0)) rotate(var(--tilt, 0deg));
  transform-origin: 50% 88%;
  transition:
    transform 1.05s var(--ease-out),
    filter 0.7s ease,
    opacity 0.7s ease;
}

.dust-study .dust-texture i:nth-child(1) { --tilt: -1deg; }
.dust-study .dust-texture i:nth-child(2) { --tilt: 1deg; }
.dust-study .dust-texture i:nth-child(3) { --tilt: -0.5deg; }
.dust-study .dust-texture i:nth-child(4) { --tilt: 0.8deg; }
.dust-study .dust-texture i:nth-child(5) { --tilt: -0.7deg; }

.dust-study.touched .dust-texture {
  filter: drop-shadow(16px 24px 25px rgba(0, 0, 0, 0.55)) saturate(0.82);
}

.dust-study.touched .dust-texture i:nth-child(1) { transform: translate(-7px, calc(var(--y, 0px) + 12px)) rotate(-5deg); }
.dust-study.touched .dust-texture i:nth-child(2) { transform: translate(-4px, calc(var(--y, 0px) + 3px)) rotate(-2deg); }
.dust-study.touched .dust-texture i:nth-child(3) { transform: translate(2px, calc(var(--y, 0px) + 17px)) rotate(2deg); filter: brightness(0.78); }
.dust-study.touched .dust-texture i:nth-child(4) { transform: translate(5px, calc(var(--y, 0px) + 5px)) rotate(3deg); }
.dust-study.touched .dust-texture i:nth-child(5) { transform: translate(9px, calc(var(--y, 0px) + 15px)) rotate(5deg); }

.fingerprint {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 45%;
  width: 190px;
  height: 245px;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 16px rgba(239, 169, 61, 0.22));
  transform: translate(-50%, -50%) rotate(-9deg) scale(0.82);
  transition: opacity 0.7s ease 0.18s, transform 1.1s var(--ease-out) 0.1s;
}

.fingerprint i {
  position: absolute;
  inset: calc(var(--ring, 0) * 13px);
  border: 2px solid rgba(255, 210, 139, 0.34);
  border-left-color: transparent;
  border-bottom-color: rgba(112, 83, 97, 0.3);
  border-radius: 48% 52% 45% 55% / 57% 53% 47% 43%;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 54% 68%, 0 91%);
}

.fingerprint i:nth-child(1) { --ring: 0; }
.fingerprint i:nth-child(2) { --ring: 1; }
.fingerprint i:nth-child(3) { --ring: 2; }
.fingerprint i:nth-child(4) { --ring: 3; }
.fingerprint i:nth-child(5) { --ring: 4; }
.fingerprint i:nth-child(6) { --ring: 5; }

.dust-study.touched .fingerprint {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-4deg) scale(1);
}

.dust-fall {
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.dust-fall span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: calc(var(--size) * 0.46);
  border-radius: 80% 20% 75% 25%;
  opacity: 0;
  background: var(--colour);
  box-shadow: 0 0 7px rgba(255, 194, 100, 0.4);
}

.dust-study.touched .dust-fall span {
  animation: scale-fall var(--duration) var(--delay) both cubic-bezier(0.2, 0.65, 0.35, 1);
}

.dust-touch {
  position: absolute;
  z-index: 8;
  left: 20px;
  right: 20px;
  bottom: 18px;
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  padding: 13px 18px;
  border: 1px solid rgba(243, 169, 61, 0.52);
  color: #f7e4c7;
  background: rgba(12, 9, 9, 0.88);
  backdrop-filter: blur(9px);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.35s var(--ease-out);
}

.dust-touch span {
  color: #e5a747;
  font: 7px var(--mono);
  letter-spacing: 0.13em;
}

.dust-touch b {
  grid-row: 2;
  font: 400 19px var(--serif);
  letter-spacing: -0.015em;
}

.dust-touch em {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: #aa917b;
  font: 8px var(--mono);
  font-style: normal;
  letter-spacing: 0.05em;
}

.dust-touch:hover,
.dust-touch:focus-visible {
  border-color: #ffd889;
  background: rgba(45, 28, 20, 0.94);
  transform: translateY(-3px);
}

.dust-touch:active { transform: translateY(1px) scale(0.995); }
.dust-study.touched .dust-touch { border-color: rgba(112, 92, 130, 0.85); }

.night-chart i { animation-play-state: running; }

.enhanced [data-enter] .dust-copy,
.enhanced [data-enter] .dust-study,
.enhanced [data-enter] .night-chart,
.enhanced [data-enter] .apology-copy,
.enhanced [data-enter] .apology-number,
.enhanced [data-enter] .final-switch {
  opacity: 1;
  transform: none;
}

body.moon .dust-study {
  background:
    linear-gradient(90deg, rgba(198, 209, 235, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(198, 209, 235, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(166, 180, 217, 0.08), transparent 55%);
  background-size: 38px 38px, 38px 38px, auto;
}

body.moon .dust-touch {
  border-color: rgba(183, 194, 221, 0.5);
  background: rgba(7, 10, 17, 0.9);
}

body.moon .dust-touch span { color: #b8c2dd; }

.guide-shell .guide-header span { font-variant-numeric: tabular-nums; }
.guide-shell .guide-hero h1 { letter-spacing: -0.064em; }
.guide-shell .guide-copy h2 { letter-spacing: -0.05em; }
.guide-shell .guide-copy p { text-wrap: pretty; }
.guide-shell .token { letter-spacing: 0.04em; }
.guide-shell .guide-index a:focus-visible { outline-color: #654356; }
.guide-shell .guide-doc::before { content: "FIELD METHODS / REVISION 03 / DUST STUDY"; }

@keyframes scale-fall {
  0% { opacity: 0; transform: translate3d(0, -8px, 0) rotate(0); }
  12% { opacity: 0.92; }
  72% { opacity: 0.64; }
  100% { opacity: 0; transform: translate3d(var(--drift), 190px, 0) rotate(var(--spin)); }
}

@media (max-width: 950px) {
  .dust {
    grid-template-columns: 1.02fr 0.98fr;
    gap: 4vw;
  }

  .dust-study { height: 600px; }
  .dust-touch { grid-template-columns: 1fr; }
  .dust-touch em { display: none; }
}

@media (max-width: 600px) {
  h1 { letter-spacing: -0.062em; }
  h2 { letter-spacing: -0.052em; }

  .dust {
    display: flex;
    flex-direction: column;
    gap: 62px;
  }

  .dust-study {
    order: 2;
    height: 500px;
    margin: 0;
  }

  .dust-copy { order: 1; }

  .dust-study .dust-texture {
    inset: 25px 10px 105px;
    transform: rotate(-5deg) scale(1.04);
  }

  .fingerprint {
    top: 43%;
    width: 145px;
    height: 190px;
  }

  .dust-touch {
    left: 12px;
    right: 12px;
    bottom: 12px;
    min-height: 78px;
    padding-inline: 14px;
  }

  .dust-touch b { font-size: 18px; }
  .guide-shell .guide-hero h1 { letter-spacing: -0.058em; }
}

@media (prefers-reduced-motion: reduce) {
  .enhanced [data-enter] .dust-copy,
  .enhanced [data-enter] .dust-study,
  .enhanced [data-enter] .night-chart,
  .enhanced [data-enter] .apology-copy,
  .enhanced [data-enter] .apology-number,
  .enhanced [data-enter] .final-switch {
    opacity: 1;
    transform: none;
  }

  .dust-study.touched .dust-fall span { animation: none; }
  .dust-study .dust-texture i { transition: none; }
}