/* askshadows.com, coming soon: the living hood, the hook, nothing else. */
:root {
  --fg: #f3f2ef;
  --soft: rgba(243, 242, 239, .8);
  --muted: rgba(243, 242, 239, .64);
  --sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { min-height: 100svh; display: grid; grid-template-rows: 1fr auto; background: #000; color: var(--fg); font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: rgba(255, 255, 255, .2); }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 4px; border-radius: 4px; }

main { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; padding: 40px 20px 20px; text-align: center; }
.hood { --v: min(520px, 58svh, 88vw); width: var(--v); height: var(--v); margin: calc(var(--v) * -.08) 0 calc(var(--v) * -.3); position: relative; z-index: 0; pointer-events: none; }
.hood video { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: radial-gradient(closest-side, #000 74%, transparent); mask-image: radial-gradient(closest-side, #000 74%, transparent); }
h1 { position: relative; font-weight: 500; font-size: clamp(42px, 6.4vw, 88px); line-height: 1; letter-spacing: -.045em; text-wrap: balance; }
.what { position: relative; margin-top: 16px; font-size: clamp(17px, 1.6vw, 21px); color: var(--soft); }
.soon { position: relative; margin-top: 34px; font-size: 13px; letter-spacing: .32em; text-transform: uppercase; color: var(--muted); padding-left: .32em; }

footer { display: flex; justify-content: center; align-items: center; gap: 22px; padding: 22px 20px 30px; font-size: 13.5px; color: var(--muted); }
.x { display: inline-flex; align-items: center; gap: 8px; color: var(--soft); transition: color .2s; }
.x:hover { color: var(--fg); }
.x svg { width: 15px; height: 15px; }
.x[hidden] { display: none; }

/* the words come out of the dark, one after another */
.rise { opacity: 0; filter: blur(8px); transform: translateY(8px); animation: rise 1.4s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(.5s + var(--i, 0) * .35s); }
@keyframes rise { to { opacity: 1; filter: none; transform: none; } }