/* OB Enterprises — single-page holding company site
   Deep animated void · faint Chicago skyline · self-drawing OB monogram */

:root {
  --bg:        #020308;
  --bg-2:      #04060e;
  --ink:       #eef1f8;
  --muted:     #8a93a8;
  --faint:     #4b5267;
  --blue:      #6ea8ff;
  --violet:    #9b7bff;
  --teal:      #4a5bd0;
  --sig-glow:  rgba(150, 185, 255, 0.55);
  --maxw:      min(440px, 74vw);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  overflow: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  opacity: 0;
  animation: fade-in 1.4s ease forwards;
}

@keyframes fade-in { to { opacity: 1; } }

/* ---------- Layer 0: the void ---------- */
.void {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 90% at 50% -10%, #070c1a 0%, var(--bg-2) 42%, var(--bg) 78%);
  overflow: hidden;
}

.aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.36;
  mix-blend-mode: screen;
  will-change: transform;
}
.aurora.a1 {
  width: 60vw; height: 60vw;
  left: -8vw; top: -18vw;
  background: radial-gradient(circle at 50% 50%, var(--blue), transparent 62%);
  animation: drift-1 26s ease-in-out infinite;
}
.aurora.a2 {
  width: 52vw; height: 52vw;
  right: -10vw; top: 4vw;
  background: radial-gradient(circle at 50% 50%, var(--violet), transparent 60%);
  animation: drift-2 32s ease-in-out infinite;
}
.aurora.a3 {
  width: 46vw; height: 46vw;
  left: 26vw; bottom: -22vw;
  background: radial-gradient(circle at 50% 50%, var(--teal), transparent 64%);
  opacity: 0.14;
  animation: drift-3 38s ease-in-out infinite;
}

@keyframes drift-1 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(8vw, 6vw) scale(1.12); }
}
@keyframes drift-2 {
  0%,100% { transform: translate(0,0) scale(1.05); }
  50%     { transform: translate(-7vw, 5vw) scale(0.92); }
}
@keyframes drift-3 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(5vw, -7vw) scale(1.15); }
}

/* drifting motes */
#stars { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Layer 1: faint Chicago skyline ---------- */
.skyline {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 46vh;
  z-index: 1;
  background-image: url("../images/chicago-skyline-before-dusk-nominated-thank-you-so-very-much_t20_W7wBJg.jpg");
  background-size: cover;
  background-position: center 30%;
  filter: grayscale(1) brightness(0.42) contrast(1.1);
  opacity: 0.12;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.55) 38%, transparent 92%);
          mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.55) 38%, transparent 92%);
  will-change: transform;
  pointer-events: none;
}

/* ---------- Layer 2: grain ---------- */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: grain-shift 6s steps(5) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-4%, 3%); }
  40%  { transform: translate(3%, -5%); }
  60%  { transform: translate(-3%, 2%); }
  80%  { transform: translate(4%, 4%); }
  100% { transform: translate(0,0); }
}

/* ---------- Layer 3: cursor glow ---------- */
.cursor-glow {
  position: fixed;
  z-index: 3;
  top: 0; left: 0;
  width: 540px; height: 540px;
  margin: -270px 0 0 -270px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(120,160,255,0.10), transparent 60%);
  transform: translate(-100vw, -100vh);
  transition: opacity 0.6s ease;
  opacity: 0;
}

/* ---------- Content ---------- */
.stage {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6vh 24px;
}

.monogram-stage {
  perspective: 820px;
  perspective-origin: 50% 42%;
}
.monogram-tilt {
  display: inline-block;
  transform-style: preserve-3d;
  will-change: transform;
}
.monogram {
  display: block;
  width: var(--maxw);
  height: auto;
  filter: drop-shadow(0 0 16px var(--sig-glow));
  animation: sig-enter 1.7s cubic-bezier(.2,.7,.15,1) both;
}
/* one-time 3-D pivot as the mark settles in */
@keyframes sig-enter {
  0%   { opacity: 0; transform: rotateY(-42deg) rotateX(16deg) translateY(16px) scale(.9); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: rotateY(0) rotateX(0) translateY(0) scale(1); }
}

/* reveal helper for text blocks */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.1s ease, transform 1.1s ease;
}
.reveal.in { opacity: 1; transform: none; }

.wordmark {
  margin: 30px 0 0;
  font-size: clamp(13px, 2.4vw, 19px);
  font-weight: 300;
  letter-spacing: 0.62em;
  text-indent: 0.62em;
  color: var(--ink);
}

.eyebrow {
  margin: 22px 0 0;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: var(--faint);
  text-transform: uppercase;
}

.tagline {
  margin: 16px 0 0;
  font-size: clamp(13px, 1.7vw, 15px);
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.contact {
  margin: 40px 0 0;
}
.contact a {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color 0.4s ease, border-color 0.4s ease, text-shadow 0.4s ease;
}
.contact a:hover {
  color: #fff;
  border-color: var(--blue);
  text-shadow: 0 0 14px var(--sig-glow);
}

.site-footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  padding: 18px 24px;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--faint);
  pointer-events: none;
}

/* ---------- Motion-safe fallbacks ---------- */
@media (prefers-reduced-motion: reduce) {
  body { opacity: 1; animation: none; }
  .aurora, .grain { animation: none; }
  .monogram { animation: none; opacity: 1; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .cursor-glow { display: none; }
}

@media (max-width: 600px) {
  :root { --maxw: 80vw; }
  .skyline { height: 38vh; opacity: 0.13; }
  .wordmark { letter-spacing: 0.42em; text-indent: 0.42em; }
}