/* =========================================================================
   Midnight Research — landing page
   Structure/feel faithfully recreated from the (deprecated) 0xVentures.org
   single-page layout: one fixed full-viewport background video, a dark
   content gradient for legibility, a right-side vertical nav, big left
   headline, full-height scroll sections. All copy + branding are original.

   Scene geometry (video box, poster crop, moon-engrave position/size) is
   computed in main.js from measured moon coordinates — the CSS here only
   styles those elements, it never positions the engrave.
   ========================================================================= */

/* ----- Design tokens ----------------------------------------------------- */
:root {
  --bg:            #1e2833;            /* slate base                          */
  --bg-deep:       #0a0c0d;            /* near-black (gradients / cards)      */
  --ink:           rgba(255,255,255,.87);
  --ink-soft:      rgba(255,255,255,.60);
  --ink-faint:     rgba(255,255,255,.38);
  --link:          #4e738f;            /* steel blue                          */
  --accent:        #fbb583;            /* copper — pulled from the fragments  */
  --accent-deep:   #d98d55;            /* embered copper                      */
  --card:          rgba(30,40,51,.38);
  --card-strong:   rgba(30,40,51,.87);
  --space-shadow:  -3px 3px 3px rgba(0,0,0,.25);
  --ease:          all .4s ease;
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
}

/* ----- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure { margin: 0; }
ul[role=list] { list-style: none; padding: 0; margin: 0; }

html {
  background-color: var(--bg);
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-text-size-adjust: 100%;
  font: normal normal 400 20px/1.25 "Source Sans 3", "Source Sans Pro",
        ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: var(--ink);
  scroll-behavior: smooth;
}
html, body { width: auto; margin: 0; padding: 0; }
body {
  position: relative;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}
img, picture { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; }
a { transition: var(--ease); color: var(--link); text-decoration: none; }
a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ----- Typography scale -------------------------------------------------- */
h1, .title-large { font-size: 1.7rem; line-height: 2rem;   font-weight: 700; }
h2, .title1      { font-size: 1.5rem; line-height: 1.9rem; font-weight: 300; margin-bottom: 1rem; }
h3, .title2      { font-size: 1.1rem; line-height: 1.5rem; font-weight: 300; }
p, .body1        { font-size: .9rem;  line-height: 1.4rem; font-weight: 400; text-shadow: 1px 1px 1px rgba(0,0,0,.25); }
p + p            { margin-top: 1rem; }
.body2           { font-size: .8rem;  line-height: 1.1rem; font-weight: 300; }
@media (min-width: 1000px) {
  h2, .title1 { font-size: 1.9rem; line-height: 2.4rem; max-width: 26ch; }
}

.slogan {
  font-size: 2.9rem;
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -.015em;
  text-align: left;
  text-shadow: var(--space-shadow);
  margin-bottom: 1.75rem;
  max-width: 16ch;
}
@media (min-width: 600px)  { .slogan { font-size: 3.6rem; } }
@media (min-width: 1000px) { .slogan { font-size: 4.4rem; } }

/* The two words the whole site is named for — let them smoulder. */
.slogan__accent {
  font-style: normal;
  color: var(--accent);
  text-shadow: var(--space-shadow), 0 0 32px rgba(251, 141, 60, .28);
}

.lead { max-width: 38ch; }

/* Quiet copper emphasis inside body copy. */
.em-quiet { font-style: normal; color: rgba(251, 181, 131, .88); }

.space-shadow { text-shadow: var(--space-shadow); }
.eyebrow {
  font-size: .75rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin-bottom: 1.1rem;
  text-shadow: var(--space-shadow);
}
.eyebrow::before {
  content: ""; display: inline-block; width: 1.75rem; height: 1px;
  background: var(--accent); opacity: .65;
  margin-right: .75rem; vertical-align: .22em;
}

/* ----- Fixed background scene (poster paints first, video fades in) ------ */
.back-video-wrapper {
  position: fixed; inset: 0;
  width: 100%; height: 100vh; height: 100svh;
  overflow: hidden;
  background-color: var(--bg);
  background-repeat: no-repeat;
}
.back-video {
  position: absolute; top: 0; left: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.video-live .back-video { opacity: 1; }
@media (prefers-reduced-motion) { .back-video { display: none; } }

/* Readability gradient (over the video, behind the content).
   Mobile: bottom-weighted so the moon owns the top of the screen.
   Desktop: left-weighted beside the moon. */
.content-gradient {
  position: fixed; top: 0; bottom: 0; left: 0; width: 100%;
  background: linear-gradient(180deg,
              rgba(10,12,13,.30) 0%, rgba(10,12,13,0) 26%,
              rgba(10,12,13,0) 42%, rgba(10,12,13,.74) 78%,
              rgba(10,12,13,.80) 100%);
  pointer-events: none; z-index: 1;
}
/* Past the hero on small screens, dim the whole scene so copy stays legible
   wherever the moon is behind it. */
.content-gradient::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(10, 12, 13, .58);
  opacity: 0; transition: opacity .6s ease;
}
body.is-scrolled .content-gradient::after { opacity: 1; }
@media (min-width: 600px) {
  .content-gradient::after { display: none; }
}
@media (min-width: 600px) {
  .content-gradient {
    width: 42rem;
    background: linear-gradient(270deg,
                rgba(10,12,13,0) 0%, rgba(10,12,13,.6) 50%, rgba(10,12,13,.6) 100%);
  }
}
@media (min-width: 1000px) { .content-gradient { width: 46rem; } }

/* ----- "Midnight Research" burnt into the moon ---------------------------
   Positioned and sized entirely by main.js (left/top/font-size), anchored
   to the measured moon face. Burn-in: blurred + transparent until the
   scene reveals, then the mark sharpens into the surface. ----------------- */
.moon-engrave {
  position: fixed; z-index: 1; pointer-events: none;
  transform: translate(-50%, -50%) rotate(-8deg);
  display: flex; flex-direction: column; align-items: center; gap: .14em;
  text-transform: uppercase; line-height: 1;
  color: rgba(14, 11, 18, .85);
  mix-blend-mode: overlay;
  text-shadow:
    .02em .05em .02em rgba(255, 255, 255, .42),
    -.01em -.035em .04em rgba(0, 0, 0, .70),
    0 0 .09em rgba(0, 0, 0, .38);
  opacity: 0; filter: blur(8px);
  transition: opacity 1.6s ease .6s, filter 1.6s ease .6s;
}
body.is-revealed .moon-engrave.moon-engrave--placed { opacity: 1; filter: blur(0); }
body.is-scrolled .moon-engrave.moon-engrave--placed,
body.is-scrolled .moon-engrave {
  opacity: 0; filter: blur(4px);
  transition-delay: 0s; transition-duration: .6s;
}
body:not(.js) .moon-engrave { display: none; }
.moon-engrave__l1 { font-family: "Jost", sans-serif; font-weight: 500; letter-spacing: .16em; font-size: 1em; }
.moon-engrave__l2 { font-family: "Jost", sans-serif; font-weight: 400; letter-spacing: .46em; padding-left: .46em; font-size: .431em; }

/* ----- Loading screen (pulsing wordmark) -------------------------------- */
.loading-screen {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 50% 40%, var(--bg) 0%, var(--bg-deep) 100%);
  transition: opacity .6s ease, visibility .6s ease;
}
.loading-screen--hidden { opacity: 0; visibility: hidden; }
.loading-screen__lockup {
  position: relative; display: flex; align-items: center; justify-content: center;
  animation: breathe 2.6s ease-in-out infinite;
}
.loading-screen__zx {
  position: absolute; width: 150px; opacity: .16;
  filter: drop-shadow(0 0 26px rgba(251,181,131,.35)); z-index: 1;
}
.loading-screen__mark {
  position: relative; z-index: 2; align-items: center; text-align: center;
}
@keyframes breathe { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
@media (prefers-reduced-motion) { .loading-screen { display: none; } }

/* ----- Top nav (mobile) --------------------------------------------------
   Transparent scrim over the moon; the wordmark stays hidden while the
   engrave is on screen, then fades in once you scroll past the hero. ----- */
.top-nav {
  position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 3rem;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1rem;
  background: linear-gradient(180deg, rgba(10,12,13,.50) 0%, rgba(10,12,13,0) 100%);
  transition: background-color .5s ease;
}
.top-nav__mark {
  line-height: 1;
  opacity: 0; transform: translateY(-4px);
  transition: opacity .5s ease, transform .5s var(--ease-out-expo);
}
body.is-scrolled .top-nav__mark,
body.nav-open .top-nav__mark,
body:not(.js) .top-nav__mark { opacity: 1; transform: none; }
body.is-scrolled .top-nav,
body.nav-open .top-nav { background: rgba(16, 21, 27, .88); }
.top-nav__mark .wordmark__mid { font-size: .95rem; letter-spacing: .2em; }
.top-nav__mark .wordmark__res { font-size: .42rem; letter-spacing: .34em; padding-left: .34em; margin-top: .14rem; }
.nav-toggle {
  display: inline-flex; background: none; border: 0; cursor: pointer;
  color: var(--ink-soft); font-size: .7rem; letter-spacing: .15em;
  text-transform: uppercase; padding: .5rem;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
@media (min-width: 1000px) { .top-nav { display: none; } }

/* ----- Side nav (desktop) ------------------------------------------------ */
.side-nav-gradient {
  position: fixed; right: 0; top: 0; bottom: 0; width: 12rem; z-index: 90;
  background: linear-gradient(270deg,
              rgba(10,12,13,.6) 0%, rgba(10,12,13,.6) 50%, rgba(10,12,13,0) 100%);
  pointer-events: none; display: none;
}
@media (min-width: 1000px) { .side-nav-gradient { display: block; } }

.side-nav-wrapper {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  display: none; flex-flow: column nowrap;
  align-items: flex-end; justify-content: center;
  padding-right: 1rem;
}
@media (min-width: 1000px) { .side-nav-wrapper { display: flex; } }

/* Mobile open state: full overlay */
.side-nav-wrapper--open {
  display: flex; align-items: flex-end; justify-content: flex-start;
  top: 3rem; left: 0; padding: 1.5rem 1rem;
  background-color: rgba(0,0,0,.92);
}
.side-nav { display: flex; flex-flow: column; align-items: flex-end; width: 11rem; }
.side-nav-wrapper--open .side-nav { width: 100%; }

.side-nav__btn {
  font-size: 1.1rem; line-height: 1.5rem; font-weight: 300;
  color: var(--ink-soft); text-shadow: var(--space-shadow);
  text-align: right; white-space: nowrap; padding: .5rem 1rem; width: 100%;
  position: relative;
}
.side-nav__btn::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: .45rem; height: 1px; background: var(--accent);
  opacity: 0; transform: scaleX(.4); transform-origin: right;
  transition: opacity .35s ease, transform .35s var(--ease-out-expo);
}
.side-nav__btn:hover, .side-nav__btn--active { color: var(--ink); }
.side-nav__btn--active::after { opacity: 1; transform: none; }

.side-nav__wordmark {
  margin-bottom: 1.25rem; line-height: 1; padding: 0 1rem;
  align-items: flex-end;
}
.side-nav__wordmark .wordmark__mid { font-size: 1.05rem; letter-spacing: .18em; }
.side-nav__wordmark .wordmark__res { font-size: .46rem; letter-spacing: .3em; padding-left: 0; margin-top: .16rem; }

/* ----- Sections / content ------------------------------------------------ */
main { position: relative; z-index: 2; }

.section { position: relative; min-width: 100%; }
@media (min-width: 1000px) {
  .section {
    display: flex; flex-flow: column nowrap; align-items: flex-start;
    min-height: 100vh; justify-content: center; padding-right: 12rem;
  }
}

/* Hero: on mobile the moon owns the top — copy settles at the bottom. */
.section--first {
  display: flex; flex-flow: column nowrap; align-items: flex-start;
  min-height: 100vh; min-height: 100svh; justify-content: flex-end;
}
.section--first .content { padding: 8rem 1.25rem 4.5rem; }
@media (min-width: 1000px) {
  .section--first { justify-content: center; }
  .section--first .content { padding: 4rem 4rem 8rem; }
}

.content {
  position: relative; max-width: 100%; width: 38rem;
  padding: 8rem 1.25rem 8rem;
}
@media (min-width: 1000px) { .content { padding: 4rem 4rem 8rem; } }
.content--wide { width: 57rem; }

/* ----- Choreography ------------------------------------------------------
   Hero copy fades up once the poster has painted; section content fades up
   as it scrolls into view. All gated behind body.js so no-JS still reads. */
body.js .section--first .content > * {
  opacity: 0; transform: translateY(26px);
  transition: opacity .9s var(--ease-out-expo), transform .9s var(--ease-out-expo);
}
body.js.is-revealed .section--first .content > * { opacity: 1; transform: none; }
body.js.is-revealed .section--first .content > :nth-child(1) { transition-delay: .15s; }
body.js.is-revealed .section--first .content > :nth-child(2) { transition-delay: .38s; }
body.js.is-revealed .section--first .content > :nth-child(3) { transition-delay: 1s; }

body.js .section:not(.section--first) .content > * {
  opacity: 0; transform: translateY(26px);
  transition: opacity .8s var(--ease-out-expo), transform .8s var(--ease-out-expo);
}
body.js .section .content.in-view > * { opacity: 1; transform: none; }
body.js .section .content.in-view > :nth-child(2) { transition-delay: .09s; }
body.js .section .content.in-view > :nth-child(3) { transition-delay: .18s; }
body.js .section .content.in-view > :nth-child(4) { transition-delay: .27s; }
body.js .section .content.in-view > :nth-child(5) { transition-delay: .36s; }

/* ----- Scroll cue --------------------------------------------------------- */
.scroll-cue {
  display: flex; align-items: center; gap: .8rem;
  margin-top: 2.6rem;
}
.scroll-cue__line {
  width: 2.6rem; height: 1px; background: var(--ink-faint);
  position: relative; overflow: hidden;
}
.scroll-cue__line::after {
  content: ""; position: absolute; inset: 0;
  background: var(--accent);
  transform: translateX(-100%);
  animation: cue-sweep 2.8s var(--ease-out-expo) infinite;
}
@keyframes cue-sweep {
  0% { transform: translateX(-100%); }
  55% { transform: translateX(0); }
  100% { transform: translateX(102%); }
}
.scroll-cue__label {
  font-size: .6rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--ink-faint); text-shadow: var(--space-shadow);
}
body.is-scrolled .scroll-cue { opacity: 0; transition: opacity .5s ease; }

/* ----- Portfolio logos --------------------------------------------------- */
.logos { display: flex; flex-flow: row wrap; gap: 1.6rem 2.2rem; align-items: center; margin-top: 1.5rem; }
.logos__logo {
  height: 32px; width: auto; max-width: 150px; object-fit: contain;
  opacity: .88;
  transition: opacity .35s ease, transform .35s var(--ease-out-expo);
}
.logos__logo:hover { opacity: 1; transform: translateY(-2px); }
.logos__logo--invert { filter: invert(1) brightness(1.7); }
.logos__logo--bright { filter: brightness(1.8) contrast(1.05); }
.logos__text {
  font-size: 1.15rem; font-weight: 600; letter-spacing: .03em;
  color: rgba(255, 255, 255, .8);
}

/* ----- Wordmark — MIDNIGHT dissolves into the night; Research = ghost copper */
.wordmark { display: inline-flex; flex-direction: column; line-height: 1; }
.wordmark__mid {
  font-family: "Jost", sans-serif; font-weight: 300; text-transform: uppercase;
  letter-spacing: .16em;
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 42%,
              rgba(255,255,255,.16) 84%, rgba(255,255,255,0) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.wordmark__res {
  font-family: "Jost", sans-serif; font-weight: 200; text-transform: uppercase;
  color: rgba(251,181,131,.42); letter-spacing: .5em; padding-left: .5em;
  filter: blur(.4px); text-shadow: 0 0 14px rgba(251,181,131,.30);
  margin-top: .3rem;
}
/* Softer fade at small sizes (nav, top bar) so it stays legible */
.wordmark--soft .wordmark__mid {
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 58%,
              rgba(255,255,255,.55) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.wordmark--soft .wordmark__res { color: rgba(251,181,131,.62); filter: none; }

/* ----- Portfolio clusters ------------------------------------------------ */
.folio { display: flex; flex-flow: column; gap: 2.25rem; margin-top: 1.75rem; }
.folio__label {
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: .75rem; text-shadow: var(--space-shadow);
}
.folio__label::before {
  content: ""; display: inline-block; width: 1.1rem; height: 1px;
  background: var(--ink-faint); margin-right: .6rem; vertical-align: .22em;
}
.folio .logos { margin-top: 0; }

/* ----- Contact email CTA -------------------------------------------------- */
.contact-cta {
  display: inline-block; margin-top: .75rem;
  font-family: "Jost", sans-serif; font-weight: 300;
  font-size: clamp(1rem, 5.6vw, 1.45rem); letter-spacing: .03em;
  overflow-wrap: anywhere;
  color: var(--accent);
  text-shadow: var(--space-shadow);
  padding-bottom: .3rem;
  background-image: linear-gradient(90deg, var(--accent-deep), var(--accent));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 1px;
  transition: background-size .5s var(--ease-out-expo), color .4s ease,
              text-shadow .4s ease;
}
.contact-cta:hover {
  color: var(--accent);
  background-size: 100% 1px;
  text-shadow: var(--space-shadow), 0 0 28px rgba(251, 141, 60, .35);
}
@media (min-width: 1000px) { .contact-cta { font-size: 1.9rem; } }

/* ----- Footer note ------------------------------------------------------- */
.fine-print {
  font-size: .7rem; color: var(--ink-faint); margin-top: 2.5rem;
  text-shadow: var(--space-shadow);
}