/* =========================================================
   AJFLO — Foundation Edition v0.2 — The Beginning
   Typography is the primary design language. The environment
   is felt, never noticed. Nothing exists because it looks cool.
   Quiet. Inevitable. Never loud. Never mechanical.
   ========================================================= */

:root{
  /* Colour system — warm silver moonlight, never gold */
  --deep-space: #06070A;
  --atmosphere: #101419;
  --bg-3: #161B22; /* a third, deeper step for the gradient bed only */

  --starlight: #F2EEE6;   /* warm silver starlight */
  --dust: #C9CED4;        /* cosmic dust — warm silver, moonlit */
  --accent: #CBC7BC;      /* reflected moonlight — never dominant */
  --muted: #7C7E82;

  --primary: var(--starlight);
  --secondary: var(--dust);

  /* Geist only. One family carries the entire identity. */
  --display: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --edge: clamp(28px, 7vw, 120px);
}

*{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(242,238,230,0.09) transparent;
  -webkit-tap-highlight-color: transparent;
}

/* Static fallback bed — always present underneath the WebGL canvas.
   If Three.js or WebGL is unavailable, this alone still reads as
   quiet atmospheric depth: near-black charcoal with a deep blue
   undertone. Never flat. */
body{
  margin: 0;
  background:
    radial-gradient(ellipse 130% 85% at 20% -8%, rgba(16,20,25,0.5) 0%, transparent 58%),
    radial-gradient(ellipse 110% 75% at 86% 108%, rgba(10,12,15,0.55) 0%, transparent 55%),
    linear-gradient(180deg, var(--deep-space) 0%, var(--atmosphere) 55%, var(--bg-3) 100%);
  color: var(--primary);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* quiet, near-invisible scrollbar — nothing that reads as "interface" */
::-webkit-scrollbar{ width: 6px; height: 6px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: rgba(242,238,230,0.07); border-radius: 6px; }

::selection{ background: var(--accent); color: #06070A; }
em{ font-style: normal; font-weight: 400; color: var(--accent); }

/* -------------------- backdrop layers -------------------- */
/* Layer 0 — a living, ambient WebGL scene (js/universe.js): warm
   silver starlight, soft cosmic dust, volumetric haze, near-black
   charcoal with deep blue undertones. Kept deliberately restrained —
   the visitor should not consciously notice it, only feel it. */
#universe{
  position: fixed;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  z-index: 0;
}

/* Layer 1 — vignette veil, keeps the eye centred without ever
   feeling like a UI overlay. */
.veil{
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 8%, rgba(6,7,10,0) 0%, rgba(6,7,10,0.0) 42%, rgba(6,7,10,0.52) 100%),
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(6,7,10,0.7) 0%, rgba(6,7,10,0) 55%);
}

/* Layer 2 — near-imperceptible film grain, breaks up digital flatness */
.grain{
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .02;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* -------------------- manuscript shell -------------------- */
/* Mobile-first: portrait phone is the primary experience. Base rules
   below are tuned for a vertical phone screen; desktop adapts upward
   from this base via the min-width enhancement query further down —
   it never requires landscape or a wider canvas to feel complete. */
main{ position: relative; z-index: 3; }

.folio{
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(84px, 14vh, 130px) var(--edge);
  text-align: center;
}

/* -------------------- manuscript rhythm -------------------- */
/* The chapters carry different emotional weight, so they no longer
   occupy identical vertical space. Some breathe longer (I, IV, V,
   VIII); some arrive sooner (II, III, VI). This is the only structural
   change — copy, typography, animation timing and order are untouched.
   min-height is a minimum, not a fixed height: on a phone, shorter
   chapters simply hug their own content and arrive sooner; taller
   chapters hold their pause. */
.folio[data-folio="I"]{
  min-height: 112vh;
  min-height: 112dvh;
  padding-top: clamp(96px, 18vh, 150px);
  padding-bottom: clamp(64px, 10vh, 110px);
}
.folio[data-folio="II"]{
  min-height: 76vh;
  min-height: 76dvh;
  padding-top: clamp(64px, 10vh, 100px);
  padding-bottom: clamp(64px, 10vh, 100px);
}
.folio[data-folio="III"]{
  min-height: 88vh;
  min-height: 88dvh;
  padding-top: clamp(72px, 11vh, 110px);
  padding-bottom: clamp(72px, 11vh, 110px);
}
.folio[data-folio="IV"]{
  min-height: 104vh;
  min-height: 104dvh;
  padding-top: clamp(92px, 15vh, 140px);
  padding-bottom: clamp(92px, 15vh, 140px);
}
.folio[data-folio="V"]{
  min-height: 112vh;
  min-height: 112dvh;
  padding-top: clamp(100px, 17vh, 150px);
  padding-bottom: clamp(100px, 17vh, 150px);
}
.folio[data-folio="VI"]{
  min-height: 80vh;
  min-height: 80dvh;
  padding-top: clamp(72px, 11vh, 110px);
  padding-bottom: clamp(72px, 11vh, 110px);
}
.folio[data-folio="VII"]{
  min-height: 90vh;
  min-height: 90dvh;
  padding-top: clamp(80px, 12vh, 120px);
  padding-bottom: clamp(80px, 12vh, 120px);
}

.folio-mark{
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  transition: opacity 1.4s ease;
}
.folio.in-view .folio-mark{ opacity: .3; }

.folio-inner{
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Legibility safeguard — a whisper-soft radial scrim sitting behind
   every text block, just enough to keep type readable over a scene
   that is genuinely alive without ever looking like a UI panel. */
.folio-inner::before{
  content: '';
  position: absolute;
  inset: -12% -18%;
  z-index: -1;
  background: radial-gradient(ellipse 60% 62% at 50% 50%, rgba(6,7,10,0.34) 0%, rgba(6,7,10,0.14) 46%, transparent 72%);
  pointer-events: none;
}

.brand-word{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 26px;
}

/* -------------------- typography -------------------- */
.statement{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 5.4vw, 3.9rem);
  line-height: 1.38;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--primary);
}
.statement .reveal-line{ margin-bottom: 8px; }
.statement-mid{ font-size: clamp(1.85rem, 4.2vw, 3.05rem); }
.statement-small{
  font-family: var(--sans);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 300;
  letter-spacing: .045em;
  color: var(--secondary);
  margin-top: 10px;
}

.reveal-line{
  display: block;
  opacity: 0;
  transform: translateY(32px);
  filter: blur(7px);
  transition: opacity 2.1s cubic-bezier(.16,.84,.24,1), transform 2.1s cubic-bezier(.16,.84,.24,1), filter 2.1s cubic-bezier(.16,.84,.24,1);
}
.folio.in-view .reveal-line{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.reveal-line:nth-of-type(1){ transition-delay: .1s; }
.reveal-line:nth-of-type(2){ transition-delay: .46s; }
.reveal-line:nth-of-type(3){ transition-delay: .84s; }

.accent-line{ color: var(--accent); }

.reveal-fade{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 2s ease .6s, transform 2s ease .6s;
}
.folio.in-view .reveal-fade{ opacity: 1; transform: translateY(0); }

.whisper{
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(0.85rem, 1.15vw, 1.02rem);
  line-height: 2;
  color: var(--muted);
  letter-spacing: .03em;
  max-width: 28ch;
  margin: 52px auto 0;
}

.kicker{
  font-family: var(--sans);
  font-weight: 300;
  font-size: 10.5px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 48px;
  opacity: .78;
}

/* -------------------- Hero (I) — a question the visitor carries -------------------- */
.hero-inner{ display: flex; flex-direction: column; align-items: center; }

.hero-inner .brand-word{ transition-delay: .15s; }
.hero-inner .hero-whisper{ transition-delay: 1.5s; margin-top: 0; }

.hero-statement{
  font-size: clamp(2.4rem, 7.8vw, 6rem);
  font-weight: 300;
  line-height: 1.24;
  margin-top: 64px;
}
.hero-statement .hero-line:nth-of-type(1){ transition-delay: 2.1s; }
.hero-statement .hero-line:nth-of-type(2){ transition-delay: 2.42s; }

.hero-whisper{
  font-size: 10.5px;
  font-weight: 300;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The second question arrives only after the first has been held —
   a natural pause, not a mechanical sequence. It is quieter than the
   opening statement: a thought the visitor now carries forward. */
.hero-followup{
  margin-top: 60px;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  font-weight: 300;
  color: var(--secondary);
  line-height: 1.4;
}
.hero-followup .reveal-line:nth-of-type(1){ transition-delay: 4.6s; }
.hero-followup .reveal-line:nth-of-type(2){ transition-delay: 4.96s; }

.descend{
  position: absolute;
  bottom: 78px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 64px;
  opacity: 0;
  transition: opacity 1.8s ease 5.3s;
}
.folio.in-view .descend{ opacity: 1; }
.descend span{
  display: block;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, var(--muted), transparent);
  transform-origin: top;
  animation: descendPulse 7s cubic-bezier(.37,0,.63,1) infinite;
}
@keyframes descendPulse{
  0%,100%{ opacity: .18; transform: scaleY(.55); }
  50%{ opacity: .8; transform: scaleY(1); }
}

/* -------------------- WE (IV) -------------------- */
.we-inner{ display: flex; flex-direction: column; align-items: center; gap: 34px; }
.we-word{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(4rem, 25vw, 7rem);
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--primary);
  line-height: .9;
}

/* -------------------- V definition (whisper register, never a headline) -------------------- */
.statement-mid{ color: var(--primary); }
.definition{
  font-size: clamp(0.98rem, 1.4vw, 1.16rem);
  line-height: 2;
  max-width: 30ch;
  color: var(--secondary);
  opacity: .9;
}

/* -------------------- Colophon (VIII) — the site ends in silence -------------------- */
/* The closing chapter is given the longest held pause of the whole
   manuscript — the site does not end abruptly, it settles. */
.colophon{
  min-height: 108vh;
  min-height: 108dvh;
  padding-top: clamp(96px, 16vh, 140px);
  padding-bottom: clamp(96px, 16vh, 140px);
}
.colophon-inner{ display: flex; flex-direction: column; align-items: center; }

/* Philosophy block — presented exactly as specified. Centered
   horizontally and vertically, generous spacing, calm and timeless.
   This is distinct from the identity (Machine-Augmented Judgment)
   established in the hero — the two are never merged. */
.philosophy-block{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin-bottom: 72px;
}
.philosophy-mark{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 20px;
}
.philosophy-line{
  font-family: var(--sans);
  font-weight: 300;
  margin: 0;
  letter-spacing: .06em;
}
.philosophy-line--primary{
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  color: var(--primary);
  opacity: .92;
}
.philosophy-line--secondary{
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  color: var(--secondary);
  opacity: .82;
}
.philosophy-line--tertiary{
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  color: var(--secondary);
  opacity: .82;
}

.colophon-line{
  font-family: var(--sans);
  font-weight: 300;
  font-size: 10.5px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.colophon-line + .colophon-line{ margin-top: 22px; }
.colophon-epigraph{
  color: var(--secondary);
  opacity: .75;
}
.colophon-url{ color: var(--accent); opacity: .82; margin-top: 40px; }

/* -------------------- no-webgl graceful fallback -------------------- */
/* Applied by js/universe.js if WebGL/Three.js cannot initialise.
   Restores a gentle CSS-only drifting field so the page still feels
   atmospheric rather than flat. */
body.no-webgl::after{
  content: '';
  position: fixed;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 24%, rgba(201,206,212,0.045), transparent 55%),
    radial-gradient(circle at 78% 18%, rgba(203,199,188,0.03), transparent 50%),
    radial-gradient(circle at 48% 86%, rgba(242,238,230,0.034), transparent 60%),
    radial-gradient(circle at 12% 70%, rgba(16,20,25,0.5), transparent 52%);
  filter: blur(70px);
  animation: nebulaDriftFallback 220s ease-in-out infinite;
}
@keyframes nebulaDriftFallback{
  0%{   transform: translate3d(0,0,0) scale(1); }
  22%{  transform: translate3d(-1.5%, 1%, 0) scale(1.02); }
  47%{  transform: translate3d(1%, -1.3%, 0) scale(1.008); }
  71%{  transform: translate3d(-0.6%, -0.8%, 0) scale(1.025); }
  100%{ transform: translate3d(0,0,0) scale(1); }
}
body.no-webgl #universe{ display: none; }

/* -------------------- responsive -------------------- */
/* Mobile is the base experience defined above; from here the layout
   adapts naturally upward for larger screens. No rule below changes
   what a phone in portrait sees — it only relaxes constraints that
   were tuned tight for a vertical phone screen. */
@media (min-width: 641px){
  .we-word{ font-size: clamp(5.2rem, 19vw, 14rem); }
  .whisper{ max-width: 38ch; }
  .definition{ max-width: 44ch; }
  .hero-followup{ margin-top: 84px; }
  .philosophy-block{ margin-bottom: 96px; }
}

/* -------------------- reduced motion -------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001s !important;
    transition-duration: .3s !important;
  }
  html{ scroll-behavior: auto; }
  .reveal-line, .reveal-fade{ filter: none; }
  body.no-webgl::after{ animation: none; }
}