/* ============================================================
   JUWEL - Home landing - juwel-home.css (v1, 2026-07-19)
   Packet PKT-HOME / DD-HOME-01 (WAVE 5 UX-ELEVATION), implementing
   DESIGN-DIRECTOR spec 1 (Tier 1 chat-first landing) and the 14
   magical touches (spec 3) on the landing surface only.

   Token law (one direction, never inverted): juwel-ds.css defines,
   this sheet consumes. No new color, radius, shadow, or font-family
   literals below; every value resolves to an existing token or to
   color-mix() over a token. Eases come only from the ratified set
   (--ease-out / --ease-viscous, --ease-flow, --ease-buoyant) and
   durations from the --visc-* scale. Weight ceiling 700. Bounce is
   banned. Every new animation ships a prefers-reduced-motion
   fallback at the bottom of this file.

   Ports (canonical sources, values unchanged unless noted):
     .h-gem / fd-hover          <- os/juwel-os-shell.css:161-168
     .h-caret / caretblink      <- os/juwel-os-shell.css:176-179
     .h-composer / .h-enter     <- os/juwel-os-shell.css:186-207
     .h-chip                    <- os/juwel-os-shell.css:209-214
     facet-glint                <- os/juwel-os-shell.css:226-230
     .wb-dot ping               <- os/juwel-os-shell.css:288-291
     juwel-entity base subset   <- juwel-liquid.css:434-446 (the
        static-noglow subset only; drop-shadow color tokenized to
        color-mix over --ink-1 so this sheet stays tokens-only)
   The reveal primitive, nav, and footer are owned by
   /juwel-chrome.css (PKT-CHROME); this sheet does not redefine them.
   ============================================================ */

:root{
  --mx:1; /* motion intensity multiplier, canonical home
             juwel-liquid.css:22; re-homed here because the landing
             stack does not load that sheet. Same value. Chrome's
             [data-rv] reveal transition reads it. */
}

/* ── a11y basics (port of the os.html a11y-fixes block, tokens) ── */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip-link{position:fixed;top:-60px;left:12px;z-index:100000;background:var(--ink-1);color:var(--surface);
  padding:10px 16px;border-radius:var(--r-xs);font-family:var(--ff-ui);font-weight:600;font-size:14px;line-height:1;
  text-decoration:none;transition:top .15s var(--ease-out);}
.skip-link:focus{top:12px;outline:2px solid var(--focus-ring);outline-offset:2px;}

/* ── juwel-entity base subset (port: static noglow usage only) ── */
juwel-entity{display:inline-block;position:relative;width:var(--je,120px);height:var(--je,120px);
  cursor:pointer;-webkit-tap-highlight-color:transparent;}
juwel-entity .je-tilt,juwel-entity .je-wrap,juwel-entity .je-float{position:absolute;inset:0;will-change:transform;}
juwel-entity img{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  transition:opacity .6s var(--ease-out);
  filter:drop-shadow(0 calc(var(--je,120px)*.12) calc(var(--je,120px)*.22) color-mix(in srgb,var(--ink-1) 30%,transparent));
  user-select:none;-webkit-user-drag:none;will-change:opacity;}
juwel-entity img.on{opacity:1;}

/* ════════════ HERO · the chat-first door ════════════ */
.hero{min-height:92svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:calc(var(--nav-h,72px) + var(--s7)) clamp(20px,4.5vw,56px) var(--s7);
  position:relative;}

/* her gem: buoyant idle float (touch 4), warming when she takes the task (touch 5) */
.h-gem{display:inline-flex;line-height:0;position:relative;cursor:default;}
@media (prefers-reduced-motion:no-preference){.h-gem{animation:fd-hover 6.5s var(--ease-in-out) infinite;}}
@keyframes fd-hover{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.h-gem.je-hot{animation-duration:calc(6.5s * .5);}
.h-gem.je-hot juwel-entity img{
  filter:drop-shadow(0 calc(var(--je,120px)*.12) calc(var(--je,120px)*.22) color-mix(in srgb,var(--ink-1) 30%,transparent)) brightness(1.08) saturate(1.12);}

/* one typed rotating line, display scale from the token layer */
.h-phrase{position:relative;min-height:132px;width:min(880px,92vw);margin:26px 0 6px;display:flex;align-items:center;justify-content:center;}
.h-line{font-family:var(--ff-display);font-weight:700;letter-spacing:-.028em;
  font-size:var(--fs-display);line-height:1.05;color:var(--ink-1);}
.h-line .acc{font-family:var(--ff-display);font-weight:700;color:var(--ink-1);letter-spacing:-.025em;}
/* her caret: amber thin bar (touch 3). She is present, not decorative. */
.h-caret{display:inline-block;width:2px;height:.86em;background:var(--topaz);border-radius:var(--r-xs);margin-left:5px;vertical-align:-.06em;}
@media (prefers-reduced-motion:no-preference){.h-caret{animation:caretblink 1.05s steps(1) infinite;}}
@keyframes caretblink{0%,52%{opacity:1;}52.01%,100%{opacity:0;}}
.h-sub{font-size:var(--fs-body);color:var(--ink-2);max-width:56ch;margin:8px 0 0;line-height:1.5;}

/* the composer: a quiet pane with edge light; meniscus focus comes
   free from .lx-meniscus (luxliq.css:196). The Enter is the landing's
   one nectar act; every other control stays ink or ghost. */
.h-composer{position:relative;overflow:hidden;margin-top:40px;width:min(660px,92vw);display:flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:9px 9px 9px 18px;box-shadow:inset 0 1.6px 0 color-mix(in srgb,var(--topaz) 44%,transparent),var(--inner-glow),var(--shadow-3);
  transition:border-color .15s var(--ease-out),box-shadow .18s var(--ease-viscous,var(--ease-out));}
.h-composer.focused{border-color:var(--topaz);
  box-shadow:inset 0 1.6px 0 color-mix(in srgb,var(--topaz) 62%,transparent),0 0 0 3px color-mix(in srgb,var(--topaz) 22%,transparent),var(--shadow-3);}
/* one glint sweep on first focus, event-driven only (touch 1) */
.h-composer::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:34%;pointer-events:none;z-index:2;
  background:linear-gradient(100deg,transparent 8%,color-mix(in srgb,var(--topaz) 30%,transparent) 50%,transparent 92%);
  transform:translateX(-140%) skewX(-18deg);opacity:0;}
.h-composer.focused::after{animation:facet-glint .55s var(--ease-out);}
.h-composer input{flex:1;min-width:0;border:0;outline:0;background:transparent;
  font-family:var(--ff-ui);font-size:16px;color:var(--ink-1);height:42px;line-height:42px;}
.h-composer input::placeholder{color:var(--ink-3);}
.h-enter{flex-shrink:0;position:relative;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border:1px solid transparent;cursor:pointer;
  border-radius:var(--r-md);color:var(--accent-ink);font-family:var(--ff-ui);font-weight:600;font-size:14px;letter-spacing:-.01em;
  background:var(--topaz);
  transition:transform .12s var(--ease-out),background-color .15s var(--ease-out);}
@media (hover:hover) and (pointer:fine){.h-enter:hover{background:var(--topaz-2);}}
.h-enter:active{transform:scale(.98);}   /* gel compress, no bounce (touch 6) */
.h-enter svg{width:16px;height:16px;}
/* the handoff settle: the whole composer pours out over --visc-pour (touch 6) */
.h-composer.settling{animation:composer-pour var(--visc-pour) var(--ease-flow) both;}
@keyframes composer-pour{from{transform:none;opacity:1;}to{transform:translateY(6px) scale(.99);opacity:.55;}}

/* bubble carry: the submitted text lifts out as a small chat bubble (touch 7) */
.h-bubble{position:fixed;z-index:60;max-width:60vw;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:10px 16px;font-family:var(--ff-ui);font-size:14px;color:var(--ink-1);
  box-shadow:var(--shadow-2);opacity:1;pointer-events:none;
  transition:transform var(--visc-pour) var(--ease-viscous),opacity var(--visc-pour) var(--ease-viscous);}
.h-bubble.go{transform:translateY(-72px);opacity:0;}

/* ghost suggestion chips; warmth on hover (touch 8): hairline warms
   toward topaz at 40%, chip lifts 2px, ink stays the actor color */
.h-quick{margin-top:22px;display:flex;flex-wrap:wrap;gap:9px;justify-content:center;max-width:700px;}
.h-chip{font-family:var(--ff-ui);font-size:13.5px;font-weight:500;color:var(--ink-2);white-space:nowrap;
  background:transparent;border:1px solid var(--line);border-radius:var(--r-full);padding:8px 15px;cursor:pointer;
  transition:border-color .15s var(--ease-out),color .15s var(--ease-out),background-color .15s var(--ease-out),transform .15s var(--ease-out);}
@media (hover:hover) and (pointer:fine){
  .h-chip:hover{border-color:color-mix(in srgb,var(--topaz) 40%,var(--line));background:var(--surface-2);color:var(--ink-1);transform:translateY(-2px);}
}
.h-chip:active{transform:scale(.98);}

/* one-shot kbd hint under the composer (touch 13): a single pulse,
   never a loop, one time per session */
.h-kbd{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-mono);font-size:11px;color:var(--ink-3);}
.h-kbd .kbd{position:relative;font-family:var(--ff-mono);font-size:10.5px;color:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r-xs);padding:3px 7px;background:var(--surface);}
.h-kbd .kbd::after{content:"";position:absolute;inset:-4px;border-radius:var(--r-sm);
  border:1px solid color-mix(in srgb,var(--topaz) 45%,transparent);opacity:0;pointer-events:none;}
.h-kbd.pulse .kbd::after{animation:kbd-ping 1.6s var(--ease-out) 1;}
@keyframes kbd-ping{0%{transform:scale(.92);opacity:.5;}100%{transform:scale(1.35);opacity:0;}}

/* ════════════ WATCH HER WORK · the scripted demo band ════════════ */
.watch{padding:var(--s7) clamp(20px,4.5vw,56px);display:flex;justify-content:center;}
.watch-in{width:min(var(--maxw),100%);display:flex;flex-direction:column;align-items:center;text-align:center;}
.watch-head{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;}
/* the honesty chip: this is a scripted session, said out loud. Topaz
   because the session is hers (topaz = JUWEL acts / the record). */
.demo-chip{display:inline-flex;align-items:center;font-family:var(--ff-mono);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--topaz-ink);
  background:var(--topaz-soft);border:1px solid color-mix(in srgb,var(--topaz) 34%,transparent);
  border-radius:var(--r-full);padding:6px 12px;}
.watch-sub{font-size:var(--fs-body);color:var(--ink-2);max-width:58ch;margin:14px 0 0;line-height:1.5;}
.watch .t-h2{margin:22px 0 0;}

/* the band: a framed, quiet pane. Non-interactive except Replay. */
.watch-band{position:relative;width:min(760px,94vw);margin-top:var(--s6);text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:inset 0 1px 0 var(--edge),var(--shadow-2);padding:18px 20px 14px;overflow:hidden;}
.wb-top{display:flex;align-items:center;gap:9px;}
.wb-dot{width:6px;height:6px;border-radius:var(--r-full);background:var(--jade);position:relative;flex:0 0 auto;}
.wb-dot::after{content:"";position:absolute;inset:-3px;border-radius:var(--r-full);background:var(--jade);opacity:.2;}
@media (prefers-reduced-motion:no-preference){.wb-dot::after{animation:ping 2.6s var(--ease-out) infinite;}}
@keyframes ping{0%,100%{transform:scale(.7);opacity:.24;}50%{transform:scale(1.6);opacity:0;}}
.wb-ticker{font-family:var(--ff-mono);font-size:12px;letter-spacing:.04em;color:var(--ink-2);}
.wb-seal{display:inline-flex;width:14px;height:14px;margin-left:auto;flex:0 0 auto;overflow:hidden;}
.wb-seal svg{display:block;width:100%;height:100%;}
.wb-goal{display:flex;align-items:center;gap:10px;margin-top:12px;}
.wb-goal-k{font-family:var(--ff-mono);font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);flex:0 0 auto;}
.wb-goal-t{font-family:var(--ff-ui);font-size:13.5px;font-weight:600;color:var(--ink-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wb-bar{flex:1;height:3px;border-radius:var(--r-full);background:var(--surface-2);overflow:hidden;}
.wb-bar i{display:block;height:100%;width:0;background:var(--topaz);border-radius:var(--r-full);
  transition:width .4s var(--ease-out);}
.wb-steps{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;}
.wb-step{display:flex;align-items:baseline;gap:10px;font-family:var(--ff-mono);font-size:12px;color:var(--ink-2);
  opacity:0;transform:translateY(4px);
  transition:opacity .3s var(--ease-out),transform .3s var(--ease-out);}
.wb-step.in{opacity:1;transform:none;}
.wb-step.static{opacity:1;transform:none;color:var(--ink-3);}
.wb-step .wb-tool{color:var(--ink-1);font-weight:500;flex:0 0 auto;}
.wb-step .wb-detail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wb-step .wb-ms{margin-left:auto;color:var(--ink-3);flex:0 0 auto;}
.wb-step.done{color:var(--ink-1);}
.wb-step.done .wb-tool{color:var(--topaz-ink);}
/* her cursor, moving between the rows she touches (port of os.html:303) */
.wb-cursor{position:absolute;left:0;top:0;width:16px;height:16px;z-index:3;pointer-events:none;opacity:0;
  transition:transform var(--visc-bead) var(--ease-viscous),opacity .2s var(--ease-out);}
.wb-cursor.on{opacity:1;}
.wb-cursor svg{width:100%;height:100%;}
.wb-cursor path{fill:var(--topaz);stroke:var(--ink-1);stroke-width:1.1;stroke-linejoin:round;}
.wb-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;padding-top:12px;
  border-top:1px solid var(--line-2);}
.wb-note{font-family:var(--ff-mono);font-size:11px;color:var(--ink-3);flex:1;min-width:200px;}
.wb-replay{font-family:var(--ff-ui);font-size:12.5px;font-weight:500;color:var(--ink-2);
  background:transparent;border:1px solid var(--line);border-radius:var(--r-full);padding:6px 13px;cursor:pointer;
  transition:border-color .15s var(--ease-out),color .15s var(--ease-out),background-color .15s var(--ease-out);}
@media (hover:hover) and (pointer:fine){.wb-replay:hover{background:var(--surface-2);color:var(--ink-1);}}
.wb-replay:active{transform:scale(.98);}
.wb-tour{font-family:var(--ff-ui);font-size:12.5px;font-weight:600;color:var(--ink-1);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--topaz) 45%,transparent);}
@media (hover:hover) and (pointer:fine){.wb-tour:hover{color:var(--topaz-ink);}}

/* ════════════ THE DOOR · step inside her computer ════════════ */
.door-sec{padding:var(--s7) clamp(20px,4.5vw,56px) var(--s9);display:flex;justify-content:center;}
.door{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
  width:min(760px,94vw);padding:var(--s7) var(--s5);text-decoration:none;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:inset 0 1.6px 0 color-mix(in srgb,var(--topaz) 30%,transparent),var(--inner-glow),var(--shadow-2);
  transition:transform .18s var(--ease-viscous,var(--ease-out)),box-shadow .18s var(--ease-viscous,var(--ease-out)),border-color .15s var(--ease-out);}
@media (hover:hover) and (pointer:fine){
  .door:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--topaz) 34%,var(--line));
    box-shadow:inset 0 1.6px 0 color-mix(in srgb,var(--topaz) 44%,transparent),var(--inner-glow),var(--shadow-3);}
}
/* one glint sweep per hover-intent, 550ms (touch 11) */
.door::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:34%;pointer-events:none;z-index:2;
  background:linear-gradient(100deg,transparent 8%,color-mix(in srgb,var(--topaz) 30%,transparent) 50%,transparent 92%);
  transform:translateX(-140%) skewX(-18deg);opacity:0;}
.door.glinting::after{animation:facet-glint .55s var(--ease-out);}
.door-k{font-family:var(--ff-mono);font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);}
.door-t{font-family:var(--ff-display);font-weight:650;font-size:var(--fs-h1);letter-spacing:-.022em;line-height:1.1;color:var(--ink-1);}
.door-s{font-size:var(--fs-body);color:var(--ink-2);max-width:52ch;line-height:1.5;}
.door-go{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-top:6px;
  border-radius:var(--r-full);border:1px solid var(--line);color:var(--ink-1);background:var(--surface-2);}
.door-go svg{width:16px;height:16px;}

/* the glint keyframe, ported once and shared by composer, door, gem */
@keyframes facet-glint{
  0%{opacity:0;transform:translateX(-140%) skewX(-18deg);}
  14%{opacity:1;}
  100%{opacity:0;transform:translateX(460%) skewX(-18deg);}
}

/* ════════════ HONESTY RIBBON ════════════ */
.ribbon{max-width:var(--maxw);margin:0 auto;padding:var(--s5) clamp(20px,4.5vw,56px) var(--s7);
  border-top:1px solid var(--line-2);text-align:center;}
.ribbon p{margin:0 auto;max-width:64ch;font-family:var(--ff-mono);font-size:12px;line-height:1.6;color:var(--ink-2);}

/* footer gem wink (touch 14): exactly one glint on first viewport
   entry per session, echoing the menubar gem-glint slot */
.f-gem{position:relative;overflow:hidden;border-radius:var(--r-md);}
.f-gem::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:34%;pointer-events:none;z-index:2;
  background:linear-gradient(100deg,transparent 8%,color-mix(in srgb,var(--topaz) 30%,transparent) 50%,transparent 92%);
  transform:translateX(-140%) skewX(-18deg);opacity:0;}
.f-gem.winked::after{animation:facet-glint .55s var(--ease-out);}

/* ── small screens ── */
@media(max-width:760px){
  .hero{min-height:88svh;padding-top:calc(var(--nav-h,72px) + var(--s6));}
  .h-phrase{min-height:96px;}
  .h-sub{font-size:14px;}
  .door{padding:var(--s6) var(--s4);}
  .wb-note{min-width:0;}
}

/* ── reduced motion: every animation above settles instantly ── */
@media (prefers-reduced-motion:reduce){
  .h-gem,.h-caret,.wb-dot::after{animation:none!important;}
  .h-composer::after,.door::after,.f-gem::after{animation:none!important;content:none;}
  .h-composer.settling{animation:none;}
  .h-kbd.pulse .kbd::after{animation:none;}
  .h-composer,.h-enter,.h-chip,.door,.wb-cursor,.wb-step,.h-bubble,.skip-link{transition:none!important;}
  .h-bubble.go{transform:none;}
  .wb-cursor{display:none;}
  .wb-step{opacity:1;transform:none;}
}