/* Index page glasses-character moments (issue #105): the "What it is" reader and
   the #get + footer company. Loaded only by index.html. */

/* ---------- What it is: he reads with you ---------- */
/* Only his eyes follow the reading: the manifesto itself is never highlighted. */
.speck-read{position:relative}

/* the link's underline draws while he does the mic beat */
.what__more{position:relative}
.what__more::after{content:'';position:absolute;left:0;right:0;bottom:9px;height:1px;background:var(--lens);transform:scaleX(0);transform-origin:left center;transition:transform 600ms linear}
.what__more.is-drawing::after{transform:scaleX(1)}

/* One fixed spot on the foot rule, above the Hermes Agent / OpenClaw logos; JS
   measures it, he never travels. The foot's margin clears his height (32 art px at
   2x on phones, 3x wide) below the caption. */
.what__speck{position:absolute;left:0;top:0;z-index:3;opacity:0;transition:opacity .7s}
.what__speck.is-in{opacity:1}
.what__foot{margin-top:78px}
@media (min-width:881px){ .what__foot{margin-top:110px} }
/* The logos are tap targets for his LOOKING; a tap must not select the word (Chrome's Tap to Search). */
.what__agent{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}

/* ---------- #get + footer: phone away, then good company ---------- */
/* The bottom margin clears the headline's line box for his lowest pose (the happy thumbs-up). */
.end__perch{width:300px;height:96px;margin:0 auto 16px}
#get.end{padding-top:36px}

.foot .foot__row{align-items:flex-end;gap:12px 20px}
.foot__mark{font-family:var(--serif);font-weight:400;font-size:36px;line-height:.8;letter-spacing:.02em;text-transform:none;color:var(--ink);padding:3px 0 1px}
.foot__links{margin-right:auto;padding-bottom:4px}
.foot .foot__aff{padding-bottom:2px}

.speck-rover{position:absolute;left:0;top:0;z-index:3;padding:0;margin:0;border:0;background:transparent;cursor:pointer;border-radius:12px;will-change:transform;-webkit-tap-highlight-color:transparent}
.speck-rover canvas{display:block}
.speck-rover:focus-visible{outline:2px dashed var(--lens);outline-offset:-6px}
.speck-rover.is-trip{pointer-events:none;cursor:default;outline:none}
.speck-rover.is-gone{opacity:0}
.speck-rover.is-drum{z-index:4}

@media (max-width:720px){
  .end__perch{width:200px;height:64px}
  #get.end{padding-top:28px}
  .foot__mark{font-size:28px}
  .foot__links{margin-right:0;flex:1 1 auto}
  .foot .foot__aff{text-align:left;flex-basis:100%}
}

html.speck-reduced .what__speck,html.speck-reduced .speck-w,html.speck-reduced .what__more::after{transition:none}