/* ============================================================
   29 August — invite
   Self-hosted DM Mono (latin subset) so the page makes zero
   third-party requests. No CDN, no tracking, no cookies.
   ============================================================ */

@font-face{
  font-family:'DM Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/dm-mono-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face{
  font-family:'DM Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/dm-mono-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --violet:#6A00F5;
  --violet-deep:#4A00B8;
  --ink:#000000;
  --paper:#FFFFFF;
  --mono:'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

html,body{height:100%;overflow:hidden;}

body{
  background:var(--violet);
  color:var(--paper);
  font-family:var(--mono);
  -webkit-font-smoothing:antialiased;
  position:fixed;
  inset:0;
  width:100%;
}

/* atmospheric depth so it isn't a flat fill */
body::before{
  content:'';
  position:fixed;
  inset:-20%;
  background:
    radial-gradient(60% 45% at 50% 8%, rgba(255,255,255,.22), transparent 70%),
    radial-gradient(80% 60% at 50% 110%, var(--violet-deep), transparent 65%);
  pointer-events:none;
  z-index:1;
}

/* film grain */
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:6;
  pointer-events:none;
  opacity:.16;
  mix-blend-mode:overlay;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ EMOJI FIELD ============ */
#field{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
}

.floater{
  position:absolute;
  top:0;left:0;
  will-change:transform;
}

.floater span{
  display:block;
  line-height:1;
  animation:spin var(--spin) linear infinite var(--dir),
            bloom var(--bloomdur) ease-in-out infinite alternate;
  animation-delay:0s, var(--delay);
  filter:drop-shadow(0 0 14px rgba(255,255,255,.35));
}

@keyframes spin{ to{ rotate:360deg; } }

@keyframes bloom{
  from{ scale:.62; opacity:.55; }
  to  { scale:1.32; opacity:1; }
}

/* ============ CONTENT ============ */
.stage{
  position:relative;
  z-index:4;
  height:100dvh;
  height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:44px;
  padding:calc(env(safe-area-inset-top) + 6vh) 24px calc(env(safe-area-inset-bottom) + 6vh);
  text-align:center;
}

.meta{
  font-size:15px;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:2.3;
  text-shadow:0 2px 24px rgba(0,0,0,.3);
  animation:rise 1s cubic-bezier(.2,.8,.2,1) both .14s;
}
.meta div + div{ opacity:.82; }

/* ============ CTA ============ */
.cta-wrap{
  animation:rise 1s cubic-bezier(.2,.8,.2,1) both .3s;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}

.cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:22px 40px;
  min-width:min(72vw, 300px);
  background:var(--ink);
  color:var(--paper);
  border:none;
  cursor:pointer;
  font-family:var(--mono);
  font-weight:500;
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  box-shadow:0 16px 44px rgba(0,0,0,.4);
  transition:transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s;
  position:relative;
}

.cta:active{
  transform:scale(.96);
  box-shadow:0 6px 16px rgba(0,0,0,.5);
}

@media(hover:hover){
  .cta:hover{ transform:translateY(-3px); box-shadow:0 22px 52px rgba(0,0,0,.46); }
}

.cta .glyph{ font-size:17px; letter-spacing:0; }

.cta:focus-visible,
.opt:focus-visible{
  outline:2px solid var(--paper);
  outline-offset:3px;
}

/* ============ CALENDAR CHOOSER ============ */
.scrim{
  position:fixed;
  inset:0;
  z-index:8;
  background:rgba(30,0,70,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity .3s ease;
}
.scrim.open{ opacity:1; }

.sheet{
  position:fixed;
  z-index:9;
  left:0; right:0; bottom:0;
  background:var(--ink);
  padding:26px 20px calc(env(safe-area-inset-bottom) + 20px);
  transform:translateY(100%);
  transition:transform .38s cubic-bezier(.2,.9,.25,1);
  box-shadow:0 -20px 60px rgba(0,0,0,.5);
}
.sheet.open{ transform:none; }

.sheet-title{
  font-size:10px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  text-align:center;
  margin-bottom:20px;
}

.sheet-opts{ display:flex; flex-direction:column; gap:10px; }

.opt{
  display:block;
  width:100%;
  padding:19px 20px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  color:var(--paper);
  text-decoration:none;
  text-align:center;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s, transform .2s;
}
.opt:active{ transform:scale(.98); background:rgba(255,255,255,.16); }
@media(hover:hover){ .opt:hover{ background:rgba(255,255,255,.15); } }

.opt-close{
  margin-top:14px;
  background:transparent;
  border-color:transparent;
  color:rgba(255,255,255,.45);
  font-size:11px;
  letter-spacing:.24em;
}

@keyframes rise{
  from{ opacity:0; transform:translateY(26px); }
  to  { opacity:1; transform:none; }
}

@media (prefers-reduced-motion: reduce){
  .floater span{ animation:none; scale:1; }
  .meta,.cta-wrap{ animation:none; }
  .sheet,.scrim,.cta,.opt{ transition-duration:.01ms; }
}