/* TYCHO — committed single-theme: the void.
   ivory #EAE6DC on near-black #040406; color lives in the particles. */

@font-face {
  font-family: 'Italiana';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/italiana.woff2') format('woff2');
}

:root {
  --void: #040406;
  --ivory: #eae6dc;
  --dim: #6d685c;
  --gold: #ffd9a0;
}

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

html { scroll-behavior: auto; }

body {
  background: var(--void);
  color: var(--ivory);
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  overflow-x: hidden;
}

/* scroll runway — the page's only height */
.runway { height: 620vh; }

canvas#sky {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
}

/* filmic vignette + grain over the scene, under the type */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse 130% 100% at 50% 45%, transparent 52%, rgba(0,0,0,.62) 100%);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: .05;
  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.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- type ---------- */

.micro {
  font-size: 10px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--ivory);
}
.micro.dim { color: var(--dim); }

.wordmark {
  font-family: 'Italiana', serif;
  font-weight: 400;
  font-size: clamp(64px, 15vw, 168px);
  line-height: 1;
  letter-spacing: .22em;
  margin-right: -.22em; /* optically recenter tracked caps */
  text-shadow: 0 0 60px rgba(234, 230, 220, .28);
  animation: settle 2.6s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes settle {
  from { opacity: 0; letter-spacing: .34em; filter: blur(6px); }
  to   { opacity: 1; letter-spacing: .22em; filter: blur(0); }
}

.tag {
  margin-top: 26px;
  animation: fadein 2.2s .9s ease both;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.line {
  font-family: 'Italiana', serif;
  font-weight: 400;
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: 1.32;
  letter-spacing: .04em;
  text-wrap: balance;
  text-shadow: 0 0 40px rgba(4, 4, 6, .9);
}

/* ---------- fixed phases, faded by scroll progress (JS sets opacity) ---------- */

.phase {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 6vw;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}

#ph-2 { padding-bottom: 30vh; }
#ph-3 { padding-bottom: 46vh; }

.contact {
  margin-top: 34px;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 217, 160, .35);
  padding-bottom: 6px;
  transition: border-color .4s ease, color .4s ease;
}
.contact:hover, .contact:focus-visible {
  color: var(--ivory);
  border-color: var(--ivory);
  outline: none;
}

.contact-mail {
  margin-top: 22px;
  color: var(--dim);
  text-decoration: none;
  transition: color .4s ease;
}
.contact-mail:hover, .contact-mail:focus-visible {
  color: var(--ivory);
  outline: none;
}

.line--narrow { max-width: 22ch; }

/* numbered-principle eyebrow (variant feature) */
.eyebrow { margin-bottom: 20px; color: var(--dim); }

/* constellation labels: projected from 3D each frame */
.starlabel {
  position: fixed;
  top: 0; left: 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  will-change: transform, opacity;
  font-size: 13px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ivory);
  text-align: center;
  text-shadow: 0 0 18px rgba(4, 4, 6, .95), 0 0 34px rgba(4, 4, 6, .8);
}
.starlabel .sub {
  display: block;
  font-size: 9px;
  letter-spacing: .42em;
  color: var(--dim);
  margin-top: 7px;
}
@media (max-width: 700px) {
  .starlabel { font-size: 10px; letter-spacing: .28em; }
  .starlabel .sub { font-size: 8px; }
}

/* concise offerings row (variant feature) */
.offer-row {
  margin-top: 40px;
  color: var(--dim);
  font-size: 10px;
  letter-spacing: .42em;
  text-transform: uppercase;
}

.hint {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: none;
}
.hint-line {
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, var(--dim), transparent);
  animation: breathe 3.2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes breathe {
  0%, 100% { transform: scaleY(.55); opacity: .5; }
  50%      { transform: scaleY(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .wordmark, .tag { animation: none; opacity: 1; }
  .hint-line { animation: none; }
}
.no-anim .wordmark, .no-anim .tag { animation: none; opacity: 1; }
.no-anim .hint-line { animation: none; }

@media (max-width: 700px) {
  .micro { font-size: 9px; letter-spacing: .34em; }
  .wordmark { font-size: clamp(40px, 16vw, 96px); }
  .line { font-size: clamp(26px, 7.4vw, 38px); }
  .line br { display: none; }
  #ph-2 { padding-bottom: 54vh; }
  #ph-3 { padding-bottom: 34vh; }
}

/* no-WebGL fallback: keep the wordmark on a faint nebular gradient */
body.no-gl canvas#sky { display: none; }
body.no-gl {
  background:
    radial-gradient(ellipse 70% 45% at 50% 42%, rgba(126, 155, 255, .10), transparent 70%),
    radial-gradient(ellipse 40% 28% at 52% 45%, rgba(255, 217, 160, .08), transparent 70%),
    var(--void);
}
body.no-gl #ph-hero { opacity: 1; }
body.no-gl .hint, body.no-gl .runway { display: none; }