/* ============================================================
   23AG — Studies (fullscreen). Vertical scroll-snap slideshow of
   the Lab studies, in the site's amber/dark language with a
   difference cursor. Self-contained.
   ============================================================ */

@font-face {
  font-family: "Delight";
  src: url("../fonts/Delight-Black.woff2") format("woff2"),
       url("../fonts/Delight-Black.ttf") format("truetype");
  font-weight: 900; font-display: swap;
}
@font-face {
  font-family: "DxBurst";
  src: url("../fonts/Dx-Burst/Dx Burst/DxBurst-Regular.otf") format("opentype");
  font-weight: normal; font-display: swap;
}

:root {
  --bg: #0c0b09;
  --amber: #e8e80c;
  --offwhite: #f0ede8;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--offwhite);
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
@media (hover: hover) and (pointer: fine) { body, a { cursor: none; } }
a { color: inherit; text-decoration: none; }
img, video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* difference cursor */
.cursor {
  position: fixed; top: 0; left: 0; width: 48px; height: 48px; margin: -24px 0 0 -24px;
  border-radius: 50%; background: var(--offwhite); mix-blend-mode: difference;
  pointer-events: none; z-index: 9999; transform: translate(-100px, -100px);
}
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* nav */
.s-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.4rem clamp(1.2rem, 3vw, 2.4rem); mix-blend-mode: difference; color: #fff;
}
.s-nav a { font-family: "DxBurst", cursive; font-size: clamp(2.4rem, 5vw, 4.5rem); letter-spacing: 0.03em; line-height: 1; }

/* scroll-snap stage */
.s-stage { height: 100svh; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; }
.s-stage::-webkit-scrollbar { display: none; }

.s-slide {
  position: relative; height: 100svh; overflow: hidden; isolation: isolate;
  scroll-snap-align: start; display: flex; align-items: flex-end;
}
.s-slide__media { position: absolute; inset: 0; z-index: 0; }

/* cohesive wash */
.s-slide::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(12,11,9,0.92), rgba(12,11,9,0.05) 55%),
    radial-gradient(120% 80% at 80% 6%, color-mix(in srgb, var(--accent, #e8e80c) 16%, transparent), transparent 55%);
}
.s-slide::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url("../assets/textures/grain.jpg") repeat; background-size: 360px;
  mix-blend-mode: screen; opacity: 0.07;
}

/* info */
.s-info { position: relative; z-index: 2; padding: clamp(1.4rem, 5vw, 4rem); max-width: 90%; }
.s-num { font-family: "DxBurst", cursive; font-size: clamp(2rem, 5vw, 4rem); color: var(--accent, #e8e80c); line-height: 1; }
.s-title { font-family: "Delight", sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.88; font-size: clamp(3rem, 13vw, 11rem); color: var(--offwhite); margin: 0.3rem 0 0.8rem; }
.s-tag { font-family: "Delight", sans-serif; font-weight: 900; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(240,237,232,0.6); }

/* image slide — amber duotone */
.s-slide--image .s-slide__media img {
  filter: grayscale(1) brightness(0.6) contrast(1.05) sepia(0.55) saturate(2.2) hue-rotate(var(--tint, -14deg));
  transform: scale(1.04);
}

/* terminal — amber CRT (dev) */
.s-slide--terminal .s-slide__media {
  background: #0c0b09;
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.5) 2px 3px);
}
.s-term {
  position: absolute; inset: 0; padding: clamp(2rem, 7vw, 6rem) clamp(1.4rem, 5vw, 4rem);
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: clamp(0.85rem, 1.6vw, 1.2rem); line-height: 1.8; color: #eca838;
  text-shadow: 0 0 8px rgba(236,168,56,0.45); white-space: pre-wrap;
}

/* press — halftone + Times headline */
.s-slide--press .s-slide__media {
  background: #100f0b; background-image: url("../assets/textures/halftone.png");
  background-size: 380px; background-blend-mode: soft-light;
}
.s-press { position: absolute; inset: 0; padding: clamp(2rem, 7vw, 6rem) clamp(1.4rem, 5vw, 4rem); }
.s-press__kicker { display: block; font-family: "Delight", sans-serif; font-weight: 900; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); border-bottom: 1px solid rgba(240,237,232,0.25); padding-bottom: 0.7rem; }
.s-press__head { margin-top: 1.4rem; max-width: 16ch; font-family: "Times New Roman", Georgia, serif; font-weight: 700; font-size: clamp(2rem, 6vw, 5rem); line-height: 1.02; color: var(--offwhite); }

/* signal — grunge video */
.s-slide--signal .s-slide__media video {
  filter: grayscale(1) brightness(0.7) contrast(1.15) sepia(0.5) saturate(2) hue-rotate(-12deg);
}

/* progress dots */
.s-dots { position: fixed; right: clamp(1rem, 2.5vw, 2rem); top: 50%; transform: translateY(-50%); z-index: 100; display: flex; flex-direction: column; gap: 0.7rem; mix-blend-mode: difference; }
.s-dots button { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #fff; background: transparent; cursor: none; padding: 0; }
.s-dots button.is-active { background: #fff; }

@media (max-width: 640px) {
  .s-dots { display: none; }
}