/* ============================================================
   00 — BALD · the coming-soon holding page
   A single dim, warm screen: a name, a carving-pun teaser, a
   contact line, and a wooden owl who watches from the dark.
   The styleguide allows black as an expressive background —
   here it carries the mystic, atelier-at-night mood.
   ============================================================ */

:root {
  --bg0:   #0b0a08;                 /* deep, warm near-black */
  --amber: 255, 210, 140;           /* the workshop lamp */
  --rgb-ochre: 142, 60, 39;
  --rgb-beige: 248, 224, 188;
}

html, body { height: 100%; }

body.bald {
  background: var(--bg0);
  color: var(--beige);
  overflow: hidden;                 /* single viewport — no scroll */
  overscroll-behavior: none;
}

::selection { background: var(--ochre); color: var(--beige); }

/* ---------- atmosphere layers (all behind the owl) ---------- */
.layer { position: fixed; pointer-events: none; }

/* faint wood-grain / paper that drifts a few px with the mouse.
   Larger than the viewport so the parallax never reveals an edge. */
.bg {
  inset: -56px;
  z-index: 0;
  opacity: .8;
  will-change: transform;
  background-color: var(--bg0);
  background-image:
    /* organic paper grain */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"),
    /* slow vertical wood streaks */
    repeating-linear-gradient(94deg,
      rgba(255, 210, 140, .015) 0 2px,
      transparent 2px 11px),
    /* a warm wash low and right, where the lamp pools */
    radial-gradient(130% 110% at 64% 42%,
      rgba(142, 60, 39, .14) 0%,
      transparent 52%);
}

/* darken the edges so the centre reads as the only lit place */
.vignette {
  inset: 0;
  z-index: 1;
  background: radial-gradient(115% 115% at 62% 46%,
    transparent 0%,
    transparent 38%,
    rgba(0, 0, 0, .42) 78%,
    rgba(0, 0, 0, .7) 100%);
}

/* sawdust canvas — over the scene, click-through (owl click still pokes) */
.chips {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* ---------- stage: header / scene / contact, no scroll ---------- */
.stage {
  position: relative;
  z-index: 2;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}

/* ---------- wordmark ---------- */
.head { padding: clamp(16px, 2.6vh, 28px) var(--pad) 0; }
.head .wordmark .name { color: var(--beige); }
.head .wordmark .role { color: var(--beige); opacity: .55; }
.head .wordmark .mark {
  width: 34px; height: 34px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .5);
}

/* ---------- the scene ---------- */
.main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 5vw, 88px);
  padding: 0 var(--pad);
  min-height: 0;                    /* let the 1fr row contain the owl */
}

.line { max-width: 30ch; }

.line h1 {
  font-size: clamp(40px, 8vw, 92px);
  color: var(--beige);
  text-shadow: 0 2px 40px rgba(0, 0, 0, .55);
}

.line .rule {
  display: block;
  width: 68px; height: 2px;
  margin: 22px 0 0;
  background: var(--ochre);
  transform-origin: left center;
}

.line .sub {
  margin: 18px 0 0;
  font-weight: 300;
  font-size: clamp(15px, 1.9vw, 20px);
  line-height: 1.5;
  color: color-mix(in srgb, var(--beige) 76%, transparent);
}

/* ---------- the owl + her warm halo ---------- */
.owl-zone {
  position: relative;
  flex: none;
  width: clamp(260px, 40vw, 540px);
  height: clamp(300px, 64vh, 640px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 150%; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at center,
    rgba(255, 210, 140, .42) 0%,
    rgba(231, 168, 92, .26) 22%,
    rgba(142, 60, 39, .15) 44%,
    transparent 68%);
  z-index: 0;
}
.owl {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  display: block;
}

/* ---------- contact, quiet at the bottom ---------- */
.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 22px;
  padding: 0 var(--pad) calc(clamp(16px, 2.6vh, 28px) + env(safe-area-inset-bottom));
}
.contact .label {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--beige) 52%, transparent);
}
.contact a {
  font-weight: 600;
  font-size: 14px;
  color: var(--beige);
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease-soft), border-color .2s var(--ease-soft);
}
.contact a:hover { color: rgb(var(--amber)); border-color: currentColor; }

/* ---------- emerge on load: the lamp finds her, type carves in ---------- */
.js .glow { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
.js .owl  { opacity: 0; transform: translateY(12px) scale(.97); }
.js .reveal-up { opacity: 0; transform: translateY(14px); }
.js .line .rule { transform: scaleX(0); }

.stage.lit .glow {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
  transition: opacity 1.7s var(--ease), transform 2s var(--ease);
}
.stage.lit .owl.ready {
  opacity: 1; transform: none;
  transition: opacity 1.3s var(--ease) .25s, transform 1.4s var(--ease) .25s;
}
.stage.lit .reveal-up {
  opacity: 1; transform: none;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.stage.lit .line .rule {
  transform: scaleX(1);
  transition: transform 1s var(--ease) .55s;
}

/* staged entrances */
.stage.lit .head .wordmark { transition-delay: .15s; }
.stage.lit .line h1        { transition-delay: .32s; }
.stage.lit .line .sub      { transition-delay: .58s; }
.stage.lit .contact        { transition-delay: .78s; }

/* ---------- responsive: stack under ~720px ---------- */
@media (max-width: 720px) {
  .main {
    flex-direction: column;
    justify-content: center;
    gap: clamp(10px, 2.4vh, 26px);
    text-align: center;
  }
  .line { max-width: 30ch; order: 1; }
  .line .rule { margin-left: auto; margin-right: auto; transform-origin: center; }
  .owl-zone {
    order: 2;
    width: clamp(220px, 72vw, 380px);
    height: clamp(230px, 40vh, 420px);
  }
}

@media (max-width: 720px) and (orientation: portrait) {
  .line h1 { font-size: clamp(38px, 12vw, 72px); }
}

/* very short viewports: keep her in, trim the air */
@media (max-height: 560px) {
  .owl-zone { height: clamp(200px, 70vh, 360px); }
}

/* ---------- reduced motion: still, legible, no particles ---------- */
@media (prefers-reduced-motion: reduce) {
  .chips { display: none; }
  /* the .js hidden states are neutralised so everything shows at rest */
  .js .glow,
  .js .owl,
  .js .reveal-up { opacity: 1; transform: none; }
  .js .glow { transform: translate(-50%, -50%); }
  .js .line .rule { transform: scaleX(1); }
}