:root{--ink:#1f2a1f;--line:#111;--pale:#cdf0c3;--deep:#3f6b3a}
.skip{position:absolute;left:16px;top:-100px;z-index:20;background:#111;color:#fff;padding:10px 14px;font:600 14px/1 Inter,sans-serif;text-decoration:none}
.skip:focus{top:16px}
:focus-visible{outline:2px solid #111;outline-offset:3px}

.hero{position:relative;width:62%;flex:none;min-height:0;overflow:hidden;background:var(--pale);border-right:1px solid var(--line);isolation:isolate;display:flex;flex-direction:column;justify-content:center}
.drips{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.drip{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--deep);opacity:0;animation:dripDot .55s cubic-bezier(.2,.7,.3,1) .16s forwards}
.drip::before{content:"";position:absolute;left:2px;bottom:5px;width:2px;height:26px;border-radius:1px;background:var(--deep);opacity:0;transform-origin:50% 100%;animation:dripFall .18s ease-in forwards}
@keyframes dripFall{0%{transform:translateY(-34px) scaleY(.6);opacity:0}40%{opacity:.55}100%{transform:translateY(0) scaleY(.15);opacity:0}}
@keyframes dripDot{0%{opacity:0;transform:scale(.3)}18%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
#water{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.no-water #water,.no-water .motion{display:none}
.greeting{position:relative;z-index:1;padding:0 120px;max-width:860px}
.hero .eyebrow{margin:0 0 20px;font:600 12px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--deep)}
.title{margin:0 0 12px;font:700 96px/1 Roboto,sans-serif;letter-spacing:-.025em;color:var(--ink)}
.hello{margin:0 0 28px;font:700 48px/1.1 Roboto,sans-serif;letter-spacing:-.015em;color:var(--deep)}
.lede{margin:0;max-width:460px;font-size:17px}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin:0 8px 2px 0;vertical-align:middle}
.motion{position:absolute;top:24px;right:24px;z-index:2;background:rgba(250,250,247,.75);border:1px solid var(--ink);border-radius:2px;padding:7px 11px;font:500 12px/1 Inter,sans-serif;letter-spacing:.04em;color:var(--ink);cursor:pointer}

/* text sequencing (classes toggled from JS) */
.reveal{opacity:0;transform:translateY(14px);transition:opacity 1.1s cubic-bezier(.2,.6,.2,1),transform 1.1s cubic-bezier(.2,.6,.2,1)}
.reveal.is-in{opacity:1;transform:none}
/* Intro: the meaning of the name, centred, read word by word (unlit 26% ink, lit 100% ink) */
.meaning{position:absolute;left:120px;right:120px;top:0;bottom:0;z-index:2;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;margin:0;pointer-events:none;transition:opacity 1.4s cubic-bezier(.4,0,.2,1),transform 1.4s cubic-bezier(.4,0,.2,1)}
.meaning .m2{font:700 clamp(40px, 5.6vw, 96px)/1.04 Roboto,sans-serif;letter-spacing:-.03em}
.meaning .qw{color:color-mix(in srgb, var(--deep) 34%, var(--pale));transition:color 120ms linear}
.meaning .qw.lit{color:var(--deep)}
.meaning.is-out{opacity:0;transform:translateY(-10px)}
/* byline: withheld until the last word has lit, then fades in as punctuation */
.meaning .by{display:flex;align-items:center;gap:10px;margin-top:22px;font:500 16px/1 Inter,sans-serif;color:var(--deep);opacity:0;transition:opacity 1.6s ease}
/* the lockup, recoloured to the same deep green via an alpha mask of the black PNG */
.meaning .logo{display:block;height:20px;width:147px;background:var(--deep);-webkit-mask:url(/assets/entry/64robots-logo-black.png) no-repeat left center / contain;mask:url(/assets/entry/64robots-logo-black.png) no-repeat left center / contain}
.meaning.by-in .by{opacity:1}


@media (prefers-reduced-motion:reduce){.reveal{transition:none}}
@media (max-width:900px){
  .hero{width:100%;min-height:70vh;border-right:0;border-bottom:1px solid var(--line)}
  .greeting{padding:40px 24px}
  .meaning{left:24px;right:24px}
  .meaning .m2{font-size:clamp(34px, 11vw, 56px)}
  .meaning .by{margin-top:16px;font-size:14px}
  .meaning .logo{height:17px;width:125px}
  .title{font-size:56px}
  .hello{font-size:32px}
  .motion{top:16px;right:16px}
}

/* Fit the existing login column and isolate prototype typography from the form. */
.hero{width:100%;font-family:Inter,sans-serif;line-height:1.5;color:var(--ink)}
.hero .motion{width:auto}
.hero .lede{font-family:Inter,sans-serif}
.hero.motion-paused .drip,.hero.motion-paused .drip::before{animation-play-state:paused}
@media(max-width:900px){main{grid-template-columns:1fr}.entry{padding:48px 24px}}

@media(min-width:901px){main{grid-template-columns:62% 38%}}
@media(prefers-reduced-motion:reduce){.meaning,.meaning .qw,.meaning .by{transition:none}}
/* Keep the authored reveal starts; finish the final greeting by 8.5 seconds. */
#g-hello{transition-duration:.7s}
#g-body{transition-duration:.3s}
@media(prefers-reduced-motion:reduce){#g-hello,#g-body{transition:none}}