/* Landing page (index.html) */

.landing { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
.l-top { display: flex; justify-content: space-between; padding: 24px; font: 400 12px var(--mono); color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.l-main { width: 100%; max-width: 1200px; margin: auto; padding: 48px 24px 72px; }
.l-tag { font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 12px; }
.l-tag::before { content: ""; width: 32px; height: 1px; background: var(--accent); }

.l-name { display: flex; flex-wrap: wrap; align-items: baseline; margin: 20px 0 48px; font: 300 clamp(64px, 13vw, 220px)/.88 var(--serif); letter-spacing: -0.045em; transition: translate .6s var(--ease); }
.l-name .w { display: inline-block; overflow: hidden; padding-bottom: .06em; }
.l-name .w:first-child { margin-right: .22em; }
.l-name .char { animation: rise 1.1s var(--ease) backwards; animation-delay: calc(.15s + var(--i) * 55ms); }
.l-dot { position: relative; z-index: 2; flex: none; width: .15em; height: .15em; margin-left: .05em; border-radius: 50%; background: var(--accent);
  animation: pop .8s cubic-bezier(.3, 1.7, .5, 1) backwards .8s; transition: translate .6s var(--ease), scale 1s cubic-bezier(.75, 0, .2, 1); }
@keyframes pop { from { scale: 0; } }
.landing.leaving .l-dot { scale: var(--big, 80); }
/* the name (and its dot) sits above everything else so the orange covers the whole page */
.landing.leaving .l-name { position: relative; z-index: 10; }
.leaving-page .cursor { opacity: 0; transition: opacity .2s; }

/* "Enter now" vs "Under construction" (set by SITE_LIVE in config.js) */
.l-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.l-build, .building .l-live { display: none; }
.building .l-build { display: flex; }

.l-ring { --size: 132px; position: relative; flex: none; width: var(--size); height: var(--size); border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink); text-decoration: none; isolation: isolate; }
.l-ring .ring-text { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 14s linear infinite; transition: opacity .35s, scale .5s var(--ease); }
.l-ring text { fill: currentColor; font: 500 10.5px var(--mono); letter-spacing: .1em; }
@keyframes spin { to { transform: rotate(360deg); } }
.l-ring .arrow { position: relative; z-index: 2; font: 300 36px/1 var(--serif); transition: transform .4s var(--ease), opacity .3s; }
a.l-ring { -webkit-tap-highlight-color: transparent; transition: background .4s, color .4s, border-color .4s; }
a.l-ring:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

/* Enter button, simple version (touch screens, reduced motion) */
.l-enter:not(.goo-on):hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.l-enter:not(.goo-on):hover .arrow { transform: translateX(6px); }

/* Enter button, droplet version: an orange blob reaches toward the cursor and springs back (see landing.js) */
.goo { position: absolute; left: -80px; top: -80px; width: calc(100% + 160px); height: calc(100% + 160px); z-index: 0; pointer-events: none; overflow: visible; }
.goo circle { fill: var(--accent); }
.l-enter.active { border-color: transparent; }
.l-enter.active .ring-text { opacity: 0; scale: .8; }
.l-enter.active .arrow { opacity: 0; }
.l-ring .tape { width: 58px; height: 58px; border-radius: 50%; background: repeating-linear-gradient(-45deg, var(--accent) 0 8px, transparent 8px 16px) 0 0 / 46px 46px; animation: tape 1.2s linear infinite; }
@keyframes tape { to { background-position: 46px 0; } }
.l-cta b { display: block; font: 400 clamp(24px, 2.6vw, 32px)/1.15 var(--serif); }
.l-cta span { display: block; margin-top: 4px; color: var(--muted); font-size: 15px; }
.l-cta a { color: var(--accent); }

/* phones: name stacks onto two lines, ring sits beside its text */
@media (max-width: 600px) {
  .l-top { padding: 20px 16px; padding-top: max(20px, env(safe-area-inset-top)); }
  .l-main { padding: 32px 16px max(48px, env(safe-area-inset-bottom)); }
  .l-tag { font-size: 11px; letter-spacing: .08em; text-wrap: balance; }
  .l-tag::before { display: none; }
  .l-name { font-size: 25vw; line-height: .9; margin: 16px 0 40px; }
  .l-name .w:first-child { flex-basis: 100%; margin-right: 0; }
  .l-row { gap: 20px; flex-wrap: nowrap; }
  .l-ring { --size: 104px; }
  .l-ring .arrow { font-size: 30px; }
  .l-ring .tape { width: 46px; height: 46px; }
  .l-cta { min-width: 0; }
  .l-cta b { font-size: 22px; }
  .l-cta span { font-size: 14px; }
}
/* phones in landscape / very short screens */
@media (max-height: 500px) and (orientation: landscape) {
  .l-main { padding-top: 8px; padding-bottom: 24px; }
  .l-name { font-size: 15vh; margin: 8px 0 20px; }
  .l-name .w:first-child { flex-basis: auto; margin-right: .22em; }
  .l-ring { --size: 88px; }
}