/* ═══════════════════════════════════════════════════════
   Existential OS — Brand Guidelines
   ═══════════════════════════════════════════════════════ */

/* ── Brand Tokens ── */

:root {
  /* Color */
  --eos-black: #1B1816;
  --eos-dark-80: #3B3732;
  --eos-dark-60: #5E5850;
  --eos-mid: #7A746B;
  --eos-light-40: #A09A90;
  --eos-light-20: #C8C2B8;
  --eos-white: #F2EDE7;

  /* Typography — Families */
  --eos-font-family: 'PP Fragment';
  --eos-display-face: 'PP Fragment Glare', serif;
  --eos-brand-abbrev-face: 'PP Fragment Serif', serif;
  --eos-body-face: 'PP Fragment Text', serif;
  --eos-functional-face: 'PP Fragment Sans', sans-serif;

  /* Typography — Display (dramatically larger, PP Fragment feel) */
  --eos-display-weight-dark-bg: 300;
  --eos-display-weight-light-bg: 400;
  --eos-display-size-hero: clamp(56px, 10vw, 140px);
  --eos-display-size-section: clamp(36px, 5vw, 72px);
  --eos-display-size-subsection: clamp(28px, 3.5vw, 48px);
  --eos-display-line-height: 1.15;
  --eos-display-letter-spacing: 0.03em;

  /* Typography — Brand Abbreviation */
  --eos-brand-abbrev-weight: 400;

  /* Typography — Body (larger, wider) */
  --eos-body-weight: 400;
  --eos-body-size: clamp(17px, 1.4vw, 22px);
  --eos-body-line-height: 1.65;
  --eos-body-max-width: 960px;

  /* Typography — Functional */
  --eos-functional-weight: 300;
  --eos-functional-weight-interactive: 500;
  --eos-functional-size: 14px;
  --eos-functional-size-small: 12px;

  /* Spacing (wider column, less margin) */
  --eos-margin-min-percent: 8%;
  --eos-content-max-width: 960px;
  --eos-section-gap: 120px;
  --eos-paragraph-gap: 1.5em;
  --eos-orb-max-width: 900px;
}


/* ── Font Faces ── */

@font-face {
  font-family: 'PP Fragment Glare';
  src: url('assets/fonts/PPFragment-GlareLight.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Fragment Glare';
  src: url('assets/fonts/PPFragment-GlareLightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'PP Fragment Glare';
  src: url('assets/fonts/PPFragment-GlareRegular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Fragment Serif';
  src: url('assets/fonts/PPFragment-SerifRegular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Fragment Text';
  src: url('assets/fonts/PPFragment-TextRegular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Fragment Text';
  src: url('assets/fonts/PPFragment-TextRegularItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'PP Fragment Sans';
  src: url('assets/fonts/PPFragment-SansRegular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Fragment Sans';
  src: url('assets/fonts/PPFragment-SansLight.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* ── Reset & Base ── */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--eos-black);
  color: var(--eos-white);
  font-family: var(--eos-body-face);
  font-weight: var(--eos-body-weight);
  font-size: var(--eos-body-size);
  line-height: var(--eos-body-line-height);
}


/* ── Section Layout — Base ── */

.section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Full-bleed Astral background */
.section__bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  pointer-events: none;
}

.section__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: breathe 10s ease-in-out infinite;
}

/* Content overlay */
.section__content {
  position: relative;
  z-index: 1;
  max-width: var(--eos-content-max-width);
  width: 100%;
}


/* ── Type A — Text Sections (clean dark field) ── */

.section--text {
  padding: 24vh var(--eos-margin-min-percent);
  background-color: var(--eos-black);
  /* NO min-height — height driven by content */
}

/* Scroll-triggered text reveal */
.section--text .section__content {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.section--text .section__content.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ── Type B — Astral Breath Sections (visual breathing moments) ── */

.section--astral {
  min-height: 100vh;
  background-color: var(--eos-black);
}

.section--astral .section__overlay-title {
  position: relative;
  z-index: 2;
  font-family: var(--eos-display-face);
  font-weight: var(--eos-display-weight-dark-bg);
  font-size: var(--eos-display-size-section);
  line-height: var(--eos-display-line-height);
  letter-spacing: var(--eos-display-letter-spacing);
  text-align: center;
}

/* Edge gradients — smooth transitions between astral images and dark field */
.section--astral::before,
.section--astral::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 25%;
  z-index: 1;
  pointer-events: none;
}

.section--astral::before {
  top: 0;
  background: linear-gradient(to bottom, var(--eos-black), transparent);
}

.section--astral::after {
  bottom: 0;
  background: linear-gradient(to bottom, transparent, var(--eos-black));
}


/* ── Type C — Hero Section (display spectacle) ── */

.section--hero {
  min-height: 100vh;
  margin-bottom: 20vh;
  padding: 10vh var(--eos-margin-min-percent);
  text-align: center;
}

/* Hero bottom fade — no top fade needed */
.section--hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 25%;
  background: linear-gradient(to bottom, transparent, var(--eos-black));
  z-index: 1;
  pointer-events: none;
}


/* ── Breathing Animation ── */

@keyframes breathe {
  0%, 100% { transform: scale(1.0); }
  50% { transform: scale(1.02); }
}

.section__bg img.paused {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .section__bg img {
    animation: none;
  }
}


/* ── Typography ── */

.display {
  font-family: var(--eos-display-face);
  font-weight: var(--eos-display-weight-dark-bg);
  line-height: var(--eos-display-line-height);
  letter-spacing: var(--eos-display-letter-spacing);
}

.display--hero {
  font-size: var(--eos-display-size-hero);
}

.display--section {
  font-size: var(--eos-display-size-section);
}

.display--subsection {
  font-size: var(--eos-display-size-subsection);
}

.display--light-bg {
  font-weight: var(--eos-display-weight-light-bg);
}

.brand-abbrev {
  font-family: var(--eos-brand-abbrev-face);
  font-weight: var(--eos-brand-abbrev-weight);
  letter-spacing: 0.05em;
  line-height: var(--eos-display-line-height);
}

.functional {
  font-family: var(--eos-functional-face);
  font-weight: var(--eos-functional-weight);
  font-size: var(--eos-functional-size);
}

.functional--small {
  font-size: var(--eos-functional-size-small);
}

.functional--label {
  font-weight: 300;
  font-size: var(--eos-functional-size-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}


/* ── Text Layout ── */

.text-center {
  text-align: center;
}

.body-text p {
  margin-bottom: var(--eos-paragraph-gap);
}

.body-text p:last-child {
  margin-bottom: 0;
}

.body-text em {
  font-style: italic;
}


/* ── Section-Specific Styles ── */

.section--hero .subtitle {
  font-family: var(--eos-functional-face);
  font-weight: 300;
  font-size: var(--eos-functional-size);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--eos-white);
  opacity: 0.7;
  position: absolute;
  bottom: 5vh;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 2;
}

.body-text--spaced-top {
  margin-top: 2.5em;
}

/* Swatch Row */
.swatch-row {
  display: flex;
  gap: 1px;
  margin: 3em 0;
}

.swatch {
  flex: 1;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 12px;
  border-radius: 2px;
}

.swatch__label {
  font-family: var(--eos-functional-face);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.04em;
  margin-top: 4px;
}

.swatch--dark-text {
  color: var(--eos-black);
}

.swatch--light-text {
  color: var(--eos-white);
}

/* Typography Specimens */
.specimen {
  margin-bottom: 4em;
}

.specimen__sample {
  margin-bottom: 0.75em;
}

.specimen__caption {
  font-family: var(--eos-functional-face);
  font-weight: 300;
  font-size: var(--eos-functional-size-small);
  color: var(--eos-white);
  opacity: 0.6;
  letter-spacing: 0.04em;
}

/* Logo Display */
.logo-display {
  text-align: center;
  margin: 4em 0 8em;
}

.logo-display__wordmark {
  font-family: var(--eos-display-face);
  font-weight: var(--eos-display-weight-dark-bg);
  font-size: clamp(36px, 5vw, 56px);
  line-height: var(--eos-display-line-height);
  letter-spacing: 0.03em;
  margin-bottom: 3rem;
}

.logo-display__abbrev {
  font-family: var(--eos-brand-abbrev-face);
  font-weight: var(--eos-brand-abbrev-weight);
  font-size: clamp(48px, 7vw, 80px);
  line-height: var(--eos-display-line-height);
  letter-spacing: 0.05em;
}

/* Light Field Demo — full-width section */
.section--light-field {
  background-color: var(--eos-white);
  color: var(--eos-black);
  min-height: 200vh;
  padding: 24vh var(--eos-margin-min-percent);
}

.section--light-field .display {
  font-weight: var(--eos-display-weight-light-bg);
}

/* Edge gradients — smooth transitions into/out of light field */
.section--light-field::before,
.section--light-field::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 25%;
  z-index: 1;
  pointer-events: none;
}

.section--light-field::before {
  top: 0;
  background: linear-gradient(to bottom, var(--eos-black), transparent);
}

.section--light-field::after {
  bottom: 0;
  background: linear-gradient(to bottom, transparent, var(--eos-black));
}

/* Scroll reveal for light field */
.section--light-field .section__content {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  z-index: 2;
}

.section--light-field .section__content.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Footer */
.section--footer {
  padding: 8vh var(--eos-margin-min-percent);
  background-color: var(--eos-black);
}

.footer {
  text-align: center;
}

.footer__wordmark {
  font-family: var(--eos-functional-face);
  font-weight: 300;
  font-size: var(--eos-functional-size-small);
  letter-spacing: 0.06em;
  color: var(--eos-white);
  opacity: 0.5;
  margin-bottom: 0.75em;
}

.footer__copyright {
  font-family: var(--eos-functional-face);
  font-weight: 300;
  font-size: 11px;
  color: var(--eos-white);
  opacity: 0.35;
}


/* ── Specimen Classes ── */

.display--specimen {
  font-size: clamp(32px, 4vw, 48px);
}

.monogram--specimen {
  font-size: clamp(40px, 5vw, 64px);
}


/* ── Heading Spacing ── */

.section__content > .display--section { margin-bottom: 2em; }
.section__content > .display--section:last-child { margin-bottom: 0; }

.body-text .display--subsection { margin-bottom: 1em; }


/* ── Type Hierarchy Display ── */

.body-text + .type-hierarchy__group {
  margin-top: 8em;
  padding-top: 4em;
  border-top: 1px solid var(--eos-dark-80);
}

.type-hierarchy__group .display {
  margin-bottom: 0.15em;
}

.type-hierarchy__group {
  margin-bottom: 4em;
  padding-bottom: 4em;
  border-bottom: 1px solid var(--eos-dark-80);
}

.type-hierarchy__group:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.type-hierarchy__label {
  font-family: var(--eos-functional-face);
  font-weight: 300;
  font-size: var(--eos-functional-size-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.5;
  margin-bottom: 2em;
}

.type-hierarchy__caption {
  font-family: var(--eos-functional-face);
  font-weight: 300;
  font-size: var(--eos-functional-size-small);
  opacity: 0.6;
  letter-spacing: 0.04em;
  margin-top: 0.5em;
  margin-bottom: 2.5em;
}

.type-hierarchy__caption:last-child {
  margin-bottom: 0;
}


/* ── Hero Legibility Scrim ── */

.section--hero .section__content {
  position: relative;
}

.section--hero .section__content::before {
  content: '';
  position: absolute;
  inset: -20vh -30vw;
  background: radial-gradient(ellipse, rgba(27, 24, 22, 0.45) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}


/* ── Logo Mark ── */

.hero__mark {
  display: block;
  margin: 0 auto 2em;
  opacity: 0.9;
}

.logo-display__mark {
  display: block;
  margin: 0 auto 3rem;
}

.footer__mark {
  display: block;
  margin: 0 auto 1em;
  opacity: 0.4;
}


/* ── Act Spacers ── */

.section--spacer {
  min-height: 20vh;
  background-color: var(--eos-black);
  display: block;
  padding: 0;
}


/* ── Text Density ── */

.body-text--spacious p {
  margin-bottom: 1.8em;
}

.body-text--spacious p.pull-quote {
  margin-bottom: 0;
}

.body-text--spacious p:last-child {
  margin-bottom: 0;
}

.pull-quote {
  font-family: var(--eos-display-face);
  font-weight: var(--eos-display-weight-dark-bg);
  font-size: var(--eos-display-size-section);
  line-height: var(--eos-display-line-height);
  letter-spacing: var(--eos-display-letter-spacing);
  text-align: center;
  padding: 8rem 0;
  margin-bottom: 0;
}


/* ── Guidance Divider ── */

.guidance-divider {
  border: none;
  border-top: 1px solid var(--eos-white);
  opacity: 0.15;
  margin: 2.5em 0;
}


/* ── Responsive ── */

@media (max-width: 768px) {
  .section--text {
    padding: 8vh 6%;
  }

  .section--hero {
    padding: 8vh 6%;
  }

  .swatch-row {
    flex-wrap: wrap;
  }

  .swatch {
    min-width: calc(33.333% - 1px);
  }

  .swatch__label {
    font-size: 10px;
  }
}