/* Moxie holding page (chatwithmoxie.com). One file.
   Opener lifted unchanged from the site (src/css/home.css, main = home-machine = home-order).
   Changes: no Scroll cue; the opener shares the first screen with the holding line. */

@font-face { font-family: "Sora"; src: url("/assets/fonts/sora-latin-wght.woff2") format("woff2"); font-weight: 100 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --blue: #0440B4;
  --gold: #F9C53E;
  --navy: #141A33;
  --white: #FFFFFF;
  --font-display: 'Sora', sans-serif;
  --gutter: 64px;
}
@media (max-width: 56.25em) { :root { --gutter: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--navy); font-family: var(--font-display); overflow-x: clip;
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
img, svg { display: block; max-width: 100%; }
h1, p { margin: 0; }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Opening: Moxie lands in the word "moxie" ---------- */
/* Holding page: the opener fills the first screen above the holding line. */
.opRoot { position: relative; flex: 1 1 auto; min-height: 22rem; background: var(--blue); color: var(--white); overflow: hidden; overflow-x: clip; }
.opStagebox { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.opWm {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.05em; line-height: 1;
  white-space: nowrap; display: inline-flex; align-items: baseline;
  font-size: clamp(4.5rem, min(27.2vw, 40vh), 391px); /* board: 220px x 1.78; short screens: fits the height */
}
.opLt { display: inline-block; }
.opSlot { position: relative; display: inline-block; width: .74em; height: .56em; }
.opAnchor { position: absolute; left: 50%; bottom: -.01em; margin-left: -.3em; }
.opSw, .opLw { display: block; transform-origin: 50% 100%; }
.opBox { position: relative; display: block; width: .6005em; height: .62em; }
.opImg { position: absolute; left: -.1272em; top: -.1104em; width: .858em; height: .858em; max-width: none; clip-path: ellipse(34.83% 35.83% at 49.84% 49%); display: block; }
.opEyes { position: absolute; left: 0; top: 0; width: .6005em; height: .62em; overflow: visible; color: var(--navy); }
.opEh { opacity: 0; }
.opBl { transform-box: fill-box; transform-origin: center; animation: opBlink 5.2s 3s infinite; }
@keyframes opBlink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.1); } }
.opLand { animation: opLandY 2.2s linear both; }
.opLandL { animation: opLandL 2.2s linear both; }
.opLandR { animation: opLandR 2.2s linear both; }
/* Eyes: open as it drops, happy arcs (^^) when it lands, then one smooth
   morph back: the arcs flatten into a slit while the round eyes open out of
   that same slit (no jump), then they follow the pointer (or the scroll on
   touch: home.js starts tracking once the morph has finished). */
.opEm, .opEa { transform-box: fill-box; }
.opEm { transform-origin: 50% 50%; }
.opEa { transform-origin: 50% 67%; opacity: 0; } /* flattens onto the eyes' middle line */
.opLand .opEh { opacity: 1; }
.opLand .opEa { animation: opArcs 3.4s both; }
.opLand .opEm { animation: opOpen 3.4s both; }
@keyframes opArcs {
  0%, 18% { opacity: 0; transform: scaleY(.2); animation-timing-function: cubic-bezier(.2, .9, .3, 1.2); }
  24% { opacity: 1; transform: scaleY(1); }
  62% { opacity: 1; transform: scaleY(1); animation-timing-function: cubic-bezier(.5, 0, .7, .4); }
  71% { opacity: 1; transform: scaleY(.16); }
  74%, 100% { opacity: 0; transform: scaleY(.16); }
}
@keyframes opOpen {
  0%, 17% { opacity: 1; transform: scaleY(1); animation-timing-function: ease-in; }
  21% { opacity: 1; transform: scaleY(.12); }
  22%, 70% { opacity: 0; transform: scaleY(.12); }
  71% { opacity: 1; transform: scaleY(.14); animation-timing-function: cubic-bezier(.25, .8, .35, 1.25); }
  84%, 100% { opacity: 1; transform: scaleY(1); }
}
.opEo { transform: translate(var(--ox, 0px), var(--oy, 0px)); transition: transform .35s cubic-bezier(.3, .8, .3, 1); }
/* Tagline: tucked under the right end of the wordmark, arrives after Moxie lands */
.opTag {
  position: absolute; right: .02em; top: 93%;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.125rem, 2.3vw, 2rem);
  letter-spacing: -.03em; line-height: 1.1; white-space: nowrap;
}
/* Waits for the first mouse move after the landing, then eases in (home.js adds .in; .cue-in on .opRoot brings the Scroll cue after). Hidden by default so it never flashes before home.js loads. */
.opTag { opacity: 0; transform: translateY(.5em); transition: opacity 1.4s ease, transform 1.4s cubic-bezier(.2, .8, .2, 1); }
.opTag.in { opacity: 1; transform: none; }
.opTag em { font-style: normal; color: var(--gold); }

/* ---------- Holding line (heading style from src/css/404.css .nf-hero h1) ---------- */
.hold { flex: none; padding: 40px var(--gutter) 48px; text-align: center; }
.hold h1 {
  max-width: 18ch; margin: 0 auto;
  font-family: var(--font-display); font-weight: 800; color: var(--navy);
  font-size: clamp(2.75rem, 5.2vw, 4.625rem); line-height: 1.02; letter-spacing: -.04em;
  overflow-wrap: break-word;
}
@media (min-width: 56.25em) { .hold { padding-top: 56px; padding-bottom: 64px; } }

/* Nothing moves off screen (home.css) */
.js .opRoot:not(.on-screen) * { animation-play-state: paused !important; }

/* Motion off: the still version (home.css) */
@media (prefers-reduced-motion: reduce) {
  .opRoot, .opRoot * { animation: none !important; transition: none !important; }
  .opEh, .opEa { opacity: 0; } .opEo, .opEm { opacity: 1; transform: none; }
  .opTag { opacity: 1; transform: none; } /* the tagline is there from the start */
}

/* Landing curves (generated, home.css) */
@keyframes opLandY{0.0%{transform:translateY(-0.9300em) scale(1.0000,1.0000)}1.56%{transform:translateY(-0.9273em) scale(0.9985,1.0027)}3.12%{transform:translateY(-0.9186em) scale(0.9969,1.0055)}4.69%{transform:translateY(-0.9041em) scale(0.9953,1.0082)}6.25%{transform:translateY(-0.8836em) scale(0.9938,1.0109)}7.81%{transform:translateY(-0.8577em) scale(0.9922,1.0137)}9.38%{transform:translateY(-0.8259em) scale(0.9906,1.0164)}10.94%{transform:translateY(-0.7882em) scale(0.9891,1.0191)}12.5%{transform:translateY(-0.7445em) scale(0.9875,1.0218)}14.06%{transform:translateY(-0.6955em) scale(0.9859,1.0246)}15.62%{transform:translateY(-0.6405em) scale(0.9844,1.0274)}17.19%{transform:translateY(-0.5795em) scale(0.9828,1.0301)}18.75%{transform:translateY(-0.5132em) scale(0.9812,1.0328)}20.31%{transform:translateY(-0.4405em) scale(0.9797,1.0356)}21.88%{transform:translateY(-0.3623em) scale(0.9782,1.0383)}23.44%{transform:translateY(-0.2782em) scale(0.9766,1.0410)}25.0%{transform:translateY(-0.1886em) scale(0.9750,1.0437)}26.56%{transform:translateY(-0.0932em) scale(0.9735,1.0465)}27.34%{transform:translateY(0.0000em) scale(1.1650,0.8150)}28.12%{transform:translateY(0.0000em) scale(1.4168,0.6804)}29.69%{transform:translateY(0.0000em) scale(1.3711,0.7155)}31.25%{transform:translateY(0.0000em) scale(1.3172,0.7568)}32.81%{transform:translateY(0.0000em) scale(1.2589,0.8015)}34.38%{transform:translateY(0.0000em) scale(1.1994,0.8471)}35.94%{transform:translateY(0.0000em) scale(1.1415,0.8915)}37.5%{transform:translateY(0.0000em) scale(1.0874,0.9329)}39.06%{transform:translateY(0.0000em) scale(1.0389,0.9702)}40.62%{transform:translateY(0.0000em) scale(0.9969,1.0024)}42.19%{transform:translateY(0.0000em) scale(0.9623,1.0289)}43.75%{transform:translateY(0.0000em) scale(0.9352,1.0497)}45.31%{transform:translateY(0.0000em) scale(0.9155,1.0648)}46.88%{transform:translateY(0.0000em) scale(0.9028,1.0745)}48.44%{transform:translateY(0.0000em) scale(0.8965,1.0794)}50.0%{transform:translateY(0.0000em) scale(0.8957,1.0800)}51.56%{transform:translateY(0.0000em) scale(0.8995,1.0771)}53.12%{transform:translateY(0.0000em) scale(0.9070,1.0713)}54.69%{transform:translateY(0.0000em) scale(0.9172,1.0635)}56.25%{transform:translateY(0.0000em) scale(0.9292,1.0542)}57.81%{transform:translateY(0.0000em) scale(0.9423,1.0443)}59.38%{transform:translateY(0.0000em) scale(0.9555,1.0341)}60.94%{transform:translateY(0.0000em) scale(0.9684,1.0242)}62.5%{transform:translateY(0.0000em) scale(0.9805,1.0150)}64.06%{transform:translateY(0.0000em) scale(0.9913,1.0067)}65.62%{transform:translateY(0.0000em) scale(1.0007,0.9994)}67.19%{transform:translateY(0.0000em) scale(1.0084,0.9936)}68.75%{transform:translateY(0.0000em) scale(1.0145,0.9889)}70.31%{transform:translateY(0.0000em) scale(1.0188,0.9855)}71.88%{transform:translateY(0.0000em) scale(1.0217,0.9833)}73.44%{transform:translateY(0.0000em) scale(1.0231,0.9823)}75.0%{transform:translateY(0.0000em) scale(1.0233,0.9822)}76.56%{transform:translateY(0.0000em) scale(1.0224,0.9828)}78.12%{transform:translateY(0.0000em) scale(1.0207,0.9841)}79.69%{transform:translateY(0.0000em) scale(1.0185,0.9859)}81.25%{transform:translateY(0.0000em) scale(1.0158,0.9879)}82.81%{transform:translateY(0.0000em) scale(1.0129,0.9901)}84.38%{transform:translateY(0.0000em) scale(1.0099,0.9924)}85.94%{transform:translateY(0.0000em) scale(1.0071,0.9946)}87.5%{transform:translateY(0.0000em) scale(1.0043,0.9966)}89.06%{transform:translateY(0.0000em) scale(1.0020,0.9985)}90.62%{transform:translateY(0.0000em) scale(0.9999,1.0001)}92.19%{transform:translateY(0.0000em) scale(0.9981,1.0015)}93.75%{transform:translateY(0.0000em) scale(0.9968,1.0025)}95.31%{transform:translateY(0.0000em) scale(0.9958,1.0032)}96.88%{transform:translateY(0.0000em) scale(0.9952,1.0037)}98.44%{transform:translateY(0.0000em) scale(0.9948,1.0039)}100.0%{transform:translateY(0.0000em) scale(0.9948,1.0040)}}
@keyframes opLandL{0.0%{transform:translateX(0.0000em)}1.56%{transform:translateX(0.0000em)}3.12%{transform:translateX(0.0000em)}4.69%{transform:translateX(0.0000em)}6.25%{transform:translateX(0.0000em)}7.81%{transform:translateX(0.0000em)}9.38%{transform:translateX(0.0000em)}10.94%{transform:translateX(0.0000em)}12.5%{transform:translateX(0.0000em)}14.06%{transform:translateX(0.0000em)}15.62%{transform:translateX(0.0000em)}17.19%{transform:translateX(0.0000em)}18.75%{transform:translateX(0.0000em)}20.31%{transform:translateX(0.0000em)}21.88%{transform:translateX(0.0000em)}23.44%{transform:translateX(0.0000em)}25.0%{transform:translateX(0.0000em)}26.56%{transform:translateX(0.0000em)}28.12%{transform:translateX(-0.1390em)}29.69%{transform:translateX(-0.1238em)}31.25%{transform:translateX(-0.1056em)}32.81%{transform:translateX(-0.0862em)}34.38%{transform:translateX(-0.0665em)}35.94%{transform:translateX(-0.0471em)}37.5%{transform:translateX(-0.0293em)}39.06%{transform:translateX(-0.0130em)}40.62%{transform:translateX(0.0010em)}42.19%{transform:translateX(0.0127em)}43.75%{transform:translateX(0.0216em)}45.31%{transform:translateX(0.0284em)}46.88%{transform:translateX(0.0325em)}48.44%{transform:translateX(0.0344em)}50.0%{transform:translateX(0.0347em)}51.56%{transform:translateX(0.0334em)}53.12%{transform:translateX(0.0309em)}54.69%{transform:translateX(0.0276em)}56.25%{transform:translateX(0.0235em)}57.81%{transform:translateX(0.0194em)}59.38%{transform:translateX(0.0150em)}60.94%{transform:translateX(0.0105em)}62.5%{transform:translateX(0.0064em)}64.06%{transform:translateX(0.0029em)}65.62%{transform:translateX(-0.0003em)}67.19%{transform:translateX(-0.0029em)}68.75%{transform:translateX(-0.0048em)}70.31%{transform:translateX(-0.0064em)}71.88%{transform:translateX(-0.0073em)}73.44%{transform:translateX(-0.0076em)}75.0%{transform:translateX(-0.0076em)}76.56%{transform:translateX(-0.0073em)}78.12%{transform:translateX(-0.0070em)}79.69%{transform:translateX(-0.0060em)}81.25%{transform:translateX(-0.0054em)}82.81%{transform:translateX(-0.0045em)}84.38%{transform:translateX(-0.0031em)}85.94%{transform:translateX(-0.0022em)}87.5%{transform:translateX(-0.0016em)}89.06%{transform:translateX(-0.0006em)}90.62%{transform:translateX(0.0000em)}92.19%{transform:translateX(0.0006em)}93.75%{transform:translateX(0.0010em)}95.31%{transform:translateX(0.0013em)}96.88%{transform:translateX(0.0016em)}98.44%{transform:translateX(0.0016em)}100.0%{transform:translateX(0.0016em)}}
@keyframes opLandR{0.0%{transform:translateX(0.0000em)}1.56%{transform:translateX(0.0000em)}3.12%{transform:translateX(0.0000em)}4.69%{transform:translateX(0.0000em)}6.25%{transform:translateX(0.0000em)}7.81%{transform:translateX(0.0000em)}9.38%{transform:translateX(0.0000em)}10.94%{transform:translateX(0.0000em)}12.5%{transform:translateX(0.0000em)}14.06%{transform:translateX(0.0000em)}15.62%{transform:translateX(0.0000em)}17.19%{transform:translateX(0.0000em)}18.75%{transform:translateX(0.0000em)}20.31%{transform:translateX(0.0000em)}21.88%{transform:translateX(0.0000em)}23.44%{transform:translateX(0.0000em)}25.0%{transform:translateX(0.0000em)}26.56%{transform:translateX(0.0000em)}28.12%{transform:translateX(0.1390em)}29.69%{transform:translateX(0.1238em)}31.25%{transform:translateX(0.1056em)}32.81%{transform:translateX(0.0862em)}34.38%{transform:translateX(0.0665em)}35.94%{transform:translateX(0.0471em)}37.5%{transform:translateX(0.0293em)}39.06%{transform:translateX(0.0130em)}40.62%{transform:translateX(-0.0010em)}42.19%{transform:translateX(-0.0127em)}43.75%{transform:translateX(-0.0216em)}45.31%{transform:translateX(-0.0284em)}46.88%{transform:translateX(-0.0325em)}48.44%{transform:translateX(-0.0344em)}50.0%{transform:translateX(-0.0347em)}51.56%{transform:translateX(-0.0334em)}53.12%{transform:translateX(-0.0309em)}54.69%{transform:translateX(-0.0276em)}56.25%{transform:translateX(-0.0235em)}57.81%{transform:translateX(-0.0194em)}59.38%{transform:translateX(-0.0150em)}60.94%{transform:translateX(-0.0105em)}62.5%{transform:translateX(-0.0064em)}64.06%{transform:translateX(-0.0029em)}65.62%{transform:translateX(0.0003em)}67.19%{transform:translateX(0.0029em)}68.75%{transform:translateX(0.0048em)}70.31%{transform:translateX(0.0064em)}71.88%{transform:translateX(0.0073em)}73.44%{transform:translateX(0.0076em)}75.0%{transform:translateX(0.0076em)}76.56%{transform:translateX(0.0073em)}78.12%{transform:translateX(0.0070em)}79.69%{transform:translateX(0.0060em)}81.25%{transform:translateX(0.0054em)}82.81%{transform:translateX(0.0045em)}84.38%{transform:translateX(0.0031em)}85.94%{transform:translateX(0.0022em)}87.5%{transform:translateX(0.0016em)}89.06%{transform:translateX(0.0006em)}90.62%{transform:translateX(-0.0000em)}92.19%{transform:translateX(-0.0006em)}93.75%{transform:translateX(-0.0010em)}95.31%{transform:translateX(-0.0013em)}96.88%{transform:translateX(-0.0016em)}98.44%{transform:translateX(-0.0016em)}100.0%{transform:translateX(-0.0016em)}}